/* ============================================================
   CREZZERE — styles.css
   Concepto: EL HILO CONDUCTOR — un wire continuo (lenguaje del
   logo) recorre la página; cada sección es un nodo del camino
   y el tramo final, en cian, remata en la flecha del contacto.
   Identidad replicada del deck (deck.template.html).
   01 TOKENS · 02 FUENTES · 03 BASE · 04 TIPOGRAFÍA · 05 LAYOUT
   06 HILO CONDUCTOR · 07 COMPONENTES · 08 SECCIONES
   09 CHROME · 10 MOTION
   Mobile-first: base = 375px · @48rem = 768 · @80rem = 1280
   ============================================================ */

/* ============ 01 TOKENS ============ */
:root{
  /* del deck — no tocar */
  --paper:#FAF7F1;
  --paper-deep:#F1ECE2;
  --ink:#12262B;
  --ink-soft:#42585D;
  --teal:#0C4E60;
  --teal-deep:#093A48;
  --cyan:#1E9CD0;
  --mist:#E4EDEC;
  --mist-strong:#CFDFDF;
  --rule:rgba(12,78,96,.28);
  --rule-soft:rgba(12,78,96,.14);
  /* banda oscura */
  --on-dark:#EAF2F1;
  --on-dark-soft:#9FC3CC;
  /* web */
  --container:72rem;
  --gutter:clamp(1.25rem, 5vw, 3rem);
  --section-pad:clamp(4rem, 9vw, 7rem);
  --radius:14px;
  --radius-pill:999px;
  --ease-out:cubic-bezier(.22,1,.36,1);
  /* hilo conductor */
  --channel:1.9rem;            /* canal izquierdo por donde corre el rail */
  --rail-w:2.4px;
  --rail-x:.3rem;              /* centro del rail respecto al borde del contenido */
  /* escala tipográfica fluida (375 → 1280) */
  --text-display:clamp(2.375rem, 1.1rem + 5.5vw, 4.25rem);
  --text-h2:clamp(1.75rem, 1.15rem + 2.6vw, 2.625rem);
  --text-stat:clamp(2.5rem, 1.4rem + 4.6vw, 4.5rem);
  --text-pull:clamp(1.25rem, 1rem + 1.1vw, 1.625rem);
  --text-h3:clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --text-body:clamp(1rem, .95rem + .25vw, 1.125rem);
  --text-small:.875rem;
  --text-kicker:.75rem;
}
@media (min-width:48rem){
  :root{--channel:3rem}
}

/* ============ 02 FUENTES (self-hosted, mismas del deck) ============ */
/* Un @font-face por archivo con rango de peso: si la fuente es variable
   usa los pesos reales; si no, el navegador sintetiza igual que antes. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/archivo.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/fraunces.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 700;font-display:swap;src:url('/fonts/fraunces-italic.woff2') format('woff2')}

/* ============ 03 BASE ============ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
body{
  background:var(--paper);
  color:var(--ink);
  font:400 var(--text-body)/1.65 'Archivo',sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:var(--teal)}
:focus-visible{outline:2.5px solid var(--teal);outline-offset:3px;border-radius:2px}
.band--dark :focus-visible{outline-color:var(--on-dark)}
::selection{background:var(--mist-strong);color:var(--ink)}
section{scroll-margin-top:4.5rem}

/* ============ 04 TIPOGRAFÍA ============ */
h1,h2{font-family:'Fraunces',serif;font-weight:600;color:var(--ink);letter-spacing:-.012em}
h1{font-size:var(--text-display);line-height:1.1}
h2{font-size:var(--text-h2);line-height:1.18}
h3{font:600 var(--text-h3)/1.35 'Archivo',sans-serif;color:var(--ink)}
.body{color:var(--ink-soft)}
.body b,.body strong{color:var(--ink);font-weight:600}
em{font-style:italic}
h1 em,h2 em{color:var(--teal)}
.small{font-size:var(--text-small)}

/* ============ 05 LAYOUT ============ */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.band--mist{background:var(--mist)}
.band--deep{background:var(--paper-deep)}
.band--dark{background:var(--teal-deep);color:var(--on-dark)}

/* ============ 06 HILO CONDUCTOR ============ */
/* Cada sección .sec aporta su segmento del rail; al compartir la misma X,
   el hilo se lee continuo de punta a punta de la página. */
