/* ─────────────────────────────────────────────
   BEAI REAL ESTATE · sistema visual
   Fuente de verdad: skill beai-realestate-socialpublisher
   Papel y tinta. Sin bordes redondeados, sin sombras,
   sin iconos, sin emojis, sin amarillo.
   ───────────────────────────────────────────── */

@font-face { font-family:'PP Neue Montreal'; src:url('../fonts/PPNeueMontreal-Book.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('../fonts/PPNeueMontreal-Italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('../fonts/PPNeueMontreal-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('../fonts/PPNeueMontreal-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

:root{
  --papel:#F2EFE9;
  --papel-frio:#F6F5F2;
  --tinta:#111111;
  --arena:#C9C0B2;
  --piedra:#2B2825;
  --negro:#0E0E0E;

  --font:'PP Neue Montreal','Neue Haas Grotesk Display Pro','Helvetica Neue',Helvetica,Arial,sans-serif;

  --margen:clamp(1.5rem,5vw,4.5rem);
  --max:1560px;
  --seccion:clamp(5rem,11vh,9.5rem);

  --t-impacto:clamp(2.4rem,6.6vw,5.8rem);
  --t-grande:clamp(1.85rem,4vw,3.3rem);
  --t-medio:clamp(1.2rem,1.9vw,1.75rem);
  --t-cuerpo:clamp(0.9375rem,1vw,1.0625rem);
  --t-kicker:0.6875rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--font);font-weight:400;
  font-size:var(--t-cuerpo);line-height:1.45;
  text-wrap:pretty;-webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--margen)}
.seccion{padding-block:var(--seccion)}
.papel-frio{background:var(--papel-frio)}
.oscuro{background:var(--negro);color:var(--papel)}

/* ── tipografía ─────────────────────────────── */
.kicker{
  display:block;font-size:0.9375rem;font-style:italic;font-weight:400;
  letter-spacing:0;text-transform:none;opacity:0.75;
}
.kicker--arena{color:var(--arena);opacity:1}
.titular{font-size:var(--t-grande);font-weight:400;line-height:0.98;letter-spacing:-0.02em}
.titular--medio{font-size:var(--t-medio);font-weight:500;line-height:1.1;letter-spacing:-0.01em}
.impacto{
  font-size:var(--t-impacto);font-weight:500;line-height:0.9;
  letter-spacing:0.02em;text-transform:uppercase;
}
.impacto span{display:block}
.parrafo{font-size:var(--t-cuerpo);line-height:1.45}
.parrafo + .parrafo{margin-top:1.35em}
.sangria{text-indent:2.2em}
.dato{font-size:var(--t-kicker);letter-spacing:0.14em;text-transform:uppercase;color:var(--arena)}

/* ── navegación ─────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:60;background:var(--papel);
  border-bottom:1px solid rgba(17,17,17,0.12);
}
.nav__in{
  max-width:var(--max);margin:0 auto;padding:0.95rem var(--margen);
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.75rem);
}
.nav__marca{display:flex;align-items:baseline;gap:0.6rem}
.nav__marca img{height:27px;width:auto}
.nav__marca span{font-size:var(--t-kicker);letter-spacing:0.14em;text-transform:uppercase;font-weight:500}
.nav__links{display:flex;gap:clamp(1rem,2.2vw,2rem);margin-left:auto;font-size:0.9375rem}
.nav__links a{padding-block:0.25rem;border-bottom:1px solid transparent;transition:border-color .2s}
.nav__links a:hover{border-color:var(--tinta)}
.nav__cta{
  font-size:0.875rem;padding:0.58rem 1.15rem;border-radius:999px;
  background:var(--tinta);color:var(--papel);transition:background .2s;
}
.nav__cta:hover{background:var(--piedra)}
.nav__cruce{
  font-size:var(--t-kicker);letter-spacing:0.14em;text-transform:uppercase;
  color:var(--arena);border-bottom:1px solid transparent;
}
.nav__cruce:hover{color:var(--tinta);border-color:var(--arena)}
.nav__social{display:flex;align-items:center;gap:0.55rem}
.nav__soc{
  display:grid;place-items:center;width:34px;height:34px;border-radius:999px;
  border:1px solid rgba(17,17,17,0.22);color:var(--tinta);transition:background .2s,color .2s;
}
.nav__soc svg{width:16px;height:16px}
.nav__soc:hover{background:var(--tinta);color:var(--papel)}
.nav__burger{
  display:none;margin-left:auto;background:none;border:0;padding:0.5rem;
  font:inherit;font-size:var(--t-kicker);letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;
}

/* ── botones ────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:0.7rem;
  padding:0.82rem 1.45rem;border-radius:999px;font-size:0.875rem;font-weight:500;
  background:var(--tinta);color:var(--papel);
  border:1px solid var(--tinta);transition:background .2s,color .2s;
}
.btn:hover{background:transparent;color:var(--tinta)}
.btn--linea{background:transparent;color:var(--tinta)}
.btn--linea:hover{background:var(--tinta);color:var(--papel)}
.oscuro .btn,.contacto__panel .btn{background:var(--papel);color:var(--negro);border-color:var(--papel)}
.oscuro .btn:hover,.contacto__panel .btn:hover{background:transparent;color:var(--papel)}
.btn .flecha{transition:transform .25s}
.btn:hover .flecha{transform:translateX(4px)}

/* ── portada: banner a sangre con vídeo ─────── */
.hero{
  position:relative;overflow:hidden;background:var(--piedra);color:var(--papel);
  min-height:clamp(520px,80vh,840px);display:flex;align-items:flex-end;
  padding-block:clamp(3rem,7vw,5.5rem);
}
.hero__fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.hero__velo{position:absolute;inset:0;z-index:2;background:rgba(10,9,8,0.42)}
.hero__deg{
  position:absolute;left:0;right:0;bottom:0;height:82%;z-index:2;
  background:linear-gradient(to top,rgba(10,9,8,0.88),rgba(10,9,8,0.34) 48%,rgba(10,9,8,0) 100%);
}
.hero__in{position:relative;z-index:3;width:100%}
.hero__titular{
  margin:0;max-width:17ch;
  font-size:clamp(2.2rem,4.9vw,4.2rem);font-weight:400;line-height:0.97;letter-spacing:-0.025em;
}
.hero__linea{margin-top:0.7rem;font-size:clamp(1rem,1.35vw,1.25rem);font-style:italic;color:rgba(242,239,233,0.82)}
.hero__bajada{margin-top:clamp(1.25rem,2vw,1.75rem);max-width:52ch;color:rgba(242,239,233,0.82)}
.hero__acciones{margin-top:clamp(1.5rem,2.6vw,2.25rem);display:flex;flex-wrap:wrap;gap:0.75rem}
.hero .btn{background:var(--papel);color:var(--negro);border-color:var(--papel)}
.hero .btn:hover{background:transparent;color:var(--papel)}
.hero .btn--linea{background:transparent;color:var(--papel);border-color:rgba(242,239,233,0.6)}
.hero .btn--linea:hover{background:var(--papel);color:var(--negro)}
.hero__servicios{
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.25rem;
  border-top:1px solid rgba(242,239,233,0.28);
  display:flex;flex-wrap:wrap;gap:clamp(0.9rem,3.4vw,3rem);
}
.hero__servicios li{font-size:0.875rem;font-style:italic;color:rgba(242,239,233,0.8)}

/* ── franja de autoridad ────────────────────── */
.confianza{background:var(--negro);color:var(--papel);padding-block:clamp(2rem,3.4vw,3rem)}
.confianza__in{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.25rem,4vw,3rem)}
.confianza__logo{width:clamp(150px,16vw,205px)}
.confianza__logo svg{width:100%;height:auto}
.confianza__nota{max-width:44ch;color:rgba(242,239,233,0.72)}

