/* ═══════════════════════════════════════════════════════════════
   v4 «Noche de Madrid» — capa cinematográfica (15/sep/2026)
   Secciones oscuras alternadas, oro como luz, grano fino.
   Se carga DESPUÉS de aura.css. Solo añade; no cambia nada de lo
   anterior salvo la escala tipográfica.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --night:#0F0C0A; --night-2:#17120F; --night-3:#221B17;
  --cream:#F6EEE3; --cream-2:rgba(246,238,227,.70); --cream-3:rgba(246,238,227,.50);
  --line-n:rgba(246,238,227,.11); --line-n2:rgba(246,238,227,.06);
  --gold-glow:rgba(217,184,124,.34);
  --fs-display:clamp(2.8rem,6.4vw,5.4rem);
  --fs-h2:clamp(2.1rem,4.4vw,3.5rem);
  --t-enter:720ms;
}
.display{line-height:.98;letter-spacing:-.025em}
.js .reveal{transform:translateY(22px)}

/* superficie nocturna */
.night{background:var(--night);color:var(--cream);position:relative;isolation:isolate}
.night::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60% 55% at 85% 0%, rgba(217,184,124,.22) 0%, transparent 60%),
    radial-gradient(40% 40% at 0% 100%, rgba(192,138,134,.12) 0%, transparent 62%),
    linear-gradient(180deg,var(--night-2) 0%,var(--night) 50%,var(--night-2) 100%);
}
.night.grain::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.night .display,.night .h2,.night .h3,.night h1,.night h2,.night h3{color:var(--cream)}
.night p,.night .lead,.night .small{color:var(--cream-2)}
.night .label{color:var(--gold-hi)} .night .label::before{background:var(--gold-hi)}
.night .serif-it,.night .gold,.night a:not(.btn){color:var(--gold-hi)}
.night ::selection{background:rgba(217,184,124,.35);color:var(--cream)}
.night .btn-ghost{color:var(--cream);border-color:var(--line-n)}
.night .btn-ghost:hover{border-color:var(--gold-hi);color:var(--gold-hi);background:rgba(217,184,124,.07)}
.night .checks li{color:var(--cream)} .night .checks li svg{color:var(--gold-hi)}
.night .link-arrow{color:var(--cream);border-color:var(--line-n)}
.night .link-arrow:hover{color:var(--gold-hi);border-color:var(--gold-hi)}

/* filo de luz entre secciones */
.hairline{height:1px;background:linear-gradient(90deg,transparent,rgba(217,184,124,.55) 30%,rgba(217,184,124,.55) 70%,transparent)}

/* nav sobre fondo oscuro */
.nav.on-dark .brand{color:var(--cream)} .nav.on-dark .brand span{color:var(--gold-hi)}
.nav.on-dark .nav-links a{color:var(--cream-2)} .nav.on-dark .nav-links a:hover{color:var(--cream)}
.nav.on-dark .nav-links a::after{background:var(--gold-hi)}
.nav.on-dark.scrolled{background:rgba(15,12,10,.84);border-bottom-color:var(--line-n);box-shadow:none}

