/* ═══════════════════════════════════════════════════════════════════════════
   Formulario · Quintas de Maral — la piel del Typeform «Luxury» con CAUCE

   Las medidas, los estados y la tipografía son los del formulario de Area
   Group (que a su vez salen del renderer de Typeform leído en vivo). Lo que
   cambia es el color: fondo crema del brochure (#F5F2E8), tinta verde oliva
   de CAUCE (#1C210A) y el lima de CAUCE (#CBF226) en el texto de los botones,
   que es la firma de la marca. El lima nunca va como texto sobre el crema:
   ahí no se lee.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;
  --fondo: #F5F2E8;             /* el crema del brochure */
  --tinta: #1C210A;             /* el verde oliva casi negro de CAUCE */
  --tinta-80: #474B36;          /* #1C210A al 80 % sobre el fondo: descripciones */
  --texto-boton: #CBF226;       /* el lima de CAUCE, sobre el botón oliva */
  --curva: cubic-bezier(.215, .61, .355, 1);
  --curva-salida: cubic-bezier(.55, .055, .675, .19);
}

[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }

html { background-color: var(--fondo); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh; min-height: 100dvh;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 14px/1.15 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input { font: inherit; color: inherit; margin: 0; }
strong { font-weight: 700; }
h1, h2, p { margin: 0; }

/* ─────────────── barra de progreso ─────────────── */
.progreso {
  position: fixed; z-index: 30; top: 3px; left: 6px; right: 6px;
  height: 4px; border-radius: 4px; overflow: hidden;
  background: rgba(28, 33, 10, .3);
}
.progreso-relleno {
  height: 100%; width: 0; border-radius: 4px;
  background: var(--tinta);
  transition: width .4s var(--curva);
}

/* ─────────────── logo (centrado arriba, como el de Typeform) ─────────────── */
.logo {
  position: absolute; z-index: 20; top: 30px; left: 50%;
  transform: translateX(-50%);
  line-height: 0; pointer-events: none;
  transition: opacity .3s var(--curva), visibility .3s;
}
.logo img { display: block; width: 200px; height: auto; }

/* ─────────────── botón (el primario de Typeform) ─────────────── */
.boton {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 8px;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--texto-boton);
  font-weight: 700; text-decoration: none; cursor: pointer;
  transition: color .25s var(--curva);
  -webkit-tap-highlight-color: transparent;
}
.boton::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: var(--tinta);
  transition: background-color .25s var(--curva);
}
.boton > span { padding-inline: 8px; font-size: 18px; line-height: 24px; }
.boton:hover:not(:disabled) { color: var(--texto-boton); }
.boton:hover:not(:disabled)::before { background: rgba(28, 33, 10, .9); }
.boton:active:not(:disabled)::before { background: rgba(28, 33, 10, .8); }
.boton:disabled { color: #A3A3A3; cursor: default; }
.boton:disabled::before { background: rgba(28, 33, 10, .24); }
.boton.enviando:disabled { color: var(--texto-boton); cursor: progress; }
.boton.enviando:disabled::before { background: var(--tinta); }
.boton:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* ─────────────── pantallas y su transición ───────────────
   Como Typeform: la que se va sube y se desvanece; la que llega sube desde
   abajo. Al volver atrás, al revés. */
.pantalla { position: relative; }
.pantalla:focus { outline: none; }
.pantalla.sale       { animation: salir .2s var(--curva-salida) forwards; }
.pantalla.sale-atras { animation: salir-atras .2s var(--curva-salida) forwards; }
.pantalla.entra       { animation: entrar .42s var(--curva) both; }
.pantalla.entra-atras { animation: entrar-atras .42s var(--curva) both; }
@keyframes salir        { to   { opacity: 0; transform: translateY(-48px); filter: blur(2px); } }
@keyframes salir-atras  { to   { opacity: 0; transform: translateY(48px);  filter: blur(2px); } }
@keyframes entrar       { from { opacity: 0; transform: translateY(48px);  filter: blur(2px); } }
@keyframes entrar-atras { from { opacity: 0; transform: translateY(-48px); filter: blur(2px); } }

/* ═══════════════ bienvenida ═══════════════
   Escritorio: foto a la izquierda, texto a la derecha (layout «split»). */
.bienvenida {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 100vh; min-height: 100dvh;
}
.bienvenida-foto { position: relative; overflow: hidden; }
.bienvenida-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%;
}
.bienvenida-texto {
  display: flex; align-items: center; justify-content: center;
  padding: 64px 40px;
}
.bienvenida-bloque { width: 100%; max-width: 480px; }
/* En escritorio el logo va aquí, sobre el título y alineado con el texto.
   Centrado arriba de la página caía justo en la unión de la foto con el fondo
   y se veía partido (Jean, 10-sep-2026). En las preguntas no hay foto detrás,
   así que allí sigue centrado arriba. */
