/* ===================================================================
   TOGA · Landing — "El Estatuto"
   Concepto: un instrumento jurídico codificado. Papel + tinta,
   acento oxblood (cuero de biblioteca de derecho), sello en latón,
   secciones numeradas como artículos de un código.
   Hoja de estilos autónoma — no depende de toga.css.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=Inter:wght@400;500;600;700&family=Courier+Prime:wght@400;700&display=swap');

:root{
  /* Papel */
  --paper:   #f5f1e8;
  --paper-2: #efe8d9;
  --panel:   #fbf9f3;
  --panel-2: #f1ebdd;

  /* Tinta */
  --ink:   #191410;
  --ink-2: #504942;
  --ink-3: #877d70;
  --ink-4: #b3a795;

  /* Reglas / hairlines */
  --rule:    rgba(25,20,16,.14);
  --rule-2:  rgba(25,20,16,.26);
  --rule-3:  rgba(25,20,16,.42);

  /* Oxblood (acento estructural) */
  --ox:      #7c1523;
  --ox-2:    #5f0f1b;
  --ox-tint: rgba(124,21,35,.07);
  --ox-line: rgba(124,21,35,.28);

  /* Latón / sello */
  --brass:   #a9791f;
  --brass-2: #7c5714;

  /* Verde notarial (gratis / incluido) */
  --seal-green: #2f5d3f;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'Courier Prime', ui-monospace, 'Courier New', monospace;

  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ── Reset ───────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* Textura sutil de papel */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.5;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(124,21,35,.02), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(169,121,31,.025), transparent 45%);
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; transition:color .18s var(--ease); }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; }
::selection{ background:var(--ox); color:var(--paper); }

/* ── Tipografía ──────────────────────────────────────────────────── */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; line-height:1.02; letter-spacing:-.02em; color:var(--ink); }
em{ font-style:italic; color:var(--ox); }
strong{ font-weight:600; }

/* Kicker/overline en mono, como metadato de un expediente */
.kicker{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:700;
}
.mono{ font-family:var(--font-mono); }

/* ── Layout base ─────────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--gutter); position:relative; z-index:1; }
.section{ padding:96px 0; position:relative; }
.rule{ height:1px; background:var(--rule); border:0; }
.rule-strong{ height:2px; background:var(--ink); border:0; }

/* Encabezado de artículo (como el título de una norma) */
.art{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  gap:clamp(24px,5vw,72px);
  align-items:start;
  margin-bottom:56px;
}
.art-aside{ position:sticky; top:110px; }
.art-no{
  font-family:var(--font-mono);
  font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ox); font-weight:700;
  padding-bottom:10px; margin-bottom:16px;
  border-bottom:2px solid var(--ox);
  display:inline-block;
}
.art-aside h2{ font-size:clamp(2rem,3.6vw,2.9rem); }
.art-aside .lede{ margin-top:18px; color:var(--ink-2); font-size:1.02rem; max-width:34ch; }
@media(max-width:860px){
  .art{ grid-template-columns:1fr; gap:26px; }
  .art-aside{ position:static; }
}

/* ── Nameplate / nav ─────────────────────────────────────────────── */
.nameplate{
  position:sticky; top:0; z-index:100;
  background:rgba(245,241,232,.86);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--rule);
  transition:box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.nameplate.scrolled{ box-shadow:0 8px 30px -18px rgba(25,20,16,.4); border-color:var(--rule-2); }
.nameplate-in{ display:flex; align-items:center; gap:24px; height:66px; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand .seal{
  width:34px; height:34px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #e9cf8f, var(--brass) 55%, var(--brass-2));
  color:#2a1c05; font-family:var(--font-display); font-weight:700; font-size:17px;
  display:grid; place-items:center;
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.3), inset 0 2px 3px rgba(255,255,255,.4), 0 2px 6px rgba(124,90,20,.3);
}
.brand .word{ font-family:var(--font-display); font-size:1.5rem; letter-spacing:.02em; }
.nav-links{ display:flex; gap:26px; margin-left:auto; }
.nav-links a{ font-size:.92rem; color:var(--ink-2); font-weight:500; position:relative; padding-bottom:3px; }
.nav-links a::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--ox); transition:width .22s var(--ease); }
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-burger{ display:none; width:40px; height:40px; border:1px solid var(--rule-2); border-radius:8px; color:var(--ink); font-size:17px; }