/* hero nocturno */
.hero.night{padding-top:clamp(112px,14vh,160px);padding-bottom:0;overflow:hidden}
/* el mockup mantiene su paleta clara dentro de la noche */
.night .stage{color:var(--ink)}
.night .stage p,.night .stage .sub,.night .stage small{color:var(--gray-2)}
.night .stage h3,.night .stage h4,.night .stage .crm-top b,.night .stage .crm-kpi b,.night .stage .phone-top b,.night .stage .msg{color:var(--ink)}
.night .stage .crm-kpi b.g{color:var(--green)} .night .stage .crm-kpi b.o{color:var(--gold)} .night .stage .crm-kpi b.r{color:var(--rose)}
.night .stage .crm-kpi span{color:var(--ink)}
.night .stage .logo-slot b{color:var(--gold)}
.night .stage .crm-live{color:var(--green)}
.hero.night .hero-proof{border-top-color:var(--line-n)}
.hero.night .hero-proof b{color:var(--gold-hi);font-size:1.7rem}
.hero.night .hero-proof span{color:var(--cream-3)}
.hero.night .lead{color:var(--cream-2)}
.hero-mark{
  position:absolute;right:-2vw;top:6%;z-index:-1;pointer-events:none;user-select:none;
  font-family:var(--font-d);font-weight:700;font-size:clamp(14rem,34vw,34rem);line-height:.8;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px rgba(246,238,227,.07);
}
.hero.night .stage::before{
  content:"";position:absolute;left:12%;right:-6%;top:18%;bottom:-10%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side, rgba(217,184,124,.30), rgba(217,184,124,.08) 55%, transparent 75%);
  filter:blur(28px);
}
.hero.night .badge{background:var(--night-3);border-color:rgba(217,184,124,.35);color:var(--cream);
  box-shadow:0 20px 40px -18px rgba(0,0,0,.8)}
.hero.night .badge small{color:var(--cream-3)}
.hero.night .mb-lid{box-shadow:0 60px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(246,238,227,.05)}
.hero.night .iphone{box-shadow:0 40px 70px -24px rgba(0,0,0,.9),0 0 0 .1em rgba(255,255,255,.07) inset}

/* entrada del hero */
.js .hero-in{opacity:0;transform:translateY(18px);animation:heroIn 900ms var(--ease) forwards}
.js .hero-in[data-d="1"]{animation-delay:90ms} .js .hero-in[data-d="2"]{animation-delay:180ms}
.js .hero-in[data-d="3"]{animation-delay:270ms} .js .hero-in[data-d="4"]{animation-delay:360ms}
@keyframes heroIn{to{opacity:1;transform:none}}

/* pilares — cinta bajo el hero */
.pillars{margin-top:var(--s-7);border-top:1px solid var(--line-n);border-bottom:1px solid var(--line-n);
  background:rgba(246,238,227,.025)}
.pillars-in{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media (min-width:820px){ .pillars-in{grid-template-columns:repeat(4,1fr)} }
.pillar{padding:22px var(--s-3);display:flex;align-items:baseline;gap:14px;border-right:1px solid var(--line-n2);min-width:0}
.pillar:last-child{border-right:0}
.pillar b{font-family:var(--font-d);font-size:1.9rem;font-weight:600;color:var(--gold-hi);line-height:1}
.pillar span{display:flex;flex-direction:column;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-2);line-height:1.5}
.pillar span small{font-size:.74rem;letter-spacing:.02em;text-transform:none;color:var(--cream-3)}
@media (max-width:819px){ .pillar:nth-child(2){border-right:0} .pillar:nth-child(-n+2){border-bottom:1px solid var(--line-n2)} }

/* cabeceras editoriales: etiqueta izquierda, título derecha */
.sec-head{display:grid;gap:var(--s-2);align-items:end}
@media (min-width:900px){ .sec-head{grid-template-columns:.8fr 1.6fr;gap:var(--s-5)} .sec-head .lead{max-width:46ch} }

/* flujo: hilo dorado */
@media (min-width:900px){
  .flow-step{position:relative;padding-top:var(--s-5)}
  .flow-step::before{content:"";position:absolute;left:var(--s-3);right:0;top:26px;height:1px;background:var(--gold-hi);opacity:.6}
  .flow-step::after{content:"";position:absolute;left:var(--s-3);top:22px;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--w)}
  .flow-step:last-child::before{width:0}
  .flow-step.is-you::after{box-shadow:0 0 0 4px var(--pearl)}
}

