/* ============================================================================
   FINANCULTURA — Sitio (dirección NUEVA: azul #3498d1 + negro + blanco)
   Tipografías: Heading Now (display) + Greycliff CF (cuerpo).
   Cards multicolor con ilustración (estilo academia / Wisevest).
   Mockup local — no público.
   ============================================================================ */

/* ---------- FUENTES ---------- */
@font-face{ font-family:"Greycliff CF"; src:url("fonts/Greycliff CF Light.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"Greycliff CF"; src:url("fonts/Greycliff CF Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Greycliff CF"; src:url("fonts/Greycliff CF Medium.otf") format("opentype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Greycliff CF"; src:url("fonts/Greycliff CF Bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap; }

/* NOTA: Heading Now queda cargada por si se consigue la licencia, pero NO se usa
   (es TRIAL y marca los números con watermark). Todo el display usa Greycliff CF. */

/* ---------- TOKENS ---------- */
:root{
  --blue:#3498d1; --blue-600:#2b80b6; --blue-700:#236d9c; --blue-50:#EAF5FB; --blue-100:#D6ECF8;
  --ink:#0E0F12; --ink-2:#3A4046; --muted:#717A82;
  --white:#FFFFFF; --paper:#F4F6F8; --paper-2:#ECEFF2;
  --line:rgba(14,15,18,.10); --line-2:rgba(14,15,18,.16);
  --ill:#16223D;            /* tinta de ilustración sobre cards */

  /* cards multicolor */
  --c-peri:#D9DCFF; --c-sky:#CBE8F8; --c-yellow:#F6EDA6;
  --c-mint:#C7EBD4; --c-lilac:#E4D7F6; --c-peach:#FBD9C5;

  --shadow-sm:0 1px 2px rgba(14,15,18,.04), 0 10px 26px rgba(14,15,18,.05);
  --shadow-md:0 18px 44px rgba(14,15,18,.10);
  --shadow-lg:0 36px 80px rgba(14,15,18,.14);

  /* Heading Now es TRIAL (no rinde números) → usamos Greycliff CF también para display. */
  --fd:"Greycliff CF", system-ui, sans-serif;
  --fb:"Greycliff CF", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:34px; --r-pill:999px;
  --maxw:1180px; --maxw-narrow:780px;
  --s-1:4px; --s-2:8px; --s-3:12px;
  --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:72px; --s-9:104px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; font-family:var(--fb); font-size:18px; line-height:1.6; color:var(--ink);
  background:var(--white); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:var(--blue-700); text-decoration:none; }
a:hover{ text-decoration:underline; }
svg{ display:block; }

h1,h2,h3,h4{ font-family:var(--fd); font-weight:700; line-height:1.04; color:var(--ink); margin:0 0 .5em; letter-spacing:-.025em; text-wrap:balance; }
h1{ font-size:clamp(2.8rem, 1.5rem + 4.7vw, 5rem); letter-spacing:-.035em; }
h2{ font-size:clamp(2rem, 1.3rem + 2.9vw, 3.4rem); letter-spacing:-.03em; }
h3{ font-size:clamp(1.2rem, 1.05rem + .8vw, 1.5rem); }
p{ margin:0 0 1rem; }
strong{ font-weight:700; color:var(--ink); }
.lede{ font-size:clamp(1.12rem, 1.02rem + .5vw, 1.32rem); color:var(--ink-2); line-height:1.5; font-weight:400; }

/* ---------- LAYOUT ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--s-5); }
.narrow{ max-width:var(--maxw-narrow); }
.section{ padding-block:clamp(60px,9vw,128px); position:relative; }
.section--tight{ padding-block:clamp(40px,6vw,72px); }
.bg-paper{ background:var(--paper); }
.bg-blue{ background:var(--blue); color:#EAF5FB; }

/* Panel con foto de fondo oscura, esquinas redondeadas (texto en blanco) */
/* El fondo del panel ES el papel del video (#E3EAF0, muestreado de sus frames)
   y el grano cubre el panel entero — video, texto y aire se leen como una sola
   pieza dibujada. El texto vuelve a los colores por defecto del sitio (tinta
   sobre claro), así que ya no hacen falta overrides blancos. */
.photo-panel{ position:relative; isolation:isolate; border-radius:var(--r-xl); overflow:hidden;
  padding:clamp(32px, 4vw, 64px);
  background:#E3EAF0; }
.photo-panel::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  mix-blend-mode:multiply; opacity:.34;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:150px 150px; }
.center{ text-align:center; }
.measure{ max-width:60ch; } .center .measure{ margin-inline:auto; }

.eyebrow{ font-family:var(--fb); font-weight:700; font-size:.95rem; color:var(--blue-700);
  margin:0 0 var(--s-3); display:inline-block; }
.bg-blue .eyebrow{ color:#fff; }

.head{ margin-bottom:clamp(36px,5vw,64px); }
.head h2{ margin:0; } .head .lede{ margin-top:var(--s-5); }

/* ---------- BOTONES ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55em; font-family:var(--fb);
  font-weight:700; font-size:1rem; padding:15px 28px; border-radius:var(--r-pill); border:2px solid transparent;
  cursor:pointer; transition:transform .14s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
  line-height:1.1; letter-spacing:-.01em; white-space:nowrap; }
.btn:hover{ text-decoration:none; transform:translateY(-2px); }
.btn--primary{ background:var(--blue); color:#fff; }
.btn--primary:hover{ background:var(--blue-600); color:#fff; box-shadow:var(--shadow-md); }
.btn--accent{ background:var(--blue); color:#fff; }
.btn--accent:hover{ background:var(--blue-600); color:#fff; box-shadow:var(--shadow-md); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.bg-blue .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.55); }
.bg-blue .btn--ghost:hover{ background:#fff; color:var(--blue-700); border-color:#fff; }
.btn--sm{ padding:10px 18px; font-size:.92rem; }
.btn--lg{ padding:18px 34px; font-size:1.06rem; }
.btn--icon{ padding:0; width:52px; height:52px; min-width:0; background:var(--paper-2); color:var(--ink); border-radius:var(--r-md); }
.btn--icon:hover{ background:var(--blue); color:#fff; }
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--s-4); align-items:center; }
.center .btn-row{ justify-content:center; }
@media(max-width:520px){ .btn:not(.btn--icon):not(.btn--sm){ width:100%; } }

/* ---------- NAV ---------- */
.nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line); }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-5); padding-block:14px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--fd); font-weight:700; font-size:1.32rem;
  color:var(--ink); letter-spacing:-.03em; }