.bienvenida-logo { display: block; width: 200px; height: auto; margin-bottom: 40px; }
@media (min-width: 768px) {
  body.en-bienvenida .logo { opacity: 0; visibility: hidden; }
}
.bienvenida-titulo { font-size: 32px; line-height: 40px; letter-spacing: -.75px; font-weight: 400; }
.bienvenida-descripcion { margin-top: 8px; font-size: 18px; line-height: 24px; color: var(--tinta-80); }
.bienvenida-acciones {
  display: inline-flex; flex-direction: column; align-items: center; gap: 12px;
  margin-top: 40px;
}
.duracion {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; line-height: 18px; color: var(--tinta-80);
}

/* ═══════════════ preguntas ═══════════════ */
.pregunta {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 112px 0 88px;
}
.pregunta-caja {
  width: 100%; max-width: 784px;              /* 720 de contenido, como en el original */
  padding: 24px 32px;
  display: flex; flex-direction: column; gap: 32px;
}
.pregunta-cabeza { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

/* El número de la pregunta: la pastilla oscura de Typeform. En escritorio
   cuelga a la izquierda del título; en el celular va encima. */
.contador {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 19px; padding: 0 4px;
  border-radius: 5px 3px;
  background: var(--tinta); color: var(--fondo);
  font-size: 11px; line-height: 14px; font-weight: 700;
}
.pregunta .contador { position: absolute; left: -26px; top: 7.5px; }

.pregunta-titulo { font-size: 26px; line-height: 34px; letter-spacing: -.5px; font-weight: 400; overflow-wrap: break-word; }
.obligatorio { padding-left: 2px; }
.pregunta-descripcion { font-size: 20px; line-height: 28px; color: var(--tinta-80); }

/* ─────────────── opciones ─────────────── */
.opciones {
  display: inline-flex; flex-direction: column; gap: 8px;
  align-self: flex-start; min-width: 168px; max-width: 100%;
}
.opcion {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-start; width: 100%;
  padding: 6px 10px;
  border: 0; border-radius: 8px;
  background: rgba(245, 242, 232, .6);
  box-shadow: 0 0 0 1px rgba(28, 33, 10, .1);
  color: var(--tinta); text-align: left; cursor: pointer;
  transition: box-shadow .25s var(--curva);
  -webkit-tap-highlight-color: transparent;
}
.opcion::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: rgba(28, 33, 10, .06);
  pointer-events: none;
  transition: background-color .25s var(--curva);
}
@media (hover: hover) {
  .opcion:hover { box-shadow: 0 0 0 1px rgba(28, 33, 10, .2); }
  .opcion:hover::before { background: rgba(28, 33, 10, .1); }
}
.opcion[aria-checked="true"] { box-shadow: 0 0 0 2px var(--tinta); }
.opcion[aria-checked="true"]::before { background: rgba(245, 242, 232, .04); }
.opcion:focus-visible { outline: none; }

