/* ============================================================
   GEMMA REINÓN — sistema de diseño
   Estética jurídica editorial: elegante, sobria, acogedora, seria,
   muy limpia. Paleta cerrada: marfil cálido, piedra clara, topo,
   granate negruzco y un único acento en latón envejecido muy
   discreto. Sin blanco puro, sin negro puro, sin azul jurídico,
   sin dorados brillantes, sin sombras fuertes ni degradados.
   ============================================================ */

:root{
  --ivory:#F5F1EA;        /* marfil cálido */
  --ivory-deep:#E7E0D7;   /* piedra clara */
  --topo:#B8AAA0;         /* topo suave */
  --line:#DCD2C4;
  --ink:#262223;          /* texto principal */
  --ink-soft:#4F4547;
  --ink-faint:#8A7B72;
  --accent:#68434A;       /* granate medio */
  --accent-deep:#4E3237;
  --accent-tint:#CBB6AE;
  --accent-warm:#A38B68;  /* latón envejecido, muy discreto */
  --charcoal:#2B171B;     /* granate negruzco principal */
  --footer-bg:#211316;    /* pie: aún más oscuro que el hero */
  --on-charcoal:#F5F1EA;
  --on-charcoal-soft:#B8AAA0;
  --faq-line:#D5CCC2;     /* borde muy fino de los acordeones de preguntas */
  --stone-soft:#EFE9DF;   /* piedra muy suave, para acordeones sobre fondo marfil */

  --display:"Cormorant Garamond",Georgia,serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;

  --fs-hero:clamp(2.1rem,4.3vw,3.5rem);
  --fs-h2:clamp(1.6rem,3vw,2.5rem);
  --fs-h3:clamp(1.15rem,1.7vw,1.4rem);
  --fs-body:clamp(1rem,1.05vw,1.09rem);
  --fs-small:.9rem;
  --fs-micro:.76rem;

  --max:1140px;
  --max-text:900px;
  --gut:clamp(1.25rem,4.5vw,3.2rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--body);font-size:var(--fs-body);font-weight:400;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.22;margin:0;color:var(--charcoal)}
h1{font-weight:600}
p{margin:0 0 1.15em;color:var(--ink-soft)}
p:last-child{margin-bottom:0}
strong,b{font-weight:600;color:var(--ink)}
.band--charcoal strong,.band--charcoal b{color:var(--on-charcoal)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.band{padding:clamp(4.5rem,10vw,8.5rem) 0}
.band--deep{background:var(--ivory-deep)}
.band--charcoal{background:var(--charcoal);color:var(--on-charcoal)}
.band--charcoal h1,.band--charcoal h2,.band--charcoal h3,.band--charcoal h4{color:var(--on-charcoal)}
.band--charcoal p{color:var(--on-charcoal-soft)}
.band-top{border-top:1px solid var(--line)}
.band--charcoal.band-top{border-top-color:rgba(245,241,234,.1)}

.measure{max-width:var(--max-text)}
.lede{font-size:clamp(1.05rem,1.3vw,1.22rem);color:var(--ink-soft);max-width:680px;line-height:1.65}
.band--charcoal .lede{color:var(--on-charcoal-soft)}

.eyebrow{
  font-family:var(--body);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);
  margin:0 0 1rem;display:block;
}
.band--charcoal .eyebrow{color:var(--accent-warm)}

.rule{width:44px;height:2px;background:var(--accent);border:0;margin:1.4rem 0}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--body);font-size:.82rem;font-weight:600;letter-spacing:.03em;
  padding:.95em 1.7em;border:1px solid var(--charcoal);border-radius:2px;
  text-decoration:none;cursor:pointer;background:var(--charcoal);color:var(--ivory);
  transition:background .25s,color .25s,border-color .25s;
}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.btn--outline{background:transparent;color:var(--charcoal);border-color:var(--charcoal)}
.btn--outline:hover{background:var(--charcoal);color:var(--ivory)}
.btn--accent{background:var(--accent);border-color:var(--accent);color:var(--ivory)}
.btn--accent:hover{background:var(--accent-deep);border-color:var(--accent-deep)}