.brand:hover{ text-decoration:none; }
/* El logo ya trae el wordmark, así que la marca es solo la imagen (antes era el
   SVG de la semilla + el texto "Financultura" al lado). */
.brand img{ height:42px; width:auto; display:block; }
.footer__brand .brand img{ height:48px; }
@media(max-width:600px){ .brand img{ height:36px; } }
.nav__links{ display:none; gap:var(--s-6); align-items:center; }
.nav__links a{ color:var(--ink-2); font-weight:500; font-size:.98rem; }
.nav__links a:hover{ color:var(--blue-700); text-decoration:none; }
.nav__cta{ display:none; }
.nav__burger{ display:inline-flex; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav__burger span{ width:24px; height:2px; background:var(--ink); border-radius:2px; display:block; transition:.2s; }
@media(min-width:980px){ .nav__links{ display:flex; } .nav__cta{ display:inline-flex; } .nav__burger{ display:none; }
  .nav__links .btn{ display:none; } /* el CTA dentro del menú es solo para el desplegable móvil */ }
@media(max-width:979px){
  .nav__links[data-open="1"]{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-4);
    position:absolute; left:0; right:0; top:100%; background:var(--white); border-bottom:1px solid var(--line);
    padding:var(--s-5); box-shadow:var(--shadow-md); }
  .nav__inner{ position:relative; }
}

/* ---------- HERO (foto de fondo, estilo editorial) ---------- */
/* El padding-bottom faltaba: sin él, el último botón del hero quedaba pegado
   (gap 0) contra la sección gris que sigue. */
.hero{ padding-top:var(--s-5); padding-bottom:clamp(40px, 5vw, 72px); }
.badge{ display:inline-flex; align-items:center; gap:.5em; background:var(--blue-50); border:1.5px solid var(--blue-100);
  border-radius:var(--r-pill); padding:8px 16px; font-size:.85rem; font-weight:600; color:var(--blue-700); }
.badge .tick{ display:inline-flex; width:18px; height:18px; border-radius:50%; background:var(--blue); color:#fff;
  align-items:center; justify-content:center; font-size:.7rem; }
.badge--ghost{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.34); color:#fff; backdrop-filter:blur(6px); }
.badge--ghost .tick{ background:#fff; color:var(--ink); }

.hero-stage{ position:relative; isolation:isolate; border-radius:var(--r-xl); overflow:hidden;
  min-height:clamp(560px,82vh,860px); display:flex; flex-direction:column; justify-content:space-between; gap:var(--s-6);
  padding:clamp(26px,3.5vw,52px); color:#fff;
  background-color:#26331f; background-position:center; background-size:cover; background-repeat:no-repeat;
  background-image:url("img/hero-bg.webp"), linear-gradient(135deg,#416034,#26331f 55%,#121a0e); }
.hero-stage::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(95deg, rgba(8,14,9,.66) 0%, rgba(8,14,9,.34) 34%, rgba(8,14,9,0) 64%),
    linear-gradient(180deg, rgba(8,14,9,.42) 0%, rgba(8,14,9,0) 32%, rgba(8,14,9,.62) 100%); }
.hero-stage__top{ max-width:760px; }
.hero-stage__top .badge{ margin-bottom:var(--s-5); }
.hero-stage__top h1{ color:#fff; margin:0; text-shadow:0 2px 36px rgba(0,0,0,.30); }
.hero-stage__bottom{ display:flex; flex-wrap:wrap; gap:var(--s-6); align-items:flex-end; justify-content:space-between; }
.hero-card{ background:rgba(255,255,255,.94); backdrop-filter:saturate(160%) blur(8px); border-radius:var(--r-lg);
  padding:var(--s-6); max-width:430px; color:var(--ink); box-shadow:var(--shadow-md); }
.hero-card p{ margin:0; font-size:1.02rem; color:var(--ink-2); line-height:1.5; }
.hero-actions{ display:flex; flex-direction:column; gap:var(--s-5); align-items:flex-end; text-align:right; max-width:560px; }
@media(min-width:900px){ .hero-actions{ padding-bottom:6px; } }
.hero-stage .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.6); }
.hero-stage .btn--ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; }
@media(max-width:680px){ .hero-card{ max-width:none; } .hero-actions{ width:100%; align-items:stretch; } .hero-actions .btn-row{ width:100%; } }

/* ---------- PROOF ---------- */
.proof{ display:flex; flex-wrap:wrap; gap:var(--s-6) clamp(28px,5vw,72px); align-items:center; justify-content:center; }
.proof__item{ text-align:center; }
.proof__num{ font-family:var(--fd); font-size:clamp(2.2rem, 1.6rem + 2vw, 3.2rem); color:var(--ink); font-weight:700; line-height:1; letter-spacing:-.04em; }
.proof__lbl{ font-size:.86rem; color:var(--muted); font-weight:500; margin-top:8px; }
.proof__sep{ width:1px; height:50px; background:var(--line-2); }
@media(max-width:680px){ .proof__sep{ display:none; } }

