/* ═══════════════════════════════════════════════════════════════════════════
   Formulario · Paola Rodríguez Realtor — la piel del Typeform «Luxury»

   La misma del formulario de Area Group, que copia el tema del original:
   Lato; esquinas «small» (8 px); medidas y estados (hover, elegida, foco)
   sacados de las reglas CSS del renderer de Typeform leídas en vivo. Sólo
   cambian dos colores: la tinta pasa del #1A1A1A de Typeform al azul del logo
   de Paola, y el fondo del beige al gris cálido que Jean ya le aprobó a ella.
   Todo lo demás se deriva de esos dos (--tinta-rgb y --fondo-rgb). Un solo
   tema claro a propósito: el original no tiene oscuro.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;
  --fondo: #F4F3F1;
  --fondo-rgb: 244, 243, 241;
  --tinta: #1E3A5E;             /* el azul del logo de Paola */
  --tinta-rgb: 30, 58, 94;
  --tinta-80: #495F7B;          /* la tinta al 80 % sobre el fondo: descripciones */
  --texto-boton: #E9EDF2;       /* así lo pinta Typeform en reposo; blanco al pasar */
  --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(var(--tinta-rgb),.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: 26px; left: 50%;
  transform: translateX(-50%);
  line-height: 0; pointer-events: none;
  transition: opacity .3s var(--curva), visibility .3s;
}
.logo img { display: block; width: 170px; height: auto; }   /* el de Paola es más alto que el de Area Group */

/* ─────────────── 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: #fff; }
.boton:hover:not(:disabled)::before { background: rgba(var(--tinta-rgb),.9); }
.boton:active:not(:disabled)::before { background: rgba(var(--tinta-rgb),.8); }
.boton:disabled { color: #A3A3A3; cursor: default; }
.boton:disabled::before { background: rgba(var(--tinta-rgb),.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: 220px; height: auto; margin-bottom: 36px; }
@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(var(--fondo-rgb),.6);
  box-shadow: 0 0 0 1px rgba(var(--tinta-rgb),.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(var(--tinta-rgb),.06);
  pointer-events: none;
  transition: background-color .25s var(--curva);
}
@media (hover: hover) {
  .opcion:hover { box-shadow: 0 0 0 1px rgba(var(--tinta-rgb),.2); }
  .opcion:hover::before { background: rgba(var(--tinta-rgb),.1); }
}
.opcion[aria-checked="true"] { box-shadow: 0 0 0 2px var(--tinta); }
.opcion[aria-checked="true"]::before { background: rgba(var(--fondo-rgb),.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(var(--tinta-rgb),.24); border-radius: 4px;
  background: rgba(var(--fondo-rgb),.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(var(--tinta-rgb),.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(var(--tinta-rgb),.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: #9EA9B6; opacity: 1; }
@media (hover: hover) {
  .entrada:hover { box-shadow: 0 1px 0 0 rgba(var(--tinta-rgb),.8); }
  .entrada:hover::placeholder { color: #8997A8; }
}
.entrada:focus { box-shadow: 0 2px 0 0 var(--tinta); }
.entrada:focus::placeholder { color: #B4BCC5; }
/* 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(var(--tinta-rgb),.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: #9EA9B6; 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(var(--tinta-rgb),.1), 0 12px 32px rgba(var(--tinta-rgb),.14);
}
.pais-buscar {
  display: block; width: 100%; padding: 9px 12px;
  border: 0; border-radius: 6px;
  background: rgba(var(--tinta-rgb),.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(var(--tinta-rgb),.08); }
@media (hover: hover) { .pais-lista li:hover { background: rgba(var(--tinta-rgb),.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(44vh * .8)); height: auto; }   /* el render es 4:5 */
.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: 24px; }
  .logo img { width: 130px; }
  .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(var(--fondo-rgb),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; }
}