.sec > .container{
  position:relative;
  padding-left:calc(var(--gutter) + var(--channel));
  padding-block:var(--section-pad);
}
.sec > .container::before{
  content:'';position:absolute;
  left:calc(var(--gutter) + var(--rail-x) - var(--rail-w)/2);
  top:0;bottom:0;width:var(--rail-w);
  background:var(--teal);
}
/* el hilo nace en el kicker del hero */
.sec--hero > .container::before{top:calc(var(--section-pad) + .3rem)}
/* tramo final: cian, corto, remata en flecha antes del kicker de contacto */
.sec--contact > .container::before{
  background:var(--cyan);
  bottom:auto;height:calc(var(--section-pad) - .55rem);
}
.sec--contact > .container::after{
  content:'';position:absolute;
  left:calc(var(--gutter) + var(--rail-x) - .45rem);
  top:calc(var(--section-pad) - .6rem);
  border-left:.45rem solid transparent;
  border-right:.45rem solid transparent;
  border-top:.72rem solid var(--cyan);
}
/* el anillo del kicker es el nodo de la sección, montado sobre el rail */
.sec .kicker{position:relative}
.sec .kicker::before{
  position:absolute;top:.5em;translate:0 -50%;
  left:calc(-1*var(--channel) + var(--rail-x) - .3rem - 2px);
  background:var(--paper);
}
.band--mist .kicker::before{background:var(--mist)}
.band--deep .kicker::before{background:var(--paper-deep)}
.band--dark .kicker::before{background:var(--teal-deep)}