/* ---------- JOURNEY A→B ---------- */
.journey{ display:grid; gap:var(--s-6); align-items:center; grid-template-columns:1fr; text-align:center; }
@media(min-width:760px){ .journey{ grid-template-columns:1fr auto 1fr; text-align:left; } }
.journey__state{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-6); }
/* line-height:1 recorta el half-leading de la line-box: si no, la etiqueta arrastra
   ~4px de hueco vacío arriba y la tinta del card se ve corrida hacia abajo. */
.journey__state .lbl{ font-size:.88rem; font-weight:700; color:var(--muted); margin-bottom:var(--s-3);
  display:block; line-height:1; }
.journey__state--to{ background:var(--blue-50); border-color:var(--blue-100); }
.journey__state--to .lbl{ color:var(--blue-700); }
.journey__state h3{ margin:0; font-weight:500; color:var(--ink-2); }
.journey__state--to h3{ color:var(--ink); font-weight:700; }
.journey__arrow{ display:flex; align-items:center; justify-content:center; color:var(--blue); }
.journey__arrow svg{ width:42px; height:42px; }
@media(max-width:759px){ .journey__arrow{ transform:rotate(90deg); } }

/* ---------- GRID + CARDS (multicolor, showcase) ---------- */
.grid{ display:grid; gap:var(--s-6); grid-template-columns:1fr; }
@media(min-width:680px){ .g-3,.g-4{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:980px){ .g-3{ grid-template-columns:repeat(3,1fr); } .g-4{ grid-template-columns:repeat(4,1fr); } }

.ucard{ position:relative; display:flex; flex-direction:column; border-radius:var(--r-lg); padding:var(--s-6);
  background:var(--c-sky); border:1px solid rgba(14,15,18,.06); transition:transform .18s ease, box-shadow .18s ease; overflow:hidden; }
.ucard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.ucard--peri{ background:var(--c-peri); } .ucard--sky{ background:var(--c-sky); } .ucard--yellow{ background:var(--c-yellow); }
.ucard--mint{ background:var(--c-mint); } .ucard--lilac{ background:var(--c-lilac); } .ucard--peach{ background:var(--c-peach); }
/* Familia azul: una sola paleta coherente con la marca (#3498d1) para las
   cards de método y de "¿te suena?" — cuatro tintes claros distintos. */
.ucard--blue1{ background:#E6F2FB; } .ucard--blue2{ background:#D3E9F7; }
.ucard--blue3{ background:#C1E0F4; } .ucard--blue4{ background:#DAE7F5; }
.ucard__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s-5); }
.ucard__tag{ font-family:var(--fb); font-weight:700; font-size:.82rem; color:var(--ill);
  background:rgba(255,255,255,.6); border-radius:var(--r-pill); padding:6px 13px; }
/* La flecha va al final del card, abajo a la derecha. margin-top:auto la ancla al
   fondo aunque los cards de la fila tengan alturas distintas; el colchón mínimo
   contra el texto lo pone el margin-bottom del último <p>. */
.ucard__arrow{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.55); color:var(--ill);
  display:flex; align-items:center; justify-content:center; flex:none; transition:.16s;
  align-self:flex-end; margin-top:auto; }