/* La tecla (A, B, C…). Con foco de teclado crece hacia la izquierda y dice «Tecla A». */
.tecla-sitio {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-block: 4px;
}
.tecla {
  position: absolute; top: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 2px;
  width: 100%; height: 100%; padding-inline: 6px;
  border: 1px solid rgba(28, 33, 10, .24); border-radius: 4px;
  background: rgba(245, 242, 232, .4); color: var(--tinta);
  font-size: 12px; line-height: 16px; font-weight: 700;
}
.tecla-pista { display: none; }
.opcion:focus-visible .tecla {
  width: max-content; border: 2px solid var(--tinta);
  background: var(--fondo); outline: 1px solid var(--fondo);
}
.opcion:focus-visible .tecla-pista { display: inline; }
.opcion[aria-checked="true"] .tecla { background: var(--tinta); border-color: var(--tinta); color: var(--fondo); }
.opcion-texto { width: 100%; padding: 4px; font-size: 18px; line-height: 24px; opacity: .9; }

/* El parpadeo de la opción elegida: dos destellos antes de avanzar. */
.opcion.parpadea { animation: parpadeo .48s steps(1, end); }
@keyframes parpadeo {
  0%, 50%   { box-shadow: 0 0 0 1px rgba(28, 33, 10, .1); }
  25%, 75%, 100% { box-shadow: 0 0 0 2px var(--tinta); }
}

/* ─────────────── campos de texto (contacto y teléfono) ─────────────── */
.campos { display: flex; flex-direction: column; gap: 32px; }
.campo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.campo-etiqueta { font-size: 18px; line-height: 24px; }