/* speed-to-lead en la noche */
.night .speed-bar{background:rgba(246,238,227,.06);border-color:var(--line-n);height:44px}
.night .speed-bar i{box-shadow:0 0 28px var(--gold-glow)}
.night .speed-row.is-low .speed-bar i{background:linear-gradient(90deg,#B98F42,#D9B87C);box-shadow:0 0 18px rgba(217,184,124,.2)}
.night .speed-row.is-dead .speed-bar i{background:rgba(192,138,134,.5);box-shadow:none}
.night .speed-row .when{color:var(--cream);font-size:1.02rem}
.night .speed-row .verdict{color:var(--cream-3)}
.night .speed-note{color:var(--cream-3)}
.speed-big{display:grid;gap:var(--s-5);align-items:center}
@media (min-width:960px){ .speed-big{grid-template-columns:.85fr 1.15fr;gap:var(--s-7)} }
.speed-big .giant{font-family:var(--font-d);font-size:clamp(5rem,12vw,10rem);line-height:.88;letter-spacing:-.04em;color:var(--gold-hi);font-weight:600;font-variant-numeric:tabular-nums}
.speed-big .giant small{display:block;font-family:var(--font-b);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--cream-3);margin-top:16px;font-weight:500}

/* piezas: tarjeta destacada oscura */
.card{padding:var(--s-4) var(--s-4) var(--s-5)}
.card-ico{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--gold-soft);margin-bottom:var(--s-3)}
.card-ico svg{width:24px;height:24px}
.card.card-feat{background:var(--night);border-color:rgba(217,184,124,.35);color:var(--cream);isolation:isolate}
.card.card-feat::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(70% 60% at 100% 0%, rgba(217,184,124,.28), transparent 60%)}
.card.card-feat .h3{color:var(--cream)} .card.card-feat p{color:var(--cream-2)}
.card.card-feat .card-n{color:var(--gold-hi)}
.card.card-feat .card-ico{background:rgba(217,184,124,.14);color:var(--gold-hi)}
.card.card-feat:hover{border-color:var(--gold-hi);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}

/* stats en la noche */
.stat b{font-size:clamp(2.6rem,5vw,3.9rem)}
.night .stats{background:var(--line-n);border-color:var(--line-n) !important}
.night .stat{background:var(--night-2)}
.night .stat b{color:var(--gold-hi);font-size:clamp(2.8rem,5.4vw,4.2rem)}
.night .stat.is-green b{color:#7FC9A5} .night .stat.is-ink b{color:var(--cream)}
.night .stat span{color:var(--cream-2)}
.night blockquote p{color:var(--cream)} .night blockquote footer{color:var(--cream-3) !important}
.night blockquote{border-left-color:var(--gold-hi) !important}

/* compare: lado AURA con luz */
.compare > div:not(.is-now){position:relative}
.compare > div:not(.is-now)::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 100% 0%, rgba(217,184,124,.18), transparent 60%)}

/* formulario sobre noche */
.night .form-card{border-color:rgba(217,184,124,.45);box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.night .form-card p{color:var(--gray)} .night .form-card .err{color:var(--red)}
.night .form-card label{color:var(--ink)} .night .form-card .h3{color:var(--ink)}
.night .form-card a{color:var(--gold)}

/* footer nocturno */
.footer.night{border-top-color:var(--line-n);background:var(--night-2)}
.footer.night::before{display:none}
.footer.night .brand{color:var(--cream)} .footer.night .brand span{color:var(--gold-hi)}
.footer.night h4{color:var(--gold-hi)}
.footer.night a{color:var(--cream-2)} .footer.night a:hover{color:var(--gold-hi)}
.footer.night .footer-legal{border-top-color:var(--line-n2)}
.footer.night small,.footer.night p{color:var(--cream-3)}

/* más aire y jerarquía */
.faq-q{font-size:1.22rem;padding:26px 0}
.pain b{font-size:1.12rem}
.step h3{font-size:1.5rem}

@media (prefers-reduced-motion:reduce){ .js .reveal{transform:none} .js .hero-in{animation:none;opacity:1;transform:none} }