.ucard:hover .ucard__arrow{ background:var(--ink); color:#fff; }
.ucard__ill{ background:rgba(255,255,255,.45); border-radius:var(--r-md); padding:var(--s-5); margin-bottom:var(--s-5);
  display:flex; align-items:center; justify-content:center; min-height:148px; }
.ucard__ill svg{ width:100%; max-width:160px; height:auto; }
.ucard__ill img{ width:100%; max-width:120px; height:auto; display:block; margin-inline:auto; }
/* Variante con foto: sin padding para que sangre hasta el borde del marco, y
   object-fit:cover para que no se deforme al recortar. max-width:none anula el
   tope de 120px que usan las ilustraciones/badges — sin él la foto quedaba
   capada al centro y se veía el fondo navy a los lados. */
.ucard__ill--foto{ padding:0; overflow:hidden; aspect-ratio:4/3; min-height:0; background:var(--paper-2); }
.ucard__ill--foto img{ width:100%; max-width:none; height:100%; object-fit:cover; display:block; margin:0; }
.ucard h3{ margin:0 0 8px; color:var(--ill); }
.ucard p{ margin:0 0 var(--s-4); color:rgba(22,34,61,.78); font-size:.98rem; }
.ucard p:last-of-type{ margin-bottom:var(--s-5); }

/* Apilado al scrollear (sólo cuando el grid es de 1 columna): cada card se
   pega un poco más abajo que la anterior, y la que viene sube y la tapa.
   En ≥680px el grid vuelve a columnas y esto no aplica. */
@media(max-width:679px){
  .grid.stack{ display:block; }
  .grid.stack .ucard{ position:sticky; margin-bottom:var(--s-6); box-shadow:var(--shadow-md); }
  .grid.stack .ucard:nth-child(1){ top:76px; }
  .grid.stack .ucard:nth-child(2){ top:90px; }
  .grid.stack .ucard:nth-child(3){ top:104px; }
  .grid.stack .ucard:nth-child(4){ top:118px; }
}
/* Botón en texto al pie del card, con la misma píldora que tenía el .ucard__tag.
   .ucard__mas es <a> (programas); .ucard__read es <span> porque su card ya es
   un <a> entero y un enlace no puede anidar otro. */
.ucard__mas, .ucard__read{ align-self:flex-start; margin-top:auto; font-weight:700; font-size:.95rem;
  color:var(--ill); text-decoration:none; background:rgba(255,255,255,.55);
  padding:9px 16px; border-radius:var(--r-pill); transition:.16s; }
.ucard:hover .ucard__mas, .ucard:hover .ucard__read{ background:var(--ink); color:#fff; }
.ucard__mas:hover{ text-decoration:none; }

/* ---------- SPLIT (texto / arte) ---------- */
.split{ display:grid; gap:clamp(36px,5vw,80px); align-items:center; grid-template-columns:1fr; }
@media(min-width:900px){ .split{ grid-template-columns:1fr 1fr; } .split--rev>*:first-child{ order:2; } }
.feel{ display:flex; gap:var(--s-4); align-items:center; padding:var(--s-5) 0; border-bottom:1px solid var(--line); }
.feel:last-child{ border-bottom:0; }
.feel__ic{ flex:none; width:46px; height:46px; border-radius:var(--r-pill); background:var(--blue-50); color:var(--blue-700);
  display:flex; align-items:center; justify-content:center; }
.feel__ic svg{ width:22px; height:22px; }
.feel p{ margin:0; font-size:1.1rem; color:var(--ink); font-weight:500; line-height:1.4; }

/* servilleta */
.napkin{ position:relative; background:var(--c-yellow); border-radius:var(--r-lg); padding:var(--s-7) var(--s-6) var(--s-6);
  border:1px solid rgba(14,15,18,.06); box-shadow:var(--shadow-sm); }
.napkin__tag{ position:absolute; top:-13px; left:24px; background:var(--ink); color:#fff; font-size:.82rem; font-weight:700;
  padding:7px 15px; border-radius:var(--r-pill); }
/* Napkin en azul de marca (en vez del amarillo por defecto). */
.napkin--blue{ background:#D3E9F7; }
.napkin .sketch{ width:100%; height:auto; }
.napkin--foto img{ width:100%; height:auto; display:block; border-radius:var(--r-sm); }

/* ---------- Animación semilla → árbol → bosque (panel Filosofía) ---------- */
/* El grano del video vive en .photo-panel::after (cubre el panel entero);
   acá sólo un fundido en los bordes para que el frame se disuelva en el papel
   en vez de cortarse en un rectángulo. */
.filo-anim{ position:relative; line-height:0;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
/* La máscara vertical va en el video (se compone con la horizontal del padre)
   y de paso funde la fila de píxeles oscuros que deja el encode en el borde. */
.filo-anim video{ width:100%; height:auto; display:block;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
/* Servilleta con la animación (financultura): fondo = papel del video + grano,
   mismo tratamiento "conjunto" que el panel Filosofía de index. */
.napkin--anim{ background:#E3EAF0; }
.napkin--anim::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit; mix-blend-mode:multiply; opacity:.34;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:150px 150px; }
.filo-pasos{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:var(--s-4); }
.filo-pasos span{ text-align:center; font-size:.86rem; font-weight:700;
  color:var(--muted); opacity:.6; transition:color .4s ease, opacity .4s ease; }
.filo-pasos span.is-on{ color:var(--blue-600); opacity:1; }

/* Pin de scroll: la sección mide 260vh; el contenido queda sticky ocupando
   100vh mientras el scroll "sobrante" (160vh) mueve SOLO la animación. Al
   llegar a t=8s la sección se acaba y la página sigue normal. El JS pone
   .pin-ok únicamente si el panel cabe en el viewport — si no (pantallas
   bajas), la sección queda normal y el scrub usa el paso por pantalla. */
.filo-pin.pin-ok{ height:260vh; padding-block:0; }
.filo-pin.pin-ok .filo-pin__sticky{ position:sticky; top:0; height:100vh;
  display:flex; align-items:center; }
.filo-pin.pin-ok .filo-pin__sticky .container{ width:100%; }
.napkin__foot{ margin:var(--s-5) 0 0; color:var(--ill); font-size:.96rem; }

/* ---------- MANIFIESTO ---------- */
.manifesto{ text-align:center; }
.manifesto blockquote{ font-family:var(--fd); font-weight:700; font-size:clamp(1.9rem, 1.2rem + 2.9vw, 3.4rem);
  line-height:1.12; letter-spacing:-.03em; color:var(--ink); margin:0 auto; max-width:880px; text-wrap:balance; }
.manifesto blockquote em{ font-style:normal; color:var(--blue); }
.manifesto .sig{ margin-top:var(--s-6); color:var(--blue-700); font-weight:700; }
.manifesto .lede{ margin:var(--s-5) auto 0; max-width:52ch; }

/* Nota de apoyo bajo un manifiesto: cuerpo alineado a la izquierda a propósito
   — el texto corrido centrado deja el borde izquierdo irregular y cuesta leerlo. */
.idea-note{ margin-top:var(--s-8); text-align:left; }
.idea-note p{ margin:0; color:var(--ink-2); font-size:1.06rem; max-width:62ch; }
.idea-note .btn-row{ margin-top:var(--s-6); }

/* ---------- TESTIMONIOS (rotan cada semana) ---------- */
/* Los videos son verticales (formato reel) → 9/16, si no quedan con franjas negras. */
.testis{ display:grid; gap:var(--s-5); grid-template-columns:1fr; margin-top:var(--s-6);
  max-width:340px; margin-inline:auto; }
@media(min-width:760px){ .testis{ grid-template-columns:repeat(3,1fr); max-width:none; } }
.testi{ margin:0; border-radius:var(--r-lg); overflow:hidden; background:var(--ink);
  box-shadow:var(--shadow-sm); aspect-ratio:9/16; }
.testi iframe{ width:100%; height:100%; border:0; display:block; }
/* Video nativo self-hosted (player limpio de iOS). El poster llena el 9:16. */
.testi video{ width:100%; height:100%; object-fit:cover; display:block; background:var(--ink); }
.testis__foot{ margin-top:var(--s-6); font-size:.95rem; }

/* ---------- REPRODUCTORES (último episodio: YouTube + Spotify) ---------- */
.reproductores{ display:grid; gap:var(--s-6); grid-template-columns:1fr; margin-top:var(--s-6); }
@media(min-width:820px){ .reproductores{ grid-template-columns:1fr 1fr; align-items:start; } }
.repro{ display:flex; flex-direction:column; gap:var(--s-3); }
.repro__tag{ font-size:.82rem; font-weight:700; color:var(--muted); line-height:1; }
/* Spotify: el embed compacto de un show renderiza una sola fila de ~90px. Los
   tamaños que documenta Spotify (152/352) son para tracks y acá dejan un bloque
   negro vacío debajo; 90px es el alto medido del contenido real. */
.repro__marco{ border-radius:var(--r-md); overflow:hidden; background:var(--paper);
  border:1px solid var(--line); height:90px; }
/* YouTube es video → 16/9. */
.repro__marco--video{ height:auto; aspect-ratio:16/9; background:var(--ink); }
.repro__marco iframe{ width:100%; height:100%; border:0; display:block; }
.repro__link{ font-size:.92rem; font-weight:700; color:var(--blue-700); }

/* ---------- NOTAS DE PRENSA (preview de las columnas) ---------- */
.notas{ display:grid; gap:var(--s-5); grid-template-columns:1fr; margin-top:var(--s-6); text-align:left; }
@media(min-width:700px){ .notas{ grid-template-columns:1fr 1fr; } }
.nota{ display:flex; flex-direction:column; gap:var(--s-2); padding:var(--s-5);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  color:var(--ink); text-decoration:none; transition:transform .16s ease, box-shadow .16s ease; }
.nota:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); text-decoration:none; }
/* El nombre va al costado derecho, como firma. */
.nota__autor{ font-size:.82rem; font-weight:700; color:var(--muted); line-height:1; align-self:flex-end; }
.nota__titular{ font-family:var(--fd); font-weight:700; font-size:1.02rem; line-height:1.25;
  letter-spacing:-.02em; color:var(--ink); }
.nota__mas{ font-size:.9rem; font-weight:700; color:var(--blue-700); margin-top:auto; padding-top:var(--s-2); }

/* ---------- CARD (superficie genérica) ---------- */
/* .card se usaba en programas.html sin estar definida: el bloque heredaba solo el
   fondo de .rung--flag y quedaba con padding 0, con el texto pegado al borde. */
.card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-6); }
.card--flag{ display:grid; grid-template-columns:1fr; gap:var(--s-5); align-items:center; margin-top:var(--s-7); }
@media(min-width:760px){ .card--flag{ grid-template-columns:1fr auto; gap:var(--s-6); padding:var(--s-7); } }
.card--flag h3{ margin:var(--s-3) 0 var(--s-2); }
.card--flag p{ margin:0; color:var(--ink-2); }

/* ---------- ESCALERA (ladder) ---------- */
.ladder{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.rung{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--s-5); padding:22px 14px;
  border-bottom:1px solid var(--line); transition:background .14s ease; border-radius:var(--r-md); }
.rung:hover{ background:var(--paper); }
.rung--flag{ background:var(--blue-50); border:1px solid var(--blue-100); border-bottom-color:var(--blue-100); }
.rung__sym{ width:54px; height:54px; flex:none; display:flex; align-items:center; justify-content:center; color:var(--ill); }
.rung__sym svg{ width:42px; height:42px; }
.rung__sym img{ width:52px; height:52px; display:block; }
.rung--flag .rung__sym{ color:var(--blue-700); }
.rung__name{ font-weight:700; color:var(--ink); font-size:1.08rem; }
.rung__for{ font-size:.9rem; color:var(--muted); display:block; font-weight:400; margin-top:2px; }
.rung__price{ font-family:var(--fd); font-weight:700; font-size:1.2rem; color:var(--ink); white-space:nowrap; letter-spacing:-.02em; }
.rung__price .free{ color:var(--blue); }
/* En móvil se mantienen las 3 columnas en una sola fila (solo se achica el gap).
   Antes colapsaba a 2 filas —nombre arriba, precio abajo— y el icono, centrado
   contra el card entero, quedaba ~27px desalineado del nombre. En una fila el
   align-items:center del .rung alinea icono, nombre y precio entre sí. */
@media(max-width:600px){
  .rung{ gap:var(--s-3); padding:22px var(--s-4); }
  .rung__price{ font-size:1.05rem; }
}
.ladder-note{ margin-top:var(--s-6); font-size:1rem; color:var(--ink-2); }

/* ---------- PERFILES ---------- */
.profile{ display:grid; grid-template-columns:1fr; gap:var(--s-5); align-items:start;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-6); }
@media(min-width:560px){ .profile{ grid-template-columns:auto 1fr; } }
.profile__photo{ position:relative; width:140px; aspect-ratio:1/1; border-radius:var(--r-md); overflow:hidden; background:var(--c-lilac); }
.profile__photo svg{ position:absolute; inset:0; width:100%; height:100%; }
.profile__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.profile__chip{ position:absolute; left:8px; right:8px; bottom:8px; background:rgba(14,15,18,.72); color:#fff;
  font-size:.7rem; padding:6px 9px; border-radius:9px; line-height:1.3; }