.entrada {
  display: block; width: 100%;
  padding: 6px 0;
  border: 0; border-radius: 0;
  background: transparent;
  box-shadow: 0 1px 0 0 rgba(28, 33, 10, .6);
  color: var(--tinta);
  font-size: 24px; line-height: 32px; letter-spacing: -.25px;
  outline: none;
  -webkit-appearance: none; appearance: none;
  transition: box-shadow .25s var(--curva), color .25s var(--curva);
}
.entrada::placeholder { color: #9D9B97; opacity: 1; }
@media (hover: hover) {
  .entrada:hover { box-shadow: 0 1px 0 0 rgba(28, 33, 10, .8); }
  .entrada:hover::placeholder { color: #878682; }
}
.entrada:focus { box-shadow: 0 2px 0 0 var(--tinta); }
.entrada:focus::placeholder { color: #B3B1AC; }
/* Que el autocompletar de Chrome no pinte el campo de azul o amarillo. */
.entrada:-webkit-autofill { -webkit-text-fill-color: var(--tinta); transition: background-color 600000s 0s; }

.cebo { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ─────────────── teléfono: bandera + número ─────────────── */
.telefono { display: flex; align-items: center; gap: 8px; width: 100%; }
.pais { position: relative; flex: none; }
.pais-boton {
  position: relative; display: flex; align-items: center;
  width: auto; padding: 6px 24px 6px 0; cursor: pointer;
}
.bandera-marco {
  display: flex; padding: 1px;
  border: 1px solid rgba(28, 33, 10, .2); border-radius: 4px;
}
.pais-boton .bandera { display: block; font-size: 22px; line-height: 22px; border-radius: 2px; overflow: hidden; }
.pais-chevron {
  position: absolute; right: 0; top: 0; height: 100%;
  display: flex; align-items: center; color: #9D9B97; pointer-events: none;
}
.pais-boton:focus .pais-chevron, .pais-boton[aria-expanded="true"] .pais-chevron { color: var(--tinta); }
.telefono-numero { flex: 1; min-width: 0; }

.pais-panel {
  position: absolute; z-index: 40; top: calc(100% + 8px); left: 0;
  width: min(360px, calc(100vw - 64px));
  padding: 8px; border-radius: 8px;
  background: var(--fondo);
  box-shadow: 0 0 0 1px rgba(28, 33, 10, .1), 0 12px 32px rgba(28, 33, 10, .14);
}
.pais-buscar {
  display: block; width: 100%; padding: 9px 12px;
  border: 0; border-radius: 6px;
  background: rgba(28, 33, 10, .06);
  font-size: 16px; line-height: 22px; outline: none;
  -webkit-appearance: none; appearance: none;
}
.pais-buscar:focus { box-shadow: 0 0 0 2px var(--tinta); }
.pais-lista {
  position: relative; list-style: none; margin: 8px 0 0; padding: 0;
  max-height: 264px; overflow-y: auto; overscroll-behavior: contain;
}
.pais-lista li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px;
  font-size: 16px; line-height: 22px; cursor: pointer;
}
.pais-lista li.marcado { background: rgba(28, 33, 10, .08); }
@media (hover: hover) { .pais-lista li:hover { background: rgba(28, 33, 10, .08); } }
.pais-lista li[aria-selected="true"] { font-weight: 700; }
.pais-lista .bandera { font-size: 20px; line-height: 22px; }
.pais-prefijo { margin-left: auto; color: var(--tinta-80); font-weight: 400; }
.pais-vacio { margin: 8px 10px 4px; font-size: 14px; color: var(--tinta-80); }

/* ─────────────── errores (los de Typeform) ─────────────── */
.error {
  display: inline-flex; align-items: flex-start; gap: 4px;
  padding: 4px 8px 4px 6px; border-radius: 4px;
  background: #F7E6E6; color: #AF0404;
  font-size: 14px; line-height: 20px;
}
.error svg { flex: none; margin-top: 2px; }
.campo .error, .error-telefono { margin-top: 4px; }
.error.sacude { animation: sacudida .36s var(--curva); }
@keyframes sacudida {
  20% { transform: translateX(-4px); } 40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); } 80% { transform: translateX(2px); }
}

/* ─────────────── acciones: Aceptar / Enviar ─────────────── */
.acciones { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.acciones-fila { display: flex; align-items: center; gap: 12px; }
.pista-enter { font-size: 12px; line-height: 16px; }
.tactil .pista-enter { display: none; }

/* ─────────────── flechas de abajo a la derecha ─────────────── */
.flechas { position: fixed; z-index: 30; right: 32px; bottom: 28px; display: inline-flex; gap: 2px; }
.flecha { width: 32px; height: 32px; min-height: 32px; padding: 7px 8px; }
.flecha:first-child { border-radius: 8px 2px 2px 8px; }
.flecha:last-child  { border-radius: 2px 8px 8px 2px; }
.flecha svg { display: block; fill: currentColor; }

/* ═══════════════ gracias ═══════════════ */
.gracias {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 112px 32px 64px; text-align: center;
}
.gracias-caja { width: 100%; max-width: 720px; display: flex; flex-direction: column; align-items: center; }
.gracias-foto { display: block; width: min(100%, calc(40vh * 1.816)); height: auto; }
.gracias-titulo { margin-top: 32px; font-size: 32px; line-height: 40px; letter-spacing: -.75px; font-weight: 400; }
.gracias-descripcion { margin-top: 8px; font-size: 18px; line-height: 24px; color: var(--tinta-80); }
.gracias .boton { margin-top: 32px; }

.sin-js { max-width: 480px; margin: 40vh auto 0; padding: 0 32px; font-size: 18px; line-height: 26px; text-align: center; }
.sin-js a { color: inherit; }

/* ═══════════════ celular ═══════════════
   Las medidas del layout pequeño de Typeform: todo a una columna, textos más
   chicos, el botón a lo ancho y sin flechas. */
@media (max-width: 767px) {
  .logo { top: 28px; }
  .logo img { width: 160px; }
  .bienvenida-logo { display: none; }     /* en el celular manda el de arriba */

  .bienvenida {
    display: flex; flex-direction: column; align-items: center;
    padding: 96px 32px 156px; text-align: center;
  }
  .bienvenida-foto { width: 100%; height: 40vh; height: 40svh; flex: none; }
  .bienvenida-foto img { object-fit: contain; object-position: 50% 0; }
  .bienvenida-texto { padding: 24px 0 0; }
  .bienvenida-titulo { font-size: 26px; line-height: 34px; letter-spacing: -.5px; }
  .bienvenida-descripcion { font-size: 16px; line-height: 22px; }
  /* El botón de empezar queda fijo abajo, a lo ancho, con la duración encima. */
  .bienvenida-acciones {
    position: fixed; z-index: 25; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column-reverse; gap: 8px; margin: 0;
    padding: 20px 32px calc(24px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--fondo) 72%, rgba(245, 242, 232, 0));
  }
  .bienvenida-acciones .boton { width: 100%; min-height: 42px; }
  .bienvenida-acciones .boton > span { font-size: 20px; line-height: 26px; }

  .pregunta { align-items: flex-start; padding: 84px 0 40px; }
  .pregunta-caja { padding: 24px 32px; }
  .pregunta .contador { position: static; }
  .pregunta-titulo { font-size: 20px; line-height: 26px; letter-spacing: -.25px; }
  .pregunta-descripcion { font-size: 16px; line-height: 22px; }
  .opciones { display: flex; width: 100%; align-self: stretch; }
  .entrada { font-size: 20px; line-height: 26px; }
  .acciones, .acciones-fila { width: 100%; }
  .acciones-fila .boton { width: 100%; min-height: 42px; }
  .acciones-fila .boton > span { font-size: 20px; line-height: 26px; }
  .pista-enter { display: none; }
  .flechas { display: none; }

  .gracias { padding: 96px 32px 48px; }
  .gracias-titulo { font-size: 26px; line-height: 34px; letter-spacing: -.5px; }
  .gracias-descripcion { font-size: 16px; line-height: 22px; }
  .gracias .boton { width: 100%; }
  .gracias .boton > span { font-size: 20px; line-height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .pantalla.sale, .pantalla.sale-atras, .pantalla.entra, .pantalla.entra-atras,
  .opcion.parpadea, .error.sacude { animation: none; }
  .progreso-relleno { transition: none; }
}

/* ═══════════════ la marca de Quintas de Maral ═══════════════
   El emblema y el nombre, como en la barra de la landing. Las reglas van con
   más especificidad que `.logo img` y `.bienvenida-logo` a propósito: esas
   estiraban la imagen a 200 px porque el logo de Area Group era una tira. */
.marca-qm { display: inline-flex; align-items: center; gap: 10px; line-height: 1.1; }
.logo .marca-qm img,
.bienvenida-logo.marca-qm img { display: block; width: 40px; height: auto; }
.bienvenida-logo.marca-qm { display: inline-flex; width: auto; }
/* El logo de arriba va con left: 50% y translateX(-50%): una caja así solo
   dispone de la mitad del ancho para acomodarse, y en el celular partía
   «QUINTAS DE / MARAL» en dos renglones. Sin saltos, mide lo que mide. */
.logo .marca-qm { white-space: nowrap; }
.marca-qm-texto { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.marca-qm-texto b {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 600; font-size: 19px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta);
}
.marca-qm-texto span {
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-80);
}

/* ═══════════════ el aviso de la ley 1581 ═══════════════
   Va debajo del botón de Enviar: enviar con el aviso a la vista es la
   autorización (decreto 1377 de 2013, conducta inequívoca). */
.aviso-datos {
  max-width: 560px; margin-top: 4px;
  font-size: 12px; line-height: 17px; color: var(--tinta-80);
}
.aviso-datos a { color: var(--tinta); font-weight: 700; }

@media (max-width: 767px) {
  .bienvenida-logo.marca-qm { display: none; }   /* en el celular manda el de arriba */
  .marca-qm-texto b { font-size: 16px; }
  .logo .marca-qm img { width: 34px; }
}

/* ═══════════════ centrado en escritorio ═══════════════
   Typeform deja escoger la alineación de las preguntas: izquierda (la de Area
   Group) o centro. En Area Group las opciones eran frases largas y llenaban la
   columna; aquí son cortas («Para invertir») y, pegadas a la izquierda, dejaban
   media pantalla vacía (Jean, 11-sep: «en PC no se ve centrado»). En el
   celular no aplica: allá todo va a lo ancho. */
@media (min-width: 768px) {
  .pregunta-cabeza { align-items: center; text-align: center; }
  .pregunta .contador { position: static; }       /* encima del título, no colgado a la izquierda */
  .respuesta { text-align: center; }              /* centra el bloque de opciones, que es inline-flex */
  .acciones { align-items: center; }
  .aviso-datos { text-align: center; }
  /* Los campos de texto no se centran por dentro: se centra el bloque. */
  .campos, .telefono { width: 100%; max-width: 560px; margin-inline: auto; }
  .campo, .entrada, .pais-panel { text-align: left; }
}