/* ============================================================================
   VERSIÓN B — EL CATÁLOGO
   La propuesta 1 terminada: portada, filtro por capacidad y una ficha por villa.
   Se mira y se elige. Sin comparación lado a lado.

   Esto es de la PLANTILLA: no lleva ni un color de cliente. Los valores de
   :root son un gris de reserva y nada más — existen sólo para que la plantilla
   sin datos no se vea rota. plataforma.js los reemplaza con los del cliente
   (MARCA.fondo, MARCA.fondoAlto, MARCA.oro, MARCA.oroClaro, MARCA.texto y
   MARCA.tinta, que salen de su datos.js) apenas carga la página.

   REGLA: fuera del bloque :root no puede aparecer ni un color escrito. Todo
   sale de una variable. Las transparencias se arman con la forma "r,g,b" que
   publica plataforma.js: rgba(var(--fondo-rgb), .88). Un cliente con fondo
   crema y texto oscuro tiene que verse bien sin tocar este archivo.
   ========================================================================== */
:root{
  --fondo:#1a1a1a;   --fondo-rgb:26,26,26;
  --alto:#242424;
  --oro:#999999;     --oro-rgb:153,153,153;
  --oro2:#bbbbbb;
  --txt:#f4f4f4;     --txt-rgb:244,244,244;
  --tinta:#1a1a1a;
  --tenue:rgba(var(--txt-rgb),.62);
  --borde:rgba(var(--txt-rgb),.14);
  /* Los dos velos son el color del texto casi transparente: sobre un fondo
     oscuro aclaran y sobre uno claro oscurecen. Un blanco fijo desaparecía
     en el cliente de fondo crema. */
  --velo:rgba(var(--txt-rgb),.05);
  --velo2:rgba(var(--txt-rgb),.1);
  /* La barra es pegajosa y el filtro se pega justo debajo. Este es el único
     lugar donde se dice cuánto mide, para que los dos usen la misma cuenta:
     en un iPhone con muesca la barra crece y el filtro tiene que bajar igual. */
  --barra-alto:calc(54px + env(safe-area-inset-top));
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  /* La sombra detrás del logo de la portada es siempre negra, sin importar el
     cliente: un logo claro necesita sombra oscura para despegar de la foto y
     uno oscuro también, así que no sale de MARCA. Vive acá adentro (y no
     escrita donde se usa) por la misma regla que todo lo demás: ni un color
     suelto fuera de :root. */
  --sombra:rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--txt);font-family:var(--sans);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:6px}

/* ---- barra ---- */
.barra{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:11px;
  min-height:var(--barra-alto);
  padding:11px 18px;padding-top:calc(11px + env(safe-area-inset-top));
  background:rgba(var(--fondo-rgb),.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--borde)}
.barra__logo{height:30px;width:auto;flex:0 0 auto}
.barra__n{font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.barra__sp{flex:1}
.lengua{display:flex;gap:2px;border:1px solid var(--borde);border-radius:999px;
  padding:2px;background:var(--velo)}
/* Un dedo no acierta abajo de 44 px. Vale para el conmutador de idioma, que es
   lo primero que toca alguien que llegó en inglés. */
.lengua button{font:inherit;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--tenue);
  background:none;border:0;padding:10px 14px;border-radius:999px;cursor:pointer;
  min-height:44px;min-width:44px}
.lengua button[aria-pressed="true"]{background:var(--oro);color:var(--tinta)}

/* ---- portada ---- */
.hero{position:relative;min-height:76vh;display:flex;align-items:flex-end;padding:28px 18px 34px;overflow:hidden}
.hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.04)}
.hero__vel{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(var(--fondo-rgb),.4) 0%,rgba(var(--fondo-rgb),.55) 45%,var(--fondo) 100%)}
.hero__in{position:relative;max-width:640px}
.hero__logo{height:62px;width:auto;margin:0 0 20px;filter:drop-shadow(0 4px 18px var(--sombra))}
.kicker{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--oro);font-weight:600;margin:0 0 12px}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(34px,8.6vw,58px);
  line-height:1.05;margin:0 0 14px;letter-spacing:-.01em}
.hero p{margin:0;color:var(--tenue);font-size:16px;max-width:44ch}
.hero__pie{display:flex;flex-wrap:wrap;gap:16px;margin-top:20px;font-size:13px;color:var(--tenue)}
.hero__pie span{display:flex;align-items:center;gap:7px}
.hero__pie svg{width:15px;height:15px;stroke:var(--oro);fill:none;stroke-width:1.7;flex:0 0 auto}

/* ---- filtro ---- */
.filtro{position:sticky;top:var(--barra-alto);z-index:15;background:var(--fondo);padding:16px 0 14px;
  border-bottom:1px solid var(--borde)}