.profile h3{ margin:0 0 8px; } .profile p{ margin:0; color:var(--ink-2); font-size:1rem; }

/* ---------- PRENSA ---------- */
.press{ display:flex; flex-wrap:wrap; gap:var(--s-5) clamp(28px,5vw,64px); align-items:center; justify-content:center; }
.press span{ font-family:var(--fd); font-weight:500; font-size:1.1rem; color:var(--muted); }
.pending{ display:flex; gap:10px; align-items:flex-start; background:var(--paper); border:1px dashed var(--line-2);
  color:var(--ink-2); font-size:.9rem; font-weight:500; padding:16px 18px; border-radius:var(--r-md); margin-top:var(--s-6);
  max-width:760px; margin-inline:auto; }

/* ---------- CTA banner ---------- */
.cta-banner{ background:var(--blue); border-radius:var(--r-xl); padding:clamp(40px,6vw,72px) var(--s-6); text-align:center; }
.cta-banner h2{ color:#fff; margin:0 0 var(--s-6); }
/* strong es var(--ink) (casi negro) por defecto; sobre el azul del banner queda
   ilegible. .photo-panel ya tenía su override, esto le faltaba al banner. */
.cta-banner strong, .bg-blue strong{ color:#fff; }
.cta-banner .micro{ font-size:.95rem; color:rgba(255,255,255,.85); margin-top:var(--s-5); }
/* El ghost es negro por defecto y el banner tiene fondo azul: sin este override
   el texto salía casi negro sobre el azul y el borde quedaba a 16% de negro,
   invisible. Mismo tratamiento que .bg-blue / .photo-panel / .hero-stage. */
.cta-banner .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.55); }
.cta-banner .btn--ghost:hover{ background:#fff; color:var(--blue-700); border-color:#fff; }
.cta-banner .btn--primary{ background:#fff; color:var(--ink); } .cta-banner .btn--primary:hover{ background:var(--ink); color:#fff; }

/* ---------- FOOTER ---------- */
.footer{ background:var(--paper); color:var(--ink-2); padding-block:var(--s-9) var(--s-6); border-top:1px solid var(--line); }
.footer a{ color:var(--ink-2); } .footer a:hover{ color:var(--blue-700); }
.footer__grid{ display:grid; gap:var(--s-7) var(--s-6); grid-template-columns:1fr; }
@media(min-width:760px){ .footer__grid{ grid-template-columns:1.6fr 1fr 1fr; } }
.footer__brand p{ margin:var(--s-4) 0 0; font-size:.96rem; max-width:34ch; }
.footer h4{ color:var(--ink); font-family:var(--fb); font-size:.95rem; margin:0 0 var(--s-4); font-weight:700; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.footer__legal{ margin-top:var(--s-8); padding-top:var(--s-6); border-top:1px solid var(--line); }
.footer__sugeval{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:18px 20px;
  font-size:.92rem; line-height:1.6; color:var(--ink-2); max-width:780px; }
.footer__sugeval b{ color:var(--ink); }
.footer__copy{ font-size:.84rem; color:var(--muted); margin-top:var(--s-5); }
.footer__copy a{ color:var(--muted); }

/* ---------- STICKY MOBILE CTA ---------- */
.mobile-cta{ position:fixed; left:0; right:0; bottom:0; z-index:60; background:rgba(255,255,255,.97);
  border-top:1px solid var(--line); padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 20px rgba(14,15,18,.08); }
.mobile-cta .btn{ width:100%; }
@media(min-width:980px){ .mobile-cta{ display:none; } }
body.has-mcta{ padding-bottom:84px; }
@media(min-width:980px){ body.has-mcta{ padding-bottom:0; } }

/* ============================================================================
   ANIMACIONES — reveal al hacer scroll (títulos tipo "mask rise" + fade-up)
   Solo se activan con JS (clase .anim en <html>) y respetan reduced-motion.
   ============================================================================ */
@media (prefers-reduced-motion: no-preference){
  /* Títulos: suben y se descubren con máscara */
  html.anim :is(h1, h2, .manifesto blockquote){
    opacity:0; transform:translateY(30px); clip-path:inset(0 -12% 105% -12%);
    transition:opacity .7s ease, transform .9s cubic-bezier(.2,.8,.2,1), clip-path .9s cubic-bezier(.2,.8,.2,1);
    transition-delay:var(--d, 0ms); will-change:opacity, transform;
  }
  html.anim :is(h1, h2, .manifesto blockquote).is-in{
    opacity:1; transform:none; clip-path:inset(0 -12% -12% -12%);
  }
  /* Bloques: fade + suben, con stagger por posición */
  html.anim :is(.ucard, .feel, .journey__state, .rung, .profile, .proof__item, .press span, .napkin, .lede, .hero-card, .faq__item, .form-card, .post, .price-card){
    opacity:0; transform:translateY(26px);
    transition:opacity .65s ease, transform .75s cubic-bezier(.22,.61,.36,1);
    transition-delay:var(--d, 0ms); will-change:opacity, transform;
  }
  html.anim :is(.ucard, .feel, .journey__state, .rung, .profile, .proof__item, .press span, .napkin, .lede, .hero-card, .faq__item, .form-card, .post, .price-card).is-in{
    opacity:1; transform:none;
  }
}

/* ============================================================================
   COMPONENTES EXTRA (para las páginas internas)
   ============================================================================ */
/* ---------- FAQ (acordeón con <details>) ---------- */
.faq{ border-top:1px solid var(--line); max-width:780px; margin-inline:auto; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{ list-style:none; cursor:pointer; font-family:var(--fd); font-weight:700; font-size:1.12rem; color:var(--ink);
  padding:24px 46px 24px 0; position:relative; line-height:1.4; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; position:absolute; right:4px; top:22px; font-size:1.5rem; line-height:1; color:var(--blue); font-weight:400; }
.faq__item[open] summary::after{ content:"\2013"; }
.faq__a{ padding:0 46px 26px 0; margin:0; color:var(--ink-2); font-size:1.04rem; line-height:1.6; }

/* ---------- FORMULARIOS ---------- */
.form-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(26px,4vw,44px); box-shadow:var(--shadow-sm); max-width:580px; margin-inline:auto; }
.form{ display:grid; gap:var(--s-5); }
.field{ display:grid; gap:7px; }
.field label{ font-weight:600; font-size:.94rem; color:var(--ink); }
.field input, .field select, .field textarea{ width:100%; font-family:var(--fb); font-size:1rem; color:var(--ink);
  background:var(--white); border:1.5px solid var(--line-2); border-radius:var(--r-md); padding:13px 16px; transition:border-color .15s ease, box-shadow .15s ease; }
.field input::placeholder, .field textarea::placeholder{ color:var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-50); }
.field textarea{ min-height:120px; resize:vertical; }
.form .btn{ width:100%; }
.form-note{ font-size:.84rem; color:var(--muted); margin:0; line-height:1.5; }

/* ---------- POST (blog) ---------- */
.post{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s-6); transition:transform .16s ease, box-shadow .16s ease; }
.post:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.post__tag{ font-size:.8rem; font-weight:700; color:var(--blue-700); margin-bottom:var(--s-3); }
.post h3{ margin:0 0 10px; } .post p{ color:var(--ink-2); margin:0 0 var(--s-5); font-size:1rem; }
.post__more{ margin-top:auto; font-weight:700; color:var(--blue-700); }

/* ---------- PRICE CARD (programas, tipo póster con símbolo) ---------- */
.price-card{ position:relative; display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s-6); }
.price-card--flag{ border:1.5px solid var(--blue); box-shadow:var(--shadow-md); }
.price-card__sym{ width:60px; height:60px; color:var(--ill); margin-bottom:var(--s-5); display:flex; align-items:center; justify-content:center; }
.price-card--flag .price-card__sym{ color:var(--blue-700); }
.price-card__sym svg{ width:52px; height:52px; }
.price-card__price{ font-family:var(--fd); font-weight:700; font-size:1.6rem; color:var(--ink); letter-spacing:-.02em; }
.price-card h3{ margin:8px 0 4px; } .price-card__for{ font-size:.9rem; color:var(--muted); margin-bottom:var(--s-5); }
.price-card p{ color:var(--ink-2); font-size:1rem; margin:0 0 var(--s-6); }
.price-card .btn{ margin-top:auto; }

