@charset "UTF-8";
/* ======================================================================
   estilo.css — sistema de diseño compartido de csrealestate.com.ar
   ======================================================================
   Lo usan las 9 páginas: la home, /propiedades/, /desarrollos/, la ficha
   de cada obra y los 5 formularios (una carpeta por formulario, como
   form/vender/index.html). Acá van los tokens, las tipografías, el fondo y
   los componentes que se repiten entre páginas (botones, ventana "glass",
   pie, componentes de las páginas internas y de los formularios). Lo que es
   exclusivo de una sola página sigue embebido en el <style> de esa página
   (la home: portada, "Mi método", carrusel). Las reglas de cada familia de
   componentes están en MANUAL-DE-DISENO.md (sección 10).

   Las URLs relativas de este archivo (fonts/..., data:) se resuelven
   respecto de ESTE archivo, no de la página que lo incluye — por eso
   sigue funcionando igual sin importar si lo linkea index.html (en la
   raíz) o form/vender/index.html (dos niveles más abajo), siempre que
   estilo.css se mantenga en la raíz del proyecto junto a fonts/. */

:root{
  --fondo:#080808;
  /* paleta del fondo ambiente: negros/grises muy oscuros de base,
     más los dos acentos cálidos de las esquinas */
  --neg-profundo:#080808;
  --neg-carbon:#101010;
  --gris-oscuro:#181818;
  --marron-calido:#2A1C16;
  --bronce:#A67C45;
  --borgona:#4A0D0D;
  --rojo-profundo:#6B1010;
  --texto:#fff;
  --texto-suave:rgba(255,255,255,.62);
  --btn-fondo:rgba(255,255,255,.03);
  --btn-borde:rgba(255,255,255,.15);
  --btn-hover:rgba(255,255,255,.06);
  --radio:16px;
  /* Chevrones ‹ › de las flechas de fotos (ventanas de detalle y visor), dibujados en SVG y centrados en el círculo
     (el carácter de texto ‹ › quedaba corrido hacia un costado). 24×24, trazo blanco, centro del dibujo = centro del círculo. */
  --chevron-izq:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 5l-7 7 7 7'/%3E%3C/svg%3E");
  --chevron-der:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 5l7 7-7 7'/%3E%3C/svg%3E");
  /* color nuevo, sólo para texto de error de validación de formularios —
     ningún rojo existente (--borgona/--rojo-profundo) es lo bastante
     claro para leerse bien como texto chico sobre el fondo oscuro */
  --error:#E8746B;
  /* medidas fluidas: en desktop el ancho máximo de 580px hace que los
     botones ocupen una franja angosta, con aire alrededor; en mobile, sin
     ese tope, el mismo botón de 66px/14px ocupa toda la pantalla y se
     siente "más grande" que en desktop. Estas variables escalan con el
     viewport para que la proporción botón/pantalla se sienta parecida en
     los dos casos, y llegan a su tamaño de siempre a partir de ~480-580px. */
  --boton-alto:clamp(54px, 11.4vw, 66px);
  /* alto COMÚN de WhatsApp, Email, "Mi método" y VL REALTOR de la home (12-oct-2026, pedido de Cristian: "tienen que tener el mismo tamaño").
     Tiene que alcanzar para el que más necesita: Email (2 renglones: 62–64 px) y VL REALTOR (2 renglones en celular: 64 px), medidos de 320 a 1280 px;
     por eso 65 px como piso y 66 (el de siempre) en compu. */
  --boton-alto-igual:clamp(65px, 14vw, 66px);
  --boton-pad-x:clamp(14px, 4.5vw, 20px);
  --boton-fs:clamp(12.5px, 3.2vw, 14px);
  --boton-icono:clamp(28px, 8vw, 34px);
  --boton-icono-left:clamp(10px, 3.5vw, 14px);
  --boton-pad-icono:clamp(44px, 14vw, 56px);
  --h2-fs:clamp(15px, 4.3vw, 18px);
  --botones-gap:clamp(9px, 3vw, 12px);
  /* ESCALA DE TÍTULOS (manual completo en MANUAL-DE-DISENO.md): mismo nivel = mismo tamaño
     en toda la web. Ningún título lleva un font-size suelto: usa uno de estos tres. */
  /* Los tres salen de UNA sola medida y mantienen siempre la misma proporción 30 : 22 : 20
     (sección = 11/15 × página; tarjeta = 2/3 × página): en el celular los tres se achican juntos,
     "a escala". Para cambiar toda la escala se toca sólo --titulo-pagina. (La sección era 24;
     Cristian pidió achicarla un poco más el 2026-10-09.) */
  --titulo-pagina:clamp(23px, 6.5vw, 30px);                         /* nivel 1: nombre de la página */
  --titulo-seccion:calc(var(--titulo-pagina) * 11 / 15);            /* nivel 2: secciones dentro de una página */
  --titulo-tarjeta:max(17px, calc(var(--titulo-pagina) * 2 / 3));   /* nivel 3: tarjetas, detalles, unidad, avisos (nunca menos de 17px) */
  /* aire que sigue a un "← Volver": arriba, entre el link y lo que viene; abajo, antes del pie */
  --aire-volver:32px;
  --aire-volver-abajo:48px;
  --redes-size:clamp(38px, 10vw, 44px);
  --redes-icono:clamp(22px, 6vw, 26px);
  --redes-gap:clamp(18px, 6vw, 26px);
  /* alto de la foto de portada: sólo lo usa la home (.portada/.identidad
     viven en index.html), pero se deja acá con el resto de los tokens
     para no partir :root en dos archivos */
  --portada-alto:clamp(243px, 72vw, 342px);
  /* mismas tipografías y medidas que la página original */
  --tipo:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --tipo-nombre:"Chillax","Inter",system-ui,sans-serif;
}

/* Fuentes auto-hospedadas — ver la nota completa en CLAUDE.md.
   inter-latin.woff2 es el archivo variable que Google sirve para el
   subset "latin" (cubre todos los acentos del español: áéíóúñ¿¡) — el
   mismo archivo cubre los 4 pesos (400/500/600/700), por eso un solo
   @font-face con font-weight en rango en vez de 4 declaraciones. Chillax
   sólo se usa en el peso 500, un solo archivo. */