/* Botones */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  padding:12px 22px; border-radius:2px; transition:all .2s var(--ease);
  white-space:nowrap; line-height:1;
}
.btn-sm{ padding:9px 16px; font-size:.86rem; }
.btn-lg{ padding:16px 30px; font-size:1rem; }
.btn-ox{ background:var(--ox); color:var(--paper); box-shadow:0 1px 0 var(--ox-2); }
.btn-ox:hover{ background:var(--ox-2); color:var(--paper); transform:translateY(-1px); box-shadow:0 8px 22px -10px rgba(124,21,35,.7); }
.btn-ink{ background:var(--ink); color:var(--paper); }
.btn-ink:hover{ color:var(--paper); transform:translateY(-1px); }
.btn-ghost{ color:var(--ink); border:1px solid var(--rule-3); background:transparent; }
.btn-ghost:hover{ border-color:var(--ink); background:var(--ink); color:var(--paper); }
.btn-line{ color:var(--ink); padding-inline:0; border-radius:0; border-bottom:1.5px solid var(--ox); padding-bottom:3px; }
.btn-line:hover{ color:var(--ox); gap:12px; }
.btn-block{ width:100%; justify-content:center; }

/* Nav móvil */
.nav-mobile{
  display:none; position:fixed; inset:66px 0 auto; z-index:99;
  background:var(--paper); border-bottom:1px solid var(--rule-2);
  padding:18px var(--gutter) 26px;
  flex-direction:column; gap:4px;
  transform:translateY(-120%); transition:transform .3s var(--ease);
}
.nav-mobile.open{ transform:translateY(0); }
.nav-mobile a{ padding:13px 0; font-size:1.05rem; border-bottom:1px solid var(--rule); font-family:var(--font-display); }
.nav-mobile .m-cta{ display:flex; gap:10px; margin-top:16px; }

/* ── Hero ────────────────────────────────────────────────────────── */
.hero{ padding:56px 0 84px; }
.hero-strap{
  display:flex; align-items:center; gap:16px;
  padding-bottom:22px; margin-bottom:44px;
  border-bottom:1px solid var(--rule);
}
.hero-strap .kicker{ white-space:nowrap; }
.hero-strap .line{ flex:1; height:1px; background:var(--rule); }
.hero-strap .edition{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-4); letter-spacing:.12em; }

.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,68px); align-items:center; }
@media(max-width:920px){ .hero-grid{ grid-template-columns:1fr; gap:44px; } }

.hero h1{
  font-size:clamp(2.7rem, 6vw, 4.6rem);
  line-height:1.0;
  letter-spacing:-.035em;
  font-weight:400;
}
.hero h1 .u{ display:inline-block; }
.hero .lede{
  margin-top:26px; max-width:46ch;
  font-size:1.13rem; line-height:1.62; color:var(--ink-2);
}
/* Capitular en la lede — detalle editorial impreso */
.hero .lede::first-letter{
  font-family:var(--font-display); font-weight:500;
  font-size:2.9em; line-height:.72; float:left;
  padding:6px 10px 0 0; color:var(--ox);
}
.hero-cta{ display:flex; align-items:center; gap:16px; margin-top:34px; flex-wrap:wrap; }

/* Strap de cifras bajo el hero */
.hero-stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  margin-top:56px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.hero-stats .cell{ padding:22px 20px; border-right:1px solid var(--rule); }
.hero-stats .cell:last-child{ border-right:0; }
.hero-stats .n{ font-family:var(--font-display); font-size:1.9rem; line-height:1; }
.hero-stats .l{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-top:8px; }
@media(max-width:620px){ .hero-stats{ grid-template-columns:1fr 1fr; } .hero-stats .cell:nth-child(2){ border-right:0; } .hero-stats .cell:nth-child(1),.hero-stats .cell:nth-child(2){ border-bottom:1px solid var(--rule); } }