/* ---------- Equipo (Quiénes somos) ----------
   REGLA DEL CLIENTE: María Laura y Gustavo nunca adyacentes ni en la misma
   fila/columna. Con el orden fijo (Eugenia, María Laura, David, Gustavo,
   Daniela, Fernando, Dixci) eso se cumple en 1 columna y en 3, pero NO en 2
   (quedarían uno encima del otro). Por eso esta grilla salta de 1 a 3. */
.grid-equipo{ display:grid; grid-template-columns:1fr; gap:var(--s-6); }
@media(min-width:980px){ .grid-equipo{ grid-template-columns:repeat(3,1fr); } }
.miembro{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s-6); box-shadow:var(--shadow-sm); }
.miembro__foto{ position:relative; width:120px; aspect-ratio:1/1; border-radius:var(--r-md);
  overflow:hidden; background:var(--c-sky); margin-bottom:var(--s-5); }
.miembro__foto img, .miembro__foto svg{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; }
.miembro h3{ margin:0 0 6px; color:var(--ill); font-size:1.15rem; }
.miembro__rol{ margin:0 0 10px; color:var(--blue-700); font-size:.9rem; font-weight:700; line-height:1.35; }
.miembro p{ margin:0; color:var(--ink-2); font-size:.97rem; line-height:1.5; }

