/* ═══════════════════════════════════════════════════════════════════════════
   AMBIENTAZA · «Cotice su proyecto»: cinco preguntas, una pieza
   ═══════════════════════════════════════════════════════════════════════════ */
.cotiza { background: var(--verde); color: var(--claro); padding-block: clamp(4.5rem, 12vh, 9rem); }
.cotiza .etiqueta { color: rgba(239, 234, 223, .75); }
.cotiza h2 em { color: var(--oro, #F0C688); }
.cotiza .bajada { color: rgba(239, 234, 223, .82); max-width: 40ch; }

.cotiza__marco { margin-top: clamp(2rem, 5vh, 3.4rem); background: var(--papel-3); color: var(--tinta); padding: clamp(1.2rem, 3vw, 2.6rem); border-radius: 3px; box-shadow: 0 30px 80px rgba(0, 0, 0, .28); }
.cotiza__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.4rem; }
.cotiza__cabeza .mono { color: var(--tinta-3); }
.cotiza__atras { appearance: none; border: 0; background: none; font: inherit; font-size: .84rem; font-weight: 600; color: var(--tinta-2); cursor: pointer; padding: .5em 0; }
.cotiza__atras:hover { color: var(--tinta); }
.cotiza__riel { position: relative; height: 3px; background: var(--linea); margin: .8rem 0 clamp(1.4rem, 3vh, 2.2rem); }
.cotiza__riel i { position: absolute; inset: 0; background: var(--hoja-2); transform-origin: left; transform: scaleX(0); transition: transform .5s var(--suave); }

.cotiza__paso { border: 0; min-width: 0; }
.cotiza__paso legend { font-size: clamp(1.6rem, 2.4vw + .8rem, 2.8rem); font-weight: 640; font-stretch: 112%; letter-spacing: -.02em; line-height: 1.02; padding: 0; margin-bottom: clamp(1.2rem, 3vh, 2rem); text-wrap: balance; }
.cotiza__opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.cotiza__opciones--lista { grid-template-columns: 1fr; }
.opcion { position: relative; display: block; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opcion span { display: flex; flex-direction: column; height: 100%; background: var(--papel); border: 1px solid var(--linea); transition: border-color .25s, background .25s, transform .25s var(--suave); overflow: hidden; }
.opcion img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.opcion b { display: block; padding: .75em .85em .2em; font-weight: 620; font-stretch: 106%; font-size: .98rem; line-height: 1.15; }
.opcion small { display: block; padding: 0 .85em .85em; font-size: .82rem; line-height: 1.3; color: var(--tinta-3); }
.opcion b:last-child { padding-bottom: .8em; }
.opcion:hover span { border-color: var(--tinta-3); transform: translateY(-2px); }
.opcion input:checked + span { border-color: var(--hoja-2); background: #F1F4E4; box-shadow: inset 0 0 0 1px var(--hoja-2); }
.opcion input:focus-visible + span { outline: 3px solid var(--hoja); outline-offset: 2px; }
.cotiza__opciones--lista .opcion b { padding-top: .95em; font-size: 1.08rem; }

.resultado { display: grid; gap: clamp(1.3rem, 3vw, 2.6rem); }
.resultado[hidden] { display: none; }
.resultado figure { background: #E6D6C2; overflow: hidden; }
.resultado img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.resultado .mono { color: var(--hoja-2); }
.resultado h3 { font-size: clamp(2rem, 3vw + .9rem, 3.6rem); line-height: .96; margin-top: .5rem; }
.resultado__porque { margin-top: .9rem; font-size: 1.1rem; line-height: 1.4; color: var(--tinta-2); max-width: 36ch; }
.resultado dl { margin-top: 1.5rem; border-top: 1px solid var(--linea); }
.resultado dl div { display: grid; grid-template-columns: 8.2rem 1fr; gap: 1rem; padding: .62rem 0; border-bottom: 1px solid var(--linea); }
.resultado dt { font-family: var(--mono); font-size: .64rem; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-3); padding-top: .2em; }
.resultado dd { font-weight: 560; line-height: 1.3; }
.resultado__nota { margin-top: 1rem; font-size: .9rem; line-height: 1.4; color: var(--tinta-2); padding: .8rem 1rem; background: var(--papel-2); border-left: 3px solid var(--hoja-2); }
.resultado .acciones { margin-top: 1.5rem; }
.resultado .cotiza__atras { margin-top: .9rem; text-decoration: underline; text-underline-offset: .25em; }

@media (min-width: 700px) {
  .cotiza__opciones { grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: .8rem; }
  .cotiza__opciones--lista { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
  .cotiza__opciones--lista .opcion b { padding-top: 1.3em; }
  .cotiza__opciones--lista .opcion small { padding-bottom: 1.3em; }
}
@media (min-width: 900px) {
  .resultado { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); align-items: center; }
}