/* el rail se dibuja con el scroll (progresivo: sin soporte = rail completo) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .sec > .container::before{
      transform-origin:top;
      animation:rail-draw linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 45%;
    }
  }
}
@keyframes rail-draw{from{transform:scaleY(0)}}

/* atmósfera: grid sutil de «sala de datos» */
.sec--hero{
  background-image:
    linear-gradient(rgba(12,78,96,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(12,78,96,.045) 1px,transparent 1px);
  background-size:44px 44px;
}
.band--dark.sec--contact{
  background-image:
    linear-gradient(rgba(30,156,208,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(30,156,208,.035) 1px,transparent 1px);
  background-size:44px 44px;
}
/* watermark del anillo, solo ≥768 (mobile no lo descarga) */
@media (min-width:48rem){
  .sec--hero{position:relative;overflow:hidden}
  .sec--hero::after{
    content:'';position:absolute;right:-11rem;top:50%;translate:0 -50%;
    width:34rem;height:34rem;
    background:url('/img/mark-crezzere.png') center/contain no-repeat;
    opacity:.06;pointer-events:none;
  }
  .sec--hero > .container{position:relative;z-index:1}
}

/* ============ 07 COMPONENTES (vocabulario del deck) ============ */

/* kicker: punto-anillo cian + tracking .24em */
.kicker{
  display:flex;align-items:center;gap:.65rem;
  font:600 var(--text-kicker)/1.5 'Archivo',sans-serif;
  letter-spacing:.24em;text-transform:uppercase;color:var(--teal);
}
.kicker::before{
  content:'';width:.6rem;height:.6rem;border-radius:50%;
  border:2px solid var(--cyan);flex:0 0 auto;
}
.band--dark .kicker{color:var(--on-dark-soft)}
/* núm. en teal (AA 8.6:1) — el acento cian vive en el anillo decorativo */
.kicker .num{color:var(--teal);margin-right:.35rem}
.band--dark .kicker .num{color:var(--on-dark)}

/* blocklabel (en teal por contraste AA; el deck lo tenía cian) */
.blocklabel{
  font:600 var(--text-kicker)/1.3 'Archivo',sans-serif;
  letter-spacing:.22em;text-transform:uppercase;color:var(--teal);
  margin-bottom:.75rem;
}

/* chips de estado */
.chip{
  display:inline-flex;align-items:center;gap:.45rem;
  border-radius:var(--radius-pill);padding:.32rem .85rem;
  font:600 .6875rem/1 'Archivo',sans-serif;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
}
.chip::before{content:'';width:.42rem;height:.42rem;border-radius:50%}
.chip--done{border:1.5px solid var(--teal);color:var(--teal)}
.chip--done::before{background:var(--teal)}
.chip--prep{border:1.5px dashed var(--teal);color:var(--teal)}
.chip--prep::before{background:var(--cyan)}
.chip--vision{border:1.5px dashed var(--ink-soft);color:var(--ink-soft)}
.chip--vision::before{background:transparent;border:1.5px solid var(--ink-soft);width:.34rem;height:.34rem}

/* stat: cifra gigante Fraunces teal como elemento gráfico */
.stat b{
  display:block;font:600 var(--text-stat)/1 'Fraunces',serif;
  color:var(--teal);margin-bottom:.4rem;letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;
}
.stat p{font-size:var(--text-small);line-height:1.5;color:var(--ink-soft);max-width:24ch}

/* pull quote: Fraunces itálica teal */
.pull{
  font:400 var(--text-pull)/1.5 'Fraunces',serif;
  font-style:italic;color:var(--teal);
}

/* bios: dos socios lado a lado en desktop, apilados en móvil */
.bios-grid{display:grid;gap:0;margin-top:2rem;max-width:44rem}
@media (min-width:48rem){
  .bios-grid{grid-template-columns:1fr 1fr;column-gap:2.5rem;max-width:none}
  .bios-grid .bio:last-child{border-bottom:none}
}

/* bio: bloque con rule superior (patrón .pillar del deck)
   flex listo para una foto opcional (.bio-photo); sin ella, .bio-text
   ocupa el 100% y el bloque se ve igual que sin flex. */
.bio{border-top:1px solid var(--rule-soft);padding-block:1.1rem;display:flex;gap:1rem;align-items:flex-start}
.bio:last-child{border-bottom:1px solid var(--rule-soft)}
.bio-text{flex:1;min-width:0}
.bio-photo{width:4.5rem;height:4.5rem;border-radius:50%;object-fit:cover;flex:none;background:var(--paper-deep)}
.bio h3 span{
  display:inline-block;font:600 .6875rem/1 'Archivo',sans-serif;
  letter-spacing:.18em;text-transform:uppercase;color:var(--teal);
  margin-left:.6rem;
}
.bio p{font-size:var(--text-small);line-height:1.6;color:var(--ink-soft);margin-top:.3rem}

/* aportes: grid 1 col → 2×2 en 768+ */
.aportes{display:grid;gap:0 2.5rem;margin-top:1.5rem}
@media (min-width:48rem){
  .aportes{grid-template-columns:1fr 1fr}
}

/* aporte: círculo numerado */
.aporte{display:flex;gap:1rem;padding-block:1.1rem;border-top:1px solid var(--rule-soft)}
.aporte .n{
  flex:0 0 2rem;height:2rem;border:2px solid var(--teal);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font:600 .95rem 'Fraunces',serif;color:var(--teal);
}
.aporte h3{margin-bottom:.2rem}
.aporte p{font-size:var(--text-small);line-height:1.55;color:var(--ink-soft)}

/* caja de remate (act-result del deck) */
.act-result{
  background:var(--mist);border-radius:var(--radius);
  padding:1.15rem 1.4rem;
  font:400 1.0625rem/1.55 'Fraunces',serif;font-style:italic;color:var(--teal-deep);
}
.act-result b{font-style:normal;font-weight:600}

/* botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:3rem;padding:.75rem 1.35rem;border-radius:var(--radius-pill);
  font:600 .9375rem/1 'Archivo',sans-serif;text-decoration:none;
  white-space:nowrap;
  cursor:pointer;border:1.5px solid var(--teal);
  transition:opacity .2s var(--ease-out);
}
@media (min-width:48rem){
  .btn{font-size:1rem;padding:.75rem 1.6rem}
}
.btn--primary{background:var(--teal);color:var(--paper)}
.btn--primary:hover{opacity:.92}
.btn--ghost{background:transparent;color:var(--teal)}
.btn--ghost:hover{opacity:.75}
.btn .arrow{transition:transform .25s var(--ease-out)}
.btn:hover .arrow{transform:translateX(4px)}
.band--dark .btn--primary{background:var(--paper);color:var(--teal-deep);border-color:var(--paper)}
.band--dark .btn--ghost{color:var(--on-dark);border-color:var(--on-dark-soft)}

/* ============ 08 SECCIONES ============ */

/* hero */
.hero-title{max-width:17ch;margin-top:1.1rem}
.hero-line{width:min(24rem,100%);margin-block:1.9rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem}

/* problema: cifra ancla en caja mist */
.anchor-stat{
  background:var(--mist);border-radius:var(--radius);
  padding:1.4rem 1.5rem;margin-top:2rem;max-width:44rem;
}
.anchor-stat b{
  display:block;font:600 clamp(2rem, 1.4rem + 2.6vw, 3rem)/1 'Fraunces',serif;
  color:var(--teal);letter-spacing:-.015em;font-variant-numeric:tabular-nums;
  margin-bottom:.45rem;
}
.anchor-stat p{color:var(--ink-soft);max-width:40ch}

/* servicios: dolor → mecanismo, con círculo numerado del deck */
.services-grid{list-style:none;display:grid;gap:1.75rem;margin-top:2.25rem}
.servicio{border-top:1px solid var(--rule-soft);padding-top:1.4rem}
.servicio .n{
  display:flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;border:2px solid var(--teal);border-radius:50%;
  font:600 .95rem 'Fraunces',serif;color:var(--teal);
}
.servicio h3{margin-top:.9rem}
.servicio .dolor{
  font:400 1.0625rem/1.5 'Fraunces',serif;font-style:italic;
  color:var(--teal);margin-top:.4rem;
}
.servicio p:not(.dolor){font-size:var(--text-small);line-height:1.65;color:var(--ink-soft);margin-top:.55rem}
@media (min-width:48rem){
  .services-grid{grid-template-columns:repeat(3,1fr);gap:2.25rem}
}

/* detalle de servicio: icono + encabezado (el icono reutiliza el trazo del sistema, no es librería) */
.svc-head{display:flex;align-items:flex-start;gap:1.1rem}
.svc-icon{
  flex:0 0 auto;width:3.5rem;height:3.5rem;border-radius:50%;
  border:2px solid var(--teal);display:flex;align-items:center;justify-content:center;
  margin-top:.15rem;
}
.svc-head-text{flex:1;min-width:0}

/* hoy / con crezzere: mismo lenguaje de nodo-conector que .method-flow, aplicado a la sección */
.svc-flow{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:0;margin-top:2rem;max-width:56rem}
.svc-flow-node{display:flex;flex-direction:column;gap:.6rem}
.svc-flow-label{
  font:600 .6875rem/1 'Archivo',sans-serif;letter-spacing:.16em;text-transform:uppercase;
}
.svc-flow-node.is-hoy .svc-flow-label{color:var(--ink-soft)}
.svc-flow-node.is-despues .svc-flow-label{color:var(--teal)}
.svc-flow-node ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.svc-flow-node li{font-size:var(--text-small);line-height:1.55;color:var(--ink-soft)}
.svc-flow-node.is-despues p{font-size:var(--text-small);line-height:1.6;color:var(--ink-soft);margin:0}
.svc-flow-connector{display:flex;align-items:center;justify-content:center;padding:.3rem 1rem 0}
@media (max-width:47.9375rem){
  .svc-flow{grid-template-columns:1fr;gap:1.25rem}
  .svc-flow-connector{justify-content:flex-start;padding:0}
  .svc-flow-connector svg{transform:rotate(90deg)}
}

/* oferta de entrada (patrón vision-strip del deck: borde punteado) */
.offer-strip{
  margin-top:2.75rem;background:var(--paper);
  border:1.5px dashed var(--rule);border-radius:var(--radius);
  padding:1.5rem;display:flex;flex-direction:column;gap:1rem;align-items:flex-start;
}
.offer-strip h3{font-family:'Fraunces',serif;font-size:1.2rem;font-weight:600}
.offer-strip p{font-size:var(--text-small);line-height:1.65;color:var(--ink-soft);margin-top:.5rem;max-width:62ch}
.offer-strip .btn{white-space:normal;text-align:center}
/* la fila del offer-strip solo cabe bien en desktop; en tablet sigue apilado */
@media (min-width:80rem){
  .offer-strip{flex-direction:row;align-items:center;gap:2rem;padding:1.75rem 2rem}
  .offer-strip > div{flex:1}
  .offer-strip .chip{flex:0 0 auto}
  .offer-strip .btn{flex:0 0 auto;white-space:nowrap}
}

/* metodología: flujo de 5 nodos re-orientable (HTML real, dibujo CSS) */
.method-flow{list-style:none;margin-block:2.25rem;position:relative}
.method-flow li{position:relative;padding:0 0 2rem 2.4rem}
.method-flow li:last-child{padding-bottom:0}
/* nodo: anillo + punto (radial) */
.method-flow li::before{
  content:'';position:absolute;left:0;top:.1rem;
  width:1.1rem;height:1.1rem;border-radius:50%;
  border:var(--rail-w) solid var(--teal);
  background:radial-gradient(circle,var(--teal) 0 .17rem,var(--paper) .18rem);
}
.band--deep .method-flow li::before{background:radial-gradient(circle,var(--teal) 0 .17rem,var(--paper-deep) .18rem)}
/* conector vertical hacia el siguiente nodo */
.method-flow li:not(:last-child)::after{
  content:'';position:absolute;
  left:calc(.55rem - var(--rail-w)/2);top:1.45rem;bottom:.15rem;
  width:var(--rail-w);background:var(--teal);
}
.method-flow li:nth-last-child(2)::after{background:var(--cyan)}
.method-flow li.is-ia::before{
  border-color:var(--cyan);
  background:radial-gradient(circle,var(--cyan) 0 .32rem,var(--cyan) .33rem);
}
.method-flow b{
  display:block;font:600 .8125rem/1.4 'Archivo',sans-serif;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
}
.method-flow li.is-ia b{color:var(--teal)}
.method-flow span{font-size:var(--text-small);color:var(--ink-soft)}
@media (min-width:48rem){
  .method-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-block:3rem}
  .method-flow--compact{grid-template-columns:repeat(3,1fr)}
  .method-flow li{padding:2.1rem .25rem 0;text-align:center}
  .method-flow li::before{left:50%;translate:-50%;top:0}
  .method-flow li:not(:last-child)::after{
    left:calc(50% + .8rem);right:calc(-50% + .8rem);
    top:calc(.55rem - var(--rail-w)/2);bottom:auto;
    width:auto;height:var(--rail-w);
  }
  .method-flow b{font-size:.875rem}
}

/* ilustración narrativa: disperso → ordenado → decisión, mismo patrón de reflow que .method-flow */
.order-flow{list-style:none;margin:2.5rem 0 0;max-width:40rem}
.order-flow li{position:relative;display:flex;align-items:center;gap:1rem;padding-bottom:1.75rem}
.order-flow li:last-child{padding-bottom:0}
.order-flow-icon{
  flex:0 0 auto;width:2.75rem;height:2.75rem;border-radius:50%;
  border:2px solid var(--teal);display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;
}
.order-flow-icon svg{width:1.7rem;height:1.7rem;stroke:var(--teal);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.order-flow b{font:600 .75rem/1.3 'Archivo',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.order-flow li:not(:last-child)::after{
  content:'';position:absolute;left:1.375rem;top:2.75rem;bottom:0;width:var(--rail-w);
  background:var(--rule);transform:translateX(calc(-1 * var(--rail-w) / 2));
}
.order-flow li:last-child .order-flow-icon{border-color:var(--cyan)}
.order-flow li:nth-last-child(2)::after{background:var(--cyan)}
@media (min-width:48rem){
  .order-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
  .order-flow li{flex-direction:column;text-align:center;gap:.75rem;padding-bottom:0}
  .order-flow-icon{margin-inline:auto}
  .order-flow li:not(:last-child)::after{
    left:calc(50% + 1.5rem);right:calc(-50% + 1.5rem);
    top:1.375rem;bottom:auto;height:var(--rail-w);width:auto;
    background:var(--rule);transform:none;
  }
  .order-flow li:nth-last-child(2)::after{background:var(--cyan)}
}

/* casos: card editorial — narrativa + stats propios + remate */
.case-card{border-top:1px solid var(--rule);padding-block:2.25rem}
.case-card:first-of-type{margin-top:2.25rem}
.case-head{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.1rem}
.case-id{font-style:italic;color:var(--ink-soft);font-size:var(--text-small)}
.case-title{
  font:600 clamp(1.375rem, 1.15rem + 1vw, 1.75rem)/1.25 'Fraunces',serif;
  color:var(--ink);letter-spacing:-.01em;margin-top:1.1rem;max-width:26ch;
}
.case-body{display:grid;gap:1.75rem;margin-top:1.25rem}
.case-body .act-result{margin-top:1.4rem}
.case-stats{list-style:none;display:grid;gap:1.4rem;align-content:start}
.case-stats .stat{border-top:1px solid var(--rule-soft);padding-top:1rem}
.case-stats .stat b{font-size:clamp(1.875rem, 1.5rem + 1.2vw, 2.5rem)}
.case-title + .case-stats{margin-top:1.25rem}
@media (min-width:48rem){
  .case-stats{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:2rem}
}
@media (min-width:80rem){
  .case-body{grid-template-columns:1.4fr 1fr;gap:3.5rem}
  .case-stats{grid-template-columns:1fr;gap:1.4rem}
  .case-title + .case-stats{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:2rem}
}

/* faq: acordeón nativo (sin JS, accesible por teclado) */
.faq{margin-top:2rem;max-width:48rem;border-top:1px solid var(--rule-soft)}
.faq-item{border-bottom:1px solid var(--rule-soft)}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  padding:1.25rem 0;
  font:600 var(--text-h3)/1.4 'Archivo',sans-serif;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'';flex:0 0 auto;width:.7rem;height:.7rem;margin-top:-.25rem;
  border-right:2.4px solid var(--teal);border-bottom:2.4px solid var(--teal);
  transform:rotate(45deg);transition:transform .25s var(--ease-out);
}
.faq-item[open] summary::after{transform:rotate(-135deg)}
.faq-a{padding:0 0 1.4rem;max-width:62ch}
.faq-a p{color:var(--ink-soft)}

/* lista con regla: enumera sin bullets, en el idioma de rule-lines del sistema */
.rule-list{list-style:none;margin-top:1rem;max-width:52rem}
.rule-list li{border-top:1px solid var(--rule-soft);padding-block:.7rem;font-size:var(--text-small);line-height:1.6;color:var(--ink-soft)}
.rule-list li:last-child{border-bottom:1px solid var(--rule-soft)}

/* contacto: apilado hasta 1280; dos columnas equilibradas solo en desktop ancho */
.contact-grid{display:grid;gap:2.5rem}
.contact-card{background:var(--paper);border-radius:var(--radius);padding:1.5rem;color:var(--ink)}
.contact-note{color:var(--on-dark-soft);font-size:var(--text-small)}
.contact-mail{color:var(--on-dark);font-weight:600;text-decoration-color:var(--cyan)}
.socio{margin-top:1.25rem}
.socio h3{color:var(--on-dark);font-family:'Fraunces',serif;font-size:1.125rem;font-weight:600}
.socio p{color:var(--on-dark-soft);font-size:var(--text-small)}
@media (min-width:80rem){
  /* center: la columna de copy completa se equilibra frente a la card alta del form */
  .contact-grid{grid-template-columns:1.1fr 1fr;gap:4rem;align-items:center}
}

/* ============ 09 CHROME ============ */
/* skip-link: visible solo con foco de teclado */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--teal);color:var(--paper);
  padding:.7rem 1.2rem;border-radius:0 0 var(--radius) 0;
  font:600 .9375rem 'Archivo',sans-serif;text-decoration:none;
}
.skip:focus-visible{left:0}