/* botones dentro de un bloque oscuro (hero Home, formulario): invertidos */
.band--charcoal .btn{background:var(--ivory);border-color:var(--ivory);color:var(--charcoal)}
.band--charcoal .btn:hover{background:var(--accent-warm);border-color:var(--accent-warm);color:var(--charcoal)}
.band--charcoal .btn--outline{background:transparent;color:var(--on-charcoal);border-color:var(--on-charcoal-soft)}
.band--charcoal .btn--outline:hover{background:var(--on-charcoal);color:var(--charcoal);border-color:var(--on-charcoal)}

.tags{font-family:var(--body);font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.tags span{margin:0 .5em}

/* ============================ CABECERA (faldón) ============================ */
.site-head{position:sticky;top:0;z-index:50;background:var(--charcoal);border-bottom:1px solid rgba(245,241,234,.1)}
.head-inner{display:flex;align-items:center;gap:1.6rem;max-width:var(--max);margin:0 auto;padding:.85rem var(--gut)}
.brand{display:flex;align-items:baseline;gap:.3rem;margin-right:auto;text-decoration:none;
  font-family:var(--display);font-weight:500;font-size:1.28rem;letter-spacing:.01em;color:var(--on-charcoal);}
.brand span{color:var(--accent-tint)}
.head-nav{display:flex;align-items:center;gap:1.7rem}
.head-nav a{
  font-family:var(--body);font-size:.82rem;font-weight:500;letter-spacing:.02em;
  text-decoration:none;color:var(--on-charcoal-soft);padding:.3rem 0;border-bottom:1px solid transparent;
}
.head-nav a:hover,.head-nav a[aria-current="page"]{color:var(--on-charcoal);border-color:var(--accent-tint)}
.head-cta{padding:.7em 1.3em;font-size:.78rem;background:var(--accent);border-color:var(--accent);color:var(--on-charcoal)}
.head-cta:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.menu-btn{display:none;background:none;border:1px solid var(--on-charcoal-soft);border-radius:2px;padding:.5rem .65rem;cursor:pointer}
.menu-btn span{display:block;width:19px;height:1.5px;background:var(--on-charcoal);margin:4px 0}

/* ============================ HERO ============================ */
.hero{padding:clamp(2.6rem,6vw,4.5rem) 0 clamp(3rem,6vw,5rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,3.5rem);align-items:center}
.hero-grid--narrow-media{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.hero h1{font-size:var(--fs-hero);letter-spacing:-.005em;max-width:16ch}
.hero-sub{font-family:var(--display);font-size:clamp(1.15rem,1.9vw,1.5rem);font-weight:400;color:var(--ink-soft);margin-top:1rem;max-width:32ch}
.band--charcoal .hero-sub{color:var(--on-charcoal-soft)}
.hero-body{margin-top:1.6rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.9rem}
.hero-strip{margin-top:2rem;font-family:var(--body);font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.hero-strip span{margin:0 .6em;color:var(--accent)}
.band--charcoal .hero-strip{color:var(--on-charcoal-soft)}
.band--charcoal .hero-strip span{color:var(--accent-warm)}

.hero-media{position:relative}
.hero-media img{width:100%;height:auto;border-radius:2px}

.hero-coverage-strip{
  margin-top:clamp(2.6rem,5vw,4rem);padding-top:1.6rem;
  border-top:1px solid rgba(245,241,234,.14);text-align:center;
}
.hero-coverage-strip p{
  margin:0 auto;max-width:60ch;font-size:.88rem;
  color:var(--on-charcoal-soft);line-height:1.55;
}
.hero-question{margin-top:1.5rem;max-width:30ch}

/* ============================ IMAGEN + TEXTO ALTERNOS ============================ */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.split--rev .split-media{order:2}
.split--rev .split-text{order:1}
.split-media img{width:100%;height:auto;border-radius:2px}
.split h2{margin-bottom:1rem}

/* ============================ CAUSAS DE NULIDAD (tarjetas, resumen) ============================ */
.cause-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;margin-top:clamp(2.2rem,4vw,3rem)}
.cause-card{
  background:var(--ivory);border-radius:3px;border:1px solid var(--line);
  padding:1.9rem 1.6rem;
  transition:border-color .25s;
}
.cause-card:hover{border-color:var(--topo)}
.cause-card h3{font-size:1.05rem;margin-bottom:.6rem;color:var(--charcoal)}
.cause-card p{margin:0;font-size:.92rem;max-width:none;color:var(--ink)}
a.cause-card{display:block;text-decoration:none;color:inherit}
.cause-num{display:block;font-family:var(--display);font-size:1.5rem;color:var(--accent-warm);margin-bottom:.5rem;line-height:1}

/* ============================ COMPARATIVA (nulidad / divorcio civil / dispensa) ============================ */
.compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:clamp(2.4rem,4.5vw,3.4rem)}
.compare-card{
  background:var(--ivory);border:1px solid var(--topo);border-radius:3px;
  padding:2.1rem 1.7rem;
}
.compare-card h3{font-size:1.12rem;margin-bottom:.7rem;color:var(--charcoal)}
.compare-card p{margin:0;font-size:.94rem;max-width:none;color:var(--ink)}
.compare-card--highlight{background:var(--charcoal);border-color:var(--charcoal)}
.compare-card--highlight h3{color:var(--on-charcoal)}
.compare-card--highlight p{color:var(--on-charcoal-soft)}

/* ============================ TABS (causas de nulidad) ============================ */
.tabs{margin-top:clamp(2.2rem,4vw,3rem)}
.tabs-nav{display:flex;flex-wrap:wrap;gap:.5rem;border-bottom:1px solid var(--line);margin-bottom:clamp(2rem,4vw,2.8rem)}
.tabs-nav button{
  font-family:var(--body);font-size:.86rem;font-weight:500;color:var(--ink-soft);
  background:none;border:0;border-bottom:2px solid transparent;padding:.9rem 1rem;cursor:pointer;margin-bottom:-1px;
}
.tabs-nav button:hover{color:var(--ink)}
.tabs-nav button[aria-selected="true"]{color:var(--ink);border-color:var(--accent);font-weight:600}
.tab-panel{display:none}
.tab-panel.is-active{display:block}
.tab-panel h3{font-size:var(--fs-h2);margin-bottom:.4rem}
.tab-kicker{font-family:var(--body);font-size:var(--fs-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.8rem}
.tab-panel .lede{margin-bottom:1.6rem}
.tab-panel ul{padding-left:1.1rem;color:var(--ink-soft)}
.tab-panel li{margin-bottom:.5rem}
.tab-cta{margin-top:2.2rem}

/* ============================ PROCESO — PASOS ============================ */
.steps{margin-top:clamp(2.2rem,4vw,3rem);border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:5.6rem minmax(0,1fr);gap:1.4rem;padding:clamp(2.4rem,4.5vw,3.4rem) 0;border-bottom:1px solid var(--line)}
.step-num{font-family:var(--display);font-size:clamp(2.2rem,3.4vw,2.9rem);color:var(--accent-warm);line-height:1;padding-top:.1rem}
.step h3{font-size:var(--fs-h3);margin-bottom:.5rem}
.step p{margin:0;max-width:64ch}

/* ---------- mini-columnas dentro de un paso (fase de prueba) ---------- */
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:1.6rem;padding:1.8rem;background:var(--ivory-deep);border-radius:3px}
.proof-grid h4{font-family:var(--body);font-size:var(--fs-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep);margin:0 0 .5rem}
.proof-grid p{margin:0;font-size:.86rem;color:var(--ink);max-width:none}

/* ---------- tres columnas simples (tribunal competente) ---------- */
.simple-col-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2rem}
.simple-col-grid p{margin:0;color:var(--ink)}