/* ── argumento editorial ────────────────────── */
.argumento{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.8fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.argumento__cifras{display:flex;flex-wrap:wrap;gap:clamp(1.25rem,4vw,3rem);margin-bottom:clamp(2.5rem,5vw,4rem)}
.argumento__cifras span{font-size:0.9375rem;font-style:italic;color:var(--piedra)}

/* ── impacto a sangre ───────────────────────── */
.impacto-bloque{position:relative;min-height:clamp(420px,72vh,760px);display:flex;align-items:flex-end;background:var(--piedra);overflow:hidden}
.impacto-bloque img,.impacto-bloque video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.impacto-bloque::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(14,14,14,0.78),rgba(14,14,14,0.3) 48%,rgba(14,14,14,0.12));
}
.impacto-bloque__texto{position:relative;z-index:1;width:100%;padding:var(--margen);color:var(--papel)}
.impacto-bloque .impacto{margin-top:clamp(1rem,2vw,1.75rem)}

/* ── muestrario de servicios ────────────────── */
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));border-top:1px solid rgba(17,17,17,0.16)}
.rejilla__celda{padding:clamp(1.75rem,3vw,2.5rem) 0;border-bottom:1px solid rgba(17,17,17,0.16)}
.rejilla__celda + .rejilla__celda{border-left:1px solid rgba(17,17,17,0.16);padding-left:clamp(1.5rem,2.5vw,2.5rem)}
.rejilla__celda h3{margin-bottom:0.9rem}
.rejilla__celda p{max-width:38ch;color:var(--piedra)}

