@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400&display=swap');

/* ============================================================
   SE42 · Landing — reinterpretación editorial (arquitectura Novu)
   Marca: Be Grand Santa Engracia 42 · Messer Living
   PP Neue Montreal (sans) + PP Editorial Old (serif itálica de acento)
   ============================================================ */

@font-face {
  font-family: "PP Editorial Old";
  src: url("../guia/fonts/PPEditorialOld-Regular.woff2") format("woff2"),
       url("../guia/fonts/PPEditorialOld-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Editorial Old";
  src: url("../guia/fonts/PPEditorialOld-Light.woff2") format("woff2"),
       url("../guia/fonts/PPEditorialOld-Light.woff") format("woff");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("../guia/fonts/PPNeueMontreal-Regular.woff2") format("woff2"),
       url("../guia/fonts/PPNeueMontreal-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("../guia/fonts/PPNeueMontreal-Bold.woff2") format("woff2"),
       url("../guia/fonts/PPNeueMontreal-Bold.woff") format("woff");
  font-weight: 500 700; font-style: normal; font-display: swap;
}

:root {
  /* Fondos */
  --crudo: #FAF9F5;
  --blanco: #FFFFFF;
  --crudo-calido: #F0EFE9;
  --negro: #1D1B11;
  --negro-2: #24221A;

  /* Texto */
  --tinta: #1D1B11;
  --gris-calido: #5C5A4E;
  --gris-suave: #9C9A8E;

  /* Acento (tweakable) */
  --amarillo: #E6E779;
  --oliva: #434635;
  --accent: var(--amarillo);
  --accent-soft: rgba(230, 231, 121, 0.35);

  /* Bordes */
  --borde-claro: #E8E6DD;
  --borde-medio: #DDD9CC;

  /* Tipografía */
  --font-sans: "PP Neue Montreal", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "PP Editorial Old", Georgia, "Times New Roman", serif;
  --serif-style: normal;

  /* Layout */
  --wrap: 1180px;
  --pad-x: 22px;
  --sheet-radius: 40px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur: 460ms;

  /* Hero */
  --hero-veil: 0.46;
  --footer-veil: 0.62;   /* velado del negro sobre la foto del footer */

  --footer-h: 0px;
}

@media (min-width: 760px) { :root { --pad-x: 40px; } }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--negro);   /* el lienzo oscuro detrás del módulo redondeado */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: visible;   /* NO clip/hidden aquí: rompe el position:sticky del teléfono */
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--negro); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad-x); }

/* Firma tipográfica */
.accent {
  font-family: var(--font-serif);
  font-style: var(--serif-style);
  font-weight: 400;
  letter-spacing: 0;
}
.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris-suave);
  margin: 0;
}
.display {
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.0;
  margin: 0;
  text-wrap: balance;
}

/* ============================================================
   NAV — píldora flotante CENTRADA; claro→oscuro al hacer scroll
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px var(--pad-x);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(250, 249, 245, 0.82);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--borde-claro);
}
.nav__logo {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 27px;
  letter-spacing: 0.01em;
  color: var(--crudo);
  line-height: 1;
  transition: color var(--dur) var(--ease);
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  z-index: 2;
}
.nav__logo small {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.7;
}
.nav.is-scrolled .nav__logo { color: var(--negro); }

/* píldora central absoluta */
.navpill {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 5px 6px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav.is-scrolled .navpill { background: rgba(29, 27, 17, 0.04); border-color: var(--borde-medio); }
.navpill a {
  color: rgba(250, 249, 245, 0.88);
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 999px;
  transition: color 200ms var(--ease), background 200ms var(--ease);
  white-space: nowrap;
}
.navpill a:hover { color: var(--crudo); background: rgba(255,255,255,0.08); }
.nav.is-scrolled .navpill a { color: var(--gris-calido); }
.nav.is-scrolled .navpill a:hover { color: var(--negro); background: rgba(29,27,17,0.05); }

.nav__right { display: flex; align-items: center; gap: 8px; z-index: 2; }

.lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: rgba(250, 249, 245, 0.6);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  padding: 6px 4px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav.is-scrolled .lang { color: var(--gris-suave); border-color: var(--borde-medio); }
.lang button {
  color: inherit;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  transition: color 180ms var(--ease);
}
.lang button.is-active { color: var(--crudo); font-weight: 500; }
.nav.is-scrolled .lang button.is-active { color: var(--negro); }
.lang .sep { opacity: 0.5; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--negro);
  color: var(--amarillo);
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform 50ms var(--ease);
  border: 1px solid var(--negro);
}
.pill:hover { background: var(--oliva); border-color: var(--oliva); }
.pill:active { transform: translateY(1px); }
.pill svg { width: 16px; height: 16px; flex: none; }
.pill--lg { padding: 16px 30px; font-size: 16px; }