/* ---------- tarjetas horizontales (tipos de procedimiento) ---------- */
.proc-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:1.6rem;margin-top:2.2rem;align-items:start}
.proc-card{background:var(--ivory);border:1px solid var(--topo);border-radius:3px;padding:1.9rem 1.7rem}
.proc-card--main{padding:2.4rem 2rem}
.proc-card h3{font-size:1.05rem;margin-bottom:.6rem;color:var(--charcoal)}
.proc-card--main h3{font-size:1.2rem}
.proc-card p{margin:0;font-size:.92rem;color:var(--ink);max-width:none}

/* ---------- flujo vertical simple (después de la sentencia) ---------- */
.flow-list{margin-top:2rem;display:flex;flex-direction:column;gap:0}
.flow-list li{list-style:none;font-family:var(--display);font-size:clamp(1.15rem,1.8vw,1.4rem);color:var(--charcoal);padding:.9rem 0}
.flow-list li:not(:last-child)::after{content:"↓";display:block;margin-top:.9rem;color:var(--accent-warm);font-size:1.2rem}

/* ---------- método de trabajo, versión visual (01 → 02 → 03) ---------- */
.steps-visual{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:clamp(2.6rem,5vw,3.6rem);border-top:1px solid rgba(245,241,234,.14);border-bottom:1px solid rgba(245,241,234,.14);
}
.step-visual{padding:2.3rem 1.8rem;position:relative;border-left:1px solid rgba(245,241,234,.14)}
.step-visual:first-child{border-left:0;padding-left:0}
.step-visual:last-child{padding-right:0}
.step-visual .step-num{
  font-family:var(--display);font-size:clamp(2.6rem,4.4vw,3.6rem);color:var(--accent-warm);
  line-height:1;display:block;margin-bottom:.8rem;padding-top:0;
}
.step-visual h3{font-size:1.1rem;margin-bottom:.5rem}
.step-visual p{margin:0;font-size:.92rem;max-width:none}
.step-visual:not(:last-child)::after{
  content:"→";position:absolute;top:2.4rem;right:-13px;
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  font-family:var(--body);font-size:1.05rem;color:var(--accent-warm);background:var(--charcoal);z-index:2;
}

