:root{
    --navy:#0A1626;--ink:#16202f;--gold:#c6a664;--gold-2:#d9c290;--gold-deep:#9c7f45;
    --ivory:#f6f2ea;--muted:#5d6675;--line:rgba(198,166,100,.34);
    --serif:'Cormorant Garamond',Georgia,serif;--sans:'Jost',-apple-system,sans-serif;
    --gold-grad:linear-gradient(160deg,#f0dfb0,#c6a664 45%,#9c7f45 78%,#e6cf9c);
    /* El dorado de marca sobre marfil da 3,4:1 y no alcanza el 4,5:1 exigido.
       Este es el mismo color un paso mas oscuro: 5,0:1. Solo para texto pequeno. */
    --oro-texto:#7d6430;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);background:var(--ivory);color:#1d2634;font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip}
  img{display:block;max-width:100%}
  a{text-decoration:none;color:inherit}
  h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.1;letter-spacing:.01em}
  .wrap{max-width:1200px;margin:0 auto;padding:0 34px}
  .overline{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--oro-texto)}
  .overline.l{color:var(--gold-2)}
  .btn{display:inline-block;font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:15px 34px;border:1px solid var(--gold);color:var(--gold-deep);background:transparent;cursor:pointer;transition:.35s;border-radius:2px}
  .btn:hover{background:var(--gold);color:#fff}
  /* Relieve real (Nivel 2 aprobado): sombra con luz interior arriba y sombra
     interior abajo, mas un destello diagonal que cruza cada 6,5s. El destello se
     apaga solo con el resto de las animaciones en @media(prefers-reduced-motion). */
  .btn.solid{background:var(--gold-grad);color:#231b09;border:none;position:relative;overflow:hidden;
    box-shadow:0 12px 30px rgba(140,105,40,.32),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(90,66,20,.3)}
  .btn.solid::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);
    animation:ra-destello 6.5s ease-in-out infinite}
  @keyframes ra-destello{0%,72%{left:-70%}86%,100%{left:135%}}
  .btn.solid:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 16px 38px rgba(140,105,40,.4),inset 0 1px 0 rgba(255,255,255,.65)}
  .btn.light{border-color:rgba(246,242,234,.5);color:var(--ivory)}
  .btn.light:hover{background:var(--ivory);color:var(--navy)}

  /* NAV */
  /* Antes esta barra era transparente hasta el primer scroll: el texto vivia solo
     del contraste del propio hero. Un velo tenue + desenfoque desde el arranque
     (Nivel 2 aprobado) le da legibilidad sin competir con .scrolled, que sigue
     ganando en cuanto el hero deja de estar detras. */
  header{position:fixed;top:0;left:0;right:0;z-index:100;transition:.4s;padding:20px 0;background:linear-gradient(180deg,rgba(10,22,38,.55),transparent);backdrop-filter:blur(3px)}
  header.scrolled{background:rgba(10,22,38,.92);backdrop-filter:blur(10px);padding:12px 0;box-shadow:0 1px 0 rgba(198,166,100,.2)}
  nav{display:flex;align-items:center;justify-content:space-between}
  nav .brand{display:flex;align-items:center;gap:16px;color:var(--ivory)}
  /* Monograma real de marca (Gerencia rechazo el medallon dibujado con CSS):
     imagen horizontal ~3,16:1, width/height reales para que el navegador
     reserve el hueco antes de que la imagen cargue y no salte la maqueta. */
  nav .brand .mk{height:32px;width:auto;flex-shrink:0;display:block;filter:drop-shadow(0 2px 10px rgba(6,13,23,.55))}
  /* Filete vertical del mismo patron usado en el hero (.hero .tag, .hero-datos):
     separa el monograma del nombre completo sin inventar un motivo nuevo. */
  nav .brand .tx{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-2);line-height:1.4;
    border-left:1px solid rgba(198,166,100,.32);padding-left:14px}
  nav .links{display:flex;gap:30px;align-items:center}
  nav .links a{color:#e7ecf2;font-size:12.5px;letter-spacing:.08em;position:relative;padding:4px 0}
  nav .links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:.3s}
  nav .links a:hover::after{width:100%}
  nav .right{display:flex;align-items:center;gap:18px}
  .lang{display:flex;gap:6px;align-items:center;color:#c9d1dc;font-size:11px;letter-spacing:.1em}
  .lang button{background:none;border:none;color:#8a95a4;cursor:pointer;font-family:var(--sans);font-size:11px;letter-spacing:.1em;padding:2px 4px}
  .lang button.on{color:var(--gold-2);font-weight:500}
  .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none}
  .burger span{width:24px;height:1.5px;background:var(--ivory);display:block}

  /* HERO */
  /* Marcador borroso incrustado (base64, ~228 B): el poster (189 KB) tarda en llegar
     y el .scrim ya se pinto, asi que sin esto se ve un rectangulo negro antes de la foto.
     Con esto la transicion es "borroso -> nitido", no "negro -> foto".
     OJO: esto obliga a que vercel.json permita "data:" en la directiva img-src de la
     Content-Security-Policy. Si se quita el marcador, se puede quitar tambien ese permiso;
     si se quita el permiso sin quitar el marcador, vuelve el rectangulo negro. */
  .hero{position:relative;height:100vh;min-height:620px;overflow:hidden;display:flex;align-items:center;background-image:url(data:image/webp;base64,UklGRqIAAABXRUJQVlA4IJYAAADQBgCdASooABsAPp0+mkmloyIhMBqoALATiWMAuzNDEXyZjc/6h16rk/QSoWg3kPYlqKLc5yt3q0WSwXEqcNAA/IpdPMRUR8cun+i9KzH57xyOtoIJEv8snKgl2E64bH2zh2TdG8CxzutNB8IkBZ5rZUud6RB+vB73jvxy5tud7ymnw52WpibZCLlHZkzlBAOVEvE3AAA=);background-size:cover;background-position:center}
  .hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  /* Velo diagonal (Nivel 2 aprobado): el degradado plano de antes aplastaba la luz
     calida del atardecer del video. Este oscurece en diagonal solo donde vive el
     texto (izquierda) y deja respirar el cielo (derecha). */
  .hero .scrim{position:absolute;inset:0;background:
    linear-gradient(100deg,rgba(10,22,38,.94) 0%,rgba(10,22,38,.85) 24%,rgba(10,22,38,.54) 44%,rgba(10,22,38,.16) 64%,rgba(10,22,38,.05) 100%),
    linear-gradient(180deg,rgba(10,22,38,.5) 0%,transparent 26%,transparent 58%,rgba(10,22,38,.82) 100%)}
  /* Grano y filete van sobre el video, nunca lo sustituyen (el video sigue
     siendo el fondo real; estas son capas decorativas encima). */
  .hero .grano{position:absolute;inset:0;z-index:1;opacity:.16;mix-blend-mode:overlay;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
  .hero .marco{position:absolute;inset:clamp(14px,2.4vw,34px);z-index:1;border:1px solid rgba(198,166,100,.28);pointer-events:none}
  .hero .lema-lateral{position:absolute;z-index:2;right:clamp(20px,3vw,48px);top:50%;transform:translateY(-50%);
    writing-mode:vertical-rl;font-size:8.5px;letter-spacing:.4em;text-transform:uppercase;color:rgba(198,166,100,.5);pointer-events:none}
  .hero .z{position:relative;z-index:2;color:var(--ivory);width:100%}
  .hero .wrap.hero-grid{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center}
  .hero .overline{display:flex;align-items:center;gap:18px}
  .hero .overline::after{content:"";height:1px;flex:0 0 100px;background:linear-gradient(90deg,var(--gold),transparent)}
  .hero h1{font-size:clamp(44px,6.2vw,100px);color:#fbf7ee;line-height:.96;letter-spacing:-.02em;max-width:14ch;
    text-shadow:0 3px 40px rgba(10,22,38,.55)}
  /* El degradado se aplica a CADA palabra, no al <em> que las envuelve.
     background-clip:text solo recorta el texto de la propia caja: si el degradado
     vive en el <em> y dentro hay spans por palabra, esos spans heredan
     color:transparent sin fondo que recortar y la frase entera se vuelve invisible.
     Ocurrio de verdad: la cursiva desaparecio del hero al aplicar el Nivel 2. */
  .hero h1 em{font-style:italic;font-weight:400}
  .hero h1 em .pal{background:linear-gradient(96deg,#f7ead0,#e0c795 46%,var(--gold));
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 2px 4px rgba(10,22,38,.9))}
  /* Entrada palabra por palabra del titular (Nivel 2 aprobado). */
  .hero h1 .pal{display:inline-block;opacity:0;transform:translateY(38px) rotate(2deg);animation:ra-palabra 1.3s cubic-bezier(.16,1,.3,1) forwards}
  @keyframes ra-palabra{to{opacity:1;transform:none}}
  .hero .tag{margin-top:20px;font-size:16px;letter-spacing:.04em;color:#dbe1ea;max-width:44ch;font-weight:300;
    border-left:1px solid rgba(198,166,100,.34);padding-left:22px}
  .hero .cta-row{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap}
  /* Entrada escalonada del resto del hero: mismos tiempos que las palabras del
     titular (arrancan justo despues), para que la escena entre como una sola ola. */
  .hero .sube{opacity:0;transform:translateY(28px);animation:ra-sube 1.3s cubic-bezier(.16,1,.3,1) forwards}
  .hero .d2{animation-delay:.45s}
  .hero .d5{animation-delay:1.3s}
  .hero .d6{animation-delay:1.6s}
  @keyframes ra-sube{to{opacity:1;transform:none}}
  /* Columna de datos a la derecha (Nivel 2 aprobado). Los numeros "8" y "$135" en
     el HTML son un respaldo visible (misma logica que #grid-respaldo mas abajo):
     pintarDatosHero() en app.js los recalcula de verdad desde datos/residencias.mjs
     y datos/temporadas.mjs en cuanto el modulo corre, para no repetir cifras a mano
     fuera de esas fuentes. */
  /* Campo oscuro propio: esta columna cae sobre la parte mas clara del cielo y
     sin el los tres numeros se lavan hasta ser ilegibles. Comprobado en pantalla.
     El degradado se apaga hacia la izquierda para no cortar la foto con un borde. */
  .hero-datos{border-left:1px solid rgba(198,166,100,.24);padding:26px 30px 26px 34px;
    display:flex;flex-direction:column;gap:28px;
    background:linear-gradient(270deg,rgba(10,22,38,.86) 0%,rgba(10,22,38,.68) 55%,rgba(10,22,38,.12) 100%);
    backdrop-filter:blur(2px)}
  .hero-datos .d .n{font-family:var(--serif);font-weight:500;font-size:46px;line-height:1;
    background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .hero-datos .d .e{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:rgba(246,242,234,.55);margin-top:8px}
  @media(max-width:1000px){
    .hero .wrap.hero-grid{grid-template-columns:1fr}
    .hero-datos,.hero .lema-lateral{display:none}
  }

  /* BOOKING BAR */
  /* Fondo marfil (no blanco puro), filete dorado superior y sombra mas profunda
     y difusa: la misma direccion hotelera del hero, aplicada al panel. */
  .booking{position:relative;z-index:5;margin:-56px auto 0;max-width:1040px;background:var(--ivory);
    border:1px solid rgba(198,166,100,.22);border-top:3px solid var(--gold);border-radius:4px;
    box-shadow:0 40px 80px rgba(10,22,38,.16),0 12px 30px rgba(10,22,38,.1);
    padding:26px 28px;display:grid;grid-template-columns:1.4fr 1fr 1fr .9fr auto;gap:18px;align-items:end}
  .booking .f{display:flex;flex-direction:column;gap:7px}
  .booking label{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--oro-texto);font-weight:500}
  /* Filete inferior fino que se dora y engrosa al enfocar, en la misma curva
     lenta que el resto del rediseno (nunca un salto instantaneo). */
  .booking select,.booking input{border:none;border-bottom:1px solid rgba(29,38,52,.18);background:transparent;
    padding:9px 4px;font-family:var(--sans);font-size:14px;color:var(--ink);font-weight:300;
    transition:border-color .5s cubic-bezier(.16,1,.3,1),border-bottom-width .5s cubic-bezier(.16,1,.3,1)}
  .booking select:focus,.booking input:focus{outline:none;border-color:var(--gold);border-bottom-width:2px}
  /* Flecha propia y discreta para el selector de residencia, en vez de la
     flecha nativa del sistema (unica exigencia de la instruccion original;
     los campos de fecha/numero conservan sus controles nativos intactos). */
  .booking select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c6a664' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 3px center;padding-right:18px}
  /* La regla de arriba (0,2,1) le gana a :focus-visible generico (0,1,0) y lo deja sin anillo.
     "form.booking" suma un elemento mas de especificidad (0,2,2) sin depender del orden en
     el archivo, asi que gana siempre pase lo que pase con el resto de la hoja. Solo pisa
     "outline": el borde dorado de "border-color" ya lo pone la regla :focus de arriba. */
  form.booking select:focus-visible,form.booking input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  .booking .go{white-space:nowrap;padding:17px 38px}
  /* Misma curva del hero (Nivel 2 aprobado) para la entrada del panel, reutilizando
     el mecanismo .reveal + IntersectionObserver ya existente (nada de JS nuevo). */
  .booking.reveal{transition:1s cubic-bezier(.16,1,.3,1)}
  .est{max-width:1040px;margin:14px auto 0;text-align:center;color:var(--muted);font-size:13px;min-height:20px}
  .est b{color:var(--ink);font-family:var(--serif);font-size:17px}

  section{padding:96px 0}
  .sec-head{text-align:center;margin-bottom:52px}
  .sec-head h2{font-size:44px;color:var(--ink);margin-top:8px}
  .sec-head p{color:var(--muted);max-width:60ch;margin:14px auto 0}

  /* intro promise */
  /* Degradado sutil (no color liso) + marca de agua enorme, casi imperceptible.
     Los tres tonos se midieron contra --oro-texto y --muted: el mas oscuro
     (#f0ecdf) sigue dando 4,75:1 y 4,90:1 -- por encima del minimo 4,5:1. */
  .promise{background:linear-gradient(155deg,#fbf8f1 0%,#f5f0e6 55%,#f0ecdf 100%);position:relative;overflow:hidden;padding-bottom:64px}
  .promise .marca-agua{position:absolute;right:-90px;top:50%;transform:translateY(-50%);width:640px;height:auto;
    opacity:.05;pointer-events:none;z-index:0;filter:grayscale(.15)}
  .promise .in{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1}
  .promise .cita{padding-right:16px}
  .promise .lead{font-family:var(--serif);font-size:30px;line-height:1.42;color:#26313f;font-weight:400}
  .promise .lead em{font-style:italic;color:var(--gold-deep)}
  /* Filete vertical que separa la cita de los puntos (mismo motivo del resto
     del sitio: un filete de 1px en rgba dorada tenue, nunca decorativo per se). */
  .why-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px 26px;border-left:1px solid var(--line);padding-left:48px}
  /* El numero va ENCIMA del texto, no al lado. Puesto en fila se comia el ancho
     de la columna y dejaba parrafos de tres palabras por linea: "Energia solar,
     planta, tanques de agua y Starlink" caia en cinco lineas. Visto en pantalla. */
  .why{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
  /* Los numeros 01-04 son el elemento de diseno, no una etiqueta: grandes, en
     serif, en degradado dorado, con presencia real en la composicion. */
  .why .r{font-family:var(--serif);font-weight:300;font-size:52px;line-height:.9;margin-bottom:10px;
    background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .why-grid .why:nth-child(3),.why-grid .why:nth-child(4){border-top:1px solid var(--line);padding-top:26px}
  .why h4{font-size:20px;color:var(--ink);margin:6px 0 5px}
  .why p{font-size:13.5px;color:var(--muted)}
  /* Entrada escalonada al desplazar: mismo mecanismo .reveal + IntersectionObserver
     que el resto del sitio (observe() en app.js), solo con un retraso creciente
     por elemento para que los cuatro puntos aparezcan uno tras otro. */
  .why-grid .why:nth-child(1){transition-delay:0s}
  .why-grid .why:nth-child(2){transition-delay:.12s}
  .why-grid .why:nth-child(3){transition-delay:.24s}
  .why-grid .why:nth-child(4){transition-delay:.36s}

  /* residences */
  .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
  /* Respaldo de #grid (ver index.html): solo se ve un instante mientras carga
     el modulo, o si el modulo falla del todo. Discreto a proposito, para que
     no desentone si llega a quedarse visible. */
  .grid-respaldo{grid-column:1/-1;border:1px solid var(--line);border-radius:3px;padding:26px 28px;color:var(--muted);font-size:14px;line-height:1.7}
  .grid-respaldo a{color:var(--oro-texto)}
  /* Piezas inmersivas, no rectangulos planos: la foto manda (aspect-ratio mas
     alto que antes), el zoom es deliberadamente lento (1.4s, misma curva del
     hero) y un filete dorado se revela desde la izquierda al pasar el mouse
     -- ::before en vez de border-top para no mover ni un pixel el layout. */
  .card{background:#fff;border:1px solid rgba(29,38,52,.08);border-radius:3px;overflow:hidden;cursor:pointer;
    transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s cubic-bezier(.16,1,.3,1);
    display:flex;flex-direction:column;text-align:left;font:inherit;width:100%;position:relative}
  /* Firefox le mete a los <button> un borde punteado y relleno propios via este
     pseudo-elemento historico; el reset global *{margin:0;padding:0} no lo toca
     porque no es un elemento real del DOM. */
  .card::-moz-focus-inner{border:0;padding:0}
  .card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold-grad);
    transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.16,1,.3,1);z-index:2}
  .card:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(10,22,38,.16)}
  .card:hover::before,.card:focus-visible::before{transform:scaleX(1)}
  .card .ph{position:relative;aspect-ratio:4/3.4;overflow:hidden}
  .card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
  .card:hover .ph img{transform:scale(1.08)}
  /* Velo tenue permanente al pie de la foto: separa la imagen del borde de la
     tarjeta y sube el contraste del numero "No 0X" sin depender solo de su
     propio fondo oscuro. */
  .card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(10,22,38,.28) 100%);pointer-events:none}
  .card .ph .no{position:absolute;top:16px;left:16px;z-index:1;background:rgba(10,22,38,.72);color:var(--gold-2);
    font-family:var(--serif);font-style:italic;font-weight:500;font-size:16px;padding:5px 14px;border-radius:2px;backdrop-filter:blur(4px)}
  .card .ph .flag{position:absolute;top:16px;right:16px;z-index:1;background:var(--gold-grad);color:#231b09;font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:5px 11px;border-radius:2px}
  .card .bd{padding:24px 26px;flex:1;display:flex;flex-direction:column}
  .card .bd .loc{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
  .card .bd h3{font-size:29px;color:var(--ink);margin:5px 0 6px}
  /* Cursiva dorada legible: color solido (no degradado con background-clip)
     a proposito. El hero SI usa degradado en .pal porque cada palabra es su
     propio span de una sola caja; aqui .cc es una sola caja de texto, pero
     --oro-texto ya mide 5,0:1 sobre blanco (verificado) y un degradado mas
     claro como el del hero bajaria de ese minimo. Ver aviso en el brief:
     mismo bug (texto invisible) ya ocurrio una vez en el hero. */
  .card .bd .cc{font-family:var(--serif);font-style:italic;color:var(--oro-texto);font-size:16px}
  .card .bd .sp{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 16px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .card .bd .sp span{border:1px solid var(--line);padding:4px 9px;border-radius:2px}
  .card .bd .ft{margin-top:auto;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(29,38,52,.08);padding-top:14px}
  .card .bd .price{font-family:var(--serif);color:var(--ink);font-size:16px}
  .card .bd .price b{font-size:24px}
  .card .bd .price small{color:var(--muted);font-family:var(--sans);font-size:11px}
  .card .bd .view{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--oro-texto)}

  /* Entrada escalonada al desplazar (mismo mecanismo .reveal + IntersectionObserver
     de observe() en app.js, mismo patron que .why-grid): cada tarjeta se retrasa
     un poco mas que la anterior para que la coleccion entre en ola, no de golpe. */
  .grid .card{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),
    box-shadow .6s cubic-bezier(.16,1,.3,1)}
  .grid .card:nth-child(1){transition-delay:0s}
  .grid .card:nth-child(2){transition-delay:.08s}
  .grid .card:nth-child(3){transition-delay:.16s}
  .grid .card:nth-child(4){transition-delay:.24s}
  .grid .card:nth-child(5){transition-delay:.32s}
  .grid .card:nth-child(6){transition-delay:.4s}
  .grid .card:nth-child(7){transition-delay:.48s}
  .grid .card:nth-child(8){transition-delay:.56s}

  /* packages */
  .packs{background:var(--navy);color:#dfe6ee}
  .packs .sec-head h2{color:#fbf7ee}
  .packs .sec-head p{color:#a9b4c2}
  .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  /* Elevacion (antes era un bloque plano con numero pequeno + borde parejo):
     filete dorado superior que se completa al pasar el mouse (::before, mismo
     truco que .card::before en residencias), numeral como pieza de diseno real
     -- no una etiqueta -- y una linea divisoria entre el numeral y el titulo
     para separar "orden" de "contenido". */
  .pack{border:1px solid rgba(198,166,100,.16);border-radius:4px;padding:40px 32px 34px;
    background:rgba(255,255,255,.02);position:relative;overflow:hidden;
    transition:background .5s cubic-bezier(.16,1,.3,1),border-color .5s cubic-bezier(.16,1,.3,1),
      transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1)}
  .pack::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold-grad);
    transform:scaleX(.18);transform-origin:left;transition:transform .7s cubic-bezier(.16,1,.3,1)}
  .pack:hover{background:rgba(198,166,100,.07);border-color:rgba(198,166,100,.4);
    transform:translateY(-6px);box-shadow:0 24px 50px rgba(0,0,0,.28)}
  .pack:hover::before{transform:scaleX(1)}
  /* El numeral romano (I/II/III) pasa de una etiqueta de 17px a un elemento de
     diseno real en serif cursiva y degradado dorado, con presencia propia --
     misma logica que .why .r en la seccion "Por que R&A". */
  .pack .r{font-family:var(--serif);font-style:italic;font-weight:300;font-size:64px;line-height:.85;
    display:block;margin-bottom:8px;background:var(--gold-grad);-webkit-background-clip:text;
    background-clip:text;color:transparent;transition:transform .5s cubic-bezier(.16,1,.3,1)}
  .pack:hover .r{transform:translateX(5px)}
  .pack h3{font-size:27px;color:#fbf7ee;margin:0 0 12px;padding-top:16px;border-top:1px solid rgba(198,166,100,.22)}
  .pack p{font-size:14px;color:#a9b4c2;margin-bottom:16px}
  .pack ul{list-style:none}
  .pack li{font-size:13.5px;color:#c3ccd8;padding-left:20px;position:relative;margin-bottom:8px}
  .pack li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border:1px solid var(--gold);transform:rotate(45deg)}
  /* El vehiculo dejo de ser una vineta muda: ahora enlaza a su propia pieza
     (#vehiculos). Filete inferior tenue que se dora al pasar el mouse, en vez
     de un subrayado generico -- mismo lenguaje que nav .links a::after. */
  .pack-link{color:#fbf7ee;border-bottom:1px solid rgba(198,166,100,.4);transition:border-color .35s}
  .pack-link:hover{border-color:var(--gold)}
  /* Entrada escalonada al desplazar (mismo mecanismo .reveal + IntersectionObserver
     de observe() en app.js, mismo patron que .grid .card / .why-grid): la
     especificidad de ".pgrid .pack" (0,2,0) le gana a ".reveal" (0,1,0) y por
     eso puede sumar transform+box-shadow de hover sin perder el fundido de
     entrada que trae .reveal. */
  .pgrid .pack{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),
    background .5s cubic-bezier(.16,1,.3,1),border-color .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1)}
  .pgrid .pack:nth-child(1){transition-delay:0s}
  .pgrid .pack:nth-child(2){transition-delay:.14s}
  .pgrid .pack:nth-child(3){transition-delay:.28s}

  /* vehicles */
  /* Pieza liderada por tipografia (ver comentario en index.html): sin foto real,
     el nombre del modelo y el año son el elemento de diseno. Fondo ivory para
     que la seccion respire distinto de .packs (navy) justo antes -- el mismo
     ritmo de alternancia editorial que ya usan promise/residencias/packs. */
  .vehicles{background:var(--ivory)}
  .vgrid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
  .vcar{background:#fff;border:1px solid rgba(29,38,52,.08);border-radius:4px;overflow:hidden;
    box-shadow:0 20px 50px rgba(10,22,38,.08);
    transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s cubic-bezier(.16,1,.3,1)}
  .vcar:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(10,22,38,.16)}
  /* HUECO PARA LA FOTO REAL: hoy este bloque es 100% tipografico -- sin foto de
     stock ni generada por IA (restriccion de Gerencia, ver brief). Cuando exista
     la fotografia real de cada modelo, agregar UNA sola linea a cada selector de
     abajo, por ejemplo:
       .vph[data-vehiculo="corolla"]{background-image:url('/img/corolla-2026.webp');background-size:cover;background-position:center}
     El numeral, el año y el nombre ya llevan z-index y el velo (.vph::after) ya
     esta puesto para que seguir leyendose encima de una foto real sin tocar nada mas. */
  .vph{position:relative;aspect-ratio:16/10;display:flex;flex-direction:column;justify-content:flex-end;
    padding:26px 28px;overflow:hidden}
  .vph[data-vehiculo="corolla"]{background:linear-gradient(155deg,#101b2c 0%,#0a1626 55%,#16202f 100%)}
  .vph[data-vehiculo="4runner"]{background:linear-gradient(155deg,#16202f 0%,#0a1626 55%,#101b2c 100%)}
  .vph::before{content:"";position:absolute;inset:clamp(10px,2vw,20px);border:1px solid rgba(198,166,100,.24);pointer-events:none;z-index:1}
  .vph::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,22,38,.5) 0%,transparent 60%);pointer-events:none}
  /* Numeral gigante y muy tenue de fondo, puramente decorativo (textura, no
     informacion): igual que .why .r pero mucho mas grande y translucido, para
     dar presencia sin competir con el nombre real del modelo. */
  .vph .vnum{position:absolute;top:6px;left:22px;z-index:0;font-family:var(--serif);font-style:italic;
    font-weight:300;font-size:132px;line-height:1;color:rgba(198,166,100,.12);pointer-events:none}
  .vph-yr{position:relative;z-index:2;font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-2)}
  .vph-nm{position:relative;z-index:2;font-family:var(--serif);font-style:italic;font-weight:500;
    font-size:clamp(32px,4.4vw,46px);line-height:1.05;margin-top:8px;
    background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .vbd{padding:26px 28px 30px}
  .vficha{margin-bottom:22px}
  .vfila{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;
    border-bottom:1px solid rgba(29,38,52,.08)}
  .vfila:first-child{border-top:1px solid rgba(29,38,52,.08)}
  .vfila dt{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-texto);font-weight:500;flex-shrink:0}
  .vfila dd{font-size:13.5px;color:var(--ink);text-align:right}
  .vbd .btn.solid{width:100%;text-align:center}
  .vnota{margin-top:22px;font-size:12.5px;color:var(--muted);font-style:italic;text-align:center}
  /* Entrada escalonada, mismo mecanismo que .pgrid .pack de arriba. */
  .vgrid .vcar{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),
    box-shadow .6s cubic-bezier(.16,1,.3,1)}
  .vgrid .vcar:nth-child(1){transition-delay:0s}
  .vgrid .vcar:nth-child(2){transition-delay:.14s}

  /* trust (confianza) */
  /* Sustituye a los testimonios que pedia el brief original: sin resenas reales
     que mostrar, la prueba social es reemplazada por hechos verificables. Navy
     como .packs (misma paleta de "seccion oscura" del sitio) para romper la
     alternancia marfil-marfil que dejarian .vehicles y .owners si quedaran
     seguidas -- ver comentario en index.html. */
  .trust{background:var(--navy);color:#dfe6ee}
  .trust .sec-head h2{color:#fbf7ee}
  .trust .sec-head p{color:#a9b4c2}
  .tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  /* Misma construccion que .pack (filete superior que se completa al pasar el
     mouse, numeral en serif cursiva con degradado dorado): la seccion de
     confianza usa el mismo lenguaje que "Experiencias & paquetes", no uno nuevo. */
  .tcard{border:1px solid rgba(198,166,100,.16);border-radius:4px;padding:36px 30px 32px;
    background:rgba(255,255,255,.02);position:relative;overflow:hidden;
    transition:background .5s cubic-bezier(.16,1,.3,1),border-color .5s cubic-bezier(.16,1,.3,1),
      transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1)}
  .tcard::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold-grad);
    transform:scaleX(.18);transform-origin:left;transition:transform .7s cubic-bezier(.16,1,.3,1)}
  .tcard:hover{background:rgba(198,166,100,.07);border-color:rgba(198,166,100,.4);
    transform:translateY(-6px);box-shadow:0 24px 50px rgba(0,0,0,.28)}
  .tcard:hover::before{transform:scaleX(1)}
  .tcard .tr{font-family:var(--serif);font-style:italic;font-weight:300;font-size:52px;line-height:.85;
    display:block;margin-bottom:14px;background:var(--gold-grad);-webkit-background-clip:text;
    background-clip:text;color:transparent}
  .tcard h3{font-size:23px;color:#fbf7ee;margin:0 0 14px}
  .tcard p{font-size:14px;color:#a9b4c2}
  .tcard ul{list-style:none}
  .tcard li{font-size:13.5px;color:#c3ccd8;padding-left:20px;position:relative;margin-bottom:8px}
  .tcard li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border:1px solid var(--gold);transform:rotate(45deg)}
  /* Ficha legal: mismo patron dt/dd que .vfila (residencias/vehiculos), en su
     variante oscura -- son datos comprobables (RIF, sede), no una lista suelta. */
  .tficha{margin:0}
  .tfila{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;
    border-bottom:1px solid rgba(198,166,100,.16)}
  .tfila:first-child{border-top:1px solid rgba(198,166,100,.16)}
  .tfila dt{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2);font-weight:500;flex-shrink:0}
  .tfila dd{font-size:13px;color:#dfe6ee;text-align:right}
  .tpago{margin-top:30px;text-align:center;font-size:12.5px;color:#a9b4c2}
  /* Entrada escalonada, mismo mecanismo que .pgrid .pack / .vgrid .vcar. */
  .tgrid .tcard{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),
    background .5s cubic-bezier(.16,1,.3,1),border-color .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1)}
  .tgrid .tcard:nth-child(1){transition-delay:0s}
  .tgrid .tcard:nth-child(2){transition-delay:.14s}
  .tgrid .tcard:nth-child(3){transition-delay:.28s}

  /* owners */
  .owners .in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  /* Filete superior dorado, mismo gesto que .booking: es el otro formulario con
     peso propio del sitio (aqui entra el inventario nuevo), asi que merece la
     misma tapa. La sombra difusa lo levanta del fondo marfil, igual que .vcar. */
  .owners .form{background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:4px;
    padding:38px 34px;box-shadow:0 30px 70px rgba(10,22,38,.08)}
  .owners .form .row{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
  .owners .form label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--oro-texto);font-weight:500}
  /* Curva lenta al enfocar (mismo cubic-bezier que .booking): una invitacion se
     dora despacio, un tramite salta de golpe. */
  .owners .form input,.owners .form textarea{border:none;border-bottom:1px solid rgba(29,38,52,.18);background:transparent;
    padding:9px 2px;font-family:var(--sans);font-size:14px;font-weight:300;color:var(--ink);
    transition:border-color .5s cubic-bezier(.16,1,.3,1),border-bottom-width .5s cubic-bezier(.16,1,.3,1)}
  .owners .form input:focus,.owners .form textarea:focus{outline:none;border-color:var(--gold);border-bottom-width:2px}
  /* Mismo problema y misma solucion que en .booking: "form.form" agrega el elemento
     que falta para superar (0,3,1) con (0,3,2), sin importar el orden de la hoja. */
  .owners form.form input:focus-visible,.owners form.form textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  .prop-fallback:empty{display:none}
  .prop-fallback{margin-top:16px}
  .prop-fallback p{font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .prop-fallback .btn{padding:9px 20px}
  /* Las tres cifras son elemento de diseno, no nota al pie: mismo tratamiento en
     degradado dorado que los numerales del resto del sitio (.why .r, .pack .r,
     .tcard .tr), separadas por filetes verticales -- igual criterio que
     .hero-datos, aplicado en fila en vez de en columna. */
  .stat-row{display:flex;margin-top:30px;border-top:1px solid var(--line);padding-top:26px}
  .stat{flex:1;padding:0 22px}
  .stat:first-child{padding-left:0}
  .stat+.stat{border-left:1px solid var(--line)}
  .stat .n{font-family:var(--serif);font-weight:500;font-size:42px;line-height:1;
    background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .stat .l{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:10px}

  /* contact / footer */
  footer{background:var(--navy);color:#aeb9c6;padding:80px 0 40px}
  .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;margin-bottom:50px}
  footer h4{color:#fbf7ee;font-size:20px;margin-bottom:14px}
  /* "reservas@ramanagementhome.com" no tiene espacios: sin overflow-wrap, un enlace
     asi de largo fija el ancho minimo de su columna del grid muy por encima de su
     1fr y desborda TODO el documento (arrastra al header fijo y saca el burger de
     la pantalla en 360px). "anywhere" cuenta para el calculo de ancho minimo del
     grid (a diferencia de "break-word"), asi que la columna por fin puede encoger. */
  footer a{color:#aeb9c6;font-size:13.5px;display:block;margin-bottom:9px;transition:.2s;overflow-wrap:anywhere}
  footer a:hover{color:var(--gold-2)}
  /* Texto plano del pie (ej. la ubicacion) con el mismo estilo visual que los
     enlaces vecinos, pero sin ser un enlace: no hay destino al que navegar. */
  footer .pie-texto{color:#aeb9c6;font-size:13.5px;display:block;margin-bottom:9px;overflow-wrap:anywhere}
  /* Mismo lockup que nav .brand (monograma + nombre separados por un filete),
     no un logo suelto: es la ultima marca que ve el visitante, merece el mismo
     tratamiento que la primera. El drop-shadow es el mismo del header. */
  footer .brand{display:flex;align-items:center;gap:16px;margin-bottom:18px}
  footer .brand .mk{height:40px;width:auto;display:block;flex-shrink:0;filter:drop-shadow(0 2px 10px rgba(6,13,23,.55))}
  footer .brand .tx{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-2);line-height:1.4;
    border-left:1px solid rgba(198,166,100,.32);padding-left:14px}
  .pay{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
  .pay span{border:1px solid var(--line);border-radius:2px;padding:5px 10px;font-size:10.5px;letter-spacing:.08em;color:var(--gold-2)}
  /* #6b7787 sobre el navy solido del footer media 3,99:1 (medido, no cumple 4,5:1).
     Mismo gris un paso mas claro: 5,07:1. */
  .fbot{border-top:1px solid rgba(198,166,100,.16);padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:#7e8a9c}

  /* modal */
  .modal{position:fixed;inset:0;z-index:200;background:rgba(6,10,18,.8);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:30px}
  .modal.on{display:flex}
  .modal .box{background:var(--ivory);max-width:960px;width:100%;max-height:90vh;overflow:auto;border-radius:4px;position:relative}
  .modal .close{position:sticky;top:0;float:right;margin:14px;z-index:3;width:40px;height:40px;border-radius:50%;background:rgba(10,22,38,.85);color:var(--ivory);border:none;font-size:20px;cursor:pointer}
  /* La ventana inmersiva: escenario grande (video cinematografico o, sin el,
     la primera foto fija) + tira de miniaturas navegable con TODAS las fotos.
     El fondo casi-negro (no navy) es el mismo truco del hero: sin el, el
     video con relacion de aspecto real deja bandas visibles antes de que
     cargue el primer frame. */
  .mstage{position:relative;aspect-ratio:16/9;background:#0b1420;overflow:hidden}
  .mstage-media,.mstage-media img,.mstage-media video{width:100%;height:100%}
  .mstage-media{position:absolute;inset:0}
  .mstage-media img,.mstage-media video{object-fit:cover;display:block}
  .mnav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
    border:none;background:rgba(10,22,38,.5);color:var(--ivory);font-size:24px;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:.4s cubic-bezier(.16,1,.3,1);z-index:2}
  .mnav:hover{background:rgba(10,22,38,.8);color:var(--gold-2)}
  .mnav.prev{left:14px}
  .mnav.next{right:14px}
  /* Tira de miniaturas: scroll horizontal propio para que a 360px no arrastre
     el ancho del documento (mismo cuidado que footer/booking). */
  .mthumbs{display:flex;gap:8px;padding:12px 14px;overflow-x:auto;background:#0b1420}
  .mthumb{flex:0 0 78px;height:52px;min-height:44px;border-radius:2px;overflow:hidden;position:relative;
    border:2px solid transparent;cursor:pointer;padding:0;background:none;opacity:.55;
    transition:opacity .4s cubic-bezier(.16,1,.3,1),border-color .4s cubic-bezier(.16,1,.3,1)}
  .mthumb img{width:100%;height:100%;object-fit:cover;display:block}
  .mthumb.on{opacity:1;border-color:var(--gold)}
  .mthumb:hover{opacity:1}
  .mthumb.video .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:13px;background:rgba(10,22,38,.4)}
  .modal .mbody{padding:32px 40px 40px}
  .modal .mbody .loc{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
  .modal .mbody h2{font-size:40px;color:var(--ink);margin:4px 0 6px}
  .modal .mbody .cc{font-family:var(--serif);font-style:italic;color:var(--oro-texto);font-size:20px;margin-bottom:14px}
  .modal .mbody .sp{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
  .modal .mbody .sp span{border:1px solid var(--line);padding:6px 12px;border-radius:2px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .modal .mbody .mprice{font-family:var(--serif);font-size:18px;color:var(--ink);margin:8px 0 20px}
  .modal .mbody .mprice b{font-size:30px}
  .nota-imagenes{font-size:11px;color:var(--muted);margin-top:10px;font-style:italic}

  .wa-float{position:fixed;right:22px;bottom:22px;z-index:90;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.25);cursor:pointer}
  .wa-float svg{width:32px;height:32px;fill:#fff}

  .reveal{opacity:0;transform:translateY(24px);transition:.8s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}

  /* Area tactil minima (44px) para elementos accionables y foco siempre visible al navegar con teclado. */
  .btn,.lang button,.burger{min-height:44px}
  :focus-visible{outline:2px solid var(--gold);outline-offset:2px}

  @media(max-width:940px){
    /* A 360px el .wrap de 34px a cada lado + lang + boton Reservar + burger no caben:
       el burger terminaba 41.7px fuera de la pantalla y era inalcanzable (overflow-x:clip
       no deja ni deslizar hasta el). Se recorta el relleno lateral y se saca el boton
       "Reservar" de la barra (el formulario de disponibilidad esta justo debajo del hero
       y el flotante de WhatsApp sigue siempre visible). */
    .wrap{padding:0 16px}
    nav .right a.btn.solid{display:none}
    nav .links{display:none}.burger{display:flex}
    /* nav es flex con 3 hijos (marca, .links, .right) que compiten por el ancho
       horizontal; sin flex-wrap, .links.abierto queda comprimido entre los otros
       dos aunque pida width:100%. Con flex-wrap y order:3 se fuerza a que marca+
       boton se queden en la primera fila y el menu caiga completo a la siguiente. */
    nav{flex-wrap:wrap}
    /* nav .links hereda align-items:center de la regla de escritorio (pensada para
       alinear verticalmente en fila); en columna ese mismo valor centra cada enlace
       como una isla de texto en vez de dejarlo ocupar el ancho. align-items:stretch
       lo corrige solo para el menu abierto, sin tocar el layout de escritorio. */
    nav .links.abierto{display:flex;flex-direction:column;align-items:stretch;gap:14px;width:100%;padding:16px 0;order:3}
    nav .links a{min-height:44px;display:flex;align-items:center}
    .hero h1{font-size:46px}.booking{grid-template-columns:1fr 1fr;gap:14px}.booking .go{grid-column:span 2}
    .promise .in,.owners .in{grid-template-columns:1fr;gap:34px}.grid,.pgrid,.fgrid,.why-grid,.vgrid,.tgrid{grid-template-columns:1fr}
    /* En una columna el filete lateral de .why-grid pierde sentido: pasa a ser
       un filete horizontal entre cada punto (el primero queda sin el, por ser
       el primero de la lista). */
    .why-grid{border-left:none;padding-left:0;padding-top:8px}
    .why-grid .why{border-top:1px solid var(--line);padding-top:22px}
    .why-grid .why:first-child{border-top:none;padding-top:0}
    .sec-head h2{font-size:32px}
    /* Flechas mas discretas y miniaturas mas pequenas a 360px: el escenario
       16/9 ya ocupa todo el ancho disponible y no sobra espacio para el
       tamano de escritorio sin desbordar. */
    .mnav{width:38px;height:38px;font-size:20px}.mnav.prev{left:8px}.mnav.next{right:8px}
    .mthumb{flex-basis:64px;height:44px}
    .fgrid{grid-template-columns:1fr 1fr}
    /* A una columna de ~146px, el lockup mk+tx en fila (mismo del header) no cabe
       sin desbordar: se apila para no repetir el bug ya conocido del correo. */
    footer .brand{flex-wrap:wrap;row-gap:8px}
    footer .brand .tx{border-left:none;padding-left:0;border-top:1px solid rgba(198,166,100,.32);padding-top:8px}
    /* Misma razon: tres cifras en fila dentro de una sola columna angosta
       desbordarian a 42px ("100%" no tiene donde partirse). */
    .stat{padding:0 12px}
    .stat .n{font-size:28px}
    /* 16px evita que iOS haga zoom al enfocar un campo */
    .booking select,.booking input,.owners .form input,.owners .form textarea{font-size:16px}
    /* Sin min-width:0 el <select> con nombres largos de residencia fuerza su
       propio ancho minimo de contenido y desborda la columna del grid
       (bug preexistente que el font-size:16px de arriba agrava). */
    .booking .f{min-width:0}
    .booking select,.booking input{width:100%}
  }

  @media(prefers-reduced-motion:reduce){
    /* "*" NO alcanza a ::before/::after (no son elementos reales del DOM), asi
       que el destello del boton (.btn.solid::after) necesita su propio selector
       aqui o seguiria brillando con el resto de las animaciones apagadas. */
    *,*::before,*::after{animation:none!important;transition:none!important}
    html{scroll-behavior:auto}
    .reveal{opacity:1;transform:none}
    /* Las animaciones de entrada del hero (Nivel 2) arrancan en opacity:0. Quitar
       solo la animacion las deja invisibles para siempre: el titular, la bajada,
       los botones y la columna de datos desaparecerian para quien activo esta
       preferencia (a menudo por vestibulopatia o migranas). Se fuerza el estado
       final explicitamente, no solo se apaga la animacion. */
    .hero .sube,.hero h1 .pal{opacity:1!important;transform:none!important}
  }