.filtro__t{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tenue);
  padding:0 18px;margin:0 0 10px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:0 18px 2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
/* Los filtros son lo que más se toca de toda la página: 40 px no alcanza. */
.chip{flex:0 0 auto;font:inherit;font-size:14px;font-weight:500;color:var(--txt);
  background:var(--velo);border:1px solid var(--borde);border-radius:999px;
  padding:9px 16px;cursor:pointer;min-height:44px;white-space:nowrap;transition:.16s}
.chip[aria-pressed="true"]{background:var(--oro);border-color:var(--oro);color:var(--tinta);font-weight:600}
.chip__n{opacity:.55;margin-left:6px;font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"] .chip__n{opacity:.6}

/* ---- rejilla ---- */
.rejilla{display:grid;gap:26px;padding:26px 18px 40px;max-width:1180px;margin:0 auto}
@media(min-width:760px){.rejilla{grid-template-columns:1fr 1fr;gap:30px;padding:34px 26px 56px}}
.tarjeta{border:1px solid var(--borde);border-radius:18px;overflow:hidden;background:var(--alto);
  display:flex;flex-direction:column}
/* El fondo de la foto es lo que se ve mientras carga: el tono alto de la marca. */
.tarjeta__foto{position:relative;aspect-ratio:4/3;background:var(--alto)}
.tarjeta__foto img{width:100%;height:100%;object-fit:cover}
.sello{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:6px;
  background:var(--oro);color:var(--tinta);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:6px 11px;border-radius:999px}
.sello svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.tarjeta__cuerpo{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.tarjeta__zona{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--oro);margin:0 0 6px}
.tarjeta h2{font-family:var(--serif);font-weight:600;font-size:27px;line-height:1.12;margin:0 0 10px}
.datos{display:flex;margin:0 0 14px;border-top:1px solid var(--borde);border-bottom:1px solid var(--borde)}
.datos div{flex:1;padding:11px 4px;text-align:center}
.datos div + div{border-left:1px solid var(--borde)}
.datos b{display:block;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1}
.datos span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
.tarjeta__x{margin:0 0 14px;color:var(--tenue);font-size:14.5px}
.puntos{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0;list-style:none}
.puntos li{font-size:12.5px;background:rgba(var(--oro-rgb),.11);border:1px solid rgba(var(--oro-rgb),.26);
  border-radius:999px;padding:4px 10px}
.acciones{display:flex;gap:9px;margin-top:auto;flex-wrap:wrap}
.btn{flex:1 1 auto;font:inherit;font-size:14.5px;font-weight:600;text-align:center;text-decoration:none;
  border-radius:11px;padding:13px 16px;min-height:46px;display:flex;align-items:center;
  justify-content:center;gap:8px;cursor:pointer;border:1px solid var(--borde);
  background:var(--velo);color:var(--txt);transition:.16s}
.btn:hover{background:var(--velo2)}
.btn--oro{background:var(--oro);border-color:var(--oro);color:var(--tinta)}
.btn--oro:hover{background:var(--oro2);border-color:var(--oro2)}
.btn--mudo{opacity:.5;cursor:default;pointer-events:none}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;flex:0 0 auto}

/* ---- pie ---- */
.pie{border-top:1px solid var(--borde);padding:34px 18px calc(34px + env(safe-area-inset-bottom));
  text-align:center;max-width:640px;margin:0 auto}
.pie__logo{height:44px;width:auto;margin:0 auto 18px;opacity:.9}
.pie__cta{display:flex;flex-direction:column;gap:10px;margin:0 0 22px}
.pie__cta .btn{width:100%}
.pie__ln{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;font-size:13.5px;color:var(--tenue)}
/* Los links del pie son texto suelto: se les da alto de dedo sin que parezcan botones. */
.pie__ln a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.pie__ln a:hover{color:var(--oro)}
.firma{display:inline-flex;align-items:center;gap:8px;margin-top:26px;text-decoration:none;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(var(--txt-rgb),.45);
  min-height:44px;padding:0 6px}
.firma img{height:15px;width:auto;opacity:.8}

/* ---------------------------------------------------------------------------
   La pasada de celular. El diseño se decide a 414 px y tiene que aguantar
   360 px, y todo lo que se toca mide 44 px de dedo o más. Esa medida está
   dicha una sola vez, en la regla de cada cosa allá arriba, y no repetida
   acá abajo: la declaración por duplicado fue justo lo que escondió el
   min-width que faltaba.

   A 360 px (Android chico) el título y las fichas tienen que seguir entrando.
   ------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .hero { padding-left: 15px; padding-right: 15px; }
  .rejilla { padding-left: 15px; padding-right: 15px; gap: 20px; }
  .tarjeta__cuerpo { padding: 15px 15px 17px; }
  .datos b { font-size: 18px; }
  .acciones { gap: 7px; }
}