/* Carátula de expediente (reemplaza el mockup genérico) */
.dossier{ position:relative; }
.dossier .back{
  position:absolute; inset:14px -10px -14px 22px;
  background:var(--panel-2);
  border:1px solid var(--rule-2);
  transform:rotate(2.2deg);
  box-shadow:0 24px 50px -28px rgba(25,20,16,.5);
}
.carpeta{
  position:relative;
  background:linear-gradient(158deg, #fdfbf5, #f3ecdb);
  border:1px solid var(--rule-2);
  box-shadow:0 34px 66px -30px rgba(25,20,16,.55);
  padding:30px 30px 28px;
  transform:rotate(-1.3deg);
}
.carpeta::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:7px;
  background:linear-gradient(var(--ox), var(--ox-2));
}
.carpeta .tab{
  position:absolute; top:-16px; left:34px;
  background:var(--ink); color:var(--paper);
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em;
  padding:5px 14px; text-transform:uppercase;
}
.carpeta .rad{ font-family:var(--font-mono); font-size:.74rem; color:var(--ink-3); letter-spacing:.02em; }
.carpeta h4{ font-family:var(--font-display); font-size:1.5rem; margin:8px 0 20px; letter-spacing:-.01em; }
.carpeta .row{
  display:flex; justify-content:space-between; gap:16px;
  padding:11px 0; border-top:1px solid var(--rule);
  font-size:.9rem;
}
.carpeta .row .k{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.carpeta .row .v{ color:var(--ink); text-align:right; font-weight:500; }
.carpeta .estado{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.72rem; font-weight:700; color:var(--seal-green);
  font-family:var(--font-mono); letter-spacing:.08em; text-transform:uppercase;
}
.carpeta .estado .dot{ width:7px; height:7px; border-radius:50%; background:var(--seal-green); }
.carpeta .stamp{
  position:absolute; right:24px; bottom:22px;
  width:84px; height:84px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #e9cf8f, var(--brass) 55%, var(--brass-2));
  color:#2a1c05; font-family:var(--font-display); font-weight:700; font-size:2rem;
  display:grid; place-items:center; transform:rotate(-8deg);
  box-shadow:inset 0 -4px 8px rgba(0,0,0,.32), inset 0 4px 6px rgba(255,255,255,.4), 0 10px 24px -8px rgba(124,90,20,.5);
}
.carpeta .stamp::after{ content:''; position:absolute; inset:8px; border-radius:50%; border:1.5px dashed rgba(42,28,5,.4); }

/* ── Banda "confían" ─────────────────────────────────────────────── */
.confia{ padding:40px 0; border-bottom:1px solid var(--rule); }
.confia-in{ display:flex; align-items:center; gap:34px; flex-wrap:wrap; }
.confia .kicker{ white-space:nowrap; }
.confia .names{ display:flex; flex-wrap:wrap; gap:8px 26px; align-items:baseline; }
.confia .names span{ font-family:var(--font-display); font-size:1.12rem; color:var(--ink-2); font-style:italic; }
.confia .names span::before{ content:'·'; color:var(--ink-4); margin-right:26px; }
.confia .names span:first-child::before{ display:none; }

/* ── Art. 01 · Índice de módulos ─────────────────────────────────── */
.index-list{ border-top:2px solid var(--ink); }
.idx-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:22px; align-items:baseline;
  padding:22px 4px;
  border-bottom:1px solid var(--rule);
  transition:background .2s var(--ease), padding-left .2s var(--ease);
}
.idx-row:hover{ background:var(--ox-tint); padding-left:14px; }
.idx-no{ font-family:var(--font-mono); font-size:.82rem; color:var(--ox); font-weight:700; letter-spacing:.05em; }
.idx-body h3{ font-family:var(--font-display); font-size:1.4rem; letter-spacing:-.01em; display:flex; align-items:center; gap:12px; }
.idx-body h3 i{ font-size:.92rem; color:var(--ink-3); }
.idx-body p{ margin-top:5px; color:var(--ink-2); font-size:.95rem; max-width:60ch; }
.idx-body .save{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; color:var(--seal-green); text-transform:uppercase; margin-top:7px; display:inline-block; }
.idx-price{ text-align:right; white-space:nowrap; }
.idx-price .amt{ font-family:var(--font-display); font-size:1.15rem; }
.idx-price .per{ font-family:var(--font-mono); font-size:.62rem; color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase; display:block; margin-top:2px; }
.idx-price.free .amt{ color:var(--seal-green); }
.idx-price .old{ text-decoration:line-through; color:var(--ink-4); font-family:var(--font-mono); font-size:.78rem; }
@media(max-width:560px){
  .idx-row{ grid-template-columns:auto 1fr; gap:14px; }
  .idx-price{ grid-column:2; text-align:left; margin-top:6px; }
}

