/* ═══════════════════════════════════════════════════════════════
   v5 «Editorial» — 16/sep/2026
   Misma dirección que altheaestetic.com (la web de Lina que a Diego
   le encantó): revista impresa. Papel crudo, Fraunces 300 a escala
   de portada, Inter en columna estrecha, oro solo como filete /
   numeración / versalete, radio 0, sombra 0, secciones «noir» planas,
   revelación por máscara vertical. Se carga DESPUÉS de aura.css y
   aura-v4.css y sobrescribe su estética (mantiene su estructura).
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* papel y tinta — paleta de Althea */
  --w:#FAF6EE; --pearl:#F2ECE1; --pearl-2:#EAE2D3;
  --ink:#221E16; --gray:#4A4336; --gray-2:#6F6557;
  --gold:#7A5F35; --gold-hi:#B99A62; --gold-soft:#EFE6D2;
  --rose:#A8776F; --green:#4F7A5A; --red:#9E4B44;
  --line:#E0D6C3; --line-2:#EAE3D5;
  --grad-gold:var(--ink);

  --night:#1A160F; --night-2:#1A160F; --night-3:#231E16;
  --cream:#FAF6EE; --cream-2:rgba(250,246,238,.78); --cream-3:rgba(250,246,238,.55);
  --line-n:rgba(250,246,238,.22); --line-n2:rgba(250,246,238,.12);

  /* forma: nada redondo, nada flotante */
  --r-1:0; --r-2:0; --r-3:0; --r-pill:0;
  --e-1:none; --e-2:none; --e-gold:none;

  /* tipografía: Fraunces 300 + Inter */
  --font-d:'Fraunces',Georgia,'Times New Roman',serif;
  --font-b:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-display:clamp(3rem,6.8vw,6rem);
  --fs-h2:clamp(2.25rem,5.2vw,4.5rem);
  --fs-h3:clamp(1.375rem,2.2vw,1.875rem);
  --fs-lead:clamp(1.0625rem,1.3vw,1.1875rem);
  --fs-body:1.0625rem;
  --fs-small:.875rem;
  --fs-label:.6875rem;
  --fs-num:clamp(2.75rem,5.4vw,4.5rem);

  /* movimiento editorial */
  --ease:cubic-bezier(.2,0,0,1);
  --ease-ed:cubic-bezier(.16,1,.3,1);
  --t-fast:150ms; --t-enter:900ms;
}

body{font-family:var(--font-b);font-size:var(--fs-body);line-height:1.7;background:var(--w);color:var(--ink);text-rendering:optimizeLegibility}
:where(h1,h2,h3,h4),.display,.h2,.h3{font-family:var(--font-d);font-weight:300;line-height:1.02;letter-spacing:-.03em;font-variation-settings:"SOFT" 12,"WONK" 0}
.display{line-height:.98;letter-spacing:-.03em}
.h3{line-height:1.12}
p{text-wrap:pretty}
::selection{background:var(--ink);color:var(--w)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.lead{color:var(--gray);line-height:1.6}
.serif-it{font-family:var(--font-d);font-style:italic;font-weight:300;color:var(--gold);font-variation-settings:"SOFT" 60,"WONK" 1}
.night .serif-it{color:var(--gold-hi)}
.measure{max-width:62ch}

/* versalete de sección: filete DESPUÉS del texto, como en Althea */
.label{font-family:var(--font-b);font-size:var(--fs-label);font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);gap:16px}
.label::before{display:none}
.label::after{content:"";width:56px;height:1px;background:var(--gold-hi);opacity:.6}
.center .label::after{display:none}
.center .label::before{display:none}

/* numeración romana de sección */
.folio{display:block;font-family:var(--font-d);font-weight:300;font-size:2.5rem;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums;margin-bottom:18px}
.night .folio{color:var(--gold-hi)}
.center .folio{margin-inline:auto}

/* ── botones: tinta sólida, canto recto, hover invierte ─── */
.btn{border-radius:0;min-height:52px;padding:0 28px;font-family:var(--font-b);font-size:.9375rem;font-weight:500;letter-spacing:.01em;
  background:var(--ink);color:var(--w);border:1px solid var(--ink);box-shadow:none;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.btn:hover{transform:none;box-shadow:none;background:var(--w);color:var(--ink);border-color:var(--ink)}
.btn:active{transform:none}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn-gold{background:var(--ink);color:var(--w);box-shadow:none}
.btn-gold:hover{background:var(--w);color:var(--ink);box-shadow:none}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-lg{min-height:58px;padding:0 34px;font-size:.9375rem}
.night .btn,.night .btn-gold{background:var(--w);color:var(--ink);border-color:var(--w)}
.night .btn:hover,.night .btn-gold:hover{background:transparent;color:var(--w);border-color:var(--w)}
.night .btn-ghost{background:transparent;color:var(--w);border-color:var(--line-n)}
.night .btn-ghost:hover{border-color:var(--w);color:var(--w);background:transparent}
.night .btn:focus-visible{outline-color:var(--w)}
.nav .btn{min-height:44px;padding:0 22px;font-size:.875rem}

.link-arrow{color:var(--ink);font-weight:500;border-bottom:1px solid var(--gold-hi);padding-bottom:5px}
.link-arrow:hover{color:var(--ink);border-color:var(--ink)}
.link-arrow:hover svg{transform:translateX(3px)}
.night .link-arrow{color:var(--w);border-color:var(--gold-hi)} .night .link-arrow:hover{border-color:var(--w);color:var(--w)}

/* ── nav ────────────────────────────────────────────────── */
.nav{padding-block:20px}
.nav.scrolled{background:rgba(250,246,238,.92);border-bottom-color:var(--line);box-shadow:none;padding-block:14px}
.nav.on-dark.scrolled{background:rgba(26,22,15,.9);border-bottom-color:var(--line-n2)}
.brand span{font-family:var(--font-b);font-size:.6rem;font-weight:500;letter-spacing:.32em;color:var(--gold)}
.brand b{font-family:var(--font-d);font-weight:300;font-size:1.5rem;letter-spacing:.2em}
.nav-links a{font-size:.9375rem;font-weight:400;color:var(--gray)}
.nav-links a::after{background:var(--ink)}
.nav.on-dark .nav-links a::after{background:var(--w)}

/* ── noir plano: sin brillo, sin grano ──────────────────── */
.night::before{background:var(--night);box-shadow:none}
.night.grain::after{display:none}
.hero-mark{display:none}
.hero.night .stage::before{display:none}
.hero.night .mb-lid{box-shadow:none;outline:1px solid rgba(250,246,238,.08)}
.hero.night .iphone{box-shadow:none}
.hero.night .badge{background:var(--night-3);border:1px solid var(--gold-hi);border-radius:0;box-shadow:none;color:var(--w)}
.badge{border-radius:0;box-shadow:none}
.night p,.night .lead{color:var(--cream-2)}

/* hero: escala de portada */
.hero.night{padding-top:clamp(120px,15vh,176px)}
.hero.night .hero-proof{border-top-color:var(--line-n)}
.hero.night .hero-proof b{font-family:var(--font-d);font-weight:300;font-size:2.25rem;color:var(--w);letter-spacing:-.02em}
.hero.night .hero-proof span{font-size:.8125rem;color:var(--cream-3)}
.hero .lead{max-width:48ch}

/* entrada del hero por máscara */
.js .hero-in{opacity:1;clip-path:inset(0 0 100% 0);transform:translateY(1.5rem);animation:heroMask 900ms var(--ease-ed) forwards}
.js .stage.hero-in{clip-path:inset(-12% -12% 100% -12%);animation-name:heroMaskStage}
@keyframes heroMask{to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes heroMaskStage{to{clip-path:inset(-12% -12% -12% -12%);transform:none}}

/* índice A·U·R·A bajo la portada */
.pillars{margin-top:var(--s-7);background:transparent;border-top:1px solid var(--line-n);border-bottom:0}
.pillar{padding:26px var(--s-3) 26px 0;border-right:0;align-items:flex-start;gap:18px}
.pillar b{font-family:var(--font-d);font-weight:300;font-size:1.75rem;color:var(--gold-hi);font-variant-numeric:tabular-nums;padding-top:2px}
.pillar span{font-size:.6875rem;letter-spacing:.24em;font-weight:500;color:var(--w)}
.pillar span small{font-family:var(--font-d);font-weight:300;font-size:1.0625rem;letter-spacing:-.01em;color:var(--cream-2);margin-top:4px}
@media (max-width:819px){ .pillar:nth-child(-n+2){border-bottom:1px solid var(--line-n2)} }

/* cabeceras editoriales */
.sec-head{align-items:end}
@media (min-width:900px){ .sec-head{grid-template-columns:.7fr 1.7fr;gap:var(--s-6)} }

/* ── flujo: cinco columnas separadas por filete ─────────── */
.flow{border-radius:0;border-left:0;border-right:0;background:var(--line)}
.flow-step{padding:var(--s-4) var(--s-3) var(--s-4) 0}
@media (min-width:900px){ .flow-step{padding-top:var(--s-4);padding-left:var(--s-3)} .flow-step:first-child{padding-left:0} .flow-step::before,.flow-step::after{display:none} }
.flow-step:hover{background:var(--w)}
.flow-step.is-you{background:var(--pearl)} .flow-step.is-you:hover{background:var(--pearl)}
.flow-step b{font-family:var(--font-d);font-weight:300;font-size:1.5rem;letter-spacing:0;color:var(--gold)}
.flow-step strong{font-family:var(--font-d);font-weight:300;font-size:1.5rem;letter-spacing:-.02em}
.flow-step svg{width:22px;height:22px;color:var(--gold)}
.flow-step em{color:var(--gold)}

/* ── dolores / comparativa: filetes, no cajas ───────────── */
.pains{border-radius:0;border-left:0;border-right:0}
.pain{padding:var(--s-3) var(--s-3) var(--s-3) 0}
.pain b{font-family:var(--font-d);font-weight:300;font-size:1.375rem;letter-spacing:-.02em}
.pain svg{color:var(--rose)}
.compare{border-radius:0;border-left:0;border-right:0}
.compare > div{padding:var(--s-4) var(--s-4) var(--s-4) 0}
.compare > div + div{padding-left:var(--s-4)}
.compare > div:not(.is-now)::before{display:none}
.compare .is-now{background:var(--pearl)}
.chip{border-radius:0;font-family:var(--font-b);font-size:.6875rem;letter-spacing:.24em;font-weight:500;padding:6px 10px;background:transparent;border:1px solid var(--line);color:var(--gray-2)}
.chip.is-gold{background:var(--ink);color:var(--w);border-color:var(--ink)}
.chip.is-rose{background:transparent;color:var(--rose);border-color:var(--rose)}
.checks li svg{color:var(--gold)}

/* ── tarjetas: sin caja, filete superior que se oscurece ── */
.card{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:var(--s-3) 0 var(--s-4);
  transition:border-color var(--t-fast) var(--ease)}
.card:hover{border-color:var(--ink);transform:none;box-shadow:none}
.card-n{font-size:var(--fs-label);letter-spacing:.24em;font-weight:500;color:var(--gold);margin-bottom:var(--s-3)}
.card-ico{width:auto;height:auto;border-radius:0;background:transparent;display:block;color:var(--gold);margin-bottom:var(--s-3)}
.card-ico svg{width:26px;height:26px}
.card .h3{margin-bottom:12px}
.card p{color:var(--gray);font-size:1rem}
.grid{gap:var(--s-4)}
.card.card-feat{background:var(--night);border-top-color:var(--gold-hi);padding:var(--s-3) var(--s-4) var(--s-4)}
.card.card-feat::before{display:none}
.card.card-feat .card-ico{background:transparent;color:var(--gold-hi)}
.card.card-feat:hover{border-color:var(--w);box-shadow:none}
.card-flat{background:var(--pearl);border-top-color:var(--line);padding:var(--s-4)}
.tag{border-radius:0;background:transparent;border:1px solid var(--line);font-size:.875rem;color:var(--gray)}

/* ── datos: cifras Fraunces 300 ─────────────────────────── */
.stats{border-radius:0 !important;border-left:0 !important;border-right:0 !important;border-color:var(--line) !important;background:var(--line)}
.stat{padding:var(--s-4) var(--s-3) var(--s-4) 0}
.stat + .stat{padding-left:var(--s-3)}
.stat b{font-family:var(--font-d);font-weight:300;font-size:var(--fs-num);letter-spacing:-.03em;color:var(--ink)}
.stat span{color:var(--gray-2)}
.night .stats{background:var(--line-n2);border-color:var(--line-n2) !important}
.night .stat{background:var(--night)}
.night .stat b{color:var(--w);font-size:var(--fs-num)}
.night .stat.is-green b{color:var(--gold-hi)} .night .stat.is-ink b{color:var(--w)}
.night blockquote{border-left:1px solid var(--gold-hi) !important}
.night blockquote p{font-weight:300;font-style:italic;font-variation-settings:"SOFT" 60,"WONK" 1}

/* speed to lead */
.speed-big .giant{font-weight:300;letter-spacing:-.04em;color:var(--w);font-variation-settings:"SOFT" 12}
.speed-big .giant small{font-family:var(--font-b);color:var(--gold-hi);letter-spacing:.24em;font-weight:500}
.speed-bar,.speed-bar i{border-radius:0}
.night .speed-bar{background:transparent;border:1px solid var(--line-n2);height:40px}
.night .speed-bar i{background:var(--gold-hi);box-shadow:none}
.night .speed-row.is-low .speed-bar i{background:rgba(185,154,98,.55);box-shadow:none}
.night .speed-row.is-dead .speed-bar i{background:rgba(250,246,238,.16)}
.night .speed-row .when{font-family:var(--font-d);font-weight:300;font-size:1.25rem;letter-spacing:-.01em}

/* ── secuencia (implantación): numeración de revista ───── */
.step{padding-block:var(--s-4)}
.step-n{font-size:2rem;font-weight:300;color:var(--gold);letter-spacing:0}
.step-when{font-family:var(--font-b);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--gold)}
.step h3{font-size:clamp(1.375rem,2.2vw,1.875rem)}
.step p{color:var(--gray)}

/* ── FAQ ────────────────────────────────────────────────── */
.faq-q{font-family:var(--font-d);font-weight:300;font-size:clamp(1.25rem,2vw,1.625rem);letter-spacing:-.02em;padding:26px 0}
.faq-q:hover{color:var(--gold)}
.faq-q i::before,.faq-q i::after{background:var(--ink)}
.faq-a p{color:var(--gray)}

/* ── formulario ─────────────────────────────────────────── */
.form-card{border-radius:0;box-shadow:none;border:1px solid var(--line);background:var(--w)}
.night .form-card{border-color:var(--gold-hi);box-shadow:none}
.field label{font-family:var(--font-b);font-size:.8125rem;font-weight:500;letter-spacing:.04em;color:var(--ink)}
.field input,.field select{border-radius:0;border:1px solid var(--line);background:var(--w);min-height:52px;font-size:1rem}
.field input:focus,.field select:focus{border-color:var(--ink);box-shadow:none}
.field .req{color:var(--gold)}
.form-foot{color:var(--gray-2)}
.form-ok svg{color:var(--gold)}

/* ── footer noir plano ──────────────────────────────────── */
.footer.night{background:var(--night);border-top:1px solid var(--line-n2)}
.footer.night h4{font-family:var(--font-b);font-size:.6875rem;letter-spacing:.24em;font-weight:500;color:var(--gold-hi)}
.footer.night .brand b{color:var(--w)}
.footer.night a{color:var(--cream-2)} .footer.night a:hover{color:var(--w)}

/* ── prosa / artículos ──────────────────────────────────── */
.prose h2,.prose h3{font-weight:300;letter-spacing:-.03em}
.prose blockquote{border-left:1px solid var(--gold-hi);border-radius:0;background:var(--pearl);font-weight:300;font-size:1.375rem;line-height:1.35}
.prose th{font-family:var(--font-b);letter-spacing:.2em;color:var(--gold)}
.table-scroll{border-radius:0}
.article-head{border-bottom:1px solid var(--line)}

/* ── CTA fijo móvil ─────────────────────────────────────── */
.sticky-cta{background:rgba(250,246,238,.96);border-top:1px solid var(--line)}
.skip{border-radius:0}

/* ── revelación por máscara: la tinta secando en la página ─
   Se clipa el HIJO, nunca el elemento observado (con área visible 0 el
   IntersectionObserver no dispararía). ───────────────────────── */
.js .reveal{opacity:1;transform:none;transition:none}
.js .reveal > *{clip-path:inset(0 0 100% 0);transform:translateY(1.5rem);
  transition:clip-path var(--t-enter) var(--ease-ed),transform var(--t-enter) var(--ease-ed)}
.js .reveal.in > *{clip-path:inset(0 0 0 0);transform:none}
.js .reveal[data-d="1"] > *{transition-delay:70ms}
.js .reveal[data-d="2"] > *{transition-delay:140ms}
.js .reveal[data-d="3"] > *{transition-delay:210ms}
/* el formulario y las cifras entran enteros, sin trocear */
.js .form-card.reveal > *,.js .stats.reveal > *{transition-delay:0ms}

@media (prefers-reduced-motion:reduce){
  .js .reveal > *,.js .reveal.in > *{clip-path:none;transform:none;transition:none}
  .js .hero-in{animation:none;clip-path:none;transform:none}
}

/* nav sobre la portada noir: botón en papel */
.nav.on-dark .btn{background:var(--w);color:var(--ink);border-color:var(--w)}
.nav.on-dark .btn:hover{background:transparent;color:var(--w)}
.logo-slot b{font-size:.95em;letter-spacing:.1em}

/* botón dentro del formulario (papel sobre noir): tinta sólida */
.night .form-card .btn{background:var(--ink);color:var(--w);border-color:var(--ink)}
.night .form-card .btn:hover{background:var(--w);color:var(--ink)}
/* iconos de tarjeta a la izquierda */
.card-ico{justify-items:start;place-items:start}
.card-ico svg{margin:0}
/* titular de la sección 60 s: columna estrecha */
.speed-big .h2{font-size:clamp(1.9rem,3.2vw,2.75rem)}

/* cinco piezas */
.g-5{grid-template-columns:1fr}
@media (min-width:640px){ .g-5{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .g-5{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1180px){ .g-5{grid-template-columns:repeat(5,1fr)} .g-5 .card{padding-right:var(--s-2)} }

/* portada: titular de dos líneas, columnas iguales */
.hero.night .display{font-size:clamp(2.75rem,4.7vw,4rem);white-space:nowrap}
@media (max-width:520px){ .hero.night .display{white-space:normal} }
@media (min-width:1040px){ .hero-grid{grid-template-columns:1fr 1fr} }

/* garantía */
.hero-garantia{display:flex;align-items:flex-start;gap:10px;margin-top:18px;font-size:.9375rem;color:var(--cream-2)}
.hero-garantia svg{width:20px;height:20px;flex:none;color:var(--gold-hi);margin-top:2px}
.garantia{border:1px solid var(--gold-hi);padding:var(--s-4);background:var(--pearl)}
@media (min-width:760px){ .garantia{padding:var(--s-5)} }
.garantia .h3{font-size:clamp(1.5rem,2.6vw,2.125rem);max-width:26ch}

/* ── portada con fotografía (como la de Althea) ─────────── */
.hero-foto{min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:calc(88px + 4rem)}
.hero-foto .hero-bg{position:absolute;inset:0;z-index:-2}
.hero-foto .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:62% 40%}
.hero-foto::before{display:none}
.hero-foto .hero-veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgb(26 22 15/.10) 0%,rgb(26 22 15/.22) 25%,rgb(26 22 15/.48) 45%,rgb(26 22 15/.78) 65%,rgb(26 22 15/.92) 100%)}
.hero-foto .hero-grid{display:block}
.hero-foto .display{font-size:clamp(3rem,7.6vw,6.75rem);white-space:normal;max-width:14ch}
.hero-foto .lead{max-width:56ch;color:rgba(250,246,238,.9)}
.hero-foto .hero-actions{margin-top:var(--s-4)}
.hero-foto .hero-proof{max-width:640px}
.hero-foto .pillars{margin-top:var(--s-6)}
@media (min-width:900px){
  .hero-foto .hero-row{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s-5);align-items:end}
}
/* mockup dentro de «Qué incluye» */
.showcase{margin-top:var(--s-5);padding:var(--s-5) 0 var(--s-3);border-top:1px solid var(--line)}
.showcase .stage{max-width:960px}
.showcase .badge{background:var(--w);border:1px solid var(--gold-hi);color:var(--ink)}
.showcase .badge small{color:var(--gray-2)}
.hero.night.hero-foto .display{white-space:normal;max-width:none}
.hero-foto .label{color:var(--w)} .hero-foto .label::after{background:var(--gold-hi);opacity:.9}
.hero-foto .hero-veil{background:linear-gradient(to bottom,rgb(26 22 15/.28) 0%,rgb(26 22 15/.36) 22%,rgb(26 22 15/.58) 42%,rgb(26 22 15/.82) 62%,rgb(26 22 15/.94) 100%)}
/* mockup fuera del hero: el gráfico no se estira */
.showcase .crm-cols,.showcase-crm .crm-cols{flex:none}
.showcase .crm-chart,.showcase-crm .crm-chart{flex:none;height:9em}