/* ---------- timeline horizontal / vertical ---------- */
.timeline{margin:clamp(2.4rem,5vw,3.4rem) 0}
.timeline-track{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-top:1px solid var(--line)}
.timeline-item{padding:1.4rem 1rem 0;border-left:1px solid var(--line);position:relative}
.timeline-item:first-child{border-left:0}
.timeline-item::before{content:"";position:absolute;top:-1px;left:-1px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.timeline-item:not(:last-child)::after{
  content:"→";position:absolute;top:calc(1.4rem + .05em);right:-11px;
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  font-family:var(--body);font-size:.95rem;color:var(--accent-warm);background:var(--ivory-deep);z-index:2;
}
.timeline-num{font-family:var(--display);font-size:clamp(1.7rem,2.6vw,2.2rem);color:var(--accent-warm);display:block;margin-bottom:.4rem}
.timeline-label{font-family:var(--body);font-size:.78rem;color:var(--ink-soft);letter-spacing:.02em;line-height:1.4}

/* ============================ FAQ ============================ */
.faq{margin-top:clamp(2.2rem,4vw,3rem);max-width:var(--max-text)}
.faq details{background:var(--ivory);border-radius:3px;padding:0 1.5rem;margin-bottom:.85rem}
.faq details:last-child{margin-bottom:0}
.faq summary{
  display:flex;justify-content:space-between;gap:1.4rem;align-items:baseline;
  padding:1.3rem 0;cursor:pointer;list-style:none;
  font-family:var(--display);font-size:clamp(1.02rem,1.4vw,1.2rem);color:var(--charcoal);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--body);font-size:1.2rem;font-weight:400;color:var(--accent-warm);flex:none;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .answer{padding:0 0 1.4rem;color:var(--ink);max-width:66ch}
.faq .answer a{color:var(--accent);text-decoration:underline}

/* ---- FAQ agrupada en acordeón (página Preguntas frecuentes) ---- */
.faq-list{max-width:850px;margin-top:clamp(2rem,4vw,2.6rem)}
.faq-list details{border-bottom:1px solid var(--faq-line);padding:1.3rem 1.6rem;margin:0}
.faq-list details:first-of-type{border-top:1px solid var(--faq-line)}
.faq-list--on-piedra details{background:var(--ivory)}
.faq-list--on-marfil details{background:var(--stone-soft)}
.faq-list summary{
  display:flex;align-items:baseline;gap:1rem;cursor:pointer;list-style:none;
  font-family:var(--body);font-weight:600;font-size:1rem;line-height:1.5;color:var(--charcoal);
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";margin-left:auto;padding-left:1rem;font-size:1.25rem;font-weight:400;color:var(--accent);flex:none}
.faq-list details[open] summary::after{content:"−"}
.faq-list .faq-num{font-family:var(--body);font-size:.78rem;font-weight:600;color:var(--accent-warm);flex:none;padding-top:.15rem}
.faq-list .answer{padding:1rem 0 .2rem;color:var(--ink);max-width:68ch}
.faq-list .answer p{margin:0 0 1rem;line-height:1.7}
.faq-list .answer p:last-child{margin-bottom:0}
.faq-list .answer ul{color:var(--ink-soft);margin:0 0 1rem;padding-left:1.2rem;line-height:1.7}
.faq-list .answer a{color:var(--accent);text-decoration:underline;font-weight:500}
.faq-list .answer-lead{font-family:var(--display);font-style:italic;font-size:1.2rem;color:var(--accent-deep)}

/* ============================ 4 PRINCIPIOS (columnas) ============================ */
.principles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.6rem,3vw,2.2rem);margin-top:clamp(2.2rem,4vw,3rem);border-top:1px solid var(--line);padding-top:clamp(1.8rem,3vw,2.4rem)}
.principles--3{grid-template-columns:repeat(3,1fr)}
.principle h3{font-family:var(--display);font-size:1.2rem;margin-bottom:.6rem}
.principle p{margin:0;font-size:.94rem}
.principles .principle{border-left:1px solid var(--line);padding-left:clamp(1.4rem,2.6vw,1.8rem)}
.principles .principle:first-child{border-left:0;padding-left:0}