/* Etiqueta con animación de texto dinámico (estilo Novu) */
.pill__label {
  display: inline-grid;
  overflow: hidden;
  vertical-align: middle;
  line-height: 1.15;
}
.pill__label-row {
  grid-area: 1 / 1;
  display: block;
  transition: transform 0.46s var(--ease);
  white-space: nowrap;
}
.pill__label-row:nth-child(2) { transform: translateY(115%); }
.pill:hover .pill__label-row:nth-child(1) { transform: translateY(-115%); }
.pill:hover .pill__label-row:nth-child(2) { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .pill__label-row { transition: none; }
  .pill:hover .pill__label-row:nth-child(1) { transform: none; }
  .pill__label-row:nth-child(2) { display: none; }
}
.pill--ghost {
  background: transparent;
  color: var(--crudo);
  border-color: rgba(250,249,245,0.35);
}
.pill--ghost:hover { background: rgba(250,249,245,0.08); border-color: rgba(250,249,245,0.6); color: var(--crudo); }
.pill--invert { background: var(--crudo); color: var(--negro); border-color: var(--crudo); }
.pill--invert:hover { background: #fff; border-color: #fff; }

.nav__menu {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--crudo);
}
.nav.is-scrolled .nav__menu { color: var(--negro); border-color: var(--borde-medio); }

/* ============================================================
   HERO — sticky a pantalla completa, foto cálida + oscurecida, CENTRADO
   ============================================================ */
.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--crudo);
  overflow: hidden;
  padding: 110px 0 90px;
}
.hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 42%;
  z-index: 0;
  transform: scale(1.04);
}
.hero__bg--video { object-fit: cover; object-position: center 42%; width: 100%; height: 100%; }
.hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(15,14,9,0.55) 0%, rgba(15,14,9,0.2) 40%, rgba(15,14,9,0.4) 78%, rgba(15,14,9,0.86) 100%),
    rgba(29, 27, 17, var(--hero-veil));
}
.hero .wrap { position: relative; z-index: 2; width: 100%; }
.hero__eyebrow { color: rgba(250,249,245,0.78); margin-bottom: 24px; }
.hero__title {
  font-family: "Inter", var(--font-sans);
  font-weight: 300;
  font-size: clamp(42px, 6.6vw, 96px);
  letter-spacing: -0.02em;
  line-height: 1.04;
  max-width: 15ch;
  margin: 0 auto;
  text-shadow: 0 2px 44px rgba(0,0,0,0.32);
}
.hero__title .accent {
  font-family: var(--font-serif);
  font-style: normal;   /* "en tu mano." sin cursiva */
  font-weight: 400;
}
.hero__sub {
  margin: 24px auto 0;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.5;
  color: rgba(250,249,245,0.86);
  max-width: 44ch;
  text-wrap: pretty;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}
.hero__fine {
  margin: 24px 0 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(250,249,245,0.62);
}
.hero__scroll {
  position: absolute;
  left: 50%; bottom: 28px;
  transform: translateX(-50%);
  z-index: 2;
  text-decoration: none;
  color: rgba(250,249,245,0.55);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  transition: color 0.3s var(--ease);
}
.hero__scroll:hover { color: var(--crudo); }
.hero__scrollbar {
  width: 2px; height: 52px;
  border-radius: 999px;
  background: rgba(250,249,245,0.22);
  position: relative;
  overflow: hidden;
}
.hero__scrollbar::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 45%;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, var(--amarillo) 55%, var(--amarillo));
  animation: scrolldrop 1.9s var(--ease) infinite;
}
@keyframes scrolldrop {
  0%   { transform: translateY(-110%); opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(230%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scrollbar::after { animation: none; transform: none; opacity: 1; height: 100%; }
}

/* ============================================================
   SHEET — módulo de esquinas redondeadas que sube sobre el hero
   ============================================================ */
.scroll-stack { position: relative; z-index: 1; }   /* contiene hero + sheet; encima de la capa fija inferior */
.sheet {
  position: relative;
  z-index: 2;
  background: var(--crudo);
  border-radius: var(--sheet-radius);
  margin-top: calc(-1 * var(--sheet-radius));
  margin-bottom: calc(-1 * var(--sheet-radius));
  /* sin sombra: las esquinas redondeadas se ven limpias sobre el footer */
  /* sin overflow:clip — rompería el position:sticky del teléfono interior */
}

/* Capa oscura inferior (CTA + footer) — FIJA: el sheet sube y la descubre */
.bottom-layer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 0;
  background: var(--negro);
  color: var(--crudo);
  padding-top: var(--sheet-radius);
}
/* franja superior sólida: garantiza que las esquinas redondeadas del sheet
   se recorten sobre negro puro, sin la veladura cálida de la foto */
.bottom-layer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 160px;
  background: linear-gradient(180deg, var(--negro) 0%, var(--negro) 56px, rgba(29,27,17,0) 100%);
  z-index: 1; pointer-events: none;
}
.bottom-layer__bg, .bottom-layer__veil { z-index: 0; }
.bottom-layer > .cta { position: relative; z-index: 2; }
.footer-spacer { height: var(--footer-h, 0px); }
@media (max-width: 719px) {
  .bottom-layer { position: relative; }
  .footer-spacer { display: none; }
}
.bottom-layer__bg {
  position: absolute; inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center bottom;
  pointer-events: none;
}
.bottom-layer__veil {
  position: absolute; inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(29,27,17,1) 0%, rgba(29,27,17,1) 6%, rgba(29,27,17,0.84) 16%, rgba(29,27,17, var(--footer-veil)) 50%, rgba(29,27,17,0.72) 100%);
  pointer-events: none;
}
.bottom-layer > .cta { position: relative; z-index: 1; }