/* ── Procedimiento ───────────────────────────────────────────────── */
.proc{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:2px solid var(--ink); }
.proc .step{ padding:34px 30px 34px 0; border-right:1px solid var(--rule); position:relative; }
.proc .step:last-child{ border-right:0; padding-right:0; }
.proc .step .no{ font-family:var(--font-mono); font-size:.8rem; color:var(--ox); font-weight:700; letter-spacing:.12em; }
.proc .step h3{ font-size:1.5rem; margin:14px 0 10px; }
.proc .step p{ color:var(--ink-2); font-size:.96rem; }
@media(max-width:760px){
  .proc{ grid-template-columns:1fr; }
  .proc .step{ padding:26px 0; border-right:0; border-bottom:1px solid var(--rule); }
  .proc .step:last-child{ border-bottom:0; }
}

/* ── Despachos (use cases) ───────────────────────────────────────── */
.despachos{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.desp{ padding:0 30px; border-right:1px solid var(--rule); }
.desp:first-child{ padding-left:0; }
.desp:last-child{ border-right:0; padding-right:0; }
.desp .no{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; color:var(--ink-3); text-transform:uppercase; }
.desp h3{ font-size:1.55rem; margin:12px 0 14px; }
.desp p{ color:var(--ink-2); font-size:.95rem; margin-bottom:18px; }
.desp ul li{ padding:9px 0; border-top:1px solid var(--rule); font-size:.92rem; color:var(--ink); display:flex; gap:11px; }
.desp ul li::before{ content:'§'; font-family:var(--font-display); color:var(--ox); font-style:italic; }
@media(max-width:820px){
  .despachos{ grid-template-columns:1fr; }
  .desp{ padding:30px 0; border-right:0; border-bottom:1px solid var(--rule); }
  .desp:last-child{ border-bottom:0; }
}

/* ── Aranceles / Planes ──────────────────────────────────────────── */
.tarifas{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--rule-2); }
.tarifa{ padding:30px 24px; border-right:1px solid var(--rule); display:flex; flex-direction:column; background:var(--panel); }
.tarifa:last-child{ border-right:0; }
.tarifa.dest{ background:var(--ink); color:var(--paper); }
.tarifa.dest h3, .tarifa.dest .price{ color:var(--paper); }
.tarifa.dest .desc, .tarifa.dest li{ color:rgba(245,241,232,.72); }
.tarifa.dest li::before{ color:var(--brass); }
.tarifa.dest .rule{ background:rgba(245,241,232,.16); }
.tarifa .tag{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ox); font-weight:700; min-height:14px; }
.tarifa.dest .tag{ color:var(--brass); }
.tarifa h3{ font-size:1.5rem; margin:8px 0 4px; }
.tarifa .desc{ font-size:.82rem; color:var(--ink-3); min-height:34px; }
.tarifa .price{ font-family:var(--font-display); font-size:2.1rem; margin:16px 0 2px; line-height:1; }
.tarifa .price .old{ text-decoration:line-through; font-size:1rem; color:var(--ink-4); margin-left:8px; }
.tarifa .price.free{ color:var(--seal-green); }
.tarifa .per{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.tarifa.dest .per{ color:rgba(245,241,232,.6); }
.tarifa ul{ margin:18px 0 22px; flex:1; }
.tarifa li{ padding:8px 0; border-top:1px solid var(--rule); font-size:.86rem; display:flex; gap:9px; color:var(--ink-2); }
.tarifa li::before{ content:'✓'; color:var(--ox); font-weight:700; }
.tarifa li.no{ color:var(--ink-4); }
.tarifa li.no::before{ content:'—'; color:var(--ink-4); }
@media(max-width:900px){ .tarifas{ grid-template-columns:1fr 1fr; } .tarifa:nth-child(2){ border-right:0; } .tarifa:nth-child(1),.tarifa:nth-child(2){ border-bottom:1px solid var(--rule); } }
@media(max-width:520px){ .tarifas{ grid-template-columns:1fr; } .tarifa{ border-right:0; border-bottom:1px solid var(--rule); } .tarifa:last-child{ border-bottom:0; } }

.tarifa-foot{ text-align:center; margin-top:26px; }

/* ── Testimonio ──────────────────────────────────────────────────── */
.testimonio{ max-width:900px; margin:0 auto; text-align:center; position:relative; }
.testimonio .mark{ font-family:var(--font-display); font-size:6rem; line-height:.4; color:var(--ox-line); }
.testimonio blockquote{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(1.6rem, 3.4vw, 2.5rem); line-height:1.28; letter-spacing:-.015em;
  color:var(--ink); margin:10px 0 30px;
}
.testimonio .who{ display:inline-flex; align-items:center; gap:14px; }
.testimonio .mono-av{
  width:48px; height:48px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #e9cf8f, var(--brass) 55%, var(--brass-2));
  color:#2a1c05; font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  display:grid; place-items:center;
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.3), inset 0 2px 3px rgba(255,255,255,.4);
}
.testimonio .who .nm{ text-align:left; }
.testimonio .who .nm .n{ font-weight:600; }
.testimonio .who .nm .r{ font-size:.82rem; color:var(--ink-3); }
.testi-stats{ display:flex; justify-content:center; gap:0; margin-top:44px; border-top:1px solid var(--rule); }
.testi-stats .s{ padding:22px 34px; border-right:1px solid var(--rule); }
.testi-stats .s:last-child{ border-right:0; }
.testi-stats .s .n{ font-family:var(--font-display); font-size:1.7rem; color:var(--ox); }
.testi-stats .s .l{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:5px; }

