/* InmoSapiens · sistema visual v3.
   Base: el sistema del tema Grupo Habitazone (superficies, tipografía, rejilla, ritmo).
   Marca: verde azulado profundo con el rojo como acento puntual.

   Los nombres de variable siguen diciendo "azul" y "oro" a propósito: estan
   usados en cientos de sitios y renombrarlos no cambiaria ni un pixel. Lo que
   manda es el valor. --azul* es la familia fria de azules grises (dominante),
   --oro* el tono claro sobre oscuro y --rojo* el rojo puro, unico color de la
   paleta. El papel vuelve a ser blanco y gris frio. */
:root{
  /* Superficies: el papel deja de ser blanco frio y pasa a ser arena calida
     (#ECE7D5 de la tercera referencia). El blanco queda para las tarjetas,
     que asi se despegan del fondo. */
  --sup:#FFFFFF; --sup-baja:#F2F3F4; --sup-alta:#DCDCDC; --sup-var:#C9CCCE; --sup-min:#FFFFFF;
  /* Tinta: el negro azulado de la paleta */
  --tinta:#141A1F; --tinta-var:#4A5C66; --contorno:#5F6D75; --linea:rgba(20,26,31,.12);
  /* Marca: la familia fria de azules grises */
  --azul:#2A3A44; --azul-prof:#141A1F; --azul-medio:#3D5462; --azul-humo:#4A5C66;
  /* Tono claro para texto y detalles sobre fondos oscuros */
  --oro:#9DAFB8; --oro-fijo:#B7C4CB; --oro-suave:#E3E8EB; --oro-texto:#2A3A44; --oro-oscuro:#141A1F;
  /* Rojo puro: el unico color de la paleta. Botones, cifras y cierres. */
  --rojo:#C8102E; --rojo-prof:#9E0C24; --rojo-claro:#D93049; --rojo-suave:#FBE9EC;
  --acento:var(--azul); --sobre-acento:#FFFFFF;
  /* Tipografía. Bellarose es de pago y no esta en Google Fonts; Tenor Sans es
     la alternativa libre mas cercana: sans sin serifas, caja alta abierta y
     trazo uniforme. La variable sigue llamandose --serif porque se usa en
     cientos de sitios; lo que manda es el valor. */
  --serif:"Tenor Sans","Optima","Gill Sans",system-ui,sans-serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Rejilla y ritmo (los de Habitazone) */
  --ancho:1440px; --margen:20px; --margen-md:48px; --canal:24px; --seccion:96px;
  --radio-xl:24px; --radio-l:20px; --radio-m:16px; --radio-s:12px;
  --sombra-s:0 1px 2px rgba(20,26,31,.05),0 6px 22px -12px rgba(20,26,31,.22);
  --sombra-a:0 18px 40px -22px rgba(20,26,31,.34);
  --sombra-flot:0 24px 60px -40px rgba(20,26,31,.55);
  --ease:cubic-bezier(.16,1,.3,1);
  --nav:72px;
  /* Escudo del aviso de seguridad, incrustado para no pedir otro fichero. */
  --ico-escudo:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6l7-3z'/%3E%3Cpath d='M9.5 12l1.8 1.8 3.4-3.6'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--tinta);background:var(--sup);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* ---------- Tipografía ---------- */
.h-display,.h-lg,.h-md{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;color:var(--tinta);margin:0}
.h-display{font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.02}
.h-lg{font-size:clamp(2rem,3.6vw,3rem);line-height:1.12}
.h-md{font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.2}
.etiqueta{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--oro-texto);margin:0 0 12px}
.etiqueta--clara{color:var(--oro-fijo)}
.cuerpo-lg{font-size:1.125rem;line-height:1.6;color:var(--tinta-var);margin:0}
.cuerpo{font-size:1rem;line-height:1.65;color:var(--tinta-var);margin:0}
.serif-it{font-family:var(--serif);font-style:italic;font-weight:400}

/* ---------- Rejilla ---------- */
.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding-left:var(--margen);padding-right:var(--margen)}
.rejilla-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--canal)}
.seccion{padding-top:var(--seccion);padding-bottom:var(--seccion)}
.seccion--corta{padding-top:64px;padding-bottom:64px}
.sup--min{background:var(--sup-min)}
/* Secciones enteras en verde: es lo que da presencia a la paleta.
   .sup--azul ya existia (fondo verde profundo); .sup--verde es el tono medio. */
.sup--verde{background:var(--azul);color:#fff}
/* Solo el texto que va DIRECTO sobre el fondo verde se pinta de blanco.
   Con el selector suelto, una tarjeta clara dentro de la seccion acababa con
   texto blanco sobre fondo blanco: invisible. Paso en Propiedades. */
.sup--verde > .contenedor > .h-lg,.sup--verde > .contenedor > .h-md,
.sup--verde .cab-seccion .h-lg,.sup--verde .cab-seccion .h-md,
.sup--verde .cab-seccion h2,.sup--verde .cab-seccion h3,
.sup--verde > .contenedor > h2,.sup--verde > .contenedor > h3,
.sup--verde > .contenedor > .boletin__caja .h-lg{color:#fff}
.sup--verde > .contenedor > .cuerpo,.sup--verde > .contenedor > .cuerpo-lg,
.sup--verde .cab-seccion .cuerpo,.sup--verde .cab-seccion .cuerpo-lg,
.sup--verde .cab-seccion p,.sup--verde > .contenedor > p{color:rgba(255,255,255,.82)}
.sup--verde .etiqueta,.sup--azul .etiqueta{color:var(--oro-fijo)}
.sup--verde-prof{background:var(--azul-prof);color:#fff}
.sup--verde-prof > .contenedor > .h-lg,.sup--verde-prof > .contenedor > .h-md,
.sup--verde-prof .cab-seccion .h-lg,.sup--verde-prof .cab-seccion h2,
.sup--verde-prof .boletin__texto .h-lg,.sup--verde-prof > .contenedor > h2{color:#fff}
.sup--verde-prof > .contenedor > .cuerpo,.sup--verde-prof > .contenedor > .cuerpo-lg,
.sup--verde-prof .cab-seccion p,.sup--verde-prof .boletin__texto .cuerpo-lg{color:rgba(255,255,255,.78)}
.sup--verde-prof .etiqueta{color:var(--oro-fijo)}
/* Dentro de una seccion verde, las tarjetas blancas cantan demasiado: se
   quedan translucidas sobre el propio fondo. */
.sup--verde .ficha,.sup--verde-prof .ficha,.sup--azul .ficha{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.sup--verde .ficha h3,.sup--verde-prof .ficha h3,.sup--azul .ficha h3{color:#fff}
.sup--verde .ficha p,.sup--verde-prof .ficha p,.sup--azul .ficha p{color:rgba(255,255,255,.75)}
.sup--verde .chip,.sup--verde-prof .chip,.sup--azul .chip{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.9)}
.sup--verde .chip.es-activo,.sup--verde-prof .chip.es-activo{background:#fff;color:var(--azul-prof);border-color:#fff}
/* Sobre fondo verde, el boton "lleno" usaba el mismo verde del fondo y
   desaparecia. Ahi manda el rojo, que es el acento fuerte. */
.sup--verde .btn--lleno,.sup--verde-prof .btn--lleno,.sup--azul .btn--lleno{background:var(--rojo);border-color:var(--rojo);color:#fff}
.sup--verde .btn--lleno:hover,.sup--verde-prof .btn--lleno:hover,.sup--azul .btn--lleno:hover{background:var(--rojo-prof);border-color:var(--rojo-prof)}
.sup--verde .btn--linea,.sup--verde-prof .btn--linea,.sup--azul .btn--linea{border-color:rgba(255,255,255,.4);color:#fff}
.sup--verde .btn--linea:hover,.sup--verde-prof .btn--linea:hover,.sup--azul .btn--linea:hover{background:#fff;color:var(--azul-prof);border-color:#fff}
.sup--baja{background:var(--sup-baja)}
.sup--azul{background:var(--azul-prof);color:#fff}
.sup--azul .h-lg,.sup--azul .h-md,.sup--azul .h-display{color:#fff}
.sup--azul .cuerpo,.sup--azul .cuerpo-lg{color:rgba(255,255,255,.72)}
.cab-seccion{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.cab-seccion>div:first-child{max-width:42rem}
.cab-seccion .h-lg{margin-bottom:12px}
.cab-seccion__acciones{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;flex-shrink:0}

/* ---------- Botones (píldora Habitazone) ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:999px;border:1px solid transparent;
  font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.btn .ico{width:18px;height:18px;flex-shrink:0}
.btn--lleno{background:var(--acento);color:var(--sobre-acento);border-color:var(--acento)}
.btn--lleno:hover{background:var(--azul-medio);border-color:var(--azul-medio);transform:translateY(-1px)}
.btn--oro{background:var(--rojo);color:#fff;border-color:var(--rojo)}
.btn--oro:hover{background:var(--rojo-prof);border-color:var(--rojo-prof);transform:translateY(-1px)}
.btn--linea{border-color:rgba(95,109,117,.4);color:var(--tinta)}
.btn--linea:hover{border-color:var(--tinta);background:var(--sup-min)}
.btn--claro{border-color:rgba(255,255,255,.3);color:#fff}
.btn--claro:hover{background:#fff;color:var(--azul-prof);border-color:#fff}
.enlace-subr{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--oro-texto);border-bottom:1px solid currentColor;padding-bottom:2px;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;transition:opacity .3s}
.enlace-subr:hover{opacity:.7}

/* ---------- Navegación (fija, cristal, texto claro sobre foto) ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav);color:#fff;transition:color .4s var(--ease),transform .45s var(--ease)}
/* Se retira al bajar y vuelve al subir (lo pone sitio.js) */
.nav--oculta{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){.nav{transition:color .4s var(--ease)}.nav--oculta{transform:none}}
.nav__cristal{position:absolute;inset:0;background:rgba(20,26,31,.0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);
  border-bottom:1px solid transparent;transition:background .45s var(--ease),backdrop-filter .45s var(--ease),border-color .45s var(--ease)}
.nav--claro{color:var(--tinta)}
.nav--claro .nav__cristal{background:rgba(255,255,255,.8);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);border-bottom-color:var(--linea)}
.nav__inner{position:relative;height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.nav__logo{justify-self:start;display:flex;align-items:center}
.nav__logo img{height:34px;width:auto;aspect-ratio:1815/484;object-fit:contain;transition:opacity .35s}
.nav__logo-color{display:none}
.nav--claro .nav__logo-blanco{display:none}
.nav--claro .nav__logo-color{display:block}
.nav__links{display:flex;gap:28px;list-style:none;margin:0;padding:0;justify-self:center}
.nav__links a{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;opacity:.82;padding:8px 0;border-bottom:1px solid transparent;transition:opacity .3s,border-color .3s}
.nav__links a:hover,.nav__links a[aria-current]{opacity:1;border-bottom-color:var(--oro)}
.nav__cta{justify-self:end;display:flex;align-items:center;gap:10px}
.nav__burger{display:none;width:44px;height:44px;border-radius:50%;border:0;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);color:#fff;cursor:pointer;align-items:center;justify-content:center}
.nav--claro .nav__burger{background:var(--sup-alta);color:var(--tinta)}
.nav__movil{display:none}

/* ---------- Héroe a pantalla completa (Habitazone) ---------- */
.heroe{position:relative;width:100%;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:#000;padding:calc(var(--nav) + 40px) var(--margen) 64px}
.heroe__foto{position:absolute;inset:0;z-index:0}
.heroe__foto img{width:100%;height:100%;object-fit:cover;object-position:center}
/* Velo: cielo limpio arriba, sombra concentrada donde cae el texto */
.heroe__velo{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 24%,rgba(0,0,0,.60) 46%,rgba(0,0,0,.72) 82%,rgba(0,0,0,.52) 100%)}
/* Franja para la barra de navegación */
.heroe__franja{position:absolute;left:0;right:0;top:0;height:144px;background:linear-gradient(to bottom,rgba(0,0,0,.85),transparent)}
.heroe__inner{position:relative;z-index:2;width:100%;max-width:var(--ancho);margin:0 auto}
.heroe__marca{margin:0 0 32px;filter:drop-shadow(0 2px 22px rgba(0,0,0,.72))}
.heroe__marca{line-height:.86;color:#fff;max-width:100%;overflow:visible}
.heroe__marca span{display:block;font-family:var(--serif);font-weight:600;letter-spacing:.02em}
.heroe__marca .m1{font-size:clamp(1.4rem,4.2vw,3.7rem);opacity:.92}
.heroe__marca .m2{font-size:clamp(2.6rem,13.4vw,11.6rem);letter-spacing:.012em;margin-left:-.02em;white-space:nowrap}
.heroe__sub{font-family:var(--serif);font-size:clamp(1.25rem,2.6vw,2.25rem);line-height:1.25;color:rgba(255,255,255,.9);max-width:48rem;margin:0}
.heroe__cifras{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin-top:40px}
.heroe__cifra{display:flex;align-items:baseline;gap:12px;margin:0}
.heroe__cifra .etiqueta{color:rgba(255,255,255,.65);font-size:10px;letter-spacing:.2em;margin:0}
.heroe__cifra strong{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,4vw,3rem);line-height:1;color:#fff}
.heroe__sep{width:1px;height:40px;background:rgba(255,255,255,.25)}
.heroe__acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
/* Tarjeta de cristal flotante (Homevia / Lume) */
.flotante{position:absolute;right:var(--margen);bottom:64px;z-index:3;width:min(320px,calc(100% - 40px));
  background:rgba(255,255,255,.10);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid rgba(255,255,255,.22);border-radius:var(--radio-l);padding:20px 22px;color:#fff;box-shadow:0 24px 60px -30px rgba(0,0,0,.6)}
.flotante .etiqueta{color:rgba(255,255,255,.6);margin-bottom:6px}
.flotante__val{font-family:var(--serif);font-size:2rem;line-height:1;margin:0 0 4px}
.flotante__pie{font-size:.8rem;color:rgba(255,255,255,.7);margin:0}
.flotante__fila{display:flex;justify-content:space-between;gap:12px;padding-top:12px;margin-top:12px;border-top:1px solid rgba(255,255,255,.16);font-size:.82rem}
.flotante__fila strong{color:var(--oro-fijo)}

/* Héroe interior (58vh, texto abajo) */
.heroe--int{min-height:max(58vh,460px);padding-bottom:56px}
.heroe--int .h-display{color:#fff;max-width:18ch}
.heroe--int .cuerpo-lg{color:rgba(255,255,255,.8);max-width:40rem;margin-top:16px}

/* ---------- Franja de ventajas (Nexora) ---------- */
.ventajas{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.ventaja{display:flex;gap:16px;align-items:flex-start;padding:28px 24px;border-right:1px solid var(--linea)}
.ventaja:last-child{border-right:0}
.ventaja__ico{width:44px;height:44px;flex-shrink:0;border-radius:50%;border:1px solid var(--linea);display:flex;align-items:center;justify-content:center;color:var(--oro-texto);background:var(--sup-min)}
.ventaja__ico svg{width:20px;height:20px}
.ventaja strong{display:block;font-size:.95rem;color:var(--tinta);margin-bottom:3px}
.ventaja span{font-size:.85rem;color:var(--tinta-var)}

/* ---------- Carril y tarjeta de proyecto (Habitazone) ---------- */
/* Carrusel: el carril se desplaza solo con scroll-snap; esto son los mandos.
   Si el contenido cabe entero, .carrusel--estatico los esconde (lo pone el JS). */
.carrusel{position:relative}
.carrusel__flecha{position:absolute;top:calc(50% - 60px);transform:translateY(-50%);z-index:3;
  width:48px;height:48px;border-radius:50%;border:1px solid var(--linea);background:var(--sup-min);
  color:var(--azul-prof);display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:var(--sombra-a);transition:background .3s var(--ease),color .3s var(--ease),opacity .3s}
.carrusel__flecha:hover:not(:disabled){background:var(--azul);color:#fff;border-color:var(--azul)}
.carrusel__flecha:disabled{opacity:.28;cursor:default}
.carrusel__flecha--prev{left:calc(var(--margen) - 24px)}
.carrusel__flecha--next{right:calc(var(--margen) - 24px)}
.carrusel__puntos{display:flex;justify-content:center;gap:8px;margin-top:20px}
.carrusel__punto{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--sup-var);transition:background .3s var(--ease),width .3s var(--ease)}
.carrusel__punto.es-activo{background:var(--azul);width:26px;border-radius:4px}
.carrusel--estatico .carrusel__flecha,.carrusel--estatico .carrusel__puntos{display:none}
/* Sin raton fino (movil) los mandos estorban: se desliza con el dedo. */
@media (max-width:860px){.carrusel__flecha{display:none}}
.carril:focus-visible{outline:2px solid var(--azul-medio);outline-offset:4px;border-radius:var(--radio-m)}
/* Sin scroll-snap: el carril se mueve solo y el imantado pelearia con el
   motor, frenandolo en cada ficha. Los mandos siguen saltando de ficha en
   ficha porque calculan el paso a mano. */
.carril{display:flex;gap:24px;overflow-x:auto;padding:4px var(--margen) 16px;scrollbar-width:none}
.carril::-webkit-scrollbar{display:none}
.carril>*{flex-shrink:0;width:min(86vw,400px)}
.ficha{display:flex;flex-direction:column;background:var(--sup);border-radius:var(--radio-xl);padding:16px;border:1px solid rgba(95,109,117,.08);box-shadow:var(--sombra-s);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.ficha:hover{transform:translateY(-4px);box-shadow:var(--sombra-a)}
.ficha__img{position:relative;overflow:hidden;aspect-ratio:16/10;border-radius:var(--radio-m);background:var(--sup-alta)}
.ficha__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.ficha:hover .ficha__img img{transform:scale(1.05)}
.distintivo{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;background:#fff;color:var(--tinta);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.distintivo--azul{background:var(--azul);color:#fff}
.distintivo--oro{background:var(--oro);color:var(--azul-prof)}
/* Off-market en rojo: es el unico sitio donde la etiqueta tiene que frenar
   la vista. El resto de la paleta es verde azulado. */
.distintivo--negro{background:var(--rojo);color:#fff}
.ficha__cuerpo{padding:20px 8px 4px;display:flex;flex-direction:column;flex:1}
.ficha__titulo{font-family:var(--serif);font-weight:500;font-size:1.5rem;line-height:1.2;margin:0 0 16px;transition:opacity .3s}
.ficha:hover .ficha__titulo{opacity:.7}
.ficha__linea{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-bottom:20px;font-size:.9rem;font-weight:700}
.ficha__linea .punto{width:4px;height:4px;border-radius:50%;background:rgba(95,109,117,.4)}
.ficha__linea .acento{color:var(--oro-texto)}
.ficha__datos{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;padding-top:16px;border-top:1px solid var(--linea);margin-top:auto}
.ficha__dato dt{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--contorno);margin:0 0 3px}
.ficha__dato dd{margin:0;font-size:.95rem;font-weight:600;color:var(--tinta)}
.ficha__cta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--linea)}
.ficha__precio{font-family:var(--serif);font-size:1.35rem;color:var(--tinta)}
.sello{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:999px;border:1px solid var(--linea);background:var(--sup-min);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--tinta-var)}
.sello__ico{width:22px;height:22px;border-radius:50%;background:var(--oro);color:var(--azul-prof);display:flex;align-items:center;justify-content:center}
.sello__ico svg{width:12px;height:12px}
.sello--oscuro{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff}

/* ---------- Bloque editorial alterno (Bridge) ---------- */
.editorial{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--canal);align-items:center}
.editorial__img{grid-column:span 7;border-radius:var(--radio-xl);overflow:hidden;aspect-ratio:4/3;background:var(--sup-alta)}
.editorial__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.editorial:hover .editorial__img img{transform:scale(1.03)}
.editorial__txt{grid-column:span 5;padding:0 8px}
.editorial--inv .editorial__img{order:2}
.editorial--inv .editorial__txt{order:1}
.especs{display:flex;flex-wrap:wrap;gap:20px 28px;margin:24px 0}
.espec{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:.8rem;color:var(--tinta-var)}
.espec svg{width:22px;height:22px;color:var(--tinta)}
.espec strong{font-size:.95rem;color:var(--tinta)}
.precio-desde{display:flex;align-items:baseline;gap:10px;margin:8px 0 24px}
.precio-desde .etiqueta{margin:0}
.precio-desde strong{font-family:var(--serif);font-weight:500;font-size:1.75rem}

/* ---------- Pilares (Habitazone: dintel y basa comunes) ---------- */

/* ---------- Cifras (Nexora) ---------- */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2px;background:var(--linea);border-radius:var(--radio-l);overflow:hidden}
.cifra{background:var(--sup-min);padding:32px 28px}
/* Dentro de una franja verde las cifras van sin caja, sobre el propio fondo. */
.sup--verde-prof .cifra,.sup--verde .cifra{background:transparent}
.sup--verde-prof .cifra strong,.sup--verde .cifra strong{color:#fff}
.sup--verde-prof .cifra span,.sup--verde .cifra span{color:rgba(255,255,255,.7)}
.cifra strong{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,3.5vw,3rem);line-height:1;color:var(--azul);margin-bottom:8px}
.cifra span{font-size:.85rem;color:var(--tinta-var)}

/* ---------- Equipo ---------- */
.persona{display:flex;gap:18px;align-items:flex-start;padding:24px 0;border-top:1px solid var(--linea)}
.persona__ini{width:56px;height:56px;flex-shrink:0;border-radius:50%;background:var(--azul);color:var(--oro-fijo);font-family:var(--serif);font-size:1.2rem;display:flex;align-items:center;justify-content:center}
.persona h3{font-family:var(--serif);font-weight:500;font-size:1.15rem;margin:0 0 2px}
.persona__rol{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--oro-texto);margin:0 0 8px}
.persona p{margin:0;font-size:.9rem;color:var(--tinta-var)}

/* ---------- CTA oscura a sangre con foto (Nexora) ---------- */
.cta-foto{position:relative;min-height:520px;display:grid;grid-template-columns:1fr auto;overflow:hidden;background:var(--azul-prof);color:#fff}
.cta-foto__img{position:absolute;inset:0}
.cta-foto__img img{width:100%;height:100%;object-fit:cover;opacity:.55}
.cta-foto__velo{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,26,31,.92) 0%,rgba(20,26,31,.55) 55%,rgba(20,26,31,.2) 100%)}
.cta-foto__txt{position:relative;z-index:2;padding:96px var(--margen);max-width:38rem;align-self:center}
.cta-foto__txt .h-display{color:#fff;margin:0 0 20px}
.cta-foto__txt .cuerpo-lg{color:rgba(255,255,255,.78);margin-bottom:32px}
.cta-foto__lado{position:relative;z-index:2;width:clamp(180px,22vw,320px);background:rgba(255,255,255,.06);backdrop-filter:blur(8px);border-left:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:32px 20px;text-align:center}
.cta-foto__lado .orbe{width:64px;height:64px;border-radius:50%;background:#fff;color:var(--azul-prof);display:flex;align-items:center;justify-content:center;transition:transform .4s var(--ease)}
.cta-foto__lado:hover .orbe{transform:scale(1.08)}
.cta-foto__lado span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}

/* ---------- Pie (Habitazone, 12 columnas) ---------- */
.pie{background:#0A0B0C;color:#fff;border-top:1px solid rgba(255,255,255,.08);padding:88px 0 36px}
.pie__marca{grid-column:span 4;display:flex;flex-direction:column;gap:28px}
.pie__marca img{height:40px;width:auto;aspect-ratio:1815/484;object-fit:contain;align-self:flex-start;max-width:min(100%,260px)}
.pie__marca p{color:rgba(255,255,255,.6);max-width:20rem;margin:0;font-size:.95rem;line-height:1.6}
.pie__cols{grid-column:span 8;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.pie h4{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.4);margin:0 0 20px}
.pie ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.pie li a,.pie li{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.8);transition:color .3s;line-height:1.5}
.pie li a:hover{color:#fff}
.pie .cuerpo{color:rgba(255,255,255,.8);text-transform:none;letter-spacing:0;font-weight:400}
.pie__legal{grid-column:span 12;margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.85rem;color:rgba(255,255,255,.5)}
.pie__social{display:flex;gap:10px}
.pie__social a{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;transition:background .3s,color .3s}
.pie__social a:hover{background:#fff;color:#0A0B0C}

/* ---------- Revelado (Habitazone) ---------- */
.reveal,.reveal-left,.reveal-right{opacity:0;transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal{transform:translateY(36px)}
.reveal-left{transform:translateX(-48px)}
.reveal-right{transform:translateX(48px)}
.reveal.is-visible,.reveal-left.is-visible,.reveal-right.is-visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.1s}.reveal-delay-2{transition-delay:.22s}.reveal-delay-3{transition-delay:.34s}
@keyframes fadeUpIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.load-reveal{opacity:0;animation:fadeUpIn 1s var(--ease) forwards}

/* ---------- Formularios ---------- */
.campo{margin-bottom:20px}
.campo label{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--tinta);margin-bottom:8px}
.campo input,.campo select,.campo textarea{width:100%;padding:14px 16px;border:1px solid rgba(95,109,117,.3);border-radius:var(--radio-s);font-family:var(--sans);font-size:.95rem;color:var(--tinta);background:var(--sup-min);transition:border-color .3s,box-shadow .3s}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:0;border-color:var(--azul);box-shadow:0 0 0 3px rgba(11,39,64,.10)}
.campo textarea{min-height:140px;resize:vertical}
/* Aviso de seguridad. Lleva icono de escudo y el rojo de la marca: es una
   advertencia, no un parrafo suelto. Dentro de una seccion oscura se adapta
   solo (ver .sup--verde .aviso-suave mas abajo). */
.aviso-suave{position:relative;background:var(--sup-baja);border:1px solid var(--linea);
  border-left:3px solid var(--rojo);padding:18px 20px 18px 54px;font-size:.86rem;line-height:1.6;
  color:var(--tinta-var);border-radius:var(--radio-s)}
.aviso-suave::before{content:"";position:absolute;left:19px;top:18px;width:20px;height:20px;
  background:var(--rojo);-webkit-mask:var(--ico-escudo) center/contain no-repeat;
  mask:var(--ico-escudo) center/contain no-repeat}
.aviso-suave strong{display:block;color:var(--tinta);font-weight:600;margin-bottom:4px;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}
/* Sobre fondo oscuro: translucido, no una caja blanca pegada encima. */
.sup--verde .aviso-suave,.sup--verde-prof .aviso-suave,.sup--azul .aviso-suave{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);
  border-left-color:var(--rojo-claro);color:rgba(255,255,255,.8)}
.sup--verde .aviso-suave strong,.sup--verde-prof .aviso-suave strong,.sup--azul .aviso-suave strong{color:#fff}
.sup--verde .aviso-suave::before,.sup--verde-prof .aviso-suave::before,.sup--azul .aviso-suave::before{background:var(--rojo-claro)}
/* Variante informativa: sin escudo ni rojo, solo un filete neutro. */
.aviso-suave--info{border-left-color:var(--contorno);padding-left:20px}
.aviso-suave--info::before{display:none}

/* ---------- boletin ---------- */
.boletin__caja{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.boletin__texto{max-width:34rem}
.boletin__texto .h-lg{margin:0 0 12px}
.boletin__texto .cuerpo-lg{margin:0}
.boletin__form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start;min-width:min(420px,100%)}
.boletin__form input{padding:15px 18px;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  font-family:var(--sans);font-size:.92rem;color:#fff;background:rgba(255,255,255,.08);transition:.25s;min-width:0}
.boletin__form input::placeholder{color:rgba(255,255,255,.5)}
.boletin__form input:focus{outline:0;border-color:#fff;background:rgba(255,255,255,.14)}
.boletin__form input[aria-invalid="true"]{border-color:var(--rojo-claro)}
.boletin__form .btn{white-space:nowrap}
/* El aviso ocupa las dos columnas para no descolocar el campo. */
.boletin__nota{grid-column:1/-1;margin:2px 0 0;font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.7);min-height:0}
.boletin__nota:empty{display:none}
.boletin__nota.es-error{color:#FFC9CE}
.boletin__nota.es-ok{color:#fff}

/* Version compacta del pie: en columna, y el boton debajo del campo. */
.pie__boletin{grid-column:span 12;margin-top:40px;padding-top:32px;border-top:1px solid rgba(255,255,255,.1)}
.pie__boletin .cuerpo{color:rgba(255,255,255,.6);margin:0 0 14px;max-width:26rem}
.pie__boletin .boletin__form{max-width:440px;min-width:0}
@media(max-width:860px){
  .boletin__caja{grid-template-columns:1fr;gap:28px}
  .boletin__form{min-width:0}
}
@media(max-width:520px){
  .boletin__form{grid-template-columns:1fr}
}

/* ---------- Utilidades ---------- */
.solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.col-6{grid-column:span 6}.col-5{grid-column:span 5}.col-7{grid-column:span 7}.col-4{grid-column:span 4}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:var(--sup-min);border:1px solid rgba(95,109,117,.3);color:var(--tinta-var);padding:9px 18px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;border-radius:999px;cursor:pointer;transition:.3s}
.chip:hover{border-color:var(--tinta)}
.chip[aria-pressed="true"]{background:var(--azul);border-color:var(--azul);color:#fff}
.rejilla-fichas{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--canal)}

/* ---------- Responsivo ---------- */
@media (min-width:768px){
  :root{--margen:48px}
  .heroe{padding-bottom:96px}
}
@media (max-width:1023px){
  .nav__links{display:none}
  .nav__cta .btn{display:none}
  .nav__burger{display:flex}
  .nav__movil{display:none;position:fixed;inset:0;z-index:99;background:var(--azul-prof);color:#fff;padding:calc(var(--nav) + 32px) 32px 64px;flex-direction:column;gap:4px}
  .nav--abierta .nav__movil{display:flex}
  .nav__movil a{font-family:var(--serif);font-size:1.6rem;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.7)}
  .nav__movil a[aria-current]{color:#fff}
  .editorial__img,.editorial__txt{grid-column:span 12}
  .editorial--inv .editorial__img{order:1}.editorial--inv .editorial__txt{order:2}
  .pie__marca,.pie__cols{grid-column:span 12}
  .pie__cols{grid-template-columns:1fr}
  .col-6,.col-5,.col-7,.col-4,.col-8{grid-column:span 12}
  .cta-foto{grid-template-columns:1fr}
  .cta-foto__lado{width:100%;flex-direction:row;justify-content:flex-start;border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .flotante{position:static;width:100%;margin-top:28px}
  .ventaja{border-right:0;border-bottom:1px solid var(--linea)}
}
@media (max-width:640px){
  :root{--seccion:64px}
  .pilar{min-height:auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal,.reveal-left,.reveal-right,.load-reveal{opacity:1;transform:none}
}