/* ============================================================
   Secciones genéricas + ritmo claro/oscuro
   ============================================================ */
.section { padding: clamp(80px, 11vw, 150px) 0; }
.section--tint { background: var(--crudo-calido); }
.section--dark { background: var(--negro); color: var(--crudo); }
.section--dark .eyebrow { color: rgba(250,249,245,0.55); }

.sec-head { max-width: 22ch; }
.sec-head--center { max-width: 26ch; margin: 0 auto; text-align: center; }
.sec-head__eyebrow { margin-bottom: 20px; }
.sec-head__title {
  font-family: "Inter", var(--font-sans);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  font-size: clamp(28px, 4.2vw, 52px);
  text-wrap: balance;
}
.sec-head__sub {
  margin: 22px 0 0;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.5;
  color: var(--gris-calido);
  max-width: 52ch;
  text-wrap: pretty;
}
.sec-head--center .sec-head__sub { margin-left: auto; margin-right: auto; }
.section--dark .sec-head__sub { color: rgba(250,249,245,0.72); }

/* ============================================================
   WELCOME — carta del Residential Manager (panel fijado, rosa)
   Se comporta como el hero: queda anclado y el .sheet sube sobre él.
   ============================================================ */
.welcome {
  position: sticky; top: 0; z-index: 1;
  background: #f0efe9;
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  margin-top: calc(-1 * var(--sheet-radius));
  box-shadow: 0 -40px 80px -20px rgba(0,0,0,0.30);
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(72px, 9vw, 120px) 0;
}
.welcome__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 880px) { .welcome__grid { grid-template-columns: 0.72fr 1.28fr; } }
.welcome__photo { margin: 0; overflow: hidden; border-radius: 22px; }
.welcome__photo img {
  width: 100%; display: block;
  aspect-ratio: 1932 / 2144;
  max-height: 540px;
  object-fit: cover;
  object-position: center 22%;
}
.welcome__title {
  font-family: "Inter", var(--font-sans);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-size: clamp(26px, 3.1vw, 42px);
  margin: 16px 0 0;
  text-wrap: balance;
}
.welcome__text { margin-top: 22px; display: grid; gap: 14px; }
.welcome__text p {
  margin: 0;
  font-size: clamp(15px, 1.45vw, 17px);
  line-height: 1.58;
  color: var(--gris-calido);
  max-width: 60ch;
  text-wrap: pretty;
}
.welcome__sign { margin-top: 26px; display: flex; flex-direction: column; gap: 3px; }
.welcome__firma { color: var(--negro); margin: 0 0 2px -4px; opacity: 0.9; }
.welcome__firma-svg { height: 86px; width: auto; display: block; overflow: visible; }
.welcome__name { font-family: var(--font-serif); font-style: normal; font-size: 23px; color: var(--negro); line-height: 1; }
.welcome__role { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris-suave); }
.welcome__contact { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.welcome__contact a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; color: var(--gris-calido); text-decoration: none;
  transition: color 0.2s var(--ease);
}
.welcome__contact a:hover { color: var(--negro); }
.welcome__contact svg { color: var(--oliva); flex: none; }

/* ============================================================
   SHOWCASE — teléfono fijo (sticky) con pantallas que cambian al scroll
   ============================================================ */
.showcase { position: relative; padding-top: clamp(36px, 4.5vw, 64px); }
.showcase__intro-grid { display: grid; gap: 24px; align-items: center; }
.showcase__intro { max-width: 18ch; margin-bottom: 0; }
.showcase__intro .accent { display: block; white-space: nowrap; }
.showcase__intro .sec-head__title { font-size: clamp(26px, 3.3vw, 42px); }
.showcase__intro-art { position: relative; }
.showcase__intro-art img {
  width: 100%; display: block;   /* fondo ya recoloreado al crudo de la web */
}
@media (min-width: 900px) {
  .showcase__intro-grid { grid-template-columns: 0.92fr 1.08fr; column-gap: clamp(16px, 2.4vw, 32px); align-items: start; }
  .showcase__intro { padding-top: clamp(44px, 6vw, 96px); }
  .showcase__intro-art { margin-right: calc(-1 * var(--pad-x)); margin-top: calc(-1 * clamp(36px, 4.5vw, 64px)); overflow: hidden; }
  .showcase__intro-art img { width: 138%; max-width: none; margin-left: 0; }
}
@media (max-width: 899px) {
  .showcase__intro .accent { white-space: normal; }
  .showcase__intro-art { max-width: 460px; margin: 4px auto 0; }
}