/* ── FAQ (definiciones) ──────────────────────────────────────────── */
.faq{ border-top:2px solid var(--ink); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  list-style:none; cursor:pointer;
  padding:24px 40px 24px 4px; position:relative;
  font-family:var(--font-display); font-size:1.25rem; color:var(--ink);
  transition:color .2s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:var(--font-body); font-size:1.5rem; color:var(--ox); font-weight:300; transition:transform .2s var(--ease);
}
.faq details[open] summary::after{ content:'–'; }
.faq summary:hover{ color:var(--ox); }
.faq .ans{ padding:0 40px 26px 4px; color:var(--ink-2); font-size:1rem; line-height:1.65; max-width:72ch; }
.faq .ans a{ color:var(--ox); border-bottom:1px solid var(--ox-line); }

/* ── Cierre / firma ──────────────────────────────────────────────── */
.cierre{ text-align:center; padding:110px 0; }
.cierre .kicker{ color:var(--ox); }
.cierre h2{ font-size:clamp(2.3rem,5vw,3.8rem); margin:20px 0 8px; }
.cierre p{ color:var(--ink-2); font-size:1.1rem; max-width:52ch; margin:0 auto 34px; }
.cierre .signature{
  margin-top:56px; padding-top:22px;
  display:inline-block; border-top:1.5px solid var(--ink);
  font-family:var(--font-display); font-style:italic; font-size:1.3rem; color:var(--ink);
}
.cierre .signature small{ display:block; font-family:var(--font-mono); font-style:normal; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:6px; }