/* ---------- Centro Legal y Privacidad ---------- */
.legal-indice{ margin-top:var(--s-6); background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--s-5) var(--s-6); }
.legal-indice ol{ margin:0; padding-left:1.2em; }
.legal-indice li{ margin:6px 0; }
.legal h2{ font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem); margin-bottom:var(--s-5); }
.legal h3{ font-size:1.08rem; margin:var(--s-6) 0 var(--s-2); color:var(--ill); }
.legal p, .legal li{ color:var(--ink-2); font-size:1rem; }
.legal ul{ margin:0 0 1rem; padding-left:1.2em; }
.legal li{ margin:6px 0; }

/* ---------- Footer: qué vendemos / qué no ---------- */
.footer__vende{ margin-top:var(--s-3); font-size:.92rem; color:var(--ink-2); }

/* ---------- Banner de cookies ----------
   Aparece solo si la persona no eligió todavía. "Aceptar" y "Rechazar" tienen
   el MISMO peso visual: rechazar no puede costar más que aceptar. */
.ck{ position:fixed; left:50%; transform:translateX(-50%) translateY(0);
  bottom:calc(var(--s-5) + env(safe-area-inset-bottom));
  z-index:70; width:calc(100% - var(--s-6)); max-width:880px;
  background:var(--ink); color:#fff; border-radius:var(--r-lg);
  padding:var(--s-5) var(--s-6); box-shadow:var(--shadow-lg);
  display:flex; flex-wrap:wrap; gap:var(--s-4) var(--s-5);
  align-items:center; justify-content:space-between;
  transition:opacity .25s ease, transform .25s ease; }