.showcase__grid { position: relative; }

@media (min-width: 900px) {
  .showcase__grid {
    display: grid;
    grid-template-columns: 1fr minmax(300px, 380px) 1fr;
    column-gap: clamp(28px, 4.5vw, 80px);
    grid-auto-rows: minmax(86vh, auto);
  }
  .showcase__phonecol {
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: start;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .showcase__step {
    display: flex; flex-direction: column; justify-content: flex-start;
    /* el texto arranca a la altura del borde superior del teléfono */
    padding-top: calc((86vh - min(72vh, 700px)) / 2);
  }
  .showcase__inline { display: none; }
}
@media (max-width: 899px) {
  .showcase__phonecol { display: none; }
  .showcase__step { padding: 46px 0; }
  .showcase__inline { margin-top: 30px; display: flex; justify-content: center; }
}

.step__eyebrow { margin-bottom: 16px; }
.step__title {
  font-family: "Inter", var(--font-sans);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.07;
  margin: 0;
  font-size: clamp(26px, 3.4vw, 42px);
  text-wrap: balance;
}
.step__desc {
  margin: 20px 0 0;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.55;
  color: var(--gris-calido);
  max-width: 40ch;
  text-wrap: pretty;
}
.step__list { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.step__list li {
  position: relative; padding-left: 22px;
  font-size: 16px; color: var(--gris-calido); line-height: 1.5;
}
.step__list li::before {
  content: ""; position: absolute; left: 2px; top: 0.6em;
  width: 7px; height: 7px; border-radius: 999px; background: var(--accent);
}
/* indicador de progreso por paso (desktop) */
.step__index {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: 0.04em; color: var(--gris-suave);
  margin-bottom: 20px;
}
.step__index b { color: var(--negro); font-weight: 500; }

/* ----- Teléfono ----- */
.phone {
  height: min(72vh, 700px);
  aspect-ratio: 1179 / 2556;
  background: #111007;
  border-radius: 46px;
  padding: 9px;
  box-shadow: 0 50px 100px -34px rgba(29,27,17,0.55), 0 0 0 1px rgba(0,0,0,0.2);
  position: relative;
}
.phone--inline { height: min(640px, 116vw); }
.phone__screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 38px;
  overflow: hidden;
  background: #f2f1ec;
}
.phone__screen img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 520ms var(--ease);
}
.phone__screen img.is-active { opacity: 1; }
.phone--inline .phone__screen img { position: static; opacity: 1; }
.phone__island {
  position: absolute;
  top: 13px; left: 50%; transform: translateX(-50%);
  width: 33%; height: 11px;
  background: #000; border-radius: 999px;
  z-index: 3; pointer-events: none;
}

/* ============================================================
   CARDS — carrusel "Cómo funciona"
   ============================================================ */
.cards-rail {
  display: flex; gap: 20px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 6px 0 28px; margin-top: clamp(34px, 4vw, 44px);
  scrollbar-width: thin; scrollbar-color: var(--borde-medio) transparent;
  -webkit-overflow-scrolling: touch;
}
.cards-rail::-webkit-scrollbar { height: 6px; }
.cards-rail::-webkit-scrollbar-thumb { background: var(--borde-medio); border-radius: 999px; }
.card {
  flex: 0 0 min(82vw, 360px); scroll-snap-align: start;
  background: var(--blanco); border: 1px solid var(--borde-claro);
  border-radius: 22px; padding: 30px; display: flex; flex-direction: column; min-height: 360px;
}
.section--tint .card { background: var(--crudo); }
.card__n { font-family: var(--font-serif); font-style: var(--serif-style); font-size: 30px; color: var(--gris-suave); line-height: 1; }
.card__title {
  font-family: "Inter", var(--font-sans); font-weight: 300; letter-spacing: -0.015em;
  font-size: 22px; line-height: 1.16; margin: 16px 0 12px; text-wrap: balance;
}
.card__body { font-size: 15.5px; line-height: 1.55; color: var(--gris-calido); margin: 0; text-wrap: pretty; }
.card__art { margin-top: auto; padding-top: 24px; }
.card__chip {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px;
  border-radius: 999px; border: 1px solid var(--borde-medio);
  font-size: 13px; color: var(--negro); background: var(--crudo-calido);
}
.section--tint .card__chip { background: var(--blanco); }
.card__chip svg { width: 16px; height: 16px; color: var(--oliva); }
.rail-hint { margin-top: 6px; font-size: 12.5px; color: var(--gris-suave); display: flex; align-items: center; gap: 8px; }