/* ── Colofón / footer ────────────────────────────────────────────── */
.colophon{ background:var(--ink); color:var(--paper); padding:70px 0 34px; position:relative; z-index:1; }
.colophon a{ color:rgba(245,241,232,.68); }
.colophon a:hover{ color:var(--paper); }
.colophon-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(245,241,232,.16); }
.colophon .brand .word{ color:var(--paper); }
.colophon .about{ margin-top:16px; max-width:38ch; color:rgba(245,241,232,.6); font-size:.92rem; line-height:1.6; }
.colophon h5{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); margin-bottom:16px; font-weight:700; }
.colophon .col a{ display:block; padding:6px 0; font-size:.92rem; }
.colophon-bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-top:26px; font-size:.82rem; color:rgba(245,241,232,.5); }
.colophon-bottom .mono{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; }
@media(max-width:780px){ .colophon-grid{ grid-template-columns:1fr 1fr; gap:32px; } .colophon .brand{ grid-column:1/-1; } }
@media(max-width:460px){ .colophon-grid{ grid-template-columns:1fr; } }

/* ── Reveal on scroll ────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* ── Responsive nav ──────────────────────────────────────────────── */
@media(max-width:900px){
  .nav-links, .nav-cta .btn{ display:none; }
  .nav-burger{ display:grid; place-items:center; margin-left:auto; }
  .nav-mobile{ display:flex; }
}

/* ===================================================================
   PÁGINAS SECUNDARIAS — pricing, autenticación, legal
   (mismo sistema "El Estatuto")
   =================================================================== */

/* ── Encabezado centrado de página ───────────────────────────────── */
.page-head{ text-align:center; max-width:680px; margin:0 auto 52px; }
.page-head .art-no{ border:0; padding:0; margin-bottom:16px; }
.page-head h1{ font-size:clamp(2.4rem,5vw,3.8rem); line-height:1.02; }
.page-head p{ color:var(--ink-2); font-size:1.1rem; margin-top:18px; }
.page-hero{ padding:130px 0 20px; }

/* ── Formularios ─────────────────────────────────────────────────── */
.field{ margin-bottom:20px; }
.field > label{
  display:block; font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  font-weight:700; margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px;
  background:var(--panel); color:var(--ink);
  border:1px solid var(--rule-2); border-radius:2px;
  font-family:var(--font-body); font-size:1rem;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-4); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--ox);
  box-shadow:0 0 0 3px var(--ox-tint);
  background:var(--paper);
}
.field .hint{ font-size:.82rem; color:var(--ink-3); margin-top:7px; }
.field-ico{ position:relative; }
.field-ico input{ padding-left:44px; }
.field-ico > i{ position:absolute; left:15px; top:67%; transform:translateY(-50%); color:var(--ink-3); font-size:.95rem; }
.field-ico .pw-eye{ position:absolute; right:6px; top:50%; transform:translateY(-50%); color:var(--ink-3); padding:9px; font-size:.95rem; }
.field-ico .pw-eye:hover{ color:var(--ox); }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:520px){ .grid-2{ grid-template-columns:1fr; } }

.divider-label{
  display:flex; align-items:center; gap:14px; margin:28px 0 20px;
}
.divider-label span{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ox); font-weight:700; white-space:nowrap; }
.divider-label::after{ content:''; flex:1; height:1px; background:var(--rule); }

/* Alertas */
.alert{ padding:13px 16px; border-radius:2px; margin-bottom:20px; font-size:.94rem; display:flex; gap:10px; align-items:flex-start; border:1px solid; line-height:1.5; }
.alert i{ margin-top:3px; }
.alert-error{ background:var(--ox-tint); border-color:var(--ox-line); color:var(--ox-2); }
.alert-ok{ background:rgba(47,93,63,.08); border-color:rgba(47,93,63,.32); color:var(--seal-green); }

/* Aviso de plan (registro) */
.plan-note{
  margin:-6px 0 20px; padding:14px 16px;
  background:var(--ox-tint); border:1px solid var(--ox-line); border-radius:2px;
  font-size:.9rem; color:var(--ink); line-height:1.55;
}
.plan-note strong{ color:var(--ox-2); }