/* ── split plano / resultado ────────────────── */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(1.5rem,3vw,2.5rem);align-items:stretch}
.split figure{margin:0;display:flex;flex-direction:column;gap:0.9rem}
.split img{width:100%;aspect-ratio:4/5;object-fit:cover}
.split figcaption{font-size:0.875rem;font-style:italic;color:var(--piedra)}

/* duotono tinta sobre papel para planos, obra y material técnico */
.duo{position:relative;background:var(--tinta);isolation:isolate}
.duo img{filter:grayscale(1) contrast(1.12) brightness(1.02);mix-blend-mode:screen}
.duo::after{content:"";position:absolute;inset:0;background:var(--papel);mix-blend-mode:multiply;pointer-events:none}

/* ── proceso ────────────────────────────────── */
.proceso{counter-reset:paso;display:grid;gap:0}
.proceso__item{
  display:grid;grid-template-columns:clamp(2.5rem,5vw,4.5rem) minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(1rem,3vw,2.5rem);align-items:baseline;
  padding-block:clamp(1.5rem,2.6vw,2.25rem);border-top:1px solid rgba(17,17,17,0.16);
}
.proceso__item:last-child{border-bottom:1px solid rgba(17,17,17,0.16)}
.proceso__num{font-size:0.8125rem;font-style:italic;color:var(--arena)}
.proceso__item p{color:var(--piedra)}

/* ── cita ───────────────────────────────────── */
.cita{padding-block:clamp(5rem,12vh,9rem)}
.cita blockquote{max-width:22ch;font-size:var(--t-grande);font-weight:400;line-height:1.05;letter-spacing:-0.02em}
.cita__firma{margin-top:clamp(1.75rem,3vw,2.5rem);color:var(--arena);font-size:0.875rem;font-style:italic}

/* ── muestra en vídeo ───────────────────────── */
.muestra{display:grid;grid-template-columns:minmax(0,0.66fr) minmax(0,1fr);gap:clamp(1.75rem,4vw,4rem);align-items:end}
.muestra figure{margin:0}
.muestra video{width:100%;height:auto;aspect-ratio:720/1090;object-fit:cover;background:var(--piedra)}
.muestra figcaption{
  margin-top:0.9rem;font-size:0.875rem;font-style:italic;color:var(--piedra);
}
@media (max-width:900px){ .muestra{grid-template-columns:1fr} }

/* ── preguntas ──────────────────────────────── */
.faq{border-top:1px solid rgba(17,17,17,0.16)}
.faq__item{border-bottom:1px solid rgba(17,17,17,0.16)}
.faq__btn{
  width:100%;background:none;border:0;padding:clamp(1.25rem,2.4vw,1.85rem) 0;
  display:flex;justify-content:space-between;align-items:baseline;gap:2rem;
  font:inherit;font-size:var(--t-medio);font-weight:500;line-height:1.15;letter-spacing:-0.01em;
  text-align:left;color:inherit;cursor:pointer;
}
.faq__btn .signo{font-size:1rem;color:var(--arena);flex:none}
.faq__panel{overflow:hidden;max-height:0;transition:max-height .35s cubic-bezier(0.16,1,0.3,1)}
.faq__panel p{padding-bottom:clamp(1.25rem,2.4vw,1.85rem);max-width:70ch;color:var(--piedra)}