/* ---------- trayectoria (+30 años) ---------- */
.trajectory-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);gap:clamp(2rem,5vw,3.5rem);align-items:start}
.trajectory-num{font-family:var(--display);font-size:clamp(3rem,7vw,4.6rem);color:var(--accent-warm);line-height:1;margin:0 0 .6rem}
.trajectory-label{font-family:var(--body);font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);max-width:14ch}
.trajectory-photo{margin:clamp(2.6rem,5vw,3.6rem) 0 0}
.trajectory-photo img{width:100%;max-width:820px;display:block;margin:0 auto;border-radius:2px}

/* ---------- dos columnas simples (atención + discreción) ---------- */
.two-col-text{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4.5vw,3.2rem);margin-top:clamp(1.8rem,3.5vw,2.4rem)}
.two-col-text h3{font-size:1.15rem;margin-bottom:.6rem}
.two-col-text p{margin:0;color:var(--ink-soft)}
.band--deep .two-col-text p{color:var(--ink)}

/* ---------- método (5 pasos horizontales) ---------- */
.method-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:clamp(1.8rem,3vw,2.2rem);margin-top:clamp(2.2rem,4vw,3rem);border-top:1px solid rgba(245,241,234,.14);padding-top:clamp(1.8rem,3vw,2.4rem)}
.method-step .step-num{font-family:var(--display);font-size:clamp(2rem,3vw,2.5rem);color:var(--accent-warm);line-height:1;display:block;margin-bottom:.5rem}
.method-step h3{font-size:1.02rem;margin:0 0 .4rem;color:var(--on-charcoal)}
.method-step p{margin:0;font-size:.9rem;color:var(--on-charcoal-soft)}