/* Cabecera compacta "Cómo funciona" — título a la izquierda, intro a la derecha */
.how-head { display: grid; gap: 16px; }
.how-head__sub { margin: 0; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.5; color: var(--gris-calido); text-wrap: pretty; }
@media (min-width: 820px) {
  .how-head { grid-template-columns: 1fr auto; align-items: end; column-gap: clamp(40px, 6vw, 90px); }
  .how-head__sub { max-width: 40ch; padding-bottom: 6px; }
}

/* Tarjetas grandes a sangre: media de fondo + texto superpuesto (estilo Novu) */
.how { padding-bottom: clamp(40px, 6vw, 80px); }
.hscroll { position: relative; margin-top: clamp(34px, 4vw, 48px); }
.hscroll__sticky {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
}
.hscroll__track {
  display: flex;
  gap: clamp(56px, 8vw, 112px);
  padding-left: max(var(--pad-x), calc((100% - var(--wrap)) / 2 + var(--pad-x)));
  padding-right: var(--pad-x);
  will-change: transform;
}
.hcard {
  position: relative;
  flex: 0 0 auto;
  width: min(82vw, 320px);
  aspect-ratio: 1179 / 2556;
  scroll-snap-align: start;
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--negro-2);
}
@media (min-width: 820px) {
  .hcard { width: auto; height: min(80vh, 760px); }
}
@media (max-width: 819px) {
  .hscroll { height: auto !important; margin-top: clamp(28px, 6vw, 40px); }
  .hscroll__sticky {
    position: static; height: auto; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .hscroll__sticky::-webkit-scrollbar { display: none; }
  .hscroll__track { transform: none !important; }
}
.hcard__bg { position: absolute; inset: 0; z-index: 0; }
/* Flechas de navegación de las tarjetas */
.how-nav {
  display: flex; gap: 12px; justify-content: flex-end;
  width: 100%; max-width: var(--wrap); margin: 22px auto 0; padding: 0 var(--pad-x);
}
.how-arrow {
  width: 52px; height: 52px; border-radius: 999px;
  border: 1px solid var(--borde-medio); background: transparent;
  color: var(--negro); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.how-arrow:hover { background: var(--negro); color: var(--crudo); border-color: var(--negro); }
.how-arrow:active { opacity: 0.85; }
@media (min-width: 820px) { .how-nav { display: none; } }
.hcard__bg img, .hcard__bg video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hcard__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(15,14,9,0.05) 0%, rgba(15,14,9,0.0) 34%, rgba(15,14,9,0.62) 72%, rgba(15,14,9,0.9) 100%);
}
.hcard__text { position: relative; z-index: 2; padding: 30px 30px 32px; color: var(--crudo); }
.hcard__n { font-family: var(--font-serif); font-style: normal; font-size: 26px; color: #C7E0A6; line-height: 1; }
.hcard__title {
  font-family: "Inter", var(--font-sans);
  font-weight: 300;
  letter-spacing: -0.015em;
  font-size: 25px;
  line-height: 1.14;
  margin: 12px 0 10px;
  text-wrap: balance;
  color: var(--crudo);
}
.hcard__body { font-size: 15.5px; line-height: 1.55; color: rgba(250,249,245,0.86); margin: 0; text-wrap: pretty; }

/* ============================================================
   DARK BAND
   ============================================================ */
.band { text-align: center; position: relative; overflow: hidden; }
.band__bg {
  position: absolute; left: 0; right: 0; top: -14%; bottom: -14%;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
}
.band__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(29,27,17,0.74) 0%, rgba(29,27,17,0.5) 45%, rgba(29,27,17,0.78) 100%);
}
.band > .wrap { position: relative; z-index: 2; }
.band__title {
  font-family: "Inter", var(--font-sans); font-weight: 300; letter-spacing: -0.02em;
  line-height: 1.06; margin: 0 auto; font-size: clamp(34px, 5.2vw, 68px);
  max-width: 16ch; text-wrap: balance;
}
.band__sub {
  margin: 28px auto 0; font-size: clamp(16px, 1.8vw, 20px); line-height: 1.5;
  color: rgba(250,249,245,0.72); max-width: 50ch; text-wrap: pretty;
}
.band__meta {
  margin-top: 40px; display: inline-flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 26px; font-size: 13px; letter-spacing: 0.04em; color: rgba(250,249,245,0.6);
}
.band__meta span { display: inline-flex; align-items: center; gap: 9px; }
.band__meta svg { width: 16px; height: 16px; color: var(--amarillo); }