body.has-mcta .ck{ bottom:calc(84px + env(safe-area-inset-bottom)); }
.ck[hidden]{ display:none; }
.ck--fuera{ opacity:0; transform:translateX(-50%) translateY(14px); pointer-events:none; }
.ck__txt{ margin:0; flex:1 1 300px; font-size:.95rem; line-height:1.5; color:rgba(255,255,255,.92); }
.ck__txt a{ color:#fff; text-decoration:underline; }
.ck__btns{ display:flex; flex-wrap:wrap; gap:var(--s-3); flex:0 0 auto; }
.ck__btn{ font-family:var(--fb); font-weight:700; font-size:.92rem; line-height:1.1;
  padding:11px 20px; border-radius:var(--r-pill); border:2px solid transparent;
  cursor:pointer; transition:background .16s ease, color .16s ease; white-space:nowrap; }
.ck__btn--si{ background:var(--blue); color:#fff; }
.ck__btn--si:hover{ background:var(--blue-600); }
.ck__btn--no{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.ck__btn--no:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.ck__btn:focus-visible{ outline:3px solid var(--blue-100); outline-offset:2px; }
@media(max-width:560px){
  .ck{ padding:var(--s-5); }
  .ck__btns{ width:100%; }
  .ck__btn{ flex:1 1 auto; }
}
@media (prefers-reduced-motion:reduce){ .ck{ transition:none; } }

/* Dos columnas SOLO cuando hay ancho: en móvil se apilan.
   (Antes iba forzado a 2 col con estilo en línea y desbordaba 93px a 375px.) */
.grid--duo{ grid-template-columns:1fr; }
@media(min-width:760px){ .grid--duo{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Formularios: trampa de bots, estado y errores ---------- */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-msg{ margin:0; font-size:.94rem; line-height:1.45; }
.form-msg:empty{ display:none; }
.form-msg--bien{ color:#1b6b3a; font-weight:600; }
.form-msg--mal{ color:#a3242b; font-weight:600; }

.field--mal input,
.field--mal select,
.field--mal textarea{ border-color:#a3242b; box-shadow:0 0 0 3px rgba(163,36,43,.14); }

.form button[type="submit"][disabled]{ opacity:.6; cursor:progress; }

/* ---------- Los peldaños de la escalera pasaron de <div> a <a>:
     cada programa lleva a su propia página. Hay que anular el subrayado y el
     color de enlace, y dar señal de que se puede hacer clic. ---------- */
a.rung{ text-decoration:none; color:inherit; cursor:pointer; }
a.rung:hover .rung__name,
a.rung:focus-visible .rung__name{ color:var(--blue-700); }
a.rung:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
a.rung::after{ content:'→'; color:var(--muted); font-size:1rem; margin-left:2px; opacity:0; transition:opacity .14s ease; }
a.rung:hover::after,
a.rung:focus-visible::after{ opacity:1; }
@media(max-width:600px){ a.rung::after{ display:none; } }

/* ---------- Lista de temas dentro de una tarjeta (Reto) ----------
   Va pegada al párrafo de la tarjeta, con viñeta propia y tamaño menor
   para que la tarjeta siga leyéndose como tarjeta y no como documento. */
.ucard__lista{ margin:var(--s-4) 0 0; padding:0; list-style:none; display:grid; gap:7px; }
.ucard__lista li{ position:relative; padding-left:16px; font-size:.87rem; line-height:1.45; color:var(--ink-2); }
.ucard__lista li::before{
  content:''; position:absolute; left:0; top:.55em; width:5px; height:5px;
  border-radius:50%; background:currentColor; opacity:.45;
}

/* ---------- Panel para la segunda columna de un split ----------
   Cuando las dos columnas son listas .feel, el ojo no sabe dónde termina una
   y empieza la otra. El panel le da superficie propia a la de la derecha. */
.panel{ background:var(--blue-50); border:1px solid var(--blue-100);
  border-radius:var(--r-lg); padding:var(--s-6); }
@media(min-width:900px){ .panel{ padding:var(--s-7); } }
.panel > .eyebrow{ display:block; }
.panel > h2{ margin-top:var(--s-2); }
.panel .feel{ border-bottom-color:var(--blue-100); }
/* El círculo del icono es azul-50: sobre el panel se perdería, así que va blanco. */
.panel .feel__ic{ background:var(--white); }

/* ---------- Iconos de Lucide (ISC) en assets/img/icons ----------
   Se pintan como máscara para que hereden el color del contenedor y no haya
   que tocar el SVG. Así el mismo archivo sirve en cualquier color. */
.ico{ display:block; width:22px; height:22px; }

/* ---------- Tarjeta que es un enlace (Zona de alumnos) ----------
   En iPhone no existe :hover, así que el estado azul se pinta también con
   :active (el dedo apoyado). El :hover va dentro de @media(hover:hover) para
   que iOS no lo deje "pegado" después de tocar. */
.card--enlace{ display:block; text-decoration:none; color:inherit;
  transition:background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.card--enlace h3{ margin:0 0 6px; transition:color .16s ease; }
.card--enlace .ucard__mas{ transition:color .16s ease; }

.card--enlace:active,
.card--enlace:focus-visible{
  background:var(--blue-50); border-color:var(--blue); box-shadow:var(--shadow-md);
}
.card--enlace:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
.card--enlace:active h3,
.card--enlace:focus-visible h3{ color:var(--blue-700); }

@media(hover:hover){
  .card--enlace:hover{
    background:var(--blue-50); border-color:var(--blue);
    transform:translateY(-3px); box-shadow:var(--shadow-md);
  }
  .card--enlace:hover h3{ color:var(--blue-700); }
}
@media(prefers-reduced-motion:reduce){ .card--enlace{ transition:none; } .card--enlace:hover{ transform:none; } }
/* La tarjeta entera es el enlace: el subrayado global de <a> la ensucia. */
.card--enlace:hover, .card--enlace:focus-visible,
.card--enlace:hover *, .card--enlace:focus-visible *{ text-decoration:none; }