/* ============================ FRASE DESTACADA ============================ */
.pull-quote{
  font-family:var(--display);font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.5;color:var(--charcoal);
  max-width:34ch;margin:0;font-weight:400;
}
.pull-quote cite{display:block;margin-top:1.2rem;font-family:var(--body);font-style:normal;font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.pull-quote--line{border-left:2px solid var(--accent-warm);padding-left:1.4rem;max-width:38ch}

/* ============================ CREDENCIALES ============================ */
.creds{list-style:none;margin:1.8rem 0 0;padding:0;border-top:1px solid var(--line)}
.creds li{padding:1rem 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:12rem 1fr;gap:1rem}
.creds b{font-family:var(--body);font-size:var(--fs-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep)}

/* ============================ FORMULARIO DE CONTACTO ============================ */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:clamp(2.2rem,4.5vw,4rem);align-items:start}
.field{margin-bottom:1.2rem}
.field label{display:block;font-family:var(--body);font-size:var(--fs-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.4rem}
.field label .req{color:var(--accent);font-weight:600}
.field label .opt{text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink-faint)}
.field input,.field textarea{
  width:100%;background:var(--ivory);border:1px solid var(--topo);border-radius:2px;
  padding:.75rem .85rem;color:var(--ink);font-family:var(--body);font-size:1rem;
}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--accent)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-family:var(--body);font-size:.82rem;color:var(--ink-soft);line-height:1.55;margin:.5rem 0 1.5rem}
.consent input{width:16px;height:16px;flex:none;margin-top:.2rem;accent-color:var(--accent)}
.form-status{display:none;border:1px solid var(--accent);padding:1rem 1.1rem;font-size:.92rem;color:var(--ink);background:var(--ivory-deep);margin-top:1rem}
.form-status.is-visible{display:block}
.contact-details{list-style:none;margin:0;padding:0}
.contact-details li{padding:1.1rem 0;border-top:1px solid var(--line)}
.contact-details b{display:block;font-family:var(--body);font-size:var(--fs-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:.35rem}
.contact-details a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent)}
.confidential-note{font-family:var(--body);font-size:var(--fs-micro);color:var(--ink-faint);margin-top:1rem}

/* caja marfil para el formulario sobre fondo oscuro */
.form-box{background:var(--ivory);border-radius:3px;padding:clamp(1.8rem,3.5vw,2.6rem)}
.form-box .field label{color:var(--ink-faint)}
.form-box .consent{color:var(--ink-soft)}
/* el formulario es una isla clara dentro de una sección oscura: su botón
   debe usar siempre la variante sólida, no la variante invertida de .band--charcoal */
.band--charcoal .form-box .btn{background:var(--charcoal);border-color:var(--charcoal);color:var(--ivory)}
.band--charcoal .form-box .btn:hover{background:var(--accent);border-color:var(--accent)}
.band--charcoal .contact-details b{color:var(--accent-warm)}
.band--charcoal .contact-details li{border-top-color:rgba(245,241,234,.14)}
.band--charcoal .contact-details a{color:var(--on-charcoal);border-bottom-color:var(--accent-warm)}
.band--charcoal .confidential-note{color:var(--on-charcoal-soft)}

/* ============================ INTERNAL LINKS BLOCK ============================ */
.internal-links{display:flex;flex-wrap:wrap;gap:.7rem 1.4rem;margin-top:clamp(2rem,4vw,2.8rem);padding-top:1.6rem;border-top:1px solid var(--line)}
.internal-links a{font-family:var(--body);font-size:.85rem;color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}
.internal-links a::after{content:"→";display:inline-block;margin-left:.4em;text-decoration:none;color:var(--accent-warm);transition:transform .2s}
.internal-links a:hover::after{transform:translateX(3px)}