/* Aparición en orden, gobernada por el scroll */
.band__meta-item {
  opacity: 0; transform: translateY(14px);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
}
.band__meta-item.is-shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .band__meta-item { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  position: relative; margin-top: 54px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track { display: flex; gap: 16px; width: max-content; animation: marquee 46s linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
}
.chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 11px; padding: 13px 22px;
  border: 1px solid var(--borde-claro); border-radius: 999px; background: var(--blanco);
  font-size: 15.5px; letter-spacing: -0.01em; color: var(--negro); white-space: nowrap;
}
.chip__ico {
  width: 32px; height: 32px; flex: none; border-radius: 999px; background: var(--amarillo);
  display: inline-flex; align-items: center; justify-content: center; color: var(--oliva);
}
.chip__ico svg { width: 16px; height: 16px; }

/* Sección "Todo en un sitio" compacta */
.caps { padding: clamp(38px, 5vw, 62px) 0; }
.caps__head { max-width: 720px; }
.caps__head .sec-head__title { font-size: clamp(26px, 3.6vw, 46px); }
.caps__head .sec-head__title .accent { display: block; }
.caps__head .sec-head__sub { margin-top: 10px; }
.caps .marquee { margin-top: clamp(24px, 3vw, 36px); }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 820px; margin: 0 auto; }
#faq { padding-top: clamp(40px, 5vw, 64px); }
.faq .sec-head { max-width: none; }
.faq .sec-head__title { white-space: nowrap; }
@media (max-width: 560px) { .faq .sec-head__title { white-space: normal; } }
.faq__list { border-top: 1px solid var(--borde-claro); margin-top: 48px; }
.faq__item { border-bottom: 1px solid var(--borde-claro); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  text-align: left; padding: 26px 2px; font-size: clamp(17px, 2vw, 21px);
  font-weight: 400; letter-spacing: -0.01em; color: var(--negro);
}
.faq__plus { flex: none; position: relative; width: 22px; height: 22px; }
.faq__plus::before, .faq__plus::after {
  content: ""; position: absolute; background: var(--gris-suave);
  transition: transform 320ms var(--ease), background 320ms var(--ease);
}
.faq__plus::before { top: 10px; left: 0; width: 22px; height: 2px; }
.faq__plus::after { left: 10px; top: 0; width: 2px; height: 22px; }
.faq__item.is-open .faq__plus::after { transform: rotate(90deg); }
.faq__item.is-open .faq__plus::before,
.faq__item.is-open .faq__plus::after { background: var(--amarillo); }
.faq__a { overflow: hidden; max-height: 0; transition: max-height 380ms var(--ease); }
.faq__a-inner {
  padding: 0 2px 28px; font-size: 16.5px; line-height: 1.6; color: var(--gris-calido);
  max-width: 64ch; text-wrap: pretty;
}
.faq__a-inner a { color: var(--negro); border-bottom: 1px solid var(--accent); }

/* ============================================================
   CTA + FOOTER (capa oscura inferior)
   ============================================================ */
.cta { text-align: center; padding: clamp(40px, 5vw, 62px) 0 0; }
.cta__title {
  font-family: "Inter", var(--font-sans); font-weight: 300; letter-spacing: -0.02em; line-height: 1.04;
  margin: 0 auto; font-size: clamp(30px, 4.2vw, 54px); max-width: 15ch; text-wrap: balance;
}
.cta__sub { margin: 16px auto 0; font-size: clamp(15px, 1.7vw, 19px); color: rgba(250,249,245,0.74); max-width: 42ch; }
.cta__actions { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

.foot { margin-top: clamp(30px, 4vw, 46px); border-top: 1px solid rgba(250,249,245,0.12); padding: 26px 0 22px; }
.foot__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.foot__nav a { color: rgba(250,249,245,0.82); font-size: 15px; }
.foot__nav a:hover { color: var(--crudo); }
.foot__h {
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(250,249,245,0.5); margin: 0 0 18px;
}
.foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.foot__list a, .foot__list span { color: rgba(250,249,245,0.82); font-size: 15px; }
.foot__list a:hover { color: var(--crudo); }
.foot__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
@media (min-width: 720px) { .foot__brand { align-items: flex-end; text-align: right; } }
.foot__logo { height: 34px; filter: brightness(0) invert(1); opacity: 0.9; }
.foot__logos { display: flex; align-items: center; gap: 16px; }
.foot__logos a { display: inline-flex; transition: opacity 0.2s var(--ease); }
.foot__logos a:hover { opacity: 0.7; }
.foot__divider { width: 1px; height: 26px; background: rgba(250,249,245,0.25); flex: none; }
.foot__begrand { font-family: var(--font-serif); font-style: normal; font-size: 22px; line-height: 1; color: var(--crudo); letter-spacing: 0.01em; }
.foot__begrand-logo { height: 46px; width: auto; display: block; opacity: 0.95; }
.foot__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(250,249,245,0.12);
  color: rgba(250,249,245,0.5); font-size: 13px; letter-spacing: 0.03em;
}
.foot__bar a { color: rgba(250,249,245,0.7); }
.foot__bar a:hover { color: var(--crudo); }

/* ============================================================
   Reveal
   ============================================================ */