/* ── contacto: panel oscuro, sin fotografía ──── */
.contacto{background:var(--papel-frio)}
.contacto__panel{
  background:var(--negro);color:var(--papel);
  padding:clamp(2rem,4.5vw,4.5rem);
  border:1px solid rgba(242,239,233,0.14);
  border-radius:clamp(22px,2.6vw,38px);
}
.contacto__panel .parrafo{color:rgba(242,239,233,0.76)}
.contacto__panel .kicker--arena{color:var(--arena)}
.contacto__vias{
  margin-top:clamp(2rem,4vw,3.25rem);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  border-top:1px solid rgba(242,239,233,0.18);
}
.contacto__via{padding:clamp(1.25rem,2.2vw,1.85rem) 0;border-bottom:1px solid rgba(242,239,233,0.18);display:block}
.contacto__via + .contacto__via{border-left:1px solid rgba(242,239,233,0.18);padding-left:clamp(1.5rem,2.5vw,2.5rem)}
.contacto__via b{display:block;margin-top:0.6rem;padding-right:1.25rem;font-weight:500;font-size:clamp(1rem,1.35vw,1.2rem);letter-spacing:-0.01em;word-break:break-word}
.contacto__via:hover b{text-decoration:underline;text-underline-offset:0.22em}

/* ── newsletter ─────────────────────────────── */
.news{margin-top:clamp(2rem,4vw,3rem);max-width:560px}
.news__form{margin-top:1.25rem;display:flex;flex-wrap:wrap;gap:0.6rem}
.news__form input{
  flex:1 1 260px;padding:0.82rem 1.1rem;border-radius:999px;font:inherit;color:var(--tinta);
  background:transparent;border:1px solid rgba(17,17,17,0.35);
}
.news__form input:focus{outline:none;border-color:var(--papel)}
.news__nota{margin-top:0.85rem;font-size:0.8125rem;font-style:italic;color:rgba(242,239,233,0.6)}
.news__ok{margin-top:0.85rem;font-size:0.9375rem;display:none}
.news.is-ok .news__ok{display:block}
.news.is-ok .news__form{display:none}

/* ── pie ────────────────────────────────────── */
.pie{background:var(--negro);color:var(--papel);padding-block:clamp(3rem,6vw,5rem)}
.pie__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(2rem,4vw,3.5rem)}
.pie img{height:20px;width:auto}
.pie a{border-bottom:1px solid transparent}
.pie a:hover{border-color:var(--papel)}
.pie li + li{margin-top:0.55rem}
.pie__legal{
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.5rem;
  border-top:1px solid rgba(242,239,233,0.2);
  display:flex;flex-wrap:wrap;gap:1rem 2rem;font-size:0.875rem;color:var(--arena);
}

/* ── apariciones ────────────────────────────── */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(0.16,1,0.3,1)}
.js .reveal.visible{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}

/* ── responsive ─────────────────────────────── */
@media (max-width:900px){
  .hero__grid,.argumento,.proceso__item{grid-template-columns:1fr}
  .hero__video{max-width:420px;margin-inline:auto}
  .proceso__item{gap:0.5rem}
  .rejilla__celda + .rejilla__celda,.contacto__via + .contacto__via{border-left:0;padding-left:0}
  .nav__links{
    position:fixed;inset:57px 0 auto;flex-direction:column;gap:0;
    background:var(--papel);border-bottom:1px solid rgba(17,17,17,0.12);
    padding:1rem var(--margen) 1.75rem;font-size:1.25rem;display:none;
  }
  .nav__links.abierto{display:flex}
  .nav__links a{padding-block:0.6rem}
  .nav__social{display:flex;align-items:center;gap:0.55rem}
.nav__soc{
  display:grid;place-items:center;width:34px;height:34px;border-radius:999px;
  border:1px solid rgba(17,17,17,0.22);color:var(--tinta);transition:background .2s,color .2s;
}
.nav__soc svg{width:16px;height:16px}
.nav__soc:hover{background:var(--tinta);color:var(--papel)}
.nav__burger{display:block}
  .nav__cta{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}