/* ============================ PIE ============================ */
.site-foot{background:var(--footer-bg);color:var(--on-charcoal-soft);padding-top:clamp(2.8rem,5vw,4rem)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:2.4rem}
.foot-brand-word{
  font-family:var(--display);font-weight:500;font-size:1.3rem;letter-spacing:.01em;
  color:var(--on-charcoal);margin:0 0 .8rem;
}
.foot-brand-word span{color:var(--accent-tint)}
.foot-grid h4{font-family:var(--body);font-size:var(--fs-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--on-charcoal);margin-bottom:.9rem}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:.55rem}
.foot-grid a{text-decoration:none;color:var(--on-charcoal-soft);font-size:.92rem}
.foot-grid a:hover{color:var(--ivory)}
.foot-bottom{margin-top:2.6rem;padding:1.4rem 0;border-top:1px solid rgba(245,241,234,.12);display:flex;flex-wrap:wrap;gap:1rem 1.8rem;justify-content:space-between;font-family:var(--body);font-size:.76rem}
.foot-bottom a{color:var(--on-charcoal-soft);text-decoration:none}
.disclaimer{max-width:62ch;line-height:1.6}

/* ============================ RESPONSIVE ============================ */
@media (max-width:960px){
  .hero-grid,.hero-grid--narrow-media,.split,.contact-grid{grid-template-columns:1fr}
  .split-media{order:-1!important}
  .split-text{order:0!important}
  .timeline-track{grid-template-columns:repeat(3,1fr)}
  .timeline-item:nth-child(3n+1){border-left:0}
  .principles{grid-template-columns:repeat(2,1fr)}
  .principles .principle{border-left:0;padding-left:0}
  .principles .principle:nth-child(2n){border-left:1px solid var(--line);padding-left:clamp(1.4rem,2.6vw,1.8rem)}
  .trajectory-grid{grid-template-columns:1fr}
  .two-col-text{grid-template-columns:1fr}
  .cause-grid{grid-template-columns:repeat(2,1fr)}
  .compare-grid{grid-template-columns:1fr}
  .proof-grid{grid-template-columns:repeat(2,1fr)}
  .simple-col-grid{grid-template-columns:1fr}
  .proc-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:780px){
  .head-nav{position:fixed;inset:60px 0 auto;flex-direction:column;align-items:stretch;gap:0;background:var(--charcoal);border-bottom:1px solid rgba(245,241,234,.1);padding:.5rem var(--gut) 1.2rem;display:none}
  .head-nav.is-open{display:flex}
  .head-nav a{color:var(--on-charcoal-soft);padding:.8rem 0;border-bottom:1px solid rgba(245,241,234,.1)}
  .head-nav a:hover,.head-nav a[aria-current="page"]{color:var(--on-charcoal)}
  .menu-btn{display:block}
  .head-cta{display:none}
  .row2{grid-template-columns:1fr}
  .creds li{grid-template-columns:1fr}
  .timeline-track{grid-template-columns:1fr;border-top:0}
  .timeline-item{border-left:1px solid var(--line)!important;padding-left:1.1rem;padding-top:0;padding-bottom:1.2rem;margin-left:.3rem}
  .timeline-item:not(:last-child)::after{
    content:"↓";position:static;display:block;width:auto;height:auto;
    background:none;color:var(--accent-warm);font-size:.85rem;
    margin:.5rem 0 0 -.05rem;
  }
  .principles{grid-template-columns:1fr}
  .principles .principle,.principles .principle:nth-child(2n){border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:1.6rem}
  .principles .principle:first-child{border-top:0;padding-top:0}
  .cause-grid{grid-template-columns:1fr}
  .proof-grid{grid-template-columns:1fr}
  .proc-grid{grid-template-columns:1fr}
  .steps-visual{grid-template-columns:1fr;border-bottom:0}
  .step-visual{border-left:0;border-top:1px solid var(--line);padding:1.7rem 0}
  .step-visual:first-child{border-top:0}
  .step-visual:not(:last-child)::after{display:none}
  .foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}