.reveal { opacity: 1; transform: none; }
html.reveal-on .reveal:not(.is-visible) { opacity: 0; transform: translateY(16px); }
html.reveal-on .reveal.is-visible { animation: revealUp var(--dur) var(--ease) both; }
@keyframes revealUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.reveal-on .reveal:not(.is-visible) { opacity: 1; transform: none; }
  .reveal.is-visible { animation: none !important; }
}

/* ============================================================
   Mobile menu
   ============================================================ */
.mobile-menu {
  position: fixed; inset: 0; z-index: 70; background: var(--negro); color: var(--crudo);
  display: flex; flex-direction: column; padding: 22px var(--pad-x) 40px;
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mobile-menu.is-open { opacity: 1; pointer-events: auto; transform: none; }
.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu__close {
  width: 42px; height: 42px; border-radius: 999px; border: 1px solid rgba(250,249,245,0.25);
  color: var(--crudo); display: inline-flex; align-items: center; justify-content: center;
}
.mobile-menu__nav { margin-top: 48px; display: grid; gap: 8px; }
.mobile-menu__nav a {
  font-family: var(--font-sans); font-size: 34px; font-weight: 400; letter-spacing: -0.02em;
  padding: 10px 0; border-bottom: 1px solid rgba(250,249,245,0.1);
}
.mobile-menu__foot { margin-top: auto; padding-top: 32px; }

/* ============================================================
   INSTALL MODAL (iOS)
   ============================================================ */
.imodal {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  background: rgba(15, 14, 9, 0.55);
  backdrop-filter: blur(6px);
  animation: imodalFade var(--dur) var(--ease) both;
}
@keyframes imodalFade { from { opacity: 0; } to { opacity: 1; } }
.imodal__card {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100svh - 44px);
  overflow-y: auto;
  background: var(--crudo);
  border-radius: 26px;
  padding: clamp(28px, 4vw, 44px);
  animation: imodalUp var(--dur) var(--ease) both;
}
@keyframes imodalUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.imodal__close {
  position: absolute; top: 18px; right: 18px;
  width: 40px; height: 40px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tinta); border: 1px solid var(--borde-claro);
  transition: background 0.2s var(--ease);
}
.imodal__close:hover { background: var(--crudo-calido); }
.imodal__eyebrow { margin-bottom: 14px; }
.imodal__title {
  font-family: var(--font-sans); font-weight: 300; letter-spacing: -0.02em;
  line-height: 1.05; margin: 0; font-size: clamp(26px, 4vw, 38px);
}
.imodal__intro { margin: 16px 0 0; color: var(--gris-calido); font-size: 16px; max-width: 42ch; }
.imodal__shots {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 26px 0 4px;
}
.imodal__shots figure { margin: 0; }
.imodal__shot {
  border-radius: 16px; overflow: hidden; background: var(--crudo-calido);
  border: 1px solid var(--borde-claro); aspect-ratio: 1179 / 1100;
}
.imodal__shot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.imodal__shots figcaption {
  margin-top: 9px; font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gris-suave);
}
.imodal__steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.imodal__steps li {
  display: flex; gap: 14px; align-items: flex-start;
  font-size: 16px; line-height: 1.5; color: var(--tinta);
}
.imodal__n {
  flex: none; width: 26px; height: 26px; border-radius: 999px;
  background: var(--negro); color: var(--amarillo);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 500; margin-top: 1px;
}
.imodal__ok { margin-top: 28px; width: 100%; justify-content: center; }
@media (max-width: 460px) {
  .imodal__shots { grid-template-columns: 1fr; max-width: 240px; }
}

@media (max-width: 820px) {
  .nav__menu { display: inline-flex; }
  .nav .navpill { display: none; }
  .nav .lang, .nav .pill { display: none; }
}

/* ============================================================
   MOBILE — afinado responsive para teléfono
   ============================================================ */

/* Offset de anclas para que el nav fijo no tape los títulos */
#top, #bienvenida, #funciones, #como, #tu-residencia, #capacidades, #faq, #instalar { scroll-margin-top: 84px; }

/* Objetivos táctiles ≥ 44px */
.nav__menu, .mobile-menu__close { width: 44px; height: 44px; }

@media (max-width: 899px) {
  /* Evita cualquier scroll horizontal en móvil (el sticky del teléfono ya
     está desactivado a este ancho, así que recortar aquí es seguro). */
  .sheet { overflow-x: clip; }
}

@media (max-width: 600px) {
  :root { --pad-x: 20px; }

  /* Ritmo vertical más ajustado en móvil */
  .section { padding: 60px 0; }
  .welcome { padding: 64px 0; min-height: 0; position: relative; z-index: 1; }
  .showcase { padding-top: 32px; }
  .how { padding-bottom: 36px; }

  /* Nav un poco más compacto */
  .nav { padding: 13px var(--pad-x); }
  .nav__logo { font-size: 24px; }

  /* Hero */
  .hero { padding: 104px 0 92px; }
  .hero__title { font-size: clamp(38px, 13vw, 56px); max-width: 16ch; }
  .hero__sub { font-size: 16px; max-width: 36ch; }
  .hero__actions { margin-top: 30px; }

  /* CTA del hero a ancho cómodo y centrado */
  .hero__actions .pill--lg { padding: 15px 26px; }

  /* Menú móvil: enlaces algo menores para que respiren */
  .mobile-menu__nav a { font-size: 30px; }

  /* Tarjetas "Cómo funciona": una entra y la siguiente asoma */
  .hcard { width: min(64vw, 250px); }
  .hscroll__track { gap: 16px; padding-right: 20px; }

  /* Footer: apilado y centrado en móvil */
  .foot__top { flex-direction: column; align-items: center; gap: 26px; }
  .foot__nav { justify-content: center; text-align: center; gap: 12px 24px; }
  .foot__bar { justify-content: center; text-align: center; }

  /* Carta de bienvenida: firma y foto a escala móvil */
  .welcome__firma-svg { height: 70px; }
  .welcome__photo img { max-height: 380px; }

  /* Banda oscura: el mensaje clave no demasiado grande */
  .band__title { font-size: clamp(30px, 9vw, 44px); }

  /* CTA final */
  .cta__title { font-size: clamp(30px, 9.5vw, 46px); }

  /* Modal de instalación a pantalla casi completa */
  .imodal { padding: 14px; }
  .imodal__card { padding: 26px 22px; border-radius: 22px; }

  /* Footer: pila ordenada y legible */
  .foot__top { align-items: center; gap: 22px; }
  .foot__bar { gap: 8px; }
  .foot { padding-bottom: 44px; }
  .bottom-layer { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
}

@media (max-width: 380px) {
  .hero__title { font-size: 36px; }
  .mobile-menu__nav a { font-size: 27px; }
  .step__title { font-size: 24px; }
}

/* ============================================================
   INTRO — carga dinámica (primera visita por sesión)
   vídeo → logo → menús → titular
   ============================================================ */
.intro-veil { display: none; }
/* Velo: opaco mientras se preparan los assets; se desvanece al revelar */
html.intro-play .intro-veil {
  display: block; position: fixed; inset: 0; z-index: 200;
  background: var(--negro); pointer-events: none; opacity: 1;
}
html.intro-play.intro-reveal .intro-veil { animation: introVeil 1s var(--ease) both; }
@keyframes introVeil { 0% { opacity: 1; } 38% { opacity: 1; } 100% { opacity: 0; } }

/* Estado inicial oculto (antes de revelar) para que nada parpadee */
html.intro-play .hero__bg--video,
html.intro-play .hero__bg { filter: blur(24px); transform: scale(1.2); }
html.intro-play .nav__logo,
html.intro-play .nav__right > *,
html.intro-play .hero__eyebrow,
html.intro-play .hero__title,
html.intro-play .hero__sub,
html.intro-play .hero__actions,
html.intro-play .hero__scroll { opacity: 0; }

/* Vídeo del hero: entra desenfocado y ampliado, y se asienta */
html.intro-play.intro-reveal .hero__bg--video,
html.intro-play.intro-reveal .hero__bg { animation: introVideo 1.25s var(--ease) both; }
@keyframes introVideo {
  0%   { filter: blur(24px); transform: scale(1.2); }
  100% { filter: blur(0);    transform: scale(1.04); }
}

/* Logo del nav */
html.intro-play.intro-reveal .nav__logo { animation: introRise 0.6s var(--ease) 0.7s both; }

/* Menús del nav, en cascada */
html.intro-play.intro-reveal .nav__right > *:nth-child(1) { animation: introRise 0.5s var(--ease) 0.92s both; }
html.intro-play.intro-reveal .nav__right > *:nth-child(2) { animation: introRise 0.5s var(--ease) 1.02s both; }
html.intro-play.intro-reveal .nav__right > *:nth-child(3) { animation: introRise 0.5s var(--ease) 1.12s both; }
html.intro-play.intro-reveal .nav__right > *:nth-child(4) { animation: introRise 0.5s var(--ease) 1.22s both; }

/* Contenido del hero, después de los menús */
html.intro-play.intro-reveal .hero__eyebrow  { animation: introRise 0.6s var(--ease) 1.28s both !important; }
html.intro-play.intro-reveal .hero__title    { animation: introRise 0.7s var(--ease) 1.46s both !important; }
html.intro-play.intro-reveal .hero__sub      { animation: introRise 0.6s var(--ease) 1.72s both !important; }
html.intro-play.intro-reveal .hero__actions  { animation: introRise 0.6s var(--ease) 1.9s both !important; }
html.intro-play.intro-reveal .hero__scroll   { animation: introRise 0.6s var(--ease) 2.08s both !important; }

@keyframes introRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-veil { display: none !important; }
}