@font-face{
  font-family:"Inter";
  src:url("fonts/inter-latin.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Chillax";
  src:url("fonts/chillax-500.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

*{box-sizing:border-box;margin:0;padding:0}

/* fieldset/legend traen su propio borde, padding y ancho mínimo por
   default del navegador — se resetea acá, global, en vez de en cada
   componente que los use (hoy sólo los formularios, ver estilo.css más
   abajo, pero cualquier fieldset nuevo lo va a necesitar igual) */
fieldset{border:0;min-width:0}
legend{display:block;width:100%}

/* [hidden] nativo del navegador es una regla de muy baja prioridad (user
   agent): cualquier display:flex/grid/block puesto en una clase (como
   .boton más abajo) le gana igual, sin importar la especificidad, porque
   una hoja de autor siempre le gana a la del navegador. Sin esto, un botón
   con hidden + class="boton" queda visible igual — pasó con #btn-atras. */
[hidden]{display:none!important}

/* que ninguna imagen se pueda arrastrar ni seleccionar: al hacerlo el
   navegador dibuja un marco/fantasma de la imagen, que no queda prolijo */
img{
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

/* Con cualquier <dialog> abierto (matrícula, privacidad, detalle de
   propiedad/desarrollo — en index.html y en el privacidad de los 5
   formularios), la página de atrás no debe poder scrollearse: en mobile,
   showModal() por sí solo NO bloquea el scroll con el dedo detrás del
   modal en la mayoría de los navegadores (es un bug/comportamiento
   conocido, no algo que dialog resuelva solo) — queda raro, como pidió
   Cristian arreglar. :has() reacciona solo al atributo "open" que
   showModal()/close() ya ponen y sacan, así que cubre los ~10 lugares
   del sitio que abren un dialog (delegado genérico de clicks, el
   auto-open por hash, abrirDetalle(), y el script de privacidad propio
   de cada formulario) sin tener que tocar ninguno de ellos. No afecta el
   scroll interno del propio dialog (si su contenido no entra en
   pantalla) porque ese es un contenedor de scroll aparte. */
html:has(dialog[open]){overflow:hidden}

body{
  font-family:var(--tipo);
  background:var(--fondo);
  color:var(--texto);
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* ---------- Fondo ambiente ----------
   Esta página se ve casi siempre en el celular, en una sola columna
   angosta: un degradado pegado a las esquinas queda tapado por los propios
   botones y termina sin notarse. Por eso el enfoque es otro: una única luz
   cálida y enorme, centrada arriba (como un foco de estudio sobre la
   cabecera), que ilumina toda la columna de contenido desde arriba y se
   apaga en un negro limpio hacia el resto de la página. Un segundo resplandor
   borgoña, mucho más tenue, aparece abajo. Encima va un grano fotográfico
   finísimo (SVG) para que el negro no se sienta un bloque de color plano,
   sino con esa textura "premium" de estudio. Contenedor fijo, no
   pseudo-elemento, detrás de todo. */
.fondo-ambiente{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    /* base: negros muy oscuros */
    linear-gradient(180deg, var(--gris-oscuro) 0%, var(--neg-carbon) 22%, var(--neg-profundo) 55%);
}
/* los dos brillos van en capas propias para poder animar su opacidad por
   separado con el scroll (sólo pasa en index.html — en las páginas nuevas
   quedan fijos, sin JS que los anime) */
.fondo-ambiente__brillo-arriba,
.fondo-ambiente__brillo-abajo{
  position:absolute;
  inset:0;
}
.fondo-ambiente__brillo-arriba{
  /* foco cálido centrado, arriba de la cabecera; se va apagando al scrollear */
  background:radial-gradient(60% 42% at 50% 2%, rgba(166,124,69,.16) 0%, rgba(166,124,69,.08) 38%, transparent 72%);
}
.fondo-ambiente__brillo-abajo{
  /* resplandor borgoña abajo; se va intensificando al scrollear */
  background:radial-gradient(72% 42% at 50% 100%, rgba(107,16,16,.22) 0%, rgba(74,13,13,.11) 42%, transparent 76%);
  opacity:.45;
}
/* grano fotográfico finísimo, parejo en todo el fondo negro — pero se lo
   excluye (con una máscara "en negativo", mismas formas que los brillos)
   de las zonas de bronce y borgoña, para no ensuciarles el color */
.fondo-ambiente::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.45;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image:
    linear-gradient(#000,#000),
    radial-gradient(60% 42% at 50% 2%, #000 0%, #000 38%, transparent 72%),
    radial-gradient(72% 42% at 50% 100%, #000 0%, #000 42%, transparent 76%);
  mask-image:
    linear-gradient(#000,#000),
    radial-gradient(60% 42% at 50% 2%, #000 0%, #000 38%, transparent 72%),
    radial-gradient(72% 42% at 50% 100%, #000 0%, #000 42%, transparent 76%);
  mask-composite:add,subtract,subtract;
}

@media (min-width:480px){
  /* el radio horizontal del brillo dorado (60%) está pensado para mobile,
     donde el viewport casi coincide con el ancho de .envoltorio (580px).
     En desktop ese mismo 60% es 60% de una pantalla mucho más ancha que la
     columna de contenido, así que el brillo se estira muchísimo más allá
     de ella. A partir de este breakpoint se fija un radio en px acotado al
     ancho de la columna, para que quede centrado sobre el contenido en vez
     de crecer con el viewport. Se repite en la máscara del grano de
     .fondo-ambiente::after para que la zona excluida siga calzando con la
     forma real del brillo. */
  .fondo-ambiente__brillo-arriba{
    background:radial-gradient(300px 42% at 50% 2%, rgba(166,124,69,.13) 0%, rgba(166,124,69,.065) 38%, transparent 72%);
  }
  .fondo-ambiente::after{
    -webkit-mask-image:
      linear-gradient(#000,#000),
      radial-gradient(300px 42% at 50% 2%, #000 0%, #000 38%, transparent 72%),
      radial-gradient(72% 42% at 50% 100%, #000 0%, #000 42%, transparent 76%);
    mask-image:
      linear-gradient(#000,#000),
      radial-gradient(300px 42% at 50% 2%, #000 0%, #000 38%, transparent 72%),
      radial-gradient(72% 42% at 50% 100%, #000 0%, #000 42%, transparent 76%);
  }
}

.envoltorio{
  max-width:580px;
  margin:0 auto;
  padding:0 16px calc(48px + env(safe-area-inset-bottom));
}

h2{
  margin:34px 0 16px;
  text-align:center;
  font-size:var(--h2-fs);
  font-weight:700;
  line-height:1.5;
}

.botones{display:flex;flex-direction:column;gap:var(--botones-gap)}

.boton{
  position:relative;          /* ancla los íconos absolutos de cada botón */
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:var(--boton-alto);
  padding:14px var(--boton-pad-x);
  border:1px solid var(--btn-borde);
  border-radius:var(--radio);
  background:var(--btn-fondo);
  color:var(--texto);
  font-size:var(--boton-fs);
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.2px;
  text-align:center;
  text-decoration:none;
  font-family:inherit;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  /* vidrio esmerilado tipo iOS: desenfoca lo que hay detrás del botón y le
     suma un realce arriba (como si la luz le pegara al canto de vidrio) más
     una sombra abajo que lo despega del fondo */
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 10px 24px -12px rgba(0,0,0,.6);
  transition:transform .12s ease, background-color .18s ease, border-color .18s ease;
}
/* "encima" sólo con mouse (12-oct-2026): en el celular el último botón tocado quedaba resaltado */
@media (hover:hover){
  .boton:hover{background:var(--btn-hover);border-color:rgba(255,255,255,.32)}
  .boton:disabled:hover{background:var(--btn-fondo)}
}
.boton:active{transform:scale(.985)}
.boton:focus-visible{outline:2px solid #fff;outline-offset:3px}
.boton:disabled{opacity:.55;cursor:default}

/* FOCO CON TECLADO (12-oct-2026): todo lo que se puede tocar muestra el mismo contorno blanco cuando se llega con
   el teclado (Tab), salvo lo que ya tiene el suyo (los controles de los formularios, en bronce). :where() deja esta
   regla en especificidad 0: cualquier regla de foco propia le gana. Con mouse o dedo no aparece (:focus-visible). */
:where(a[href], button, summary, select, input, textarea, [tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------- Ventana/tarjeta "glass" ----------
   La usa tanto el <dialog> de matrícula/detalle de propiedad en index.html
   como, sin ningún <dialog> de por medio, las tarjetas de las páginas de
   formularios (ahí es un <form>/<div> común con estas mismas clases) — el
   CSS no le exige ningún tipo de elemento en particular. */
.aviso{
  width:min(92vw,470px);
  margin:auto;              /* el reset de arriba le saca el centrado nativo */
  padding:0;
  border:1px solid var(--btn-borde);
  border-radius:var(--radio);
  background:rgba(24,24,24,.6);
  -webkit-backdrop-filter:blur(28px) saturate(150%);
  backdrop-filter:blur(28px) saturate(150%);
  color:var(--texto);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 24px 70px rgba(0,0,0,.75);
}
/* BARRA DE SCROLL (2026-10-09): una sola, igual en TODA la web — fina y en el bronce de la
   marca (--bronce, el único acento del sitio) a media opacidad, con el carril transparente.
   La barra nativa de Windows/Chrome es gris-blanca y resaltaba mucho sobre el fondo oscuro.
   Va en `*` (especificidad cero) para que cubra sin excepción: la página entera (el <html>),
   los <dialog> (.aviso: detalle de propiedad, matrícula, privacidad), los <textarea> de los
   formularios, las tiras de fotos de la ficha, el listado de unidades, etc. Quien NO debe
   mostrar barra (los sliders y la galería: `scrollbar-width:none` en su propia regla) la sigue
   ocultando, porque una clase le gana a `*`. La home también la lleva (Cristian pidió dejarla,
   2026-10-09). NO repetir estos valores en otro lado: una sola definición, así es siempre igual. Alcanza `scrollbar-width`/`scrollbar-color` (Chrome 121+, Firefox, Safari 18.2+);
   los `::-webkit-scrollbar` de abajo sólo se usan en navegadores más viejos que no entienden esas
   propiedades (si se mezclan, Chrome ignora los pseudo-elementos). En el celular las barras son
   "flotantes" del sistema: la regla es la misma, pero el color final lo decide el navegador
   del teléfono. */
*{
  scrollbar-width:thin;
  scrollbar-color:rgba(166,124,69,.55) transparent;
}
@supports not (scrollbar-color:auto){
  *::-webkit-scrollbar{width:8px;height:8px}
  *::-webkit-scrollbar-track{background:transparent}
  *::-webkit-scrollbar-thumb{background:rgba(166,124,69,.55);border-radius:8px}
  *::-webkit-scrollbar-thumb:hover{background:rgba(166,124,69,.8)}
}
.aviso::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(3px)}
/* Ventana del detalle de una tarjeta (propiedad o desarrollo): más grande que las
   de texto (matrícula, privacidad) para que la foto se vea bien — a pedido de
   Cristian, del tamaño de una tarjeta del listado y con los datos abajo. */
/* 2026-10-18 (pedido de Cristian: "que las imágenes sean más grandes, que se pueda interactuar mejor"): en
   la compu la ventana pasa de 620 a 810 px (la foto de ~572 a ~760 px de ancho; se había probado con 960 y Cristian pidió achicarla 150 px); en el celular ocupa casi todo
   el ancho (98 %, antes 94 %). Las letras NO cambian. La foto se toca/clickea para verla en pantalla completa
   (ver "Visor de fotos" más abajo). */
.aviso--detalle{
  width:min(96vw,810px);
  /* el <dialog> trae de fábrica max-width:calc(100% - 6px - 2em) (en un celular de 375 px: 337 px): sin esto
     la ventana nunca pasaba de ahí, por más ancho que se le pidiera */
  max-width:calc(100vw - 12px);
  max-height:calc(100dvh - 24px);
}
/* en el celular la foto va de borde a borde de la ventana (ver .propiedad-detalle__galeria y .pf-galeria,
   cada una en el CSS de su página) y la X pasa a un fondo oscuro para que se vea sobre la foto */
@media (max-width:600px){ .aviso--detalle .aviso__cerrar{background:rgba(0,0,0,.55)} }
.aviso__caja{padding:26px 24px 22px}
.aviso h3{
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  padding-right:28px;
  color:rgba(255,255,255,.95);
}
.aviso p{
  margin-top:14px;
  font-size:14px;
  line-height:1.6;
  color:rgba(255,255,255,.72);
}
/* OPTIMIZACIÓN (2026-10-09): la ventana grande de detalle (fotos + datos) NO lleva desenfoque de vidrio
   (ni ella ni el fondo que la rodea). Con blur(28px) daba 24 cuadros/seg al scrollear adentro y 29 al
   pasar fotos (casi todos los cuadros trabados); sin él, 45 y 55. Para que no se vea el texto de la
   página "fantasma" a través del panel (pasa si sólo se saca el blur), el fondo del panel pasa de 60 % a
   94 % de opacidad: queda casi igual a como se veía (probado lado a lado). Las ventanas chicas de
   solo texto (matrícula, privacidad) y las tarjetas de los formularios siguen con el vidrio de siempre. */
.aviso--detalle{
  background:rgba(22,22,22,.94);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.aviso--detalle::backdrop{backdrop-filter:none}
/* detalle de una tarjeta (ver .aviso--detalle arriba): título y texto un escalón
   más grandes, para acompañar a la foto grande */
.aviso--detalle h3{font-family:var(--tipo-nombre);font-size:var(--titulo-tarjeta);font-weight:500;line-height:1.25;letter-spacing:0}
.aviso--detalle p{font-size:15px}
/* Con la ventana ancha, la descripción corrida no se estira a todo el ancho (líneas de ~130 letras se leen mal):
   se queda en un ancho de lectura cómodo. Sólo el largo de línea; el tamaño de letra es el de siempre. */
.aviso--detalle .aviso__caja > p{max-width:68ch}
.aviso__cerrar{
  position:absolute;
  z-index:3;                /* por encima de la foto cuando ésta llega al borde de la ventana (celular) */
  top:14px;right:14px;
  width:30px;height:30px;
  display:grid;place-items:center;
  border:0;border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:17px;line-height:1;
  cursor:pointer;
}
@media (hover:hover){ .aviso__cerrar:hover{background:rgba(255,255,255,.18)} }

/* ---------- Visor de fotos (2026-10-18) ----------
   Pantalla completa que se abre al tocar/clickear la foto del detalle de una propiedad (home y /propiedades/).
   Es un <dialog> aparte (no va adentro del detalle) para que se apile encima y Esc cierre primero el visor.
   La pista desliza con scroll nativo + snap (dedo, trackpad, flechas y teclado ← →); la foto se ve entera
   (`contain`), sin recortes. En el celular se puede agrandar con pellizco (el navegador lo permite: el
   viewport no lo bloquea). Sólo CSS + un script chico por página; no manda ningún evento de medición. */
dialog.visor-fotos{
  position:fixed;inset:0;
  width:100%;height:100%;
  max-width:none;max-height:none;
  margin:0;padding:0;border:0;border-radius:0;
  background:#000;
  color:#fff;
  overflow:hidden;
}
dialog.visor-fotos::backdrop{background:#000}
.visor-fotos__pista{
  display:flex;
  height:100%;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior:contain;
  scrollbar-width:none;
}
.visor-fotos__pista::-webkit-scrollbar{display:none}
.visor-fotos__pista img{
  flex:0 0 100%;
  width:100%;height:100%;
  object-fit:contain;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  -webkit-user-drag:none;
  user-select:none;
}
.visor-fotos__cerrar,
.visor-fotos__flecha{
  position:absolute;
  display:grid;place-items:center;
  border:0;border-radius:50%;
  background-color:rgba(255,255,255,.14);
  color:#fff;
  cursor:pointer;
}
.visor-fotos__cerrar{
  top:max(14px,env(safe-area-inset-top));right:14px;
  width:44px;height:44px;
  font-size:24px;line-height:1;
}
.visor-fotos__flecha{
  top:50%;transform:translateY(-50%);
  width:52px;height:52px;
  font-size:0;                /* el chevrón es el dibujo del fondo, no el carácter ‹ › */
  background-repeat:no-repeat;background-position:center;background-size:56%;
}
.visor-fotos__flecha--prev{left:16px;background-image:var(--chevron-izq)}
.visor-fotos__flecha--next{right:16px;background-image:var(--chevron-der)}
.visor-fotos__flecha:disabled{opacity:.25;cursor:default}
.visor-fotos__contador{
  position:absolute;
  left:50%;transform:translateX(-50%);
  bottom:max(16px,env(safe-area-inset-bottom));
  padding:4px 12px;
  border-radius:12px;
  background:rgba(0,0,0,.55);
  font-size:13px;
}
@media (hover:hover){
  .visor-fotos__cerrar:hover,.visor-fotos__flecha:not(:disabled):hover{background-color:rgba(255,255,255,.28)}
}
/* en el celular las flechas sobran (se desliza con el dedo) y taparían la foto */
@media (hover:none){ .visor-fotos__flecha{display:none} }

/* ---------- Diapositiva de video (2026-10-18) ----------
   Última de la galería del detalle y del visor, sólo en las propiedades de Cristian que tienen video de YouTube.
   Se ve como la primera foto oscurecida con un botón de play; el reproductor de YouTube (youtube-nocookie.com)
   NO se carga hasta que la persona toca (visor de fotos) y se saca apenas se sale de esa diapositiva o se cierra
   el visor, para que no siga sonando de fondo. Sin eventos de medición. */
.video-tile{
  position:relative;overflow:hidden;
  display:grid;align-content:center;justify-items:center;gap:10px;
  background-color:#111;background-size:cover;background-position:center;background-repeat:no-repeat;
  cursor:pointer;
}
/* Portada: la MINIATURA DEL PROPIO VIDEO (i.ytimg.com; el Short entero en vertical, o la 16:9), entera y centrada
   (`contain`), con la misma imagen desenfocada y oscura rellenando los costados. Si YouTube no tuviera ninguna miniatura,
   se usa la primera foto de la propiedad oscurecida (clase .video-tile--foto). El selector lleva 2 clases a propósito:
   le gana a `.visor-fotos__pista img`, que también alcanza a esta <img> por estar dentro de esa pista (las galerías del
   detalle ya no tienen reglas sobre `img`: desde el 2026-10-26 cada foto va en un .foto-marco). */
.video-tile::before{
  content:'';position:absolute;inset:-24px;
  background:var(--poster,none) center/cover no-repeat;
  filter:blur(22px) brightness(.5);
}
.video-tile .video-tile__img{
  position:absolute;inset:0;
  display:block;flex:none;
  width:100%;height:100%;max-height:none;aspect-ratio:auto;
  object-fit:contain;
  background:none;cursor:inherit;
  scroll-snap-align:none;scroll-snap-stop:normal;
}
.video-tile--foto::before,
.video-tile.con-video::before{display:none}
.video-tile__play,.video-tile__rotulo{position:relative;z-index:1}
.video-tile__play{
  width:68px;height:68px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(0,0,0,.55);
  border:1.5px solid rgba(255,255,255,.6);
}
/* triángulo de play, corrido 3 px a la derecha para que se vea centrado (su peso visual queda hacia la base) */
.video-tile__play::before{
  content:'';
  border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #fff;
  transform:translateX(3px);
}
.video-tile__rotulo{
  padding:3px 10px;border-radius:12px;
  background:rgba(0,0,0,.55);
  font-size:13px;font-weight:600;letter-spacing:.04em;color:#fff;
}
@media (hover:hover){ .video-tile:hover .video-tile__play{background:rgba(0,0,0,.75)} }
/* con el reproductor puesto: se esconde el botón y el reproductor ocupa el lugar */
.video-tile.con-video{display:flex;align-items:center;justify-content:center;cursor:default;background-image:none !important}
.video-tile.con-video > :not(iframe){display:none}

/* ---------- Fotos VERTICALES de las propiedades (2026-10-26) ----------
   Pedido de Cristian: "si las fotos son 9:16 verticales, no se ven completas, sino con mucho zoom". Las tarjetas y la
   galería del detalle son apaisadas y recortaban con `cover`: de una foto vertical quedaba una franja del medio. Cada foto
   va dentro de un .foto-marco; cuando carga y resulta más alta que ancha, el script de la página le pone .es-vertical y
   --fondo: la foto entera y centrada (`contain`) con la misma foto desenfocada y oscura rellenando los costados, igual
   que la diapositiva del video (.video-tile). Las apaisadas siguen como siempre. El visor de pantalla completa ya las
   mostraba enteras. */
.foto-marco{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--marron-calido),var(--neg-carbon))}
.foto-marco > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.foto-marco.es-vertical::before{
  content:'';position:absolute;inset:-24px;
  background:var(--fondo,none) center/cover no-repeat;
  filter:blur(22px) brightness(.5);
}
.foto-marco.es-vertical > img{object-fit:contain;background:none}
/* en el visor: aire arriba y abajo para que la X, el contador y los controles de YouTube no se pisen */
.visor-fotos__video{
  flex:0 0 100%;height:100%;
  box-sizing:border-box;padding:64px 0 56px;
  scroll-snap-align:center;scroll-snap-stop:always;
  background-color:#000;
}
.visor-fotos__video iframe{flex:none;border:0;width:100%;aspect-ratio:16/9;max-height:100%}
.visor-fotos__video iframe.visor-fotos__iframe--corto{width:auto;height:100%;aspect-ratio:9/16;max-width:100%}
.aviso__ok{
  display:grid;
  place-items:center;
  width:100%;
  margin-top:22px;
  min-height:46px;
  border:1px solid var(--btn-borde);
  border-radius:12px;
  background:var(--btn-fondo);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  color:#fff;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
}
@media (hover:hover){ .aviso__ok:hover{background:var(--btn-hover)} }

/* ---------- Pie ---------- */
.redes{
  display:flex;
  justify-content:center;
  gap:var(--redes-gap);
  margin-top:30px;
}
.redes a{
  display:grid;
  place-items:center;
  width:var(--redes-size);height:var(--redes-size);
  color:#fff;
  border-radius:50%;
  background:var(--btn-fondo);
  border:1px solid var(--btn-borde);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  transition:background-color .18s ease;
}
@media (hover:hover){ .redes a:hover{background:rgba(255,255,255,.12)} }
.redes svg{width:var(--redes-icono);height:var(--redes-icono)}

.legal{
  margin-top:26px;
  text-align:center;
  font-size:11.5px;
  line-height:1.6;
  color:rgba(255,255,255,.34);
}
.legal a{color:inherit}
.legal__direccion{
  margin-top:4px;
  text-align:center;
  font-size:10.5px;    /* 1px menos que .legal (11.5px) */
  line-height:1.6;
  color:rgba(255,255,255,.28);    /* mismo blanco que .legal (.34), un poco más oscuro */
}
.legal__privacidad{
  margin-top:36px;    /* mismo separador que .copyright tenía antes de .legal__direccion — ahora el bloque "aparte" empieza acá */
  text-align:center;
  font-size:10.5px;
  line-height:1.6;
}
/* el margen negativo compensa el relleno: zona táctil de ~135 × 37 px con el texto en el mismo lugar */
.legal__privacidad a{color:var(--bronce);display:inline-block;padding:12px 14px;margin:-12px -14px}
.copyright{
  margin-top:8px;    /* separación chica: va agrupado con .legal__privacidad, no como bloque propio */
  text-align:center;
  font-size:10.5px;
  line-height:1.6;
  color:rgba(255,255,255,.22);
}
.legal__logo{
  height:14px;
  width:auto;
  vertical-align:-4px;
  /* el archivo ya viene gris oscuro (el mismo tono que pidió Cristian); sólo
     se lo aclara un poco para que pese igual que el texto que lo rodea,
     sin convertirlo a blanco */
  filter:brightness(1.4);
}

/* ======================================================================
   Encabezado de las páginas internas (.form-header, "← Volver", título),
   escala de títulos y la trampa anti-robots de los formularios.
   Los estilos .form-* del FORMULARIO VIEJO de pasos (.form-progreso,
   .form-paso, .form-campo, .form-nav...) se sacaron el 12-oct-2026: están
   en "OLD formularios 12-10-2026/estilo-formulario-viejo.css" (fuera del
   zip). Los 5 formularios usan .fx-*, al final de este archivo.
   ====================================================================== */

/* cabecera compacta de las páginas internas: a propósito NO repite la
   foto de portada grande de la home (.portada) — en un flujo de conversión
   de varios pasos, cargar y mostrar esa foto en cada paso pesa más de lo
   que aporta, y compite por atención con el formulario en sí. */
.form-header{
  padding-top:28px;
  text-align:center;
}
/* "← Volver..." (arriba, y .volver-abajo al final de las páginas largas): siempre
   a la izquierda, en la misma altura de siempre. Sólo el texto es clickeable
   (width:fit-content), no toda la fila. */
.form-header__volver,
.volver-abajo{
  display:block;
  width:fit-content;
  margin-right:auto;
  font-size:13px;
  color:var(--texto-suave);
  text-decoration:none;
}
@media (hover:hover){
  .form-header__volver:hover,
  .volver-abajo:hover{color:var(--texto)}
}
/* aire (2026-10-09): el margen de abajo se "funde" con el margen de arriba de lo que sigue
   (título, barrio...), así que el espacio real es el mayor de los dos, siempre --aire-volver */
.form-header__volver{margin-bottom:var(--aire-volver)}
.volver-abajo{margin-top:36px;margin-bottom:var(--aire-volver-abajo)}
/* Zona táctil más grande (era de 13 × 17 px de alto, difícil de tocar con el dedo): se le suma
   relleno y se lo compensa con margen negativo de la misma medida, así el texto queda EXACTAMENTE
   en el mismo lugar y el aire de arriba/abajo no cambia (verificado midiendo el texto antes y después). */
.form-header__volver,
.volver-abajo{padding:10px 14px;margin-left:-14px}
.form-header__volver{margin-top:-10px;margin-bottom:calc(var(--aire-volver) - 10px)}
.volver-abajo{margin-top:26px;margin-bottom:calc(var(--aire-volver-abajo) - 10px)}
.form-header__marca{
  margin-top:10px;
  font-family:var(--tipo-nombre);
  font-size:19px;
  font-weight:500;
}
/* ESCALA DE TÍTULOS (2026-10-09) — tres niveles, tamaños en :root, manual en MANUAL-DE-DISENO.md.
   Mismo nivel = mismo tamaño en toda la web. Los formularios no llevan estas clases (siguen con
   los 19px de .form-header__marca). Van después de esa regla a propósito: misma especificidad,
   gana la que está más abajo. */
/* nivel 1: título de la página (Propiedades, Desarrollos, nombre de la obra) */
.titulo-pagina{
  margin-top:16px;
  font-size:var(--titulo-pagina);
  line-height:1.12;
  letter-spacing:-.3px;
}
/* nivel 2: título de sección dentro de una página (El edificio, Planos, ¿Hablamos?...) */
.titulo-seccion{
  font-family:var(--tipo-nombre);
  font-size:var(--titulo-seccion);
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.2px;
}
/* nivel 3: título de una tarjeta, de un detalle, de una unidad o de un aviso */
.titulo-tarjeta{
  font-family:var(--tipo-nombre);
  font-size:var(--titulo-tarjeta);
  font-weight:500;
  line-height:1.25;
  letter-spacing:0;
}

/* trampa para bots: invisible para una persona (y saltada por lectores de
   pantalla), pero un formulario automático que completa "todos los campos"
   suele llenarla igual — si llega completada, el backend descarta el envío */
.form-trampa{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* ======================================================================
   COMPONENTES DE LAS PÁGINAS INTERNAS (/propiedades/, /desarrollos/, ficha)
   Auditoría del 12-oct-2026: antes cada página tenía su copia (.pf-btn,
   .dv-btn, .fi-btn; .pf-chip-filtro, .dv-chip, .fi-chip; .pf-chip, .dv-estado,
   .fi-estado; .pf-aviso, .dv-aviso, .fi-aviso; esqueletos y cifras) con
   medidas que se habían ido separando (44 vs 46 px, 13,5 vs 14 px, chips de
   34 vs 38 px, un aviso con título en otra letra). Ahora se definen UNA vez.
   Reglas de cada familia: MANUAL-DE-DISENO.md, sección 10.
   ====================================================================== */

/* Botón de acción: el de las tarjetas, la ficha y los avisos. Neutro = navegar
   ("Ver detalle →", "Ver unidades y planos →"); bronce = contactar por WhatsApp. */
.accion{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:46px;
  padding:10px 18px;
  border:1px solid var(--btn-borde);
  border-radius:var(--radio);
  background:rgba(255,255,255,.04);
  color:var(--texto);
  font:inherit;
  font-size:14px;
  font-weight:500;
  letter-spacing:-.2px;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  transition:background-color .18s ease, border-color .18s ease;
}
.accion--bronce{background:rgba(166,124,69,.16);border-color:rgba(166,124,69,.55)}
@media (hover:hover){
  .accion:hover{background:var(--btn-hover)}
  .accion--bronce:hover{background:rgba(166,124,69,.24)}
}
.accion:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Chip de filtro (Venta/Alquiler, ambientes, anticipo, cuota): marcado = bronce suave */
.chip-filtro{
  padding:8px 14px;
  border:1px solid var(--btn-borde);
  border-radius:var(--radio);
  background:rgba(255,255,255,.03);
  color:var(--texto);
  font:inherit;
  font-size:13px;
  line-height:normal;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.chip-filtro small{margin-left:6px;color:var(--texto-suave);font-size:11px}
.chip-filtro[aria-pressed="true"]{background:rgba(166,124,69,.16);border-color:rgba(166,124,69,.55)}
.chip-filtro:disabled{opacity:.4;cursor:default}
.chip-filtro:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Cartel sobre una foto (VENTA, ALQUILER, AGOTADA; en bronce: RESERVADO, PRÓXIMA ENTREGA).
   Mismas medidas que .propiedad__chip de la home. */
.cartel{
  padding:3px 9px;
  border-radius:var(--radio);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:10px;
  font-weight:600;
  letter-spacing:.08em;
  line-height:1.3;
  text-transform:uppercase;
}
.cartel--bronce{background:var(--bronce);border-color:var(--bronce);color:var(--neg-profundo);font-weight:700}

/* Aviso de estado (no se pudo cargar / sin resultados / web caída / obra inexistente).
   El título es nivel 3 de la escala (los "carteles de aviso" del manual). */
.tarjeta-aviso{
  margin:24px auto 0;
  max-width:440px;
  padding:24px 22px;
  text-align:center;
  border:1px solid var(--btn-borde);
  border-radius:var(--radio);
  background:var(--btn-fondo);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.35);
}
.tarjeta-aviso__icono{
  width:36px;height:36px;
  margin:0 auto 12px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid rgba(166,124,69,.55);
  color:var(--bronce);
  font-size:17px;
  font-weight:600;
}
.tarjeta-aviso h2{margin:0;font-family:var(--tipo-nombre);font-size:var(--titulo-tarjeta);font-weight:500;line-height:1.25;color:#fff;text-align:center}
.tarjeta-aviso p{margin-top:8px;font-size:13px;line-height:1.55;color:var(--texto-suave)}
.tarjeta-aviso .accion{width:auto;margin-top:16px}
.tarjeta-aviso__acciones{display:flex;flex-wrap:wrap;justify-content:center;gap:0 10px}

/* Lugar reservado mientras cargan los datos (brillo que pasa) */
.esqueleto{
  height:330px;
  border:1px solid var(--btn-borde);
  border-radius:var(--radio);
  background:linear-gradient(110deg,rgba(255,255,255,.03) 30%,rgba(255,255,255,.07) 50%,rgba(255,255,255,.03) 70%);
  background-size:220% 100%;
  animation:esqueleto-brillo 1.4s linear infinite;
}
@keyframes esqueleto-brillo{to{background-position:-220% 0}}

/* Franja de cifras (obras / unidades / desde; entrega / unidades libres / cuota desde).
   La cantidad de columnas la decide cada página. */
.cifras{
  display:grid;
  gap:1px;
  border:1px solid var(--btn-borde);
  border-radius:var(--radio);
  background:var(--btn-borde);
  overflow:hidden;
}
.cifras > div{padding:14px 8px;text-align:center;background:rgba(14,14,14,.92)}
.cifras b{display:block;font-family:var(--tipo-nombre);font-size:18px;font-weight:500;color:var(--bronce)}
.cifras span{display:block;margin-top:3px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-suave)}
@media (max-width:420px){ .cifras b{font-size:17px} .cifras span{font-size:9.5px;letter-spacing:.05em} }

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  html{scroll-behavior:auto}
  .esqueleto{animation:none}
}

/* ==========================================================================
   FORMULARIOS NUEVOS (2026-10-12): una pregunta por pantalla. Componentes .fx-*
   que usan los 5 formularios (form/motor.js arma el contenido). Diseño aprobado
   por Cristian en el prototipo "Formularios CS Real Estate". Mismos tokens de
   siempre (bronce, Chillax/Inter, vidrio); los tonos de línea y de bronce suave
   salen de esos mismos colores. Título de cada pregunta: nivel 3 del manual
   (--titulo-tarjeta, Chillax). El título del formulario sigue en 19 px
   (.form-header__marca). Ver MANUAL-DE-DISENO.md, sección 9.
   ========================================================================== */
.fx{
  --fx-linea:var(--btn-borde);
  --fx-linea-fuerte:rgba(255,255,255,.32);
  --fx-tenue:rgba(255,255,255,.4);
  --fx-bronce-suave:rgba(166,124,69,.14);
  --fx-bronce-borde:rgba(166,124,69,.6);
  display:block;
  max-width:460px;
  margin:0 auto;
  min-height:520px;          /* reserva lugar: el pie no salta mientras se arma la primera pantalla */
  text-align:left;
}
/* :where() deja esta regla en especificidad 0: si no, le ganaba a todos los tamaños y pesos de letra de .fx-opcion, .fx-chip, .fx-boton, etc.
   (los botones se veían a 16 px aunque la regla de cada uno dijera 13 o 14) */
:where(.fx) :is(button,input,select){font:inherit;color:inherit}
.fx button{cursor:pointer}
/* celular: sin el destello gris al tocar y sin zoom por doble toque (se tocan opciones seguidas y la pantalla cambia debajo del dedo) */
.fx button,.fx select,.fx .fx-sug li{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

.fx-progreso{margin-top:18px;height:4px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.fx-progreso__barra{height:100%;width:8%;background:var(--bronce);border-radius:inherit;transition:width .45s cubic-bezier(.2,.8,.2,1)}
.fx-progreso__texto{margin:8px 0 0;min-height:18px;text-align:center;font-size:12px;color:var(--texto-suave)}

.fx-tarjeta{position:relative;z-index:2;margin-top:14px;padding:24px 20px 18px;border:1px solid var(--fx-linea);border-radius:var(--radio);
  background:rgba(14,14,14,.72);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.35),0 18px 40px -20px rgba(0,0,0,.7)}
.fx-pantalla{display:flex;flex-direction:column;gap:14px}
.fx-pantalla.fx-entra{animation:fx-entra .26s cubic-bezier(.2,.8,.2,1)}
@keyframes fx-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* frase de Cris, con su foto */
.fx-nota{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--fx-bronce-suave);border:1px solid rgba(166,124,69,.35);animation:fx-entra .3s ease}
.fx-nota img{width:30px;height:30px;border-radius:50%;flex:none;object-fit:cover}
.fx-nota p{margin:0;font-size:13px;line-height:1.45;color:rgba(255,255,255,.9)}
.fx-nota b{display:block;font-size:12px;color:var(--bronce);font-weight:600}
.fx-nota__resto{visibility:hidden}   /* lo que todavía no se escribió: ocupa su lugar (el recuadro no crece a medida que aparece) */

.fx-pregunta{margin:0;text-align:left;font-family:var(--tipo-nombre);font-weight:500;font-size:var(--titulo-tarjeta);line-height:1.25;text-wrap:balance}
.fx-pregunta:focus{outline:none}
.fx-ayuda{margin:-6px 0 0;font-size:12.5px;color:var(--texto-suave)}
.fx-sub{margin:4px 0 -4px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-suave)}
.fx-marco{margin:0;font-size:13px;color:var(--texto-suave)}

/* tarjetas grandes para tocar, con marca a la derecha (círculo = una opción, cuadrado = varias) */
.fx-opciones{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.fx-opciones--dos{grid-template-columns:repeat(2,minmax(0,1fr))}
.fx-opcion{display:flex;align-items:center;gap:9px;width:100%;min-height:40px;padding:7px 11px;text-align:left;
  border:1px solid var(--fx-linea);border-radius:12px;background:rgba(255,255,255,.025);font-size:13.5px;font-weight:500;line-height:1.3;
  transition:border-color .15s ease,background-color .15s ease,transform .1s ease}
/* el estado "encima" sólo con mouse: en el celular se queda pegado al lugar del último toque y marcaba una opción de la pantalla nueva */
@media (hover:hover){.fx-opcion:hover{border-color:var(--fx-linea-fuerte);background:rgba(255,255,255,.05)}}
.fx-opcion:active{transform:scale(.985)}
.fx-opcion:focus-visible,.fx-chip:focus-visible,.fx-boton:focus-visible,.fx-enlace:focus-visible,.fx-campo:focus-visible{outline:2px solid var(--bronce);outline-offset:2px}
.fx-opcion__icono{width:20px;height:20px;flex:none;color:rgba(255,255,255,.85)}
.fx-opcion__icono svg{width:100%;height:100%;display:block}
.fx-opcion__texto{flex:1;min-width:0}
.fx-opcion__texto small{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--texto-suave)}
.fx-opcion__marca{width:16px;height:16px;flex:none;border-radius:50%;border:1.5px solid var(--fx-linea-fuerte);display:grid;place-items:center;color:#0b0b0b;transition:background-color .15s ease,border-color .15s ease}
.fx-opcion--multi .fx-opcion__marca{border-radius:6px}
.fx-opcion__marca svg{width:11px;height:11px;opacity:0}
.fx-opcion[aria-pressed="true"]{border-color:var(--fx-bronce-borde);background:var(--fx-bronce-suave)}
.fx-opcion[aria-pressed="true"] .fx-opcion__icono{color:var(--bronce)}
.fx-opcion[aria-pressed="true"] .fx-opcion__marca{background:var(--bronce);border-color:var(--bronce);animation:fx-pop .24s ease}
.fx-opcion[aria-pressed="true"] .fx-opcion__marca svg{opacity:1}
@keyframes fx-pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.fx-opciones--dos .fx-opcion{min-height:40px;padding:6px 9px;font-size:12.5px}

.fx-chips{display:flex;flex-wrap:wrap;gap:8px}
.fx-chip{min-height:32px;padding:5px 11px;border-radius:999px;border:1px solid var(--fx-linea);background:rgba(255,255,255,.025);font-size:12.5px;font-weight:500;line-height:1.2;transition:border-color .15s ease,background-color .15s ease}
@media (hover:hover){.fx-chip:hover{border-color:var(--fx-linea-fuerte)}}
.fx-chip[aria-pressed="true"]{border-color:var(--fx-bronce-borde);background:var(--fx-bronce-suave)}
.fx-chip--suave{font-weight:400;color:var(--texto-suave)}

.fx-campo{width:100%;min-height:42px;padding:9px 14px;border:1px solid var(--fx-linea);border-radius:12px;background:rgba(255,255,255,.03);font-size:16px}
.fx-campo::placeholder{color:rgba(255,255,255,.34)}
.fx-campo:focus{outline:2px solid var(--bronce);outline-offset:1px}
.fx-campo[aria-invalid="true"]{border-color:var(--error)}
.fx-etiqueta{display:block;margin:2px 0 -6px;font-size:13px;font-weight:600}
.fx-tel{display:flex;align-items:stretch;border:1px solid var(--fx-linea);border-radius:12px;background:rgba(255,255,255,.03)}
.fx-tel:focus-within{outline:2px solid var(--bronce);outline-offset:1px}
.fx-tel__pais{position:relative;display:flex;align-items:center;gap:2px;padding:0 8px 0 14px;color:var(--texto);font-size:16px;white-space:nowrap;border-right:1px solid var(--fx-linea)}
.fx-tel__pais svg{width:16px;height:16px;color:var(--texto-suave)}
.fx-tel__pais select{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer;font-size:16px}
/* la lista de países la dibuja el sistema: sin esto, en Windows salía letra blanca sobre fondo blanco */
.fx-tel__pais select{color-scheme:dark}
.fx-tel__pais option{background:#161616;color:#fff}
.fx-tel .fx-campo{border:0;background:transparent;outline:none;min-width:0}
.fx-ayuda-campo{margin:-6px 0 0;font-size:12px;color:var(--fx-tenue)}
/* el buscador es UN recuadro: la lupa, las etiquetas de lo que se eligió (que no está entre los botones) y el campo para escribir, todo adentro */
.fx-buscar{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:42px;padding:5px 12px 5px 40px;border:1px solid var(--fx-linea);border-radius:12px;background:rgba(255,255,255,.03);cursor:text}
.fx-buscar:focus-within{outline:2px solid var(--bronce);outline-offset:1px}
.fx-buscar>svg{position:absolute;left:14px;top:21px;width:18px;height:18px;transform:translateY(-50%);color:var(--texto-suave);pointer-events:none}
.fx-buscar__campo{flex:1 1 110px;min-width:0;height:30px;padding:0;border:0;background:transparent;outline:none;font-size:16px}
.fx-buscar__campo::placeholder{color:rgba(255,255,255,.34)}
.fx-etq{display:inline-flex;align-items:center;gap:2px;height:28px;padding:0 3px 0 10px;border-radius:999px;border:1px solid var(--fx-bronce-borde);background:var(--fx-bronce-suave);font-size:12.5px;font-weight:500;line-height:1;white-space:nowrap}
.fx-etq__x{width:22px;height:22px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:rgba(255,255,255,.75);font-size:16px;line-height:1}
@media (hover:hover){.fx-etq__x:hover{background:rgba(255,255,255,.14);color:#fff}}
/* sugerencias del buscador: lista chica pegada al campo, del mismo ancho (no ocupa la pantalla); abre arriba si abajo no hay lugar */
.fx-sug{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;margin:0;padding:4px;list-style:none;max-height:168px;overflow-y:auto;overscroll-behavior:contain;
  border:1px solid var(--fx-linea-fuerte);border-radius:12px;background:#161616;box-shadow:0 14px 30px -10px rgba(0,0,0,.85)}
.fx-sug--arriba{top:auto;bottom:calc(100% + 6px)}
.fx-sug li{padding:7px 11px;border-radius:8px;font-size:13.5px;line-height:1.25;cursor:pointer}
.fx-sug li[aria-selected="true"]{background:var(--fx-bronce-suave)}
@media (hover:hover){.fx-sug li:hover{background:var(--fx-bronce-suave)}}
.fx-sug__nuevo{color:var(--texto-suave)}
.fx-error{margin:0;font-size:13px;color:var(--error)}
.fx-error:empty{display:none}
.fx-privacidad{margin:0;font-size:12px;color:var(--fx-tenue)}
.fx-privacidad a{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3)}

/* barras deslizables: el número grande en bronce */
.fx-cifra{display:block;font-family:var(--tipo-nombre);font-weight:500;font-size:clamp(28px,8vw,34px);line-height:1.1;color:var(--bronce);font-variant-numeric:tabular-nums;text-align:center;margin-top:4px}
.fx-cifra.fx-late{animation:fx-late .18s ease}
@keyframes fx-late{50%{transform:scale(1.04)}}
.fx-rango{-webkit-appearance:none;appearance:none;width:100%;height:32px;background:transparent;margin:0}
.fx-rango::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--bronce) 0 var(--pct,50%),rgba(255,255,255,.14) var(--pct,50%) 100%)}
.fx-rango::-moz-range-track{height:6px;border-radius:3px;background:rgba(255,255,255,.14)}
.fx-rango::-moz-range-progress{height:6px;border-radius:3px;background:var(--bronce)}
.fx-rango::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:#fff;border:3px solid var(--bronce);box-shadow:0 4px 14px rgba(0,0,0,.5)}
.fx-rango::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--bronce);box-shadow:0 4px 14px rgba(0,0,0,.5)}
.fx-rango:focus-visible{outline:2px solid var(--bronce);outline-offset:4px;border-radius:6px}
.fx-rango:disabled{opacity:.35}
.fx-extremos{display:flex;justify-content:space-between;margin-top:-6px;font-size:12px;color:var(--fx-tenue);font-variant-numeric:tabular-nums}
.fx-extremos span{max-width:46%}
.fx-extremos span:last-child{text-align:right}

/* pie de la tarjeta: "← Atrás" a la izquierda; Saltar / Continuar / Enviar a la derecha */
.fx-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;flex-wrap:wrap}
.fx-pie__der{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.fx-enlace{background:none;border:0;padding:6px 2px;font-size:13px;color:var(--texto-suave);text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:3px}
@media (hover:hover){.fx-enlace:hover{color:var(--texto)}}
.fx-enlace--atras{text-decoration:none}
.fx-boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:0 14px;border-radius:12px;
  border:1px solid var(--fx-bronce-borde);background:rgba(166,124,69,.2);color:var(--texto);font-size:13.5px;font-weight:600;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 24px -14px rgba(0,0,0,.8);transition:background-color .15s ease,transform .1s ease,opacity .15s ease}
@media (hover:hover){.fx-boton:hover{background:rgba(166,124,69,.3)}}
.fx-boton:active{transform:scale(.98)}
.fx-boton:disabled{opacity:.4;cursor:default}
.fx-boton--suave{border-color:var(--fx-linea);background:var(--btn-fondo);font-weight:500}
@media (hover:hover){.fx-boton--suave:hover{background:var(--btn-hover)}}
.fx-boton--ancho{width:100%;max-width:280px}

/* pantalla final: check dorado que se dibuja */
.fx-exito{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:10px 0 4px}
.fx-exito svg{width:76px;height:76px;fill:none;stroke:var(--bronce);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.fx-exito circle{stroke-dasharray:183;stroke-dashoffset:183;animation:fx-trazo .6s ease forwards}
.fx-exito path{stroke-dasharray:40;stroke-dashoffset:40;animation:fx-trazo .35s .5s ease forwards}
@keyframes fx-trazo{to{stroke-dashoffset:0}}
.fx-exito .fx-pregunta{font-size:24px;text-align:center}
.fx-exito p{margin:0;color:var(--texto-suave);max-width:34ch}
.fx-resumen{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.fx-resumen span{padding:4px 10px;border-radius:999px;border:1px solid var(--fx-linea);font-size:12.5px;color:var(--texto-suave)}
.fx-sinjs{margin:24px auto;max-width:460px;text-align:center;color:var(--texto-suave)}

@media (prefers-reduced-motion:reduce){
  .fx *,.fx *::before,.fx *::after{animation:none!important;transition:none!important}
  .fx-exito circle,.fx-exito path{stroke-dashoffset:0}
}