.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--paper);
  border-bottom:1px solid var(--rule-soft);
}
.site-header .container{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.25rem 1rem;min-height:4rem;
}
.brand{
  display:flex;align-items:center;gap:.6rem;text-decoration:none;
  font:600 .8125rem/1 'Archivo',sans-serif;letter-spacing:.24em;color:var(--teal);
}
.brand img{height:1.75rem;width:auto}

/* nav sin JS: lista apilada siempre visible bajo marca+CTA (degradación limpia) */
.site-nav{
  order:3;flex:0 0 100%;
  display:flex;flex-direction:column;
  padding-block:.25rem .75rem;
}
.site-nav a{
  text-decoration:none;color:var(--ink-soft);
  font:500 1rem/1 'Archivo',sans-serif;
  padding:.9rem 0;border-top:1px solid var(--rule-soft);
}
.site-nav a:first-child{border-top:none}
.site-nav a.is-active{color:var(--teal)}

.site-header-actions{display:flex;align-items:center;gap:.6rem}
.site-header .btn{min-height:2.6rem;padding:.55rem 1.15rem;font-size:.875rem}

/* botón hamburguesa: oculto por defecto (sin JS y en desktop) */
.nav-toggle{
  display:none;width:2.6rem;height:2.6rem;flex:0 0 auto;
  align-items:center;justify-content:center;
  border:none;background:none;padding:0;cursor:pointer;
}
.nav-toggle-icon,.nav-toggle-icon::before,.nav-toggle-icon::after{
  content:'';display:block;position:relative;
  width:1.35rem;height:2px;background:var(--teal);
  transition:transform .3s var(--ease-out),opacity .2s var(--ease-out),background .2s;
}
.nav-toggle-icon::before,.nav-toggle-icon::after{position:absolute;left:0}
.nav-toggle-icon::before{top:-.45rem}
.nav-toggle-icon::after{top:.45rem}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before{transform:translateY(.45rem) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after{transform:translateY(-.45rem) rotate(-45deg)}

.site-footer{padding-block:2rem;border-top:1px solid rgba(234,242,241,.18)}
.site-footer .container{
  display:flex;flex-direction:column;gap:.75rem;align-items:flex-start;
  font-size:var(--text-small);color:var(--on-dark-soft);
}
.site-footer .brand{color:var(--on-dark)}
.img-invert{filter:brightness(0) invert(1)}

/* con JS, bajo 768px: el nav pasa de lista apilada a panel flotante con hamburguesa */
@media (max-width:47.9375rem){
  .js .nav-toggle{display:inline-flex}
  .js .site-nav{
    order:0;flex-basis:auto;
    position:fixed;inset:4rem 0 0 0;z-index:90;
    background:var(--paper);
    padding:.5rem var(--gutter) 2rem;
    opacity:0;transform:translateY(-8px);
    pointer-events:none;overflow-y:auto;
    transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);
  }
  .js .site-nav a{font:600 1.375rem/1 'Fraunces',serif;color:var(--ink);padding:1.15rem 0}
  .js .site-nav a.is-active{color:var(--teal)}
  html.nav-open{overflow:hidden}
  html.nav-open .site-nav{opacity:1;transform:translateY(0);pointer-events:auto}
}