/* Medidor de contraseña */
/* Opciones de forma de pago (registro) */
.pago-opt{
  display:flex; align-items:flex-start; gap:11px;
  padding:13px 15px; margin-bottom:9px;
  border:1px solid var(--rule-2); border-radius:2px;
  background:var(--panel); cursor:pointer;
  transition:border-color .15s var(--ease), background .15s var(--ease);
}
.pago-opt:hover{ border-color:var(--ox-line); }
.pago-opt input{ margin-top:3px; accent-color:var(--ox); flex-shrink:0; }
.pago-opt:has(input:checked){ border-color:var(--ox); background:var(--ox-tint); }
.pago-opt strong{ display:block; font-size:.95rem; color:var(--ink); }
.pago-opt small{ display:block; font-size:.82rem; color:var(--ink-3); margin-top:3px; line-height:1.45; }

.pw-strength{ margin:-8px 0 18px; }
.pw-strength .bar{ display:flex; gap:4px; height:4px; }
.pw-strength .bar span{ flex:1; background:var(--rule-2); border-radius:2px; transition:background .2s var(--ease); }
.pw-strength.s1 .bar span:nth-child(1){ background:var(--ox); }
.pw-strength.s2 .bar span:nth-child(-n+2){ background:var(--brass); }
.pw-strength.s3 .bar span:nth-child(-n+3){ background:var(--brass-2); }
.pw-strength.s4 .bar span{ background:var(--seal-green); }
.pw-strength .lbl{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-top:7px; }

/* ── Autenticación (split editorial) ─────────────────────────────── */
.auth{ display:grid; grid-template-columns:1.05fr .95fr; min-height:100vh; }
.auth-aside{
  position:relative; overflow:hidden;
  background:var(--ink); color:var(--paper);
  padding:clamp(36px,5vw,64px);
  display:flex; flex-direction:column; justify-content:space-between;
}
/* Guilloché de documento certificado */
.auth-aside::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.9;
  background-image:
    repeating-linear-gradient(115deg, rgba(169,121,31,.06) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(65deg, rgba(169,121,31,.05) 0 1px, transparent 1px 36px),
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(169,121,31,.14), transparent 62%);
}
.auth-aside::after{
  content:'§'; position:absolute; right:-50px; bottom:-130px;
  font-family:var(--font-display); font-style:italic; font-size:30rem; line-height:1;
  color:rgba(169,121,31,.06); pointer-events:none;
}
.auth-aside .inner{ position:relative; z-index:1; }
.auth-aside .brand .word{ color:var(--paper); }
.auth-aside h2{ color:var(--paper); font-size:clamp(1.9rem,3vw,2.7rem); margin:34px 0 16px; line-height:1.08; }
.auth-aside h2 em{ color:var(--brass); }
.auth-aside .sub{ color:rgba(245,241,232,.66); font-size:1rem; max-width:38ch; }
.auth-aside ul{ margin-top:30px; }
.auth-aside ul li{ padding:11px 0; border-top:1px solid rgba(245,241,232,.14); display:flex; gap:12px; font-size:.95rem; color:rgba(245,241,232,.85); }
.auth-aside ul li::before{ content:'§'; font-family:var(--font-display); font-style:italic; color:var(--brass); }
.auth-aside .quote{ position:relative; z-index:1; margin-top:44px; padding-top:24px; border-top:1px solid rgba(245,241,232,.16); }
.auth-aside .quote p{ font-family:var(--font-display); font-style:italic; font-size:1.05rem; color:rgba(245,241,232,.9); line-height:1.5; }
.auth-aside .quote .by{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); margin-top:12px; }
.auth-aside .foot{ position:relative; z-index:1; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; color:rgba(245,241,232,.4); margin-top:32px; }

.auth-main{ background:var(--paper); display:flex; align-items:center; justify-content:center; padding:clamp(30px,5vw,56px); }
.auth-card{ width:100%; max-width:452px; }
.auth-card .top-brand{ display:none; }
.auth-card h1{ font-size:clamp(2rem,4vw,2.7rem); line-height:1.02; }
.auth-card .muted{ color:var(--ink-3); font-size:.98rem; margin-top:8px; margin-bottom:30px; }
.auth-card .muted a{ color:var(--ox); border-bottom:1px solid var(--ox-line); }
.auth-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin:-4px 0 22px; font-size:.88rem; }
.auth-row label{ display:flex; align-items:center; gap:8px; color:var(--ink-2); cursor:pointer; }
.auth-row a{ color:var(--ox); border-bottom:1px solid var(--ox-line); }
.auth-badges{ display:flex; gap:20px; flex-wrap:wrap; justify-content:center; margin-top:30px; padding-top:24px; border-top:1px solid var(--rule); }
.auth-badges span{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:7px; }
.auth-badges i{ color:var(--brass); }
.auth-alt{ text-align:center; font-size:.84rem; color:var(--ink-3); margin-top:22px; }
.auth-alt a{ color:var(--ox); border-bottom:1px solid var(--ox-line); }

@media(max-width:860px){
  .auth{ grid-template-columns:1fr; min-height:auto; }
  .auth-aside{ display:none; }
  .auth-main{ min-height:100vh; }
  .auth-card .top-brand{ display:flex; align-items:center; gap:11px; margin-bottom:34px; }
}

/* ── Tabla comparativa (pricing) ─────────────────────────────────── */
.cmp-wrap{ overflow-x:auto; border:1px solid var(--rule-2); }
.cmp{ width:100%; border-collapse:collapse; min-width:640px; }
.cmp th, .cmp td{ padding:15px 18px; text-align:left; border-bottom:1px solid var(--rule); }
.cmp thead th{ background:var(--panel-2); font-family:var(--font-display); font-size:1.15rem; font-weight:400; vertical-align:bottom; }
.cmp thead th .p{ display:block; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; color:var(--ink-3); text-transform:uppercase; margin-top:4px; font-weight:400; }
.cmp thead th:first-child{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.cmp td:first-child{ color:var(--ink); font-weight:500; }
.cmp td{ color:var(--ink-2); font-size:.92rem; text-align:center; }
.cmp td:first-child{ text-align:left; }
.cmp .yes{ color:var(--ox); font-weight:700; }
.cmp .no{ color:var(--ink-4); }
.cmp tbody tr:hover td{ background:var(--ox-tint); }

/* ── Métodos de pago ─────────────────────────────────────────────── */
.methods{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); border:1px solid var(--rule-2); }
.method{ padding:26px 18px; text-align:center; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.method i{ font-size:1.5rem; color:var(--ox); margin-bottom:10px; }
.method .t{ font-weight:600; font-size:.92rem; }
.method .s{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-top:4px; }

/* ── Franja de garantía ──────────────────────────────────────────── */
.guarantee{ max-width:760px; margin:56px auto 0; text-align:center; border:1px solid var(--ox-line); padding:44px 40px; background:var(--ox-tint); }
.guarantee .seal-ico{ width:58px; height:58px; border-radius:50%; margin:0 auto 18px; display:grid; place-items:center; border:1px solid var(--ox-line); color:var(--ox); font-size:1.4rem; }
.guarantee h3{ font-size:1.6rem; margin-bottom:10px; }
.guarantee p{ color:var(--ink-2); max-width:520px; margin:0 auto; }

/* ── Estados de pago (éxito / pendiente / fallo) ─────────────────── */
.status-wrap{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:80px var(--gutter); background:var(--paper); }
.status-ico{ width:96px; height:96px; border-radius:50%; display:grid; place-items:center; font-size:2.4rem; margin-bottom:28px; border:2px solid; }
.status-ico.ok{ color:var(--seal-green); border-color:rgba(47,93,63,.4); background:rgba(47,93,63,.06); }
.status-ico.warn{ color:var(--brass); border-color:rgba(169,121,31,.4); background:rgba(169,121,31,.06); }
.status-ico.err{ color:var(--ox); border-color:var(--ox-line); background:var(--ox-tint); }
.status-wrap h1{ font-size:clamp(2rem,4vw,3rem); }
.status-wrap .lede{ color:var(--ink-2); font-size:1.1rem; max-width:52ch; margin:16px auto 32px; }
.status-actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }