/* ============================================================
   sections.css — identidad visual propia para cada sección.
   Ritmo de fondos: oscuro → oscuro → claro → oscuro → oscuro
   cálido → claro → negro → claro editorial → banda cian →
   foto → oscuro → arena → oscuro → claro → arena → oscuro →
   negro → footer.
   ============================================================ */

/* ─────────────  0 · GUARDA ANTI-DESBORDE  ─────────────
   Todo hijo directo de una grilla necesita min-width:0 para
   que su contenido pueda encogerse en lugar de desbordar. */
.hero-copy,.individual-copy,.boris-copy,.cic-body,.online-copy,
.cursos-copy,.parejas-sticky,.parejas-flow,.faq-aside,.faq-list,
.conf-intro > *,.cap-audiencia > *,.momentos-head > *{
  min-width:0;
}
.hero-scroll-txt{ display:block; }
.tree-g{ pointer-events:none; }

/* ─────────────  1 · HERO  ───────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:calc(var(--header-h) + clamp(2rem,6vw,4rem)) 0 clamp(4.5rem,8vw,6rem);
  background:
    radial-gradient(120% 90% at 78% 12%,rgba(21,138,132,.20),transparent 58%),
    radial-gradient(90% 70% at 12% 88%,rgba(201,165,92,.09),transparent 62%),
    linear-gradient(175deg,#080D0F 0%,#070B0D 48%,#081113 100%);
  overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; pointer-events:none; }
.hero-halo{
  position:absolute; right:-8%; top:-6%;
  width:min(760px,90vw); aspect-ratio:1;
  background:radial-gradient(circle,rgba(31,169,161,.30),rgba(21,138,132,.08) 46%,transparent 68%);
  filter:blur(12px);
}
.hero-grain{
  position:absolute; inset:0; opacity:.4; mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.22) .5px,transparent .5px);
  background-size:3px 3px;
}
.hero-arcs{ position:absolute; inset:0; width:100%; height:100%; opacity:.85; }

.hero-grid{
  position:relative; z-index:2;
  display:grid; gap:clamp(2.5rem,5vw,3.5rem);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:900px){
  .hero-grid{ grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(2rem,4vw,4rem); }
}

.hero-title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.25rem,1.3rem + 4.4vw,4.55rem);
  line-height:1.04; letter-spacing:-.03em;
  margin:0 0 1.4rem;
  font-variation-settings:"opsz" 120,"SOFT" 0,"WONK" 0;
}
.hero-title .line{ display:block; }
.hero-title em{
  font-style:normal; font-weight:500;
  color:var(--teal-300);
  font-variation-settings:"opsz" 120,"SOFT" 0,"WONK" 1;
}
/* El naranja del logo (la cruz) marca el arranque y el cierre del titular:
   «cristiana» y «liderazgo». El cian queda para los dos versos interiores. */
.hero-title .line:nth-child(1) em,
.hero-title .line:nth-child(4) em{
  color:var(--amber-400);
}
.hero-sub{
  color:var(--fg-on-dark-muted);
  font-size:clamp(1rem,.96rem + .28vw,1.11rem);
  max-width:50ch;
  margin-bottom:0;
}

.hero-flag{
  display:flex; align-items:center; gap:.65rem;
  margin:clamp(1.6rem,2.6vw,2.15rem) 0 0;
  padding:.7rem 1.05rem;
  width:fit-content; max-width:100%;
  border:1px solid rgba(255,255,255,.11);
  border-radius:100px;
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:.845rem; color:var(--fg-on-dark-muted);
}
.hero-flag > span{ min-width:0; }
.hero-flag strong{ color:#fff; font-weight:500; white-space:nowrap; }

.hero-branches-mobile{ display:none; gap:.5rem; margin-top:1.3rem; flex-wrap:wrap; }
.hero-branches-mobile li{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.4rem .85rem; border-radius:100px;
  border:1px solid rgba(255,255,255,.12);
  color:var(--teal-300);
}
.hero-branches-mobile li:nth-child(2){ color:var(--gold-soft); border-color:var(--gold-line); }
.hero-branches-mobile li:nth-child(3){ color:var(--amber-400); border-color:rgba(240,154,51,.3); }

/* Visual del hero */
.hero-visual{
  position:relative;
  aspect-ratio:1/1.14;
  max-width:min(560px,100%);
  margin-inline:auto;
  width:100%;
}
.hero-tree{
  position:absolute; inset:-6% -12% -2% -12%;
  width:124%; height:108%;
  z-index:1;
  overflow:visible;
}
.hero-tree .tw{
  fill:none;
  stroke:rgba(70,198,190,.55);
  stroke-width:1.4; stroke-linecap:round;
  stroke-dasharray:1400; stroke-dashoffset:1400;
  animation:draw 2.6s var(--ease-out) forwards;
  animation-delay:calc(.35s + var(--l) * .13s);
  filter:drop-shadow(0 0 6px rgba(31,169,161,.35));
}
.hero-tree .tw.thin{ stroke-width:1; stroke:rgba(201,165,92,.5); filter:none; }
.hero-tree .tw.ground{ stroke:rgba(255,255,255,.12); stroke-width:1; filter:none; }
.hero-tree .tree-leaves use{
  fill:rgba(240,154,51,.55);
  opacity:0; transform-box:fill-box; transform-origin:0 50%;
  animation:leafIn .8s var(--ease-out) forwards;
}
.hero-tree .tree-leaves>g:nth-child(1) use{ animation-delay:1.5s }
.hero-tree .tree-leaves>g:nth-child(2) use{ animation-delay:1.62s }
.hero-tree .tree-leaves>g:nth-child(3) use{ animation-delay:1.74s }
.hero-tree .tree-leaves>g:nth-child(4) use{ animation-delay:1.86s; fill:rgba(201,165,92,.62) }
.hero-tree .tree-leaves>g:nth-child(5) use{ animation-delay:1.98s; fill:rgba(201,165,92,.5) }
.hero-tree .tree-leaves>g:nth-child(6) use{ animation-delay:2.1s }
.hero-tree .tree-leaves>g:nth-child(7) use{ animation-delay:2.22s }
.hero-tree .tree-leaves>g:nth-child(8) use{ animation-delay:2.34s; fill:rgba(70,198,190,.45) }
.hero-tree .tree-leaves>g:nth-child(9) use{ animation-delay:2.46s; fill:rgba(70,198,190,.45) }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes leafIn{ from{ opacity:0; transform:scale(.3); } to{ opacity:1; transform:scale(1); } }

.hero-arch{
  position:absolute; inset:4% 8% 0 8%;
  border:1px solid var(--gold-line);
  border-bottom:0;
  border-radius:50% 50% 0 0 / 34% 34% 0 0;
  z-index:2;
  opacity:.65;
  pointer-events:none;
}
.hero-arch::after{
  content:""; position:absolute; inset:5% 5% 0 5%;
  border:1px solid rgba(31,169,161,.22);
  border-bottom:0;
  border-radius:50% 50% 0 0 / 34% 34% 0 0;
}

.hero-portrait{
  position:absolute; inset:auto 0 0 0;
  z-index:3;
  display:block;
  translate:0 var(--py,0px);
  transition:translate .6s var(--ease-out);
}
/* Tres máscaras que se intersecan para que la foto se funda con el fondo por
   los cuatro cantos en lugar de leerse como un rectángulo pegado encima:
   – vertical: disuelve la pared sobre su cabeza y la caída hacia el texto;
   – horizontal: apaga la pared a ambos lados y afina el borde del hombro;
   – radial: viñeta suave que sólo trabaja las esquinas.
   El óvalo anterior era más ancho que la propia imagen (rx 78 % ⇒ el canto
   caía en la parada del 90 %), así que ningún lado llegaba a desvanecerse. */
.hero-portrait img{
  --hero-mask:
    linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 3%,#000 10%,#000 60%,rgba(0,0,0,.5) 86%,transparent 100%),
    linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 5%,#000 15%,#000 85%,rgba(0,0,0,.5) 95%,transparent 100%),
    radial-gradient(76% 70% at 50% 42%,#000 60%,rgba(0,0,0,.72) 84%,rgba(0,0,0,.3) 100%);
  width:100%; height:auto;
  object-fit:cover;
  -webkit-mask-image:var(--hero-mask);
  -webkit-mask-composite:source-in;
  mask-image:var(--hero-mask);
  mask-composite:intersect;
  filter:contrast(1.05) saturate(.98) brightness(.98);
}

.hero-tag{
  position:absolute; z-index:4;
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg-on-dark-muted);
  white-space:nowrap;
  opacity:0;
  animation:tagIn .7s var(--ease-out) forwards;
}
.hero-tag i{ width:5px; height:5px; border-radius:50%; background:currentColor; flex:none; }
/* Las tres etiquetas viven dentro del recuadro visual y sobre zonas donde la
   máscara ya apagó la foto: fondo oscuro garantizado y, en escritorio, cero
   invasión de la columna de texto (antes -4 % las metía bajo el párrafo). */
.hero-tag--vida{ left:1%; top:40%; color:var(--teal-300); animation-delay:2.1s; }
.hero-tag--matrimonio{ right:1%; top:18%; color:var(--gold-soft); animation-delay:2.25s; }
.hero-tag--liderazgo{ left:30%; top:91%; color:var(--amber-400); animation-delay:2.4s; }
@keyframes tagIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:.95; transform:none; } }

.hero-scroll{
  position:absolute; left:50%; bottom:1.4rem; z-index:4;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  font-size:.63rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--stone);
  transition:color .3s var(--ease);
}
.hero-scroll:hover{ color:var(--teal-300); }
.hero-scroll-line{ width:1px; height:38px; background:linear-gradient(180deg,transparent,var(--teal-400)); position:relative; overflow:hidden; }
.hero-scroll-line::after{
  content:""; position:absolute; left:0; width:1px; height:12px; background:var(--gold);
  animation:scrollDot 2.2s var(--ease) infinite;
}
@keyframes scrollDot{ 0%{ top:-14px } 100%{ top:40px } }

@media (max-width:899px){
  .hero{ min-height:auto; text-align:left; }
  .hero-grid{ grid-template-columns:1fr; }
  /* 1/1.34 es la proporción de la propia foto. Con 1/1.08 la imagen, anclada al
     pie, desbordaba ~76 px por arriba y se metía bajo el header: la cabeza
     arrancaba pegada al botón. Ajustando la caja a la foto, el retrato empieza
     donde empieza su marco y queda aire entre el header y el pelo. */
  .hero-visual{ order:-1; max-width:min(400px,84%); aspect-ratio:1/1.34; }
  /* La misma máscara a escala móvil se lee distinta: el desvanecido inferior
     ocupa el 14 % final, que en escritorio son ~105 px y aquí apenas 55. Sobre
     una camisa casi blanca eso no es un fundido, es un corte horizontal. Aquí
     el fundido arranca a media altura y las esquinas bajas se van del todo. */
  .hero-portrait img{
    --hero-mask:
      linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 4%,#000 12%,#000 52%,rgba(0,0,0,.66) 76%,rgba(0,0,0,.22) 91%,transparent 100%),
      linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 4%,#000 13%,#000 87%,rgba(0,0,0,.5) 96%,transparent 100%),
      radial-gradient(78% 68% at 50% 40%,#000 52%,rgba(0,0,0,.6) 80%,rgba(0,0,0,0) 100%);
  }
  /* El viewBox 1440×900 con `slice` se amplía ×1.44 dentro de una caja de
     390×1295, y el tramo más diagonal de los arcos cae justo sobre el display
     serif del titular: entra a la altura de «el matrimonio» y sale bajo «y el
     liderazgo». Bajándolos un 11 % de la altura del hero salen del titular y
     del arranque del párrafo, y siguen leyéndose como barrido de fondo. */
  .hero-arcs{ transform:translateY(11%); }
  .hero-tag{ display:none; }
  .hero-branches-mobile{ display:flex; }
  .hero-scroll{ display:none; }
}

/* ─────────────  2 · TRES CAMINOS  ───────────── */
.caminos{
  position:relative;
  padding:var(--sec-pad) 0;
  background:linear-gradient(180deg,#081113 0%,#0A1417 44%,#070B0D 100%);
  overflow:hidden;
}
.caminos::before{
  content:""; position:absolute; left:50%; top:-4%;
  width:min(1000px,140%); aspect-ratio:2/1; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 0%,rgba(21,138,132,.16),transparent 66%);
  pointer-events:none;
}

/* ── Rótulo «Mis servicios» ─────────────────────────────────────────────
   Reemplaza al bloque «Diferentes momentos / Diferentes necesidades» que
   el cliente pidió retirar. Al quedar una sola línea corta, el cuerpo puede
   crecer mucho más que un .h-display normal: es el titular más grande de la
   página después del hero. «servicios» recoge los tres colores de las
   tarjetas de abajo —cian, dorado y naranja— así el rótulo ya anuncia
   los tres caminos antes de que se lean. */
.servicios-head{ margin-bottom:clamp(2.1rem,4.2vw,3.2rem); }
.h-servicios{
  margin:0;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2.75rem,1.35rem + 6.5vw,6.4rem);
  line-height:.94;
  letter-spacing:-.04em;
  font-variation-settings:"opsz" 144;
  text-wrap:balance;
  color:#fff;
}
.h-servicios em{
  font-style:normal;
  color:var(--gold);
}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .h-servicios em{
    background:linear-gradient(94deg,var(--teal-300) 4%,var(--gold) 50%,var(--amber-400) 94%);
    -webkit-background-clip:text;
            background-clip:text;
    color:transparent;
  }
}
.caminos-grid{
  position:relative;
  display:grid; gap:1px;
  grid-template-columns:1fr;
  background:var(--line-dark);
  border:1px solid var(--line-dark);
  border-radius:var(--r-lg);
  overflow:hidden;
}
@media (min-width:820px){ .caminos-grid{ grid-template-columns:repeat(3,1fr); } }
.camino{
  position:relative;
  padding:clamp(1.9rem,3.4vw,2.9rem) clamp(1.4rem,2.6vw,2.1rem) clamp(1.9rem,3.4vw,2.6rem);
  background:rgba(11,17,20,.92);
  display:flex; flex-direction:column;
  min-height:clamp(340px,42vw,430px);
  transition:background-color .5s var(--ease);
}
.camino:hover{ background-color:rgba(14,22,26,.98); }
/* Cada camino con su propio clima cromático, ya en reposo:
   vida = cian, matrimonio = dorado, formación = naranja. */
.camino--1{ background-image:radial-gradient(118% 80% at 2% 100%,rgba(21,138,132,.18),transparent 62%); }
.camino--2{ background-image:radial-gradient(124% 84% at 50% 108%,rgba(201,165,92,.15),transparent 60%); }
.camino--3{ background-image:radial-gradient(118% 80% at 98% 100%,rgba(240,154,51,.15),transparent 62%); }
.camino-num{
  font-family:var(--serif); font-size:.92rem; letter-spacing:.14em;
  color:var(--gold); opacity:.85;
  margin-bottom:1.1rem;
}
.camino--1 .camino-num{ color:var(--teal-300); }
.camino--2 .camino-num{ color:var(--gold); }
.camino--3 .camino-num{ color:var(--amber-400); }
/* El dibujo lineal .camino-art se retiró: existía cuando la tarjeta no tenía
   fotografía y era su única personalidad visual. Con la foto detrás, el trazado
   quedaba encima de la cara de la mujer, de la pareja y del auditorio. */
.camino-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.3rem,1.1rem + .7vw,1.65rem);
  margin-bottom:.75rem;
  position:relative; z-index:1;
}
.camino--1 .camino-title{ color:#fff; }
.camino-txt{
  color:var(--fg-on-dark-muted); font-size:.945rem;
  margin-bottom:1.6rem; position:relative; z-index:1;
  max-width:34ch;
}
.camino .link-arrow{ margin-top:auto; align-self:flex-start; position:relative; z-index:1; }
.camino--2 .link-arrow{ color:var(--gold-soft); }
.camino--3 .link-arrow{ color:var(--amber-400); }
.camino::after{
  content:""; position:absolute; left:0; top:0; width:100%; height:2px;
  background:linear-gradient(90deg,var(--teal-500),transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease);
}
.camino--2::after{ background:linear-gradient(90deg,var(--gold),transparent); }
.camino--3::after{ background:linear-gradient(90deg,var(--amber-500),transparent); }
.camino:hover::after{ transform:scaleX(1); }
/* Fotografía de fondo por camino. Va bajo todo el contenido y siempre lleva
   doble velo: uno cromático (el mismo clima que ya tenía la tarjeta en reposo)
   y otro oscuro vertical que garantiza el contraste del texto sobre cualquier
   zona clara de la imagen. Así la foto aporta atmósfera sin competir. */
.camino{ isolation:isolate; }
.camino--1{ --tint:rgba(21,138,132,.42); }
.camino--2{ --tint:rgba(201,165,92,.34); }
.camino--3{ --tint:rgba(240,154,51,.34); }
.camino-photo{
  position:absolute; inset:auto 0 0 0; height:74%; z-index:0;
  overflow:hidden; pointer-events:none;
  /* El pie de la franja coincide con el borde inferior de la tarjeta, y ahí la
     máscara del <img> ya está a #000 y el tinte radial del ::after a plena
     fuerza: foto y velo se cortaban a bisel contra el fondo liso de la tarjeta
     siguiente (un salto de 37 y 64 niveles en 1 px). Esta máscara desvanece la
     franja ENTERA —imagen, velo y tinte— en su último cuarto. */
  --camino-foot:linear-gradient(180deg,#000 0,#000 72%,rgba(0,0,0,.5) 88%,transparent 100%);
  -webkit-mask-image:var(--camino-foot);
          mask-image:var(--camino-foot);
}
/* Sin esto el <picture> es una caja en línea de altura automática: el height:100%
   del <img> no tenía contra qué resolverse, la imagen se dibujaba a su alto
   intrínseco (478 px dentro de una franja de 318) y object-position no hacía
   nada. La franja enseñaba siempre el trozo de arriba, por eso ni la pareja ni
   el auditorio aparecían por mucho que se ajustara el encuadre. */
.camino-photo picture{ display:block; width:100%; height:100%; }
.camino-photo img{
  width:100%; height:100%; object-fit:cover;
  opacity:.94;
  filter:grayscale(.14) contrast(1.04) brightness(.94);
  transform:scale(1.04);
  transition:transform 1.2s var(--ease-out),opacity .6s var(--ease);
  /* Dos tramos, no una rampa recta: la rampa lineal alcanzaba media opacidad
     justo a la altura del párrafo. Aquí la foto se mantiene casi apagada
     mientras hay texto (hasta el 42 %) y sube de golpe después. */
  --camino-mask:linear-gradient(180deg,transparent 0,rgba(0,0,0,.07) 42%,#000 64%);
  -webkit-mask-image:var(--camino-mask);
  mask-image:var(--camino-mask);
}
/* Cada foto se encuadra por su motivo, no por una regla común: el sujeto de la
   individual está arriba, la pareja hacia dos tercios y el auditorio algo más
   abajo. Con un único object-position los dos últimos quedaban fuera de cuadro. */
.camino--1 .camino-photo img{ object-position:50% 32%; }
/* La pareja está en penumbra sobre una casa oscura: con el mismo revelado que
   las otras dos se perdía entera, así que ésta va menos apagada. El encuadre
   se centra en los rostros (≈48 % del alto original), no en las piernas. */
.camino--2 .camino-photo img{
  object-position:50% 48%; opacity:1;
  filter:grayscale(.06) contrast(1.05) brightness(1.12);
}
.camino--3 .camino-photo img{ object-position:50% 58%; filter:grayscale(.1) contrast(1.04) brightness(1.02); }
.camino:hover .camino-photo img{ transform:scale(1.09) translateY(-6px); opacity:1; }
.camino-photo::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(130% 88% at 50% 108%,var(--tint),transparent 62%),
    linear-gradient(180deg,transparent 26%,rgba(8,13,15,.16) 54%,rgba(8,13,15,.56) 78%,rgba(8,13,15,.9) 100%);
}
.camino-num{ position:relative; z-index:1; }
/* Sólo en la franja ancha-y-baja (una columna pero tarjetas de ~700×340) la foto
   necesita irse al lateral: en un 3:1 la vertical queda irreconocible. En móvil
   la tarjeta vuelve a ser casi cuadrada, así que la franja inferior encaja de
   nuevo — y ahí sí importa, porque el panel lateral robaba más de la mitad del
   ancho y partía el texto cada dos palabras. */
@media (min-width:560px) and (max-width:819px){
  /* Aquí la franja es un panel lateral a toda altura: el canto que hay que
     fundir es el izquierdo, y de eso ya se encarga la máscara del <img>. */
  .camino-photo{ inset:0 0 0 auto; width:52%; height:100%; --camino-foot:none; }
  .camino-photo img{
    /* Mismo criterio que en vertical: casi apagada mientras hay texto, y sube
       después. Con la rampa recta el panel enseñaba un canto vertical limpio. */
    --camino-mask:linear-gradient(90deg,transparent 0,rgba(0,0,0,.08) 26%,#000 58%);
  }
  .camino--1 .camino-photo img{ object-position:50% 30%; }
  .camino--2 .camino-photo img{ object-position:50% 62%; }
  .camino--3 .camino-photo img{ object-position:50% 56%; }
  .camino-photo::after{
    background:
      radial-gradient(120% 104% at 100% 50%,var(--tint),transparent 64%),
      linear-gradient(90deg,rgba(8,13,15,.92) 0,rgba(8,13,15,.3) 48%,transparent 82%);
  }
  /* El texto se detiene antes de la zona ya opaca de la foto (≈71 % del ancho). */
  .camino-title,.camino-txt{ max-width:min(34ch,56%); }
}
/* En una columna la tarjeta crece a lo alto y el párrafo —tres o cuatro líneas—
   cae dentro del 74 % fotográfico, justo donde el velo oscuro todavía no ha
   empezado a trabajar (arranca al 24 %). Sobre la cortina clara de la pareja o
   la pared del auditorio, el gris del texto pierde contraste. Aquí la foto se
   queda en la mitad inferior y el velo empieza opaco arriba. */
@media (max-width:559px){
  .camino-photo{ height:60%; }
  .camino-photo img{
    --camino-mask:linear-gradient(180deg,transparent 0,rgba(0,0,0,.06) 30%,#000 52%);
    opacity:1;
  }
  /* La franja de móvil es más pequeña y más apaisada que la de escritorio: con
     el mismo revelado la mujer, la pareja y el auditorio no llegaban a leerse.
     El velo se concentra arriba (donde va el texto) y abajo (donde va el
     enlace); en medio la foto queda casi limpia. */
  .camino--1 .camino-photo img{ filter:grayscale(.06) contrast(1.04) brightness(1.06); }
  .camino--2 .camino-photo img{ filter:grayscale(.02) contrast(1.05) brightness(1.24); }
  .camino--3 .camino-photo img{ filter:grayscale(.04) contrast(1.04) brightness(1.16); }
  /* El enlace «Conocer…» cae entre el 75 % y el 81 % de la franja, y ahí el velo
     iba sólo a ~.64: sobre la blusa clara de la pareja el dorado se quedaba en
     2,7:1. Se cierra antes y más rápido en esa banda. El tramo 30-65 %, donde
     están la cara, la pareja y el auditorio, queda igual de abierto. */
  .camino-photo::after{
    background:
      radial-gradient(130% 88% at 50% 108%,var(--tint),transparent 62%),
      linear-gradient(180deg,rgba(11,17,20,.86) 0,rgba(11,17,20,.18) 30%,rgba(8,13,15,.12) 46%,rgba(8,13,15,.4) 62%,rgba(8,13,15,.82) 76%,rgba(8,13,15,.94) 100%);
  }
}

/* ─────────────  3 · MOMENTOS / MOTIVOS  ───────────── */
.momentos{
  position:relative;
  padding:var(--sec-pad) 0 clamp(3.5rem,7vw,5.5rem);
  background:linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%);
  color:var(--fg-on-light);
  overflow:hidden;
}
.momentos-top{
  position:absolute; left:0; right:0; top:0; height:120px;
  background:linear-gradient(180deg,rgba(7,11,13,.14),transparent);
  pointer-events:none;
}
.momentos .h-display{ color:var(--fg-on-light); }
.momentos .h-display em{ color:var(--teal-700); }
.momentos-head{
  position:relative;
  display:grid; gap:1.4rem;
  grid-template-columns:1fr;
  margin-bottom:clamp(1.8rem,3.5vw,2.4rem);
}
@media (min-width:900px){
  .momentos-head{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:end; gap:2.5rem; }
}
.momentos-note{
  color:var(--fg-on-light-muted); font-size:.955rem;
  max-width:44ch;
  padding-left:1.1rem;
  border-left:2px solid var(--amber-500);
}
/* Retrato editorial junto al titular. En escritorio la cabecera pasa a una
   sola columna (titular sobre nota) y la fotografía ocupa la columna derecha:
   evita que este bloque quede como texto suelto sobre el crema plano. */
/* El aire hasta la marquesina lo asume el contenedor: la cabecera ya sólo
   separa el titular de la fotografía. */
.momentos-intro{ position:relative; margin-bottom:clamp(2.5rem,5vw,3.75rem); }
.momentos-fig{
  position:relative; z-index:0; margin:0 auto;
  width:min(100%,340px);
}
.momentos-fig img{
  display:block; width:100%; height:auto;
  border-radius:var(--r-md);
  filter:saturate(.9) contrast(1.04);
  box-shadow:0 24px 60px -34px rgba(7,11,13,.65);
}
.momentos-fig-line{
  position:absolute; z-index:-1;
  inset:16px -16px -16px 16px;
  border:1px solid rgba(21,138,132,.4);
  border-radius:var(--r-md);
}
@media (min-width:900px){
  .momentos-intro{
    display:grid; align-items:end;
    grid-template-columns:minmax(0,1fr) minmax(0,clamp(240px,26vw,330px));
    gap:clamp(2.2rem,4.5vw,3.6rem);
  }
  .momentos-head{ grid-template-columns:1fr; align-items:start; margin-bottom:0; gap:1.5rem; }
  .momentos-fig{ width:100%; margin-bottom:.4rem; }
}

.drift{
  position:relative;
  margin-bottom:clamp(2.5rem,5vw,3.5rem);
  /* Desvanecido en px: en móvil un 9 % son ~35 px y el corte se veía duro */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 84px,#000 calc(100% - 84px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 84px,#000 calc(100% - 84px),transparent 100%);
}
.drift-row{ display:flex; width:max-content; gap:.9rem; }
.drift-row + .drift-row{ margin-top:.9rem; }
.drift-track{ display:flex; gap:.9rem; flex:none; }
.drift-row--a{ animation:driftL 46s linear infinite; }
.drift-row--b{ animation:driftR 52s linear infinite; }
.drift:hover .drift-row{ animation-play-state:paused; }
@keyframes driftL{ from{ transform:translateX(0) } to{ transform:translateX(calc(-50% - .45rem)) } }
@keyframes driftR{ from{ transform:translateX(calc(-50% - .45rem)) } to{ transform:translateX(0) } }
.motivo{
  flex:none;
  padding:.72rem 1.25rem;
  border-radius:100px;
  border:1px solid rgba(20,28,31,.13);
  background:rgba(255,255,255,.62);
  font-size:.9rem; color:var(--slate);
  white-space:nowrap;
  transition:border-color .35s var(--ease),color .35s var(--ease),background-color .35s var(--ease),transform .35s var(--ease);
}
.motivo:hover{
  border-color:var(--teal-500); color:var(--teal-700);
  background:#fff; transform:translateY(-2px);
}
.drift-row--b .motivo:hover{ border-color:var(--amber-500); color:var(--amber-600); }

.momentos-foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.2rem;
  padding:clamp(1.4rem,3vw,2rem) clamp(1.4rem,3vw,2.2rem);
  border-radius:var(--r-md);
  background:
    radial-gradient(120% 160% at 100% 0%,rgba(21,138,132,.10),transparent 60%),
    rgba(255,255,255,.7);
  border:1px solid rgba(20,28,31,.1);
}
.momentos-foot p{ margin:0; font-size:1.02rem; color:var(--fg-on-light); max-width:44ch; }

/* ─────────────  4 · PAREJAS  ───────────── */
.parejas{
  position:relative;
  padding:var(--sec-pad) 0;
  background:linear-gradient(180deg,#070B0D 0%,#0A1215 40%,#081012 100%);
  overflow:hidden;
}
.parejas-bg{ position:absolute; inset:0; pointer-events:none; }
.parejas-bg span{
  position:absolute; left:50%; top:22%;
  width:min(900px,120%); aspect-ratio:1; transform:translateX(-50%);
  background:radial-gradient(circle,rgba(21,138,132,.15),transparent 62%);
}
.parejas-grid{
  position:relative;
  display:grid; gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:1fr;
  margin-bottom:clamp(3rem,6vw,4.5rem);
}
@media (min-width:960px){
  .parejas-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(3rem,5vw,5rem); }
  .parejas-sticky{ position:sticky; top:calc(var(--header-h) + 3.5rem); align-self:start; }
}
.parejas-sticky .btn{ margin-top:1.8rem; }
.parejas-sticky .lead{ margin-bottom:1rem; }
/* Par fotográfico bajo el CTA. Antes era una sola franja apaisada; el cliente
   pidio dos imagenes. Van apaisadas 3:2 —el formato nativo de los dos
   originales— y escalonadas: la segunda baja un poco para que el bloque
   no se lea como dos rectangulos gemelos, y siguen siendo bajas de altura
   porque la columna es sticky y no debe superar la pantalla.
   El tratamiento (desaturado + velo teal + filete dorado) se hereda del que
   ya tenia la franja anterior, asi el par no rompe la paleta de la seccion. */
.parejas-figs{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(.7rem,1.6vw,1.1rem);
  margin:2.2rem 0 0;
  align-items:start;
}
.parejas-fig{
  position:relative; margin:0;
  border-radius:var(--r-md); overflow:hidden;
}
.parejas-fig--b{ margin-top:clamp(1.1rem,2.6vw,2rem); }
.parejas-fig img{
  display:block; width:100%; height:auto;
  aspect-ratio:3/2; object-fit:cover; object-position:50% 45%;
  filter:grayscale(.34) contrast(1.06) brightness(.94) saturate(.9);
}
.parejas-fig::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,17,19,.24),transparent 46%,rgba(8,17,19,.6)),
    radial-gradient(90% 130% at 50% 100%,rgba(21,138,132,.3),transparent 70%);
}
.parejas-fig::before{
  content:""; position:absolute; left:12%; right:12%; top:0; height:1px; z-index:1;
  background:linear-gradient(90deg,transparent,var(--gold-line),transparent);
}

.parejas-flow{ position:relative; padding-block:.5rem; }
.weave{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none;
}
.weave-line{
  fill:none; stroke-width:1.3; stroke-linecap:round;
  stroke-dasharray:2600; stroke-dashoffset:2600;
  transition:stroke-dashoffset 1.2s var(--ease-out);
}
.weave-a{ stroke:rgba(70,198,190,.55); }
.weave-b{ stroke:rgba(240,154,51,.5); }
.weave.is-in .weave-line{ stroke-dashoffset:0; }
.weave-nodes circle{
  fill:var(--gold); opacity:0;
  transition:opacity .5s var(--ease);
}
.weave.is-in .weave-nodes circle{ opacity:.9; }
.weave.is-in .weave-nodes circle:nth-child(1){ transition-delay:.5s }
.weave.is-in .weave-nodes circle:nth-child(2){ transition-delay:.7s }
.weave.is-in .weave-nodes circle:nth-child(3){ transition-delay:.9s }
.weave.is-in .weave-nodes circle:nth-child(4){ transition-delay:1.1s }
.weave.is-in .weave-nodes circle:nth-child(5){ transition-delay:1.3s }

.concepts{ position:relative; z-index:1; display:grid; gap:.85rem; }
.concept{
  padding:clamp(1.15rem,2.2vw,1.5rem) clamp(1.2rem,2.4vw,1.7rem);
  border:1px solid var(--line-dark);
  border-radius:var(--r-md);
  /* El tejido de las dos líneas que se buscan vive detrás de estas tarjetas.
     Con .72 de opacidad y blur de 10px quedaba tapado el 89 % de su recorrido y
     sólo asomaban trozos diagonales sueltos en los huecos, que se leían como
     rayaduras. Sin blur y algo más translúcidas, las dos líneas se siguen
     enteras y el texto secundario se mantiene en ~5,8:1. */
  background:rgba(10,16,19,.58);
  display:flex; flex-direction:column; gap:.3rem;
  transition:border-color .4s var(--ease),transform .4s var(--ease),background-color .4s var(--ease);
}
.concept:hover{ border-color:rgba(31,169,161,.42); transform:translateX(6px); background:rgba(13,21,25,.7); }
.concept-k{
  font-family:var(--serif); font-size:1.14rem; color:#fff; font-weight:400;
}
.concept-d{ font-size:.9rem; color:var(--fg-on-dark-muted); }
.concept:nth-child(even) .concept-k{ color:var(--gold-soft); }

.temas-pareja{
  position:relative;
  padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--line-dark);
}
.temas-list{ display:flex; flex-wrap:wrap; gap:.6rem; }
.temas-list li{
  padding:.6rem 1.1rem;
  border-radius:100px;
  border:1px solid rgba(255,255,255,.12);
  font-size:.875rem; color:var(--fg-on-dark-muted);
  transition:border-color .35s var(--ease),color .35s var(--ease),background-color .35s var(--ease);
}
.temas-list li:hover{ border-color:var(--teal-400); color:#fff; background:rgba(21,138,132,.13); }

/* ─────────────  5 · INTIMIDAD / TERAPIA SEXUAL  ───────────── */
.intimidad{
  position:relative;
  padding:var(--sec-pad) 0;
  background:
    radial-gradient(90% 70% at 50% 0%,rgba(201,165,92,.10),transparent 60%),
    linear-gradient(180deg,#0B0F10 0%,#120E0B 52%,#0A0D0E 100%);
  overflow:hidden;
}
/* Las curvas doradas cruzaban los párrafos a plena opacidad y competían con la
   lectura. Se bajan de intensidad y, sobre todo, se apaga la zona central con
   un velo: el trazado sigue leyéndose en los márgenes, que es donde aporta. */
.intimidad-bg{ position:absolute; z-index:0; inset:0; opacity:.34; pointer-events:none; }
.intimidad-bg svg{ width:100%; height:100%; }
.intimidad::after{
  content:""; position:absolute; z-index:1; inset:0; pointer-events:none;
  background:radial-gradient(76% 64% at 46% 52%,rgba(9,12,13,.9),rgba(9,12,13,.6) 54%,transparent 84%);
}
.intimidad-inner{ position:relative; z-index:2; max-width:960px; }
/* El titular llevaba un <br> fijo que a 390 px dejaba «parte» sola en su propia
   línea. Quitado el <br>, el reparto lo decide el balanceo. */
.intimidad-inner .h-display{ text-wrap:balance; }
.intimidad .h-display em{ color:var(--gold-soft); }
.intimidad-cols{
  display:grid; gap:1.4rem; grid-template-columns:1fr;
  margin:1.9rem 0 2.2rem;
  color:var(--fg-on-dark-muted); font-size:.985rem;
}
@media (min-width:820px){ .intimidad-cols{ grid-template-columns:1fr 1fr; gap:2.5rem; } }
.intimidad-temas{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:2.4rem; }
.intimidad-temas li{
  padding:.55rem 1.05rem; border-radius:6px;
  border:1px solid rgba(201,165,92,.24);
  background:rgba(201,165,92,.05);
  font-size:.85rem; color:var(--gold-soft);
  transition:background-color .35s var(--ease),border-color .35s var(--ease);
}
.intimidad-temas li:hover{ background:rgba(201,165,92,.13); border-color:var(--gold); }

.seals{
  display:grid; gap:1px; grid-template-columns:1fr;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-md);
  overflow:hidden;
  margin-bottom:2.4rem;
}
@media (min-width:760px){ .seals{ grid-template-columns:repeat(3,1fr); } }
.seal{
  display:flex; gap:.9rem; align-items:flex-start;
  padding:1.35rem 1.4rem;
  background:rgba(10,13,14,.94);
}
.seal svg{ width:22px; height:22px; flex:none; color:var(--gold); margin-top:2px; }
.seal span{ display:flex; flex-direction:column; gap:.2rem; font-size:.875rem; color:var(--fg-on-dark-muted); }
.seal strong{ color:#fff; font-weight:500; font-size:.94rem; }

/* ─────────────  6 · PSICOTERAPIA INDIVIDUAL  ───────────── */
.individual{
  position:relative;
  padding:var(--sec-pad) 0;
  background:linear-gradient(180deg,var(--cream) 0%,#F5F8F8 55%,var(--cream-2) 100%);
  color:var(--fg-on-light);
  overflow:hidden;
}
.individual::before{
  content:""; position:absolute; right:-10%; top:8%;
  width:min(620px,80%); aspect-ratio:1;
  background:radial-gradient(circle,rgba(21,138,132,.10),transparent 64%);
  pointer-events:none;
}
.individual .h-display{ color:var(--fg-on-light); }
.individual .h-display em{ color:var(--teal-700); }
.individual .lead,.individual .body-muted{ color:var(--fg-on-light-muted); }
.individual-grid{
  position:relative;
  display:grid; gap:clamp(2.5rem,5vw,4rem); grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:920px){ .individual-grid{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); } }
.individual .lead{ margin-bottom:.9rem; }
.motivos-list{ margin:2rem 0; display:grid; gap:0; }
.motivos-list li{
  /* baseline y no center: en los motivos que ocupan dos líneas el número
     quedaba centrado entre ambas en vez de alineado con la primera. */
  display:flex; align-items:baseline; gap:1rem;
  padding:.9rem .3rem;
  border-bottom:1px solid rgba(20,28,31,.1);
  font-size:.985rem;
  transition:padding-left .4s var(--ease),color .3s var(--ease);
}
.motivos-list li:first-child{ border-top:1px solid rgba(20,28,31,.1); }
.motivos-list li span{
  font-family:var(--serif); font-size:.82rem; color:var(--amber-600);
  letter-spacing:.1em; flex:none; width:26px;
}
.motivos-list li:hover{ padding-left:.9rem; color:var(--teal-700); }

.individual-art{ position:relative; display:grid; place-items:center; }
.individual-art svg{ width:100%; max-width:460px; height:auto; }
.individual-art .orb{ animation:spinSlow 60s linear infinite; transform-origin:50% 50%; }
.orb-dot{ animation:orbit 22s linear infinite; transform-origin:250px 320px; }
.orb-dot--1{ animation-duration:26s; }
.orb-dot--2{ animation-duration:34s; animation-direction:reverse; }
.orb-dot--3{ animation-duration:46s; }
@keyframes spinSlow{ to{ transform:rotate(360deg) } }
@keyframes orbit{ to{ transform:rotate(360deg) } }
.individual-quote{
  position:absolute; inset:auto auto 50% 50%;
  transform:translate(-50%,50%);
  font-family:var(--serif); font-size:clamp(1rem,.9rem + .5vw,1.3rem);
  line-height:1.35; text-align:center; color:var(--slate);
  /* Ancho acotado al núcleo del orbe para que nunca toque los anillos */
  width:min(60%,15ch);
}
.individual-quote em{ font-style:normal; color:var(--teal-700); }
@media (max-width:919px){ .individual-art{ order:-1; } .individual-art svg{ max-width:330px; } }

/* ─────────────  7 · PSICOLOGÍA Y FE  ───────────── */
.fe{
  position:relative;
  padding:clamp(5.5rem,11vw,10rem) 0;
  background-color:#040708;
  /* Profundidad: dos focos fríos en las esquinas bajas evitan el fondo plano */
  background-image:
    radial-gradient(80% 55% at 8% 104%,rgba(21,138,132,.13),transparent 70%),
    radial-gradient(70% 50% at 96% 96%,rgba(201,165,92,.09),transparent 72%);
  overflow:hidden;
}
.fe-bg{ position:absolute; inset:0; pointer-events:none; }
.fe-halo{
  position:absolute; left:50%; top:34%;
  width:min(700px,110%); aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(240,154,51,.16),rgba(201,165,92,.06) 40%,transparent 66%);
  filter:blur(6px);
}
/* Brazo vertical de la cruz: recorre la sección completa, apenas perceptible */
.fe-axis{
  position:absolute; left:50%; top:0; bottom:0; width:1px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(240,154,51,.42) 30%,
    rgba(201,165,92,.38) 64%,
    transparent 100%);
}
.fe-inner{ position:relative; text-align:center; }
.fe-inner .kicker{ justify-content:center; }
.fe-inner .kicker span{ display:none; }
.fe .h-display em{ color:var(--gold-soft); }
.fe-lead{
  max-width:60ch; margin:1.6rem auto 0;
  color:var(--fg-on-dark-muted);
  font-size:clamp(1.02rem,.98rem + .3vw,1.16rem);
}
.fe-cards{
  position:relative;
  display:grid; gap:1rem; grid-template-columns:1fr;
  --fe-gap:clamp(3.6rem,7vw,5.5rem);
  margin-top:var(--fe-gap);
  text-align:left;
}
/* Travesaño de la cruz: siempre centrado en el aire sobre las tarjetas,
   de modo que en móvil y escritorio cae en el mismo lugar relativo. */
.fe-cards::before{
  content:""; position:absolute;
  left:50%; top:calc(var(--fe-gap) / -2);
  width:min(560px,78vw); height:1px;
  transform:translate(-50%,-50%);
  background:linear-gradient(90deg,transparent,rgba(240,154,51,.45) 30%,rgba(240,154,51,.45) 70%,transparent);
}
.fe-cards::after{
  content:""; position:absolute;
  left:50%; top:calc(var(--fe-gap) / -2);
  width:6px; height:6px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--amber-500);
  box-shadow:0 0 0 5px rgba(240,154,51,.10),0 0 20px 5px rgba(240,154,51,.28);
}
/* Apiladas las tarjetas, el brazo vertical arranca arriba del todo y cae por el
   centro del h2 y de las cinco líneas del lead, que están centrados: los cruza
   línea a línea y se lee como un tachado. Aquí la cruz conserva sus dos brazos,
   pero el vertical sólo existe del travesaño hacia abajo, anclado a las
   tarjetas, donde únicamente asoma en los huecos entre ellas. */
@media (max-width:819px){
  .fe-axis{ display:none; }
  .fe-cards::before{
    height:calc(100% + var(--fe-gap) / 2);
    transform:translateX(-50%);
    pointer-events:none;
    background:
      linear-gradient(90deg,transparent,rgba(240,154,51,.45) 30%,rgba(240,154,51,.45) 70%,transparent)
        no-repeat 50% 0 / 100% 1px,
      linear-gradient(180deg,rgba(240,154,51,.40),rgba(201,165,92,.30) 58%,transparent 97%)
        no-repeat 50% 0 / 1px 100%;
  }
}
@media (min-width:820px){ .fe-cards{ grid-template-columns:repeat(3,1fr); } }
.fe-card{
  position:relative;
  padding:clamp(1.6rem,3vw,2.1rem) clamp(1.4rem,2.6vw,1.8rem);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-md);
  background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:border-color .45s var(--ease),transform .45s var(--ease);
  overflow:hidden;
}
/* Cada tarjeta con su propio foco y su propia altura de reposo:
   evita la lectura de "tres bloques idénticos". */
.fe-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.9; transition:opacity .5s var(--ease);
}
.fe-card:nth-child(1)::before{ background:radial-gradient(120% 88% at 6% 0%,rgba(21,138,132,.16),transparent 58%); }
.fe-card:nth-child(2)::before{ background:radial-gradient(130% 96% at 50% -14%,rgba(240,154,51,.14),transparent 56%); }
.fe-card:nth-child(3)::before{ background:radial-gradient(120% 88% at 94% 0%,rgba(201,165,92,.15),transparent 58%); }
/* Margen negativo (no transform) para no pisar la animación .reveal */
@media (min-width:820px){ .fe-card:nth-child(2){ margin-top:-14px; } }
.fe-card:hover{ border-color:var(--gold-line); transform:translateY(-4px); }
.fe-card:hover::before{ opacity:1; }
.fe-card-line{
  position:absolute; top:0;
  height:1px; background:var(--gold);
}
.fe-card .fe-card-line{ left:clamp(1.4rem,2.6vw,1.8rem); width:28px; }
/* Izquierda, centro y derecha sólo tienen sentido cuando las tres tarjetas
   comparten fila y dibujan el eje: apiladas a ancho completo, un título
   centrado sobre un párrafo alineado a la izquierda parece un descuido. */
@media (min-width:820px){
  .fe-card:nth-child(2) .fe-card-line{ left:50%; width:56px; transform:translateX(-50%); background:var(--amber-500); }
  .fe-card:nth-child(3) .fe-card-line{ left:auto; right:clamp(1.4rem,2.6vw,1.8rem); width:28px; }
  .fe-card:nth-child(2) h3{ text-align:center; }
}
.fe-card h3,.fe-card p{ position:relative; z-index:1; }
.fe-card h3{
  font-family:var(--serif); font-weight:400; font-size:1.16rem;
  margin:.5rem 0 .7rem; color:#fff;
}
.fe-card p{ font-size:.915rem; color:var(--fg-on-dark-muted); margin:0; }

/* ─────────────  8 · SOBRE BORIS  ───────────── */
.boris{
  position:relative;
  padding:var(--sec-pad) 0;
  background:linear-gradient(180deg,var(--cream-2) 0%,var(--cream) 40%,var(--sand) 100%);
  color:var(--fg-on-light);
  overflow:hidden;
}
.boris::before{
  content:""; position:absolute; left:-12%; bottom:-10%;
  width:min(640px,80%); aspect-ratio:1;
  background:radial-gradient(circle,rgba(201,165,92,.16),transparent 62%);
  pointer-events:none;
}
.boris .h-display{ color:var(--fg-on-light); }
.boris .lead,.boris .body-muted{ color:var(--fg-on-light-muted); }
.boris-grid{
  position:relative;
  display:grid; gap:clamp(2.5rem,5vw,4.5rem); grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:920px){ .boris-grid{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); } }

.boris-media{ position:relative; max-width:min(480px,100%); margin-inline:auto; width:100%; }
.boris-frame{
  position:absolute; inset:-4% -4% 6% 8%;
  border:1px solid var(--gold-line);
  border-radius:var(--r-lg);
  background:linear-gradient(150deg,rgba(21,138,132,.07),transparent 60%);
}
@media (max-width:919px){
  /* En una columna .boris-media ocupa casi todo el shell, así que los
     porcentajes pensados para la rejilla de dos columnas meten el lado
     izquierdo (28 px) y el inferior (26 px) del marco bajo la propia foto, y
     sacan el derecho a 4 px del borde de pantalla: se leía como un arco suelto
     arriba más un muñón a la derecha. Un passe-partout simétrico cierra el
     filete por los cuatro lados y deja 8,4 px de aire. */
  .boris-frame{ inset:-10px; }
}
.boris-photo{ position:relative; display:block; }
.boris-photo img{
  width:100%; height:auto;
  border-radius:var(--r-lg);
  box-shadow:0 30px 60px -34px rgba(7,11,13,.55);
  filter:saturate(.97) contrast(1.03);
}
.boris-badge{
  position:absolute; right:-2%; bottom:8%;
  display:flex; align-items:center; gap:.6rem;
  padding:.75rem 1rem;
  border-radius:14px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(20,28,31,.09);
  box-shadow:0 16px 34px -22px rgba(7,11,13,.6);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.boris-badge svg{ width:20px; height:20px; color:var(--teal-500); flex:none; }
.boris-badge em{
  font-style:normal; font-size:.7rem; line-height:1.28;
  letter-spacing:.06em; text-transform:uppercase; color:var(--slate);
}

.boris-role{
  font-size:.8rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--amber-600);
  margin:.75rem 0 1.4rem;
}
.boris-facts{
  display:grid; gap:0; grid-template-columns:1fr;
  margin:2rem 0;
  border-top:1px solid rgba(20,28,31,.12);
}
@media (min-width:560px){ .boris-facts{ grid-template-columns:1fr 1fr; column-gap:2rem; } }
.boris-facts > div{
  padding:.95rem 0;
  border-bottom:1px solid rgba(20,28,31,.12);
}
.boris-facts dt{
  font-size:.665rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--stone-2); margin-bottom:.3rem;
}
.boris-facts dd{ font-size:.94rem; color:var(--fg-on-light); }
.boris-quote{
  margin:0 0 2rem;
  padding:1.2rem 0 1.2rem 1.4rem;
  border-left:2px solid var(--teal-500);
}
.boris-quote p{
  font-family:var(--serif); font-size:clamp(1.02rem,.96rem + .4vw,1.22rem);
  line-height:1.5; color:var(--slate); margin:0;
}
.boris-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; }

/* ─────────────  9 · FUNDACIÓN CICATRICES  ───────────── */
.cicatrices{
  position:relative;
  padding:clamp(3rem,6vw,4.5rem) 0;
  background:linear-gradient(120deg,#0A3E3C 0%,#0F6B66 46%,#0B4A47 100%);
  overflow:hidden;
}
.cicatrices::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.13) .6px,transparent .6px);
  background-size:5px 5px; opacity:.5;
}
.cic-panel{
  position:relative;
  display:grid; gap:1.8rem; grid-template-columns:1fr;
  align-items:center;
  padding:clamp(1.8rem,3.6vw,2.6rem);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-lg);
  background:rgba(4,20,20,.28);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
@media (min-width:820px){ .cic-panel{ grid-template-columns:200px 1fr; gap:2.6rem; } }
/* El emblema decorativo se sustituye por el logotipo real de la fundación,
   enlazado a su Instagram. El PNG está pensado para fondo claro —la figura es
   blanca y el wordmark «FUNDACIÓN» es violeta—, así que sobre el teal oscuro
   se apoya en una placa clara: el violeta recupera legibilidad y el conjunto
   se lee como un sello institucional, no como una imagen pegada. */
.cic-emblem{
  display:block; justify-self:start;
  width:min(200px,54vw);
  padding:clamp(.9rem,1.7vw,1.2rem);
  border-radius:var(--r-md);
  background:linear-gradient(158deg,#FFFFFF 0%,#F2F5F5 100%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 20px 42px -20px rgba(0,0,0,.6);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.cic-emblem img{ display:block; width:100%; height:auto; }
.cic-emblem:hover,.cic-emblem:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 26px 52px -20px rgba(0,0,0,.68);
}
@media (max-width:819px){ .cic-emblem{ width:min(170px,46vw); } }
.cic-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2.05rem);
  margin-bottom:.85rem;
}
.cic-txt{ color:rgba(238,243,243,.82); font-size:.965rem; max-width:70ch; }
.cic-txt strong{ color:#fff; font-weight:500; }
.cic-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.3rem; }
.cic-tags li{
  padding:.42rem .9rem; border-radius:100px;
  border:1px solid rgba(255,255,255,.22);
  font-size:.775rem; letter-spacing:.04em;
  color:rgba(255,255,255,.88);
}

/* ─────────────  10 · CONFERENCIAS  ───────────── */
.conferencias{ position:relative; background:#070B0D; }
.conf-banner{
  position:relative;
  min-height:clamp(420px,62vh,640px);
  display:flex; align-items:flex-end;
  padding:clamp(3rem,7vw,5rem) 0 clamp(2.5rem,5vw,3.5rem);
  overflow:hidden;
}
.conf-banner > picture{ position:absolute; inset:0; }
.conf-banner img{
  width:100%; height:100%; object-fit:cover; object-position:50% 58%;
  filter:saturate(.82) contrast(1.06) brightness(.78);
}
.conf-banner-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(7,11,13,.86) 0%,rgba(7,11,13,.45) 34%,rgba(7,11,13,.92) 88%,#070B0D 100%),
    linear-gradient(90deg,rgba(7,11,13,.88) 0%,rgba(7,11,13,.30) 58%,transparent 100%),
    radial-gradient(70% 60% at 82% 26%,rgba(21,138,132,.30),transparent 62%);
}
.conf-banner-copy{ position:relative; z-index:2; }
.conf-banner-copy .h-display{ max-width:20ch; }
.conf-modalidad{ margin:1.5rem 0 0; }
.chip{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.6rem 1.1rem; border-radius:100px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:.83rem; color:var(--fg-on-dark);
}
.chip--live i{
  width:7px; height:7px; border-radius:50%; background:var(--amber-500);
  box-shadow:0 0 0 0 rgba(240,154,51,.6);
  animation:pulse 2.6s var(--ease) infinite;
}

/* padding-block, no el atajo `padding`: el atajo anulaba el padding-inline
   de .shell y el contenido se pegaba al borde por debajo de 1240 px. */
.conf-body{
  position:relative; padding-block:clamp(3rem,6vw,4.5rem) var(--sec-pad);
  /* El salto del banner al cuerpo eran 88 px de negro absolutamente plano.
     Se prolonga un resto del halo teal del banner; se apaga en transparent al
     70 %, así que no deja canto. */
  background:radial-gradient(130% 200px at 50% 0,rgba(21,138,132,.10),transparent 70%);
}
@media (max-width:639px){
  .conf-banner{ padding-bottom:clamp(1.4rem,4vw,2rem); }
  .conf-body{ padding-block-start:2rem; }
}
.conf-intro{
  display:grid; gap:1.2rem; grid-template-columns:1fr;
  margin-bottom:clamp(2.5rem,5vw,3.5rem);
}
@media (min-width:900px){ .conf-intro{ grid-template-columns:1.2fr .8fr; gap:3rem; align-items:start; } }
/* La banda superior ya no es un primer plano de Boris sino la audiencia; su
   fotografía real dictando la conferencia se conserva aquí, en formato de
   lámina editorial con pie de foto, que es donde el dato importa. */
.conf-boris{
  position:relative; z-index:0; margin:.4rem 0 0;
  max-width:520px;
}
.conf-boris picture{
  display:block; position:relative;
  border-radius:var(--r-md); overflow:hidden;
}
.conf-boris img{
  display:block; width:100%; height:auto;
  aspect-ratio:3/2; object-fit:cover; object-position:50% 38%;
  filter:contrast(1.04) saturate(.94) brightness(.9);
}
.conf-boris picture::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(200deg,rgba(21,138,132,.24),transparent 52%,rgba(7,11,13,.5));
}
.conf-boris::before{
  content:""; position:absolute; z-index:-1;
  inset:14px -14px -14px 14px;
  border:1px solid var(--gold-line); border-radius:var(--r-md);
}
/* El marco desplazado da por supuesto que hay hueco a la derecha y que el pie
   queda fuera de su recorrido. En columna única no ocurre ninguna de las dos
   cosas: la vertical derecha queda a 4,4 px del borde de pantalla y la
   izquierda dibuja una segunda regla dorada justo delante de la primera letra
   del pie, que ya tiene la suya. La lámina conserva redondeo, velo y regla. */
@media (max-width:899px){
  .conf-boris::before{ display:none; }
}
.conf-boris figcaption{
  margin-top:.85rem; font-size:.78rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--fg-on-dark-muted);
  padding-left:.85rem; border-left:2px solid var(--gold);
}
@media (min-width:900px){
  /* Fila estrecha, columna ancha: la lámina abarca dos filas y sin esto el
     hueco entre ambos párrafos crecería hasta igualar su altura. */
  .conf-intro{ gap:1rem 3rem; }
  .conf-intro > .lead{ grid-column:1; grid-row:1; }
  .conf-intro > .body-muted{ grid-column:1; grid-row:2; }
  .conf-boris{ grid-column:2; grid-row:1/span 2; margin-top:0; }
}
.conf-publicos{ margin-bottom:clamp(1rem,2vw,1.5rem); }
.publicos{ display:flex; flex-wrap:wrap; gap:.6rem; }
.publicos li{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.62rem 1.05rem; border-radius:100px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  font-size:.86rem; color:var(--fg-on-dark-muted);
  transition:border-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.publicos svg{ width:16px; height:16px; color:var(--teal-300); flex:none; }
.publicos li:hover{ border-color:var(--teal-400); color:#fff; transform:translateY(-2px); }

.bento{
  display:grid; gap:1px;
  grid-template-columns:1fr;
  background:var(--line-dark);
  border:1px solid var(--line-dark);
  border-radius:var(--r-lg);
  overflow:hidden;
}
@media (min-width:640px){ .bento{ grid-template-columns:repeat(2,1fr); } }
/* 9 celdas en 2 columnas dejan un hueco: la última ocupa la fila completa. */
@media (min-width:640px) and (max-width:959px){
  .bento-i:last-child{ grid-column:1 / -1; }
}
@media (min-width:960px){
  .bento{ grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(158px,auto); }
  .bento-i--xl{ grid-column:span 2; grid-row:span 2; }
  .bento-i--tall{ grid-row:span 2; }
  .bento-i--wide{ grid-column:span 2; }
}
.bento-i{
  position:relative;
  /* El padding superior reserva la línea del número (posicionado absoluto) */
  padding:calc(clamp(1.3rem,2.4vw,1.85rem) + 2rem) clamp(1.3rem,2.4vw,1.85rem) clamp(1.3rem,2.4vw,1.85rem);
  background:rgba(11,17,20,.94);
  display:flex; flex-direction:column; justify-content:flex-end; gap:.5rem;
  min-height:158px;
  transition:background-color .45s var(--ease);
}
.bento-i:hover{ background:rgba(15,24,28,.99); }
/* En una sola columna el alto mínimo y el anclaje al pie dejan un vacío encima
   de las celdas que sólo llevan título. El mosaico necesita ese ritmo; la
   columna única, no: ahí cada celda se ajusta a su contenido. */
@media (max-width:639px){
  .bento-i{ min-height:0; justify-content:flex-start; }
}
.bento-n{
  font-family:var(--serif); font-size:.78rem; letter-spacing:.16em;
  color:var(--gold); opacity:.8;
  position:absolute; top:clamp(1.3rem,2.4vw,1.85rem); left:clamp(1.3rem,2.4vw,1.85rem);
}
.bento-i h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.02rem,.94rem + .35vw,1.24rem);
  color:#fff; margin:0;
  max-width:22ch;
}
/* Sólo cuando --xl ocupa realmente 2×2: por debajo, el titular grande
   se montaba sobre el número en una celda de altura normal. */
@media (min-width:960px){
  .bento-i--xl h3{ font-size:clamp(1.35rem,1.1rem + 1.1vw,1.95rem); }
}
.bento-i p{ font-size:.885rem; color:var(--fg-on-dark-muted); margin:0; max-width:34ch; }
.bento-i--xl{
  background:
    radial-gradient(90% 90% at 88% 8%,rgba(21,138,132,.22),transparent 62%),
    rgba(11,17,20,.94);
}
.bento-i--wide{
  background:
    linear-gradient(100deg,rgba(201,165,92,.10),transparent 58%),
    rgba(11,17,20,.94);
}
/* Ese degradado cálido está calculado para la celda 1×2 del mosaico de cuatro
   columnas, que sólo existe desde 960 px. En una o dos columnas resalta tres
   celdas sueltas y se lee como una fila activada por error. El acento del
   mosaico lo mantienen la celda 01 y la barra teal/dorada del hover. */
@media (max-width:959px){
  .bento-i--wide{ background:rgba(11,17,20,.94); }
}
.bento-i::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:linear-gradient(90deg,var(--teal-500),var(--gold));
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.bento-i:hover::after{ transform:scaleX(1); }

.conf-cta{
  display:grid; gap:1.5rem; grid-template-columns:1fr;
  align-items:center;
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding:clamp(1.7rem,3.4vw,2.6rem);
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.11);
  background:
    radial-gradient(110% 160% at 0% 0%,rgba(21,138,132,.18),transparent 58%),
    rgba(255,255,255,.028);
}
@media (min-width:860px){ .conf-cta{ grid-template-columns:1fr auto; gap:2.5rem; } }
.conf-cta h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem);
  margin-bottom:.55rem; color:#fff;
}
.conf-cta p{ margin:0; color:var(--fg-on-dark-muted); font-size:.93rem; max-width:52ch; }

/* ─────────────  11 · CAPACITACIONES  ───────────── */
.capacitaciones{
  position:relative;
  padding:var(--sec-pad) 0;
  background:linear-gradient(180deg,#070B0D 0%,#0B1114 30%,#0C1518 100%);
  overflow:hidden;
}
.capacitaciones::before{
  content:""; position:absolute; right:-6%; top:12%;
  width:min(680px,80%); aspect-ratio:1;
  background:radial-gradient(circle,rgba(21,138,132,.14),transparent 64%);
  pointer-events:none;
}
@media (max-width:899px){
  /* Apilado, el núcleo del halo teal cae dentro de .cap-purpose y le vira el
     ámbar a verde. Se reencuadra el elemento decorativo en lugar de dar base
     opaca a la tarjeta, que la convertiría en un recuadro plano: la luz sube
     detrás del titular, que es donde hay aire, y la banda de propósito y foto
     conserva su registro cálido. */
  .capacitaciones::before{
    top:1.5%;
    right:-14%;
    width:min(560px,72%);
  }
}
.cap-purpose{
  position:relative;
  display:flex; gap:1.2rem; align-items:flex-start;
  padding:clamp(1.4rem,3vw,2rem) clamp(1.4rem,3vw,2.1rem);
  margin-bottom:2.2rem;
  border-radius:var(--r-md);
  border:1px solid rgba(240,154,51,.24);
  background:linear-gradient(120deg,rgba(240,154,51,.09),rgba(240,154,51,.02));
}
.cap-purpose-mark{
  width:3px; align-self:stretch; flex:none; border-radius:3px;
  background:linear-gradient(180deg,var(--amber-500),transparent);
}
.cap-purpose p{ margin:0; font-size:.985rem; color:var(--fg-on-dark); max-width:72ch; }
.cap-purpose strong{ color:var(--amber-400); font-weight:600; }
/* El propósito y una imagen de formación real comparten banda: el bloque de
   texto deja de ser una caja aislada y la sección gana su propio registro
   fotográfico (grupo trabajando, no consultorio). La foto original es muy
   clara, así que se rebaja con fuerza para sostener el fondo oscuro. */
.cap-band{
  display:grid; gap:1.4rem; grid-template-columns:1fr;
  margin-bottom:2.2rem;
}
.cap-purpose{ margin-bottom:0; }
.cap-fig{
  position:relative; margin:0;
  border-radius:var(--r-md); overflow:hidden;
  border:1px solid rgba(21,138,132,.22);
  min-height:180px;
}
.cap-fig img{
  display:block; width:100%; height:100%; min-height:180px;
  object-fit:cover; object-position:50% 42%;
  filter:grayscale(.42) brightness(.58) contrast(1.12) saturate(.82);
}
.cap-fig::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(150deg,rgba(21,138,132,.34),transparent 58%),
    radial-gradient(110% 120% at 100% 100%,rgba(240,154,51,.22),transparent 62%),
    linear-gradient(180deg,transparent 40%,rgba(7,11,13,.55));
}
@media (min-width:900px){
  .cap-band{ grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:1.8rem; }
  /* El recuadro se estira a la altura de la foto; sin centrar, el texto queda
     arriba y deja un vacío de casi cien píxeles bajo él. */
  .cap-purpose{ align-items:center; }
}

.cap-skills{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1rem; }
.cap-skills li{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1rem; border-radius:8px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.028);
  font-size:.86rem; color:var(--fg-on-dark-muted);
}
.cap-skills svg{ width:15px; height:15px; color:var(--teal-300); flex:none; }

.modulo{
  position:relative;
  padding:clamp(1.5rem,2.8vw,1.9rem) clamp(1.3rem,2.4vw,1.6rem);
  background:rgba(10,16,19,.95);
  transition:background-color .45s var(--ease);
}
.modulo:hover{ background:rgba(14,22,26,1); }
.modulo-n{
  display:block;
  font-family:var(--serif); font-size:1.75rem; line-height:1;
  color:rgba(201,165,92,.42);
  margin-bottom:.85rem;
  transition:color .45s var(--ease);
}
.modulo:hover .modulo-n{ color:var(--gold); }
.modulo h3{
  font-family:var(--serif); font-weight:400; font-size:1.1rem;
  color:#fff; margin-bottom:.55rem;
}
.modulo p{ font-size:.87rem; color:var(--fg-on-dark-muted); margin:0; }
.modulo--alert{ background:linear-gradient(160deg,rgba(240,154,51,.10),rgba(10,16,19,.95) 62%); }
.modulo--alert .modulo-n{ color:rgba(240,154,51,.55); }
.modulo--alert:hover .modulo-n{ color:var(--amber-400); }

.cap-audiencia{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding:clamp(1.7rem,3.4vw,2.4rem);
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.028);
  display:grid; gap:1.4rem;
}
@media (min-width:900px){
  .cap-audiencia{ grid-template-columns:1fr auto; align-items:center; column-gap:2.5rem; }
  .cap-audiencia .temas-label{ grid-column:1; }
  .cap-audiencia ul{ grid-column:1; }
  .cap-audiencia .btn{ grid-column:2; grid-row:1/3; }
}
.cap-audiencia ul{ display:flex; flex-wrap:wrap; gap:.5rem; }
.cap-audiencia li{
  padding:.5rem 1rem; border-radius:100px;
  border:1px solid rgba(255,255,255,.14);
  font-size:.845rem; color:var(--fg-on-dark-muted);
}

/* ─────────────  12 · CURSOS  ───────────── */
.cursos{
  position:relative;
  padding:var(--sec-pad) 0;
  background:linear-gradient(180deg,var(--sand) 0%,var(--cream-2) 60%,var(--sand-2) 100%);
  color:var(--fg-on-light);
  overflow:hidden;
}
.cursos::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(20,28,31,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(20,28,31,.045) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(70% 60% at 70% 40%,#000,transparent 72%);
  mask-image:radial-gradient(70% 60% at 70% 40%,#000,transparent 72%);
  pointer-events:none;
}
@media (max-width:919px){
  /* A una columna la copy ocupa todo el ancho y la trama queda debajo del
     texto. Se rebaja un tercio para que siga leyéndose como papel y no como
     cuadrícula. La máscara no se toca: mantiene el degradado de profundidad. */
  .cursos::before{
    background-image:linear-gradient(rgba(20,28,31,.03) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(20,28,31,.03) 1px,transparent 1px);
  }
}
.cursos .h-display{ color:var(--fg-on-light); }
.cursos .lead,.cursos .body-muted{ color:var(--fg-on-light-muted); }
.cursos-grid{
  position:relative;
  display:grid; gap:clamp(2.2rem,4.5vw,3.5rem); grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:920px){ .cursos-grid{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); } }
.cursos-copy .lead{ margin-bottom:.9rem; }
.cursos-copy .btn{ margin-top:1.7rem; }
.cursos-panel{
  padding:clamp(1.6rem,3.2vw,2.3rem);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(20,28,31,.1);
  box-shadow:0 26px 56px -40px rgba(7,11,13,.5);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.cursos-panel-label{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--stone-2); margin-bottom:1.1rem;
}
.cursos-publicos{ display:grid; gap:.55rem; }
.cursos-publicos li{
  display:flex; align-items:center; gap:.8rem;
  padding:.85rem 1rem;
  border-radius:12px;
  border:1px solid rgba(20,28,31,.09);
  background:rgba(255,255,255,.7);
  font-size:.925rem;
  transition:transform .35s var(--ease),border-color .35s var(--ease),background-color .35s var(--ease);
}
.cursos-publicos li:hover{ transform:translateX(5px); border-color:var(--teal-500); background:#fff; }
.cursos-publicos svg{ width:18px; height:18px; color:var(--teal-500); flex:none; }
.cursos-grid-cards{ display:grid; gap:.8rem; }
.cursos-grid-cards:empty{ display:none; }
.curso-card{
  padding:1.3rem; border-radius:14px;
  border:1px solid rgba(20,28,31,.1); background:#fff;
}
.curso-tag{
  display:inline-block; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--amber-600); margin-bottom:.5rem;
}
.cursos-note{
  display:flex; align-items:flex-start; gap:.7rem;
  margin:1.4rem 0 0; padding-top:1.3rem;
  border-top:1px solid rgba(20,28,31,.1);
  font-size:.88rem; color:var(--fg-on-light-muted);
}
.cursos-note svg{ width:17px; height:17px; color:var(--gold); flex:none; margin-top:3px; }

/* ─────────────  13 · ATENCIÓN ONLINE  ───────────── */
.online{
  position:relative;
  padding:var(--sec-pad) 0;
  background:
    radial-gradient(80% 70% at 78% 40%,rgba(21,138,132,.20),transparent 62%),
    linear-gradient(180deg,#081113 0%,#070B0D 100%);
  overflow:hidden;
}
.online-grid{
  position:relative;
  display:grid; gap:clamp(2.5rem,5vw,4rem); grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:920px){ .online-grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); } }
.online-facts{
  display:grid; gap:0; grid-template-columns:1fr;
  margin:2rem 0 1.8rem;
  border-top:1px solid var(--line-dark);
}
@media (min-width:520px){ .online-facts{ grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); border-radius:var(--r-md); overflow:hidden; } }
.online-facts li{
  padding:1.15rem 1.1rem;
  border-bottom:1px solid var(--line-dark);
  background:rgba(8,14,17,.6);
  display:flex; flex-direction:column; gap:.3rem;
}
@media (min-width:520px){ .online-facts li{ border-bottom:0; } }
.online-facts strong{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem);
  color:var(--teal-300);
}
.online-facts li:nth-child(2) strong{ color:var(--gold-soft); }
.online-facts li:nth-child(3) strong{ color:var(--amber-400); }
.online-facts span{ font-size:.85rem; color:var(--fg-on-dark-muted); }
.online-intl{
  display:flex; align-items:flex-start; gap:.8rem;
  padding:1.05rem 1.25rem;
  border-radius:var(--r-sm);
  border:1px solid rgba(201,165,92,.24);
  background:rgba(201,165,92,.055);
  font-size:.895rem; color:var(--fg-on-dark-muted);
}
.online-intl svg{ width:19px; height:19px; color:var(--gold); flex:none; margin-top:2px; }
.online-intl > span{ min-width:0; line-height:1.6; }
.online-intl strong{ color:var(--gold-soft); font-weight:600; white-space:nowrap; }

/* Globo y fotografía comparten celda: la imagen se recorta en círculo justo
   sobre el diámetro del globo (r=200 de un viewBox de 520 ⇒ 76,9 %) para que
   los meridianos caigan encima y no queden como dos piezas superpuestas. */
.online-art{ --globe-w:min(100%,460px); position:relative; display:grid; place-items:center; }
.online-art > *{ grid-area:1/1; }
.online-art svg{ width:var(--globe-w); max-width:100%; height:auto; overflow:visible; position:relative; z-index:1; }
.online-photo{
  width:calc(var(--globe-w) * .769); aspect-ratio:1;
  border-radius:50%; overflow:hidden; position:relative;
}
.online-photo img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:50% 40%;
  filter:grayscale(.3) brightness(.7) contrast(1.06) saturate(.9);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 58%,rgba(0,0,0,.6) 80%,transparent 98%);
  mask-image:radial-gradient(circle at 50% 50%,#000 58%,rgba(0,0,0,.6) 80%,transparent 98%);
}
.online-photo::after{
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 50% 50%,transparent 40%,rgba(21,138,132,.42) 88%);
}
.globe-lines{ animation:spinSlow 120s linear infinite; transform-origin:260px 260px; }
.globe-arcs path{
  stroke-dasharray:400; stroke-dashoffset:400;
  animation:draw 3.2s var(--ease-out) forwards;
}
.globe-arcs path:nth-child(2){ animation-delay:.5s; }
.globe-dots circle{
  animation:blip 3.4s var(--ease) infinite;
  transform-box:fill-box; transform-origin:center;
}
.globe-dots circle:nth-child(2){ animation-delay:.6s }
.globe-dots circle:nth-child(3){ animation-delay:1.2s }
.globe-dots circle:nth-child(4){ animation-delay:1.8s }
.globe-dots circle:nth-child(5){ animation-delay:2.4s }
@keyframes blip{ 0%,100%{ opacity:.45; transform:scale(1) } 50%{ opacity:1; transform:scale(1.35) } }
@media (max-width:919px){ .online-art{ --globe-w:min(100%,330px); } }

/* ─────────────  14 · CÓMO COMENZAR  ───────────── */
.proceso{
  position:relative;
  padding:var(--sec-pad) 0;
  background:linear-gradient(180deg,#F5F8F8 0%,var(--cream) 100%);
  color:var(--fg-on-light);
  overflow:hidden;
}
.proceso .h-display{ color:var(--fg-on-light); }
.proceso .h-display em{ color:var(--teal-700); }
.pasos{ position:relative; }
/* Altura 68px + baseline y=60/120 → la curva cruza el centro de los
   círculos (padding-top .5rem + 52px/2 = 34px) y pasa por detrás de ellos. */
.pasos-path{
  position:absolute; left:0; right:0; top:0;
  width:100%; height:68px;
  color:var(--teal-500); opacity:.42;
  display:none;
}
@media (min-width:900px){ .pasos-path{ display:block; } }
.pasos-path path{
  stroke-dasharray:2000; stroke-dashoffset:2000;
  transition:stroke-dashoffset 1.6s var(--ease-out);
}
.pasos-path.is-in path{ stroke-dashoffset:0; }
.pasos-list{
  position:relative;
  display:grid; gap:1.5rem; grid-template-columns:1fr;
}
@media (min-width:640px){ .pasos-list{ grid-template-columns:repeat(2,1fr); gap:2rem; } }
@media (min-width:900px){ .pasos-list{ grid-template-columns:repeat(4,1fr); gap:1.5rem; } }
.paso{ position:relative; padding-top:.5rem; }
.paso-n{
  display:inline-grid; place-items:center;
  width:52px; height:52px; border-radius:50%;
  background:#fff;
  border:1px solid rgba(20,28,31,.12);
  box-shadow:0 10px 22px -16px rgba(7,11,13,.5);
  font-family:var(--serif); font-size:.95rem; letter-spacing:.06em;
  color:var(--teal-700);
  margin-bottom:1rem;
  transition:transform .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease);
}
.paso:hover .paso-n{ transform:translateY(-4px); border-color:var(--gold); color:var(--amber-600); }
.paso h3{
  font-family:var(--serif); font-weight:400; font-size:1.16rem;
  margin-bottom:.5rem; color:var(--fg-on-light);
}
.paso p{ font-size:.9rem; color:var(--fg-on-light-muted); margin:0; max-width:30ch; }
/* Bajo 900 px la curva se oculta y los cuatro círculos quedan flotando sobre un
   plano liso. Cada paso recupera entonces su propio tramo de línea vertical: el
   número se apoya en ella y desciende hasta el texto, manteniendo el lenguaje
   orgánico del resto de la página en lugar de convertirlos en tarjetas. */
@media (max-width:899px){
  .paso{ padding-left:0; }
  .paso-n{ position:relative; z-index:1; }
}
@media (max-width:639px){
  /* El rail anterior arrancaba bajo el número y bajaba hasta el pie del paso,
     pero con padding-left:0 el texto ocupa también esa columna: la línea caía
     26 px DENTRO del párrafo y, al ser un ::before posicionado sobre contenido
     en flujo, pintaba encima. Se leía literalmente como un tachado sobre el h3
     y el texto de los cuatro pasos. Ahora el hilo sólo enhebra el final de un
     paso con el círculo del siguiente, por el hueco entre ambos.
       left:26px  = centro del círculo (18,4 + 26 = 44,4).
       bottom:-2rem = gap de .pasos-list (1,5rem) + padding-top del siguiente
                      .paso (,5rem): el hilo aterriza en el borde del círculo.
     Acotado a 639 px porque de 640 a 899 .pasos-list pasa a dos columnas y un
     hilo vertical descendente ya no apunta al paso siguiente. */
  .paso::before{
    content:""; position:absolute; z-index:0;
    left:26px; width:1px;
    top:calc(100% + 6px); bottom:-2rem;
    background:linear-gradient(180deg,rgba(21,138,132,0) 0,rgba(21,138,132,.45) 40%,rgba(21,138,132,.55) 100%);
  }
  .paso:last-child::before{ display:none; }
}
/* Suelo tibio bajo los pasos: evita que el degradado del fondo se lea como un
   único plano continuo sin acabar en un bloque con borde. */
.proceso::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset:auto -12% -26% -12%; height:66%;
  background:radial-gradient(58% 100% at 50% 100%,rgba(21,138,132,.1),transparent 70%);
}
.proceso .shell{ position:relative; z-index:1; }

/* ─────────────  15 · FAQ  ───────────── */
.faq{
  position:relative;
  padding:var(--sec-pad) 0;
  background:linear-gradient(180deg,var(--cream) 0%,var(--sand) 100%);
  color:var(--fg-on-light);
  overflow:hidden;
}
.faq::before{
  content:""; position:absolute; left:-10%; top:20%;
  width:min(560px,70%); aspect-ratio:1;
  background:radial-gradient(circle,rgba(21,138,132,.12),transparent 64%);
  pointer-events:none;
}
.faq .h-display{ color:var(--fg-on-light); }
.faq .h-display em{ color:var(--teal-700); }
.faq .body-muted{ color:var(--fg-on-light-muted); }
.faq-grid{
  position:relative;
  display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:920px){
  .faq-grid{ grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(2.5rem,5vw,4.5rem); }
  .faq-aside{ position:sticky; top:calc(var(--header-h) + 3rem); }
}
.faq-aside .btn{ margin-top:1.6rem; }
.faq-aside .body-muted{ margin-top:1rem; }

.faq-list{ display:grid; gap:.6rem; }
.faq-item{
  border:1px solid rgba(20,28,31,.11);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.62);
  overflow:hidden;
  transition:border-color .4s var(--ease),background-color .4s var(--ease),box-shadow .4s var(--ease);
}
.faq-item.is-open{
  border-color:rgba(21,138,132,.4);
  background:#fff;
  box-shadow:0 18px 40px -32px rgba(7,11,13,.55);
}
.faq-item h3{ margin:0; font-size:inherit; font-weight:inherit; }
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  width:100%; text-align:left;
  padding:1.15rem clamp(1.1rem,2.2vw,1.5rem);
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1rem,.95rem + .28vw,1.14rem);
  line-height:1.35;
  color:var(--fg-on-light);
  transition:color .3s var(--ease);
}
.faq-q:hover{ color:var(--teal-700); }
.faq-ico{
  width:20px; height:20px; flex:none; color:var(--teal-500);
  transition:transform .45s var(--ease),color .3s var(--ease);
}
.faq-item.is-open .faq-ico{ transform:rotate(135deg); color:var(--amber-500); }
.faq-a{
  padding:0 clamp(1.1rem,2.2vw,1.5rem) 1.3rem;
  color:var(--fg-on-light-muted);
  font-size:.945rem;
}
.faq-a[hidden]{ display:none; }
.faq-a p{ margin-bottom:.8rem; }
.faq-a p:last-child{ margin-bottom:0; }
.faq-a strong{ color:var(--fg-on-light); font-weight:600; }
.faq-a a{ color:var(--teal-700); text-decoration:underline; text-underline-offset:3px; }
.faq-a a:hover{ color:var(--amber-600); }
.faq-item.is-open .faq-a{ animation:faqIn .45s var(--ease-out); }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }

/* ─────────────  16 · CONTACTO  ───────────── */
.contacto{
  position:relative;
  padding:var(--sec-pad) 0;
  background:linear-gradient(180deg,#070B0D 0%,#0A1215 45%,#070B0D 100%);
  overflow:hidden;
}
.contacto-bg{ position:absolute; inset:0; pointer-events:none; }
.contacto-bg span{
  position:absolute; left:50%; top:0;
  width:min(1100px,140%); aspect-ratio:2/1; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 0%,rgba(21,138,132,.22),transparent 66%);
}
.contacto .shell{ position:relative; }

.intents{
  display:grid; gap:.7rem; grid-template-columns:1fr;
  margin-bottom:1.6rem;
}
@media (min-width:600px){ .intents{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .intents{ grid-template-columns:repeat(4,1fr); } }
.intent{
  position:relative;
  display:flex; flex-direction:column; gap:.4rem;
  padding:1.15rem 1.2rem;
  text-align:left;
  border:1px solid rgba(255,255,255,.11);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.03);
  transition:border-color .4s var(--ease),background-color .4s var(--ease),transform .4s var(--ease);
}
.intent:hover{ border-color:rgba(31,169,161,.45); transform:translateY(-3px); }
.intent-i{ width:22px; height:22px; color:var(--teal-300); margin-bottom:.35rem; transition:color .3s var(--ease); }
.intent-t{ font-size:.985rem; font-weight:500; color:#fff; }
.intent-d{ font-size:.8rem; color:var(--fg-on-dark-muted); }
.intent[aria-selected="true"]{
  border-color:var(--teal-400);
  background:
    radial-gradient(120% 150% at 0% 0%,rgba(21,138,132,.26),transparent 62%),
    rgba(255,255,255,.05);
  box-shadow:0 0 0 1px rgba(201,165,92,.22);
}
.intent[aria-selected="true"] .intent-i{ color:var(--amber-400); }
/* Pegada a bottom:0 la barra moría de golpe, con puntas cuadradas, justo donde
   el borde de la tarjeta empieza a curvarse, y de paso tapaba el trazo del
   borde en su tramo central: se leía como una tira ajena apoyada encima. Se
   separa del canto y se apaga en los extremos. El padding inferior de .intent
   es 18,4 px, así que subirla 4 px no la acerca al texto. */
.intent::after{
  content:""; position:absolute; left:1.2rem; right:1.2rem; bottom:4px; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,transparent 0,var(--teal-400) 16%,var(--gold) 84%,transparent 100%);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.intent[aria-selected="true"]::after{ transform:scaleX(1); }

.panels{ position:relative; }
.panel[hidden]{ display:none; }
.panel{ animation:panelIn .5s var(--ease-out); }
@keyframes panelIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

.form{
  padding:clamp(1.5rem,3.4vw,2.4rem);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg);
  background:
    radial-gradient(120% 100% at 100% 0%,rgba(21,138,132,.1),transparent 58%),
    rgba(255,255,255,.028);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.form-intro{
  font-size:.9rem; color:var(--fg-on-dark-muted);
  margin-bottom:1.6rem; padding-bottom:1.2rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  max-width:60ch;
}
.fields{ display:grid; gap:1.05rem; grid-template-columns:1fr; }
@media (min-width:680px){ .fields{ grid-template-columns:1fr 1fr; gap:1.05rem 1.4rem; } .field--full{ grid-column:1/-1; } }
.field{ display:flex; flex-direction:column; gap:.45rem; margin:0; min-width:0; }
.field label{
  font-size:.755rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--stone);
}
.field label span{ color:var(--amber-500); }
.field input,.field select,.field textarea{
  width:100%; max-width:100%;
  padding:.8rem .95rem;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  background:rgba(7,11,13,.55);
  color:var(--fg-on-dark);
  font-size:.945rem;
  transition:border-color .3s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:112px; }
.field select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346C6BE' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center; background-size:18px;
  padding-right:2.4rem;
}
.field select option{ background:#0B1114; color:var(--fg-on-dark); }
.field input::placeholder,.field textarea::placeholder{ color:rgba(154,163,165,.6); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--teal-400);
  background:rgba(7,11,13,.8);
  box-shadow:0 0 0 3px rgba(21,138,132,.2);
}
.field.has-error input,.field.has-error select,.field.has-error textarea{ border-color:#E5734B; }
.err{ font-size:.775rem; color:#F3A184; min-height:0; }
.err:empty{ display:none; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:.8rem;
  margin-top:1.7rem;
}
@media (max-width:639px){
  /* Aquí el enlace cae en su propia línea bajo la píldora, pero el padding
     lateral de .btn-quiet (base.css) mete su texto 8 px hacia dentro del canto
     del botón. Se compensa con margen negativo en vez de quitar el padding,
     para no encoger el área táctil. El contexto .form-foot y el corte en 639 px
     son necesarios: en cuanto los dos botones caben en una línea, el margen se
     comería el gap entre ellos. */
  .form-foot .btn-quiet{ margin-left:-.5rem; }
}
.form-legal{
  margin-top:1.1rem;
  font-size:.79rem; color:var(--stone-2); max-width:64ch;
}
.form-status{
  margin-top:.8rem; font-size:.86rem; color:var(--teal-300);
  min-height:0;
}
.form-status:empty{ display:none; }
.form-status.is-error{ color:#F3A184; }

.contacto-directo{
  display:grid; gap:.7rem; grid-template-columns:1fr;
  margin-top:clamp(2rem,4vw,3rem);
}
@media (min-width:640px){ .contacto-directo{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .contacto-directo{ grid-template-columns:repeat(4,1fr); } }
.cd{
  display:flex; align-items:center; gap:.85rem;
  padding:1.05rem 1.15rem;
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.028);
  transition:border-color .4s var(--ease),transform .4s var(--ease),background-color .4s var(--ease);
  min-width:0;
}
.cd:hover{ border-color:var(--teal-400); transform:translateY(-3px); background:rgba(21,138,132,.1); }
.cd svg{ width:21px; height:21px; color:var(--teal-300); flex:none; }
.cd span{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.cd strong{
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-soft); font-weight:500;
}
.cd span{ font-size:.875rem; color:var(--fg-on-dark-muted); overflow-wrap:anywhere; }

/* ─────────────  17 · CIERRE / CTA FINAL  ───────────── */
.cierre{
  position:relative;
  /* Espacio superior extra: la copa del árbol necesita aire propio */
  padding:clamp(7rem,15vw,12.5rem) 0 clamp(4.5rem,9vw,7rem);
  background:linear-gradient(180deg,#070B0D 0%,#040708 60%,#040708 100%);
  overflow:hidden;
  text-align:center;
}
.cierre-bg{ position:absolute; inset:0; pointer-events:none; }
.cierre-halo{
  position:absolute; left:50%; bottom:-24%;
  width:min(1100px,150%); aspect-ratio:1.6; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 100%,rgba(21,138,132,.24),rgba(201,165,92,.06) 42%,transparent 68%);
}
.cierre-tree{
  position:absolute; left:50%; bottom:0;
  width:min(1320px,168%); height:auto;
  /* base.css aplica max-width:100% a todo svg, y eso aplastaba el árbol de
     655×328 a 390×195: las ramas cruzaban los botones del CTA. Aquí el árbol
     debe sangrar; .cierre{overflow:hidden} contiene el desbordamiento. */
  max-width:none;
  transform:translateX(-50%);
  opacity:.9;
  /* El tronco nace en el borde inferior del viewBox y chocaba en T contra el
     filete del footer: se disuelve antes de llegar a la costura. */
  -webkit-mask-image:linear-gradient(180deg,#000 46%,rgba(0,0,0,.45) 78%,transparent 97%);
          mask-image:linear-gradient(180deg,#000 46%,rgba(0,0,0,.45) 78%,transparent 97%);
}
/* El velo se dibuja después del árbol: lo atenúa bajo el bloque de texto
   y lo deja íntegro en los bordes, sin recortes duros. */
.cierre-veil{
  position:absolute; left:50%; top:52%;
  width:min(1150px,140%); height:min(520px,88%);
  transform:translate(-50%,-50%);
  background:radial-gradient(54% 56% at 50% 48%,
    rgba(4,7,8,.92) 0%,
    rgba(4,7,8,.80) 44%,
    rgba(4,7,8,.42) 70%,
    rgba(4,7,8,0) 88%);
}
.cierre-tree .ft path{
  fill:none; stroke:rgba(70,198,190,.72); stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:1600; stroke-dashoffset:1600;
  transition:stroke-dashoffset 2s var(--ease-out);
}
.cierre-tree.is-in .ft path{ stroke-dashoffset:0; }
.cierre-tree .ft path:nth-child(2){ transition-delay:.2s }
.cierre-tree .ft path:nth-child(3){ transition-delay:.3s }
.cierre-tree .ft path:nth-child(4){ transition-delay:.4s }
.cierre-tree .ft path:nth-child(5){ transition-delay:.55s; stroke:rgba(201,165,92,.62) }
.cierre-tree .ft path:nth-child(6){ transition-delay:.65s; stroke:rgba(201,165,92,.62) }
.cierre-tree .ft path:nth-child(7){ transition-delay:.75s; stroke:rgba(201,165,92,.62) }
.cierre-tree .ft path:nth-child(8){ transition-delay:.85s; stroke:rgba(201,165,92,.62) }
.cierre-tree .ft-leaves use{
  fill:rgba(240,154,51,.5);
  opacity:0; transform-box:fill-box; transform-origin:0 50%;
  transition:opacity .7s var(--ease-out);
}
.cierre-tree.is-in .ft-leaves use{ opacity:1; }
.cierre-tree.is-in .ft-leaves use:nth-child(1){ transition-delay:1.2s }
.cierre-tree.is-in .ft-leaves use:nth-child(2){ transition-delay:1.32s }
.cierre-tree.is-in .ft-leaves use:nth-child(3){ transition-delay:1.44s }
.cierre-tree.is-in .ft-leaves use:nth-child(4){ transition-delay:1.56s; fill:rgba(201,165,92,.6) }
.cierre-tree.is-in .ft-leaves use:nth-child(5){ transition-delay:1.68s }
.cierre-tree.is-in .ft-leaves use:nth-child(6){ transition-delay:1.8s }
.cierre-tree.is-in .ft-leaves use:nth-child(7){ transition-delay:1.92s }
.cierre-tree.is-in .ft-leaves use:nth-child(8){ transition-delay:2.04s; fill:rgba(70,198,190,.45) }
.cierre-tree.is-in .ft-leaves use:nth-child(9){ transition-delay:2.16s; fill:rgba(70,198,190,.45) }

.cierre-inner{ position:relative; z-index:1; }
.cierre .h-display em{ color:var(--gold-soft); }
.cierre-txt{
  max-width:52ch; margin:1.6rem auto 2.3rem;
  color:var(--fg-on-dark-muted);
  font-size:clamp(1rem,.96rem + .3vw,1.12rem);
}
.cierre-actions{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }
.cierre-third{
  display:inline-block; margin-top:1.5rem;
  font-size:.885rem; color:var(--stone);
  padding-bottom:2px;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .45s var(--ease),color .3s var(--ease);
}
.cierre-third:hover{ color:var(--gold-soft); background-size:100% 1px; }
@media (max-width:420px){
  .cierre-actions{ flex-direction:column; align-items:stretch; }
  .cierre-actions .btn{ width:100%; }
}

/* ─────────────  AJUSTES DE MOVIMIENTO REDUCIDO  ───────────── */
@media (prefers-reduced-motion:reduce){
  .hero-tree .tw,
  .cierre-tree .ft path,
  .globe-arcs path,
  .pasos-path path,
  .weave-line{ stroke-dashoffset:0 !important; }
  .hero-tree .tree-leaves use,
  .hero-tag,
  .weave-nodes circle{ opacity:1 !important; transform:none !important; }
  /* Las hojas del cierre llevan su posición en el atributo transform del propio
     <use>, no en un <g> envolvente como las del hero: forzarles transform:none
     las apilaba todas en el origen del SVG, como una mancha pegada al borde
     izquierdo. Estas hojas sólo animan opacidad, así que basta con eso. */
  .cierre-tree .ft-leaves use{ opacity:1 !important; }
  .drift-row{ animation:none !important; }
  .drift{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .drift-row{ width:auto; }
  .individual-art .orb,.orb-dot,.globe-lines{ animation:none !important; }
}

/* ═══════════════════ GALERÍA DE EVENTOS ═══════════════════ */
/* Carrusel «coverflow». Dos estados deliberados:
   — sin JS (o antes de que arranque) la pista es una fila con scroll y snap,
     que ya es una galería usable;
   — con JS el contenedor recibe .is-ready, las tarjetas pasan a absolutas
     sobre un plano con perspectiva y el script les da transform/opacidad
     según su distancia al centro. Los controles sólo aparecen en ese estado,
     porque sin script no controlarían nada. */
.eventos{
  position:relative;
  padding:var(--sec-pad) 0;
  background:
    radial-gradient(72% 58% at 50% 6%,rgba(21,138,132,.17),transparent 64%),
    linear-gradient(180deg,#070B0D 0%,#0A1215 50%,#070B0D 100%);
  overflow:hidden;
}
.eventos-glow{
  position:absolute; left:50%; top:38%; transform:translate(-50%,-50%);
  width:min(1100px,120vw); aspect-ratio:1/1; pointer-events:none;
  background:radial-gradient(closest-side,rgba(201,165,92,.09),transparent 70%);
}
.eventos .shell{ position:relative; z-index:1; }

.carrusel{
  --card-w:clamp(186px,50vw,318px);
  position:relative;
  margin-top:clamp(1.6rem,3.4vw,2.6rem);
}
.carrusel-escena{ position:relative; }
.carrusel-pista{
  display:flex; gap:clamp(.7rem,1.8vw,1.1rem);
  margin:0; padding:0 0 .9rem; list-style:none;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
}
.carrusel-card{
  flex:none; width:var(--card-w);
  scroll-snap-align:center;
}
.carrusel-card picture{ display:block; position:relative; }
.carrusel-card img{
  display:block; width:100%; height:auto;
  aspect-ratio:3/4; object-fit:cover;
  border-radius:var(--r-lg);
  border:1px solid rgba(238,243,243,.1);
  box-shadow:0 36px 64px -30px rgba(0,0,0,.85);
  background:var(--ink-800);
}
/* Filete dorado sobre la lámina: el mismo recurso que usan las demás
   fotografías de la web, así el carrusel no se lee como pieza importada. */
.carrusel-card picture::after{
  content:""; position:absolute; left:14%; right:14%; top:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-line),transparent);
}

/* ---- estado con JS ---- */
.carrusel.is-ready .carrusel-escena{
  height:calc(var(--card-w) * 4 / 3);
  perspective:1000px;
}
.carrusel.is-ready .carrusel-pista{
  display:block; position:relative; height:100%;
  padding:0; overflow:visible;
}
.carrusel.is-ready .carrusel-card{
  position:absolute; top:0; left:50%;
  width:var(--card-w);
  margin-left:calc(var(--card-w) / -2);
  transform-style:preserve-3d;
  transition:transform .5s var(--ease),opacity .5s var(--ease),filter .5s var(--ease);
  will-change:transform,opacity;
}
@media (prefers-reduced-motion:reduce){
  .carrusel.is-ready .carrusel-card{ transition:none; }
}

.carrusel-nav{
  display:none;
  position:absolute; top:calc(var(--card-w) * 2 / 3); z-index:20;
  width:46px; height:46px; padding:0;
  place-items:center;
  border-radius:50%; cursor:pointer;
  color:var(--fg-on-dark);
  background:rgba(10,16,19,.62);
  border:1px solid rgba(238,243,243,.22);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.carrusel.is-ready .carrusel-nav{ display:grid; }
.carrusel-nav svg{ width:20px; height:20px; }
.carrusel-nav--prev{ left:0; transform:translateY(-50%); }
.carrusel-nav--next{ right:0; transform:translateY(-50%); }
.carrusel-nav--prev svg{ transform:scaleX(-1); }
.carrusel-nav:hover{ background:var(--teal-700); border-color:transparent; }
.carrusel-nav:focus-visible{ outline:2px solid var(--teal-300); outline-offset:3px; }
@media (min-width:720px){
  .carrusel-nav--prev{ left:clamp(0px,6vw,90px); }
  .carrusel-nav--next{ right:clamp(0px,6vw,90px); }
}

.carrusel-pie{
  display:none;
  margin:1.3rem auto 0; max-width:46ch;
  text-align:center; font-size:.9rem; line-height:1.5;
  color:var(--fg-on-dark-muted);
}
.carrusel.is-ready ~ .carrusel-pie{ display:block; }

.carrusel-puntos{
  display:none;
  justify-content:center; gap:.5rem;
  margin-top:1.1rem;
}
.carrusel.is-ready ~ .carrusel-puntos{ display:flex; }
.carrusel-punto{
  width:9px; height:9px; padding:0; border:0; cursor:pointer;
  border-radius:50%;
  background:rgba(238,243,243,.26);
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.carrusel-punto:hover{ background:rgba(238,243,243,.5); }
.carrusel-punto.is-on{ background:var(--teal-300); transform:scale(1.35); }
.carrusel-punto:focus-visible{ outline:2px solid var(--teal-300); outline-offset:3px; }

/* ═══════════════ TEMAS EN PÍLDORAS ═══════════════ */
/* Sustituye a los bentos de tarjetas: mismo contenido, una fracción del alto.
   En flujo libre las píldoras quedaban escalonadas y el bloque se leía
   desordenado, así que van en retícula: todas comparten ancho de columna, con
   lo que los números y los textos se alinean verticalmente y el conjunto se
   lee como un índice y no como etiquetas sueltas. Una columna en móvil, dos
   en tableta y tres en escritorio. */
.temas-chips{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(.5rem,1vw,.7rem);
  margin:0; padding:0; list-style:none;
}
@media (min-width:620px){ .temas-chips{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .temas-chips{ grid-template-columns:repeat(3,1fr); } }

.temas-chips li{
  display:flex; align-items:center; gap:.8rem;
  padding:.78rem 1.2rem;
  border-radius:999px;
  font-size:clamp(.86rem,.82rem + .12vw,.95rem);
  line-height:1.3;
  color:var(--fg-on-dark);
  background:linear-gradient(160deg,rgba(21,138,132,.07),rgba(13,21,25,.92) 58%);
  border:1px solid rgba(238,243,243,.11);
  box-shadow:inset 0 1px 0 rgba(238,243,243,.05);
  transition:border-color .35s var(--ease),background .35s var(--ease),
             transform .35s var(--ease),box-shadow .35s var(--ease);
}
.temas-chips li:hover{
  background:linear-gradient(160deg,rgba(21,138,132,.13),rgba(17,27,32,.96) 58%);
  border-color:var(--gold-line);
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(238,243,243,.08),0 14px 28px -18px rgba(0,0,0,.9);
}
/* El número vive en una columna de ancho fijo con un filete dorado detrás:
   así los textos arrancan todos en la misma vertical dentro de su columna. */
.temas-chips li span{
  flex:none; width:2ch;
  padding-right:.8rem;
  border-right:1px solid rgba(201,165,92,.22);
  font-size:.68rem; letter-spacing:.1em; font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--gold);
}
@media (prefers-reduced-motion:reduce){
  .temas-chips li:hover{ transform:none; }
}

/* El módulo 08 trata ideación suicida. Cuando era tarjeta llevaba un fondo
   ámbar que lo separaba del resto; como píldora conserva esa marca para que
   no se lea como un tema más de la retícula. */
.temas-chip--alert{
  background:linear-gradient(160deg,rgba(240,154,51,.13),rgba(15,24,28,.94) 68%);
  border-color:rgba(240,154,51,.28);
}
.temas-chip--alert span{ color:var(--amber-400,#F09A33); border-right-color:rgba(240,154,51,.28); }
.temas-chip--alert:hover{
  background:linear-gradient(160deg,rgba(240,154,51,.19),rgba(19,29,34,.96) 68%);
  border-color:rgba(240,154,51,.5);
}

/* ═══════════════ CONTENIDOS · CARRUSEL DE MÓDULOS ═══════════════ */
/* Las ocho tarjetas del temario pasan de una en una en el mismo hueco. Todas
   viven en la misma celda de grid, así el alto lo fija la más larga y el
   bloque no salta al cambiar de módulo. Sin JS quedan apiladas y legibles;
   la barra de controles sólo aparece con .is-ready porque sin script no
   controlaría nada. */
.modcar{ position:relative; margin-top:clamp(1.2rem,2.4vw,1.7rem); }
.modcar-pista{
  display:grid; gap:.9rem;
  margin:0; padding:0; list-style:none;
}
.modcar-pista > .modulo{
  border:1px solid var(--line-dark);
  border-radius:var(--r-lg);
  padding:clamp(1.6rem,3.2vw,2.3rem) clamp(1.4rem,2.8vw,2.1rem);
}
/* Sola en pantalla, la tarjeta puede respirar más que cuando era una de ocho. */
.modcar .modulo-n{ font-size:clamp(2rem,1.6rem + 1.4vw,2.7rem); margin-bottom:1rem; }
.modcar .modulo h3{ font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem); margin-bottom:.7rem; }
.modcar .modulo p{ font-size:clamp(.9rem,.87rem + .12vw,.98rem); line-height:1.65; max-width:62ch; }

/* ---- estado con JS ---- */
.modcar.is-ready .modcar-pista{ gap:0; }
.modcar.is-ready .modcar-pista > .modulo{
  grid-area:1 / 1;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateX(20px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.modcar.is-ready .modcar-pista > .modulo.is-on{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:none;
}
@media (prefers-reduced-motion:reduce){
  .modcar.is-ready .modcar-pista > .modulo{ transition:opacity .2s linear; transform:none; }
}

.modcar-barra{
  display:none;
  align-items:center; gap:clamp(.7rem,1.8vw,1.1rem);
  margin-top:1.1rem;
}
.modcar.is-ready .modcar-barra{ display:flex; }

.modcar-nav{
  flex:none; display:grid; place-items:center;
  width:44px; height:44px; padding:0;
  border-radius:50%; cursor:pointer;
  color:var(--fg-on-dark);
  background:rgba(10,16,19,.72);
  border:1px solid rgba(238,243,243,.18);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.modcar-nav:hover{ background:var(--teal-700); border-color:transparent; }
.modcar-nav:focus-visible{ outline:2px solid var(--teal-300); outline-offset:3px; }
.modcar-nav svg{ width:19px; height:19px; }
.modcar-nav[data-modprev] svg{ transform:scaleX(-1); }

.modcar-puntos{ display:flex; flex:1; flex-wrap:wrap; gap:.45rem; }
.modcar-punto{
  width:8px; height:8px; padding:0; border:0; cursor:pointer;
  border-radius:50%;
  background:rgba(238,243,243,.24);
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.modcar-punto:hover{ background:rgba(238,243,243,.48); }
.modcar-punto.is-on{ background:var(--gold); transform:scale(1.4); }
.modcar-punto:focus-visible{ outline:2px solid var(--teal-300); outline-offset:3px; }

.modcar-cuenta{
  flex:none; margin:0;
  font-size:.78rem; letter-spacing:.14em; font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--fg-on-dark-muted);
}

/* En escritorio la tarjeta ocupa todo el ancho del shell y el texto solo
   llenaba la mitad izquierda. El numero pasa a columna propia, grande y
   separado por un filete: llena el ancho sin inventar contenido y le da a la
   pieza el aire de ficha que pedia el cliente. */
@media (min-width:860px){
  .modcar.is-ready .modcar-pista > .modulo{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    column-gap:clamp(1.8rem,3.6vw,3.2rem);
    align-items:start;
  }
  .modcar.is-ready .modcar-pista > .modulo .modulo-n{
    grid-column:1; grid-row:1 / span 2;
    align-self:stretch;
    margin:0; padding-right:clamp(1.8rem,3.6vw,3.2rem);
    border-right:1px solid var(--line-dark);
    font-size:clamp(3.2rem,2rem + 3.4vw,4.8rem);
    line-height:1;
  }
  .modcar.is-ready .modcar-pista > .modulo h3{ grid-column:2; grid-row:1; align-self:end; }
  .modcar.is-ready .modcar-pista > .modulo p{ grid-column:2; grid-row:2; }
}

/* El nombre de la fundacion dentro del parrafo lleva al Instagram, igual que
   el emblema de arriba. Va subrayado en dorado para que se lea como enlace
   sin romper el color del texto. */
.cic-link{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:var(--gold-line);
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
  transition:color .3s var(--ease),text-decoration-color .3s var(--ease);
}
.cic-link:hover{ color:var(--gold); text-decoration-color:var(--gold); }
.cic-link:focus-visible{ outline:2px solid var(--teal-300); outline-offset:3px; border-radius:3px; }