@media (min-width:48rem){
  .site-nav{
    order:0;flex:initial;display:flex;flex-direction:row;gap:1.75rem;
    padding-block:0;
  }
  .site-nav a{
    position:relative;text-decoration:none;color:var(--ink-soft);
    font:500 .9375rem/1 'Archivo',sans-serif;padding-block:.4rem;
    border-top:none;
  }
  .site-nav a::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
    background:var(--cyan);transform:scaleX(0);transform-origin:left;
    transition:transform .25s var(--ease-out);
  }
  .site-nav a:hover{color:var(--teal)}
  .site-nav a.is-active{color:var(--teal)}
  .site-nav a:hover::after,.site-nav a:focus-visible::after,.site-nav a.is-active::after{transform:scaleX(1)}
  .site-footer .container{flex-direction:row;justify-content:space-between;align-items:center}
}

/* ============ 10 MOTION (gate .js — sin JS todo visible) ============ */
.js .reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
  transition-delay:calc(var(--i,0) * 80ms);
}
.js .reveal.is-visible{opacity:1;transform:none}
/* efecto insignia: el flujo de metodología se dibuja al revelarse.
   Nodo: scale .6→1 · Conector: scaleY (vertical) / scaleX (horizontal) desde el origen. */
.js .method-flow li.reveal::before{
  transform:scale(.6);opacity:0;
  transition:transform .45s var(--ease-out),opacity .3s var(--ease-out);
  transition-delay:calc(var(--i,0) * 80ms);
}
.js .method-flow li.reveal.is-visible::before{transform:scale(1);opacity:1}
.js .method-flow li.reveal::after{
  transform:scaleY(0);transform-origin:top;
  transition:transform .5s var(--ease-out);
  transition-delay:calc(var(--i,0) * 80ms + 180ms);
}
.js .method-flow li.reveal.is-visible::after{transform:scaleY(1)}
@media (min-width:48rem){
  .js .method-flow li.reveal::after{transform:scaleX(0);transform-origin:left}
  .js .method-flow li.reveal.is-visible::after{transform:scaleX(1)}
}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .btn .arrow,.site-nav a::after,.faq-item summary::after{transition:none}
  .js .method-flow li.reveal::before,
  .js .method-flow li.reveal::after{transform:none;opacity:1;transition:none}
  .js .site-nav{transition:none}
  .nav-toggle-icon,.nav-toggle-icon::before,.nav-toggle-icon::after{transition:none}
}