/* ==========================================================================
   Based Evidence , Sistema de diseño web v1.0
   Derivado del Manual de identidad BE v1.1
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root{
  /* Paleta principal (Manual pág. 8) */
  --navy:      #0a2342;
  --blue:      #3470c6;
  --lavender:  #ccc7ff;

  /* Derivados operativos para web */
  --navy-900:  #06182e;
  --navy-700:  #143566;
  --blue-700:  #2758a0;
  --blue-100:  #e8f0fb;
  --lav-100:   #f2f0ff;
  --lav-300:   #e0dcff;

  /* Secundarios (Manual pág. 9 , solo gráficos y tablas) */
  --green:     #abe8cc;
  --fuchsia:   #e391c7;
  --yellow:    #e3e0a1;

  /* Neutros */
  --ink:       #0a2342;
  --ink-70:    #46587a;
  --ink-45:    #7b89a3;
  --line:      #dfe4ee;
  --bg:        #ffffff;
  --bg-soft:   #f7f9fc;

  --maxw: 1180px;
  --r: 14px;
  --r-lg: 22px;
  --shadow: 0 1px 2px rgba(10,35,66,.04), 0 12px 32px rgba(10,35,66,.07);
  --shadow-lg: 0 2px 4px rgba(10,35,66,.05), 0 28px 64px rgba(10,35,66,.13);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:104px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',Arial,Helvetica,sans-serif;
  font-weight:300; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--blue); text-decoration:none}
a:hover{color:var(--blue-700)}

h1,h2,h3,h4{color:var(--navy); line-height:1.15; letter-spacing:-.022em; margin:0 0 .5em; font-weight:700}
h1{font-size:clamp(2.3rem,5.2vw,3.9rem); font-weight:800}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem)}
h3{font-size:1.22rem; font-weight:600; letter-spacing:-.012em}
h4{font-size:1rem; font-weight:600}
p{margin:0 0 1.1em}
strong{font-weight:600}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
/* Ajuste de aire, agosto 2026. Las secciones iban a 96 px arriba y abajo,
   que sobre una pantalla de portátil deja casi 200 px de vacío entre bloque
   y bloque. A 76 px el ritmo se mantiene y la página baja de alto sin que
   haya que quitar contenido. Revertir es cambiar estos tres números. */
.section{padding:76px 0}
.section--soft{background:var(--bg-soft)}
/* la sección del CTA necesita aire propio: antes se pegaba al bloque anterior */
.section--cta{padding-top:96px}
@media(max-width:900px){ .section--cta{padding-top:72px} }

.section--lav{background:var(--lav-100)}
.section--navy{background:var(--navy); color:#cfd9e8}
.section--navy h2,.section--navy h3{color:#fff}
.tight{padding:52px 0}

/* --------------------------------- eyebrow ------------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.735rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--blue); margin:0 0 18px;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--blue); border-radius:2px}
.section--navy .eyebrow{color:var(--lavender)}
.section--navy .eyebrow::before{background:var(--lavender)}

.lead{font-size:1.16rem; color:var(--ink-70); max-width:64ch}
.section--navy .lead{color:#b9c6da}

/* --------------------------------- botones ------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 26px; border-radius:999px; font-size:.95rem; font-weight:600;
  border:1.5px solid transparent; cursor:pointer; transition:.18s ease; white-space:nowrap;
}
.btn--primary{background:var(--blue); color:#fff}
.btn--primary:hover{background:var(--blue-700); color:#fff; transform:translateY(-1px)}
.btn--ghost{border-color:var(--line); color:var(--navy); background:#fff}
.btn--ghost:hover{border-color:var(--blue); color:var(--blue)}
.btn--light{background:#fff; color:var(--navy)}
.btn--light:hover{background:var(--lavender); color:var(--navy)}
.btn--outline-light{border-color:rgba(255,255,255,.35); color:#fff}
.btn--outline-light:hover{border-color:#fff; background:rgba(255,255,255,.08); color:#fff}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}

/* --------------------------------- header -------------------------------- */
/* Barra azul profundo: se funde con el hero y con las cabeceras interiores,
   en vez de flotar como una franja blanca sobre una banda oscura. */
.header{
  position:sticky; top:0; z-index:60;
  background:rgba(8,28,54,.88);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.header__in{display:flex; align-items:center; gap:36px; height:88px; max-width:var(--maxw); margin:0 auto; padding:0 24px}
/* Identificador: versión horizontal. Altura 46px = altura de x del texto ~11px (legible).
   El margen de seguridad del manual (ancho de la letra "b" ≈ 7px a esta escala) queda
   cubierto por los 21px libres arriba/abajo y por el gap de 36px hacia la navegación. */
.header__logo{display:flex; align-items:center; flex:0 0 auto}
.header__logo img{height:46px; width:auto; display:block}
.nav{display:flex; gap:26px; margin-left:auto; align-items:center}
.nav a{
  color:#dbe4f2; font-size:.94rem; font-weight:500; padding:6px 0;
  border-bottom:2px solid transparent;
}
.nav a:hover,.nav a.is-active{color:#fff; border-color:var(--lavender)}
.header__cta{display:flex; align-items:center; gap:14px}
.lang{font-size:.8rem; font-weight:600; color:#8fa2bd; letter-spacing:.06em}
.lang b{color:#fff}
.lang a{color:#8fa2bd}
.lang a:hover{color:#fff}
.burger{display:none; background:none; border:0; font-size:1.6rem; color:#fff; cursor:pointer}

/* ---------------------------------- hero --------------------------------- */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(158deg,#0a2342 0%,#123566 52%,#2758a0 100%);
  color:#fff; padding:88px 0 112px;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 28% 42%, #000 10%, transparent 78%);
  mask-image:radial-gradient(ellipse 70% 60% at 28% 42%, #000 10%, transparent 78%);
}
.hero::after{
  content:""; position:absolute; right:-10%; top:-22%; width:760px; height:760px;
  background:radial-gradient(circle at 50% 50%, rgba(204,199,255,.30), rgba(204,199,255,0) 62%);
  pointer-events:none;
}
.hero__grid{display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center; position:relative; z-index:2}
.hero h1{color:#fff; margin-bottom:22px}
.hero p{color:#c3d0e4; font-size:1.2rem; max-width:56ch}
.hero .eyebrow{color:var(--lavender)}
.hero .eyebrow::before{background:var(--lavender)}
.hero__art{position:relative}

/* ===================== Gráfica de marca animada =========================
   El símbolo de Based Evidence en movimiento. Composición asimétrica y
   sensación de impulso hacia adelante, como pide el manual (pág. 12).
   La estela de copias fantasma expresa trayectoria; los puntos que
   convergen sobre ella son la evidencia que se acumula (pág. 11).
   ======================================================================== */
.beart{width:100%; height:auto; overflow:visible; display:block}
.beart *{transform-box:view-box}

.beart__stage{transform-origin:300px 300px}
.beart__glow{transform-origin:330px 285px}

/* El símbolo sigue al puntero. El movimiento lo aplica el guion del héroe
   como atributo transform sobre cada pieza; aquí solo se avisa al navegador
   para que las promueva a su propia capa y no repinte el SVG entero. */
#beAmb,#beCuerpo,#beContra,#bePunto{will-change:transform}
@media(prefers-reduced-motion:reduce){
  #beAmb,#beCuerpo,#beContra,#bePunto{will-change:auto; transform:none !important}
}

/* estela: cada copia respira con retardo, sugiriendo desplazamiento */

.beart__path{
  fill:none; stroke:var(--lavender); stroke-width:1.5; stroke-linecap:round;
  stroke-opacity:.28; stroke-dasharray:560; animation:beart-draw 9s ease-in-out infinite;
}
.beart__arc{
  fill:none; stroke:var(--lavender); stroke-width:1; stroke-opacity:.16;
  stroke-dasharray:4 14; transform-origin:330px 285px; animation:beart-spin 70s linear infinite;
}

@keyframes beart-spin{to{transform:rotate(360deg)}}
50%{transform:translate(-6px,-16px) rotate(-1.6deg)}}
50%{opacity:.85; transform:scale(1.07)}}
50%{opacity:calc(var(--o,.16) * 2.1)}}
@keyframes beart-draw{
  0%{stroke-dashoffset:560}
  55%{stroke-dashoffset:0}
  100%{stroke-dashoffset:-560}
}


/* --- burbujas que convergen y forman el símbolo (entrada, una sola vez) --- */
/* El símbolo queda quieto: es una marca, no una animación. */
.beart__mark{opacity:1}

/* burbujas de fondo: siempre ahí, muy tenues */
.beart__amb circle{opacity:.1; animation:beart-amb 14s ease-in-out infinite}
@keyframes beart-amb{
  0%,100%{opacity:.06; transform:translate(0,0)}
  50%    {opacity:.17; transform:translate(-10px,-26px)}
}

@media(prefers-reduced-motion:reduce){
  .beart__path,.beart__arc,.beart__amb circle{animation:none}
  .beart__mark{opacity:1}
  .beart__path{stroke-dasharray:none}
  .beart animateMotion,.beart animate{display:none}
}
.hero__note{margin-top:28px; font-size:.9rem; color:#9db0cc; display:flex; gap:10px; align-items:center}

/* ------------------------------ franja credenciales ---------------------- */
.creds{border-top:1px solid rgba(255,255,255,.13); margin-top:56px; padding-top:32px; position:relative; z-index:2}
.creds__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:34px}
.creds__item strong{display:block; color:#fff; font-size:1.02rem; font-weight:600; margin-bottom:5px}
.creds__item span{color:#9db0cc; font-size:.9rem; line-height:1.5; display:block}

/* --------------------------------- KPIs ---------------------------------- */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.kpi{border-left:3px solid var(--lavender); padding-left:20px}
.kpi b{display:block; font-size:2.5rem; font-weight:800; color:var(--navy); letter-spacing:-.03em; line-height:1}
.kpi span{font-size:.92rem; color:var(--ink-70); display:block; margin-top:8px}
.section--navy .kpi b{color:#fff}
.section--navy .kpi span{color:#a9b8ce}
.section--navy .kpi{border-color:var(--blue)}

/* --------------------------------- cards --------------------------------- */
.grid{display:grid; gap:24px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 28px; transition:.22s ease; display:flex; flex-direction:column;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--lav-300)}
.card__icon{width:52px; height:52px; margin-bottom:18px; object-fit:contain}
.card p{font-size:.97rem; color:var(--ink-70); margin-bottom:16px}
.card__link{margin-top:auto; font-size:.9rem; font-weight:600; color:var(--blue)}
.card__link::after{content:" →"}
.card--flat{background:var(--bg-soft); border-color:transparent}
.card--dark{background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.14)}
.card--dark p{color:#a9b8ce}
.card--dark a{color:#ccc7ff; text-decoration:underline; text-underline-offset:2px}
.card--dark a:hover{color:#fff}
.card--dark:hover{background:rgba(255,255,255,.09); box-shadow:none}

.tag{
  display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; background:var(--lav-100); color:var(--blue); margin-bottom:14px;
}
.tag--green{background:#e9f8f1; color:#2f7f5e}
.tag--fuchsia{background:#fbeef6; color:#a44a86}
.tag--yellow{background:#faf8e6; color:#8a8535}

/* ------------------------------- dos columnas ---------------------------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.split--wide{grid-template-columns:1.15fr .85fr}
.split img{border-radius:var(--r-lg); box-shadow:var(--shadow)}
.split--offset img{transform:translateY(18px)} /* composición asimétrica (Manual pág. 12) */

/* -------------------------------- servicios ------------------------------ */
.svc{border-top:1px solid var(--line); padding:44px 0; display:grid; grid-template-columns:70px 1fr 300px; gap:32px; align-items:start}
.svc:last-child{border-bottom:1px solid var(--line)}
.svc__num{font-size:.8rem; font-weight:700; color:var(--ink-45); letter-spacing:.1em; padding-top:6px}
.svc h3{font-size:1.42rem; margin-bottom:10px}
.svc p{color:var(--ink-70); font-size:1rem; margin-bottom:14px}
.svc__list{list-style:none; padding:0; margin:0; font-size:.92rem}
.svc__list li{padding:7px 0 7px 22px; position:relative; color:var(--ink-70); border-top:1px solid var(--line)}
.svc__list li:first-child{border-top:0}
.svc__list li::before{content:""; position:absolute; left:2px; top:15px; width:7px; height:7px; border-radius:50%; background:var(--lavender)}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.chip{font-size:.78rem; font-weight:500; padding:5px 12px; border-radius:999px; border:1px solid var(--line); color:var(--ink-70)}

/* --------------------------------- equipo -------------------------------- */
.person{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:.22s}
.person:hover{box-shadow:var(--shadow-lg); transform:translateY(-4px)}
.person img{width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--lav-100)}
/* Avatar de marca: alternativa digna mientras no haya retrato real.
   NUNCA usar fotos de banco para personas con nombre y apellido. */
.person__ph{
  position:relative; width:100%; aspect-ratio:4/5; overflow:hidden;
  background:linear-gradient(145deg,#0a2342 0%,#2758a0 55%,#6a83e0 100%);
  display:flex; align-items:center; justify-content:center;
}
.person__ph::after{ /* símbolo BE como marca de agua */
  content:""; position:absolute; right:-22%; bottom:-26%; width:78%; aspect-ratio:1;
  background:url('img/BE-Simbolo-blanco.svg') center/contain no-repeat; opacity:.14;
}
.person__ini{
  position:relative; z-index:2; color:#fff; font-weight:700; font-size:2.6rem;
  letter-spacing:.06em; line-height:1;
}
.person__ph img{width:64px; height:64px; aspect-ratio:auto; opacity:.5; background:none}
.person__b{padding:22px}
.person__b h3{font-size:1.06rem; margin-bottom:4px}
.person__role{font-size:.83rem; color:var(--blue); font-weight:600; margin-bottom:10px}
.person__b p{font-size:.9rem; color:var(--ink-70); margin:0}
.person__cred{margin-top:12px; font-size:.8rem; color:var(--ink-45)}

/* ---------------------------------- casos -------------------------------- */
.case{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:32px; display:flex; flex-direction:column}
.case dl{margin:0; font-size:.94rem}
.case dt{font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-45); margin-top:16px}
.case dd{margin:5px 0 0; color:var(--ink-70)}
.case__out{margin-top:20px; padding-top:18px; border-top:2px solid var(--lavender); font-weight:500; color:var(--navy)}

/* --------------------------------- logos --------------------------------- */
.logos{display:flex; flex-wrap:wrap; gap:16px; justify-content:center; align-items:center}
.logos span{
  border:1px solid var(--line); border-radius:999px; padding:11px 24px;
  font-size:.9rem; font-weight:500; color:var(--ink-70); background:#fff;
}

/* ------------------------------ acordeón / FAQ --------------------------- */
details{border-bottom:1px solid var(--line); padding:20px 0}
details summary{
  cursor:pointer; font-weight:600; color:var(--navy); font-size:1.03rem; list-style:none;
  display:flex; justify-content:space-between; gap:20px; align-items:center;
}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; color:var(--blue); font-size:1.4rem; font-weight:400}
details[open] summary::after{content:"–"}
details p{margin:14px 0 0; color:var(--ink-70); font-size:.98rem; max-width:80ch}

/* --------------------------------- CTA final ----------------------------- */
.cta{
  background:linear-gradient(140deg,#0a2342 0%,#2758a0 100%);
  border-radius:var(--r-lg); padding:60px; color:#fff; position:relative; overflow:hidden;
}
.cta::after{
  content:""; position:absolute; right:-80px; bottom:-140px; width:420px; height:420px;
  background:radial-gradient(circle,rgba(204,199,255,.28),transparent 65%);
}
.cta h2{color:#fff; max-width:20ch}
.cta p{color:#c3d0e4; max-width:52ch}
.cta > *{position:relative; z-index:2}

/* --------------------------------- form ---------------------------------- */
.form{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form .full{grid-column:1/-1}
.field label{display:block; font-size:.82rem; font-weight:600; color:var(--navy); margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:.95rem; color:var(--ink); background:#fff;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--lavender); border-color:var(--blue)}
.field textarea{min-height:120px; resize:vertical}

/* --------------------------------- footer -------------------------------- */
.footer{background:var(--navy-900); color:#8fa2bd; padding:72px 0 32px; font-size:.92rem}
.footer h4{color:#fff; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:16px}
.footer a{color:#8fa2bd; display:block; padding:5px 0}
.footer a:hover{color:#fff}
.footer__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:44px}
.footer__logo{height:60px; width:auto; margin-bottom:22px}
.footer__bottom{border-top:1px solid rgba(255,255,255,.1); margin-top:48px; padding-top:22px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:.84rem}

/* --------------------------------- utils --------------------------------- */
.center{text-align:center}
.center .lead{margin-left:auto; margin-right:auto}
.mt-0{margin-top:0}.mt-2{margin-top:20px}.mt-3{margin-top:34px}.mt-4{margin-top:52px}
.mb-3{margin-bottom:34px}.mb-4{margin-bottom:52px}
.note{font-size:.85rem; color:var(--ink-45)}
/* ===== Cabecera de páginas interiores =====================================
   Azul profundo, igual que el hero de inicio. Así la barra de navegación
   blanca se apoya siempre sobre una banda oscura y el sitio se lee como
   una sola pieza, en vez de dos franjas claras apiladas.
   ========================================================================= */
.pagehead{
  position:relative; overflow:hidden;
  padding:74px 0 74px;
  background:linear-gradient(152deg,#0a2342 0%,#123566 55%,#26559a 100%);
  color:#c3d0e4;
}
.pagehead::after{   /* halo lavanda */
  content:""; position:absolute; right:-6%; top:-70%;
  width:640px; height:640px; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(204,199,255,.26), rgba(204,199,255,0) 62%);
}
.pagehead::before{  /* trama fina de puntos, se desvanece en diagonal */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(115deg,#000 0%,transparent 62%);
  mask-image:linear-gradient(115deg,#000 0%,transparent 62%);
}
.pagehead .wrap{position:relative; z-index:2}
.pagehead h1{color:#fff; font-size:clamp(2rem,4.2vw,3.1rem); max-width:18ch}
.pagehead .lead{color:#c3d0e4}
.pagehead .eyebrow{color:var(--lavender)}
.pagehead .eyebrow::before{background:var(--lavender)}
/* símbolo de marca saliendo por el borde inferior derecho */
.pagehead__mark{
  position:absolute; right:-70px; bottom:-130px; width:360px; aspect-ratio:1;
  background:url('img/BE-Simbolo-blanco.svg') center/contain no-repeat;
  opacity:.06; transform:rotate(-8deg); pointer-events:none; z-index:1;
}
.subnav{position:sticky; top:88px; z-index:50; background:#fff; border-bottom:1px solid var(--line)}
.subnav__in{display:flex; gap:24px; overflow-x:auto; max-width:var(--maxw); margin:0 auto; padding:0 24px}
.subnav a{white-space:nowrap; padding:15px 0; font-size:.88rem; font-weight:500; color:var(--ink-70); border-bottom:2px solid transparent}
.subnav a:hover{color:var(--blue); border-color:var(--blue)}

/* ------------------------------ responsive ------------------------------- */
@media(max-width:960px){
  .hero__grid,.split,.split--wide{grid-template-columns:1fr; gap:38px}
  .hero__art{order:-1; max-width:340px}
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
  .creds__grid{grid-template-columns:1fr; gap:22px}
  .kpis{grid-template-columns:repeat(2,1fr); gap:30px}
  .svc{grid-template-columns:1fr; gap:16px}
  .svc__num{padding-top:0}
  .footer__grid{grid-template-columns:1fr 1fr; gap:32px}
  .nav{display:none}
  .burger{display:block; margin-left:auto}
  .header__cta .btn{display:none}
  .header__in{height:72px; gap:16px}
  .header__logo img{height:38px}
  .subnav{top:72px}
  .cta{padding:40px 28px}
}
@media(max-width:620px){
  body{font-size:16px}
  .section{padding:64px 0}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
}

/* Campos trampa antispam: fuera de la vista y fuera del foco, pero presentes
   en el DOM para que los bots que rellenan todo se delaten. */
.hp{position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; overflow:hidden!important; opacity:0!important; pointer-events:none}


/* ============ portada híbrida: símbolo que responde al puntero ============ */
/* Cada pieza del logo se mueve a distinta velocidad. Lo que está más cerca
   del ojo se desplaza más, así el ojo lee tres burbujas a distintas
   distancias en vez de una figura plana. */
.dyn{width:100%; max-width:470px; height:auto; overflow:visible; display:block; margin:0 auto}
.dyn g{will-change:transform}

.proof{background:var(--navy); border-top:1px solid rgba(255,255,255,.13); padding:24px 0}
.proof__grid{display:grid; grid-template-columns:repeat(4,1fr) auto; gap:26px; align-items:center}
.proof b{display:block; font-size:25px; color:#fff; font-weight:730; letter-spacing:-.028em;
  line-height:1.15; font-variant-numeric:tabular-nums}
.proof span{font-size:13px; color:#9db0c6; display:block; margin-top:3px; line-height:1.4}
.proof a{font-size:13.5px; color:var(--lavender); text-decoration:none; white-space:nowrap;
  border-bottom:1px solid rgba(204,199,255,.4)}
.proof a:hover{color:#fff}
@media(max-width:900px){ .proof__grid{grid-template-columns:1fr 1fr; gap:20px} }
@media(prefers-reduced-motion:reduce){ .dyn g{transform:none !important} }

/* ---- Regla de color del símbolo ----
   El símbolo va PLANO, sin degradado. Cualquier degradado sobre una
   superficie grande reparte el recorrido tonal en escalones de 8 bits y
   puede producir franjas visibles; con relleno plano el rango tonal es 0
   y no hay nada que pueda escalonarse. Además el símbolo plano se lee
   mejor en pequeño y sobrevive a bordado, sello y un solo color.
   Tintas sobre AZUL MARINO:
     cuerpo  #9db9fb   círculo #2e64b0   punto #8aa9f2
   Elegidas midiendo: cuerpo/círculo 3,02:1 y círculo/navy 3,03:1. Ese par
   es el que importa, porque las dos formas se tocan y ahí se define la
   contraforma. Con la mediana fiel del degradado original (#8ca7e7) la
   separación caía a 2,06:1 y el círculo se empastaba con el cuerpo.
   Sobre BLANCO (firma de correo, favicon) las tintas van más profundas,
   porque el lavanda se desvanece: con el original, 8,9% del símbolo
   quedaba por debajo de 1,5:1. El ajuste es local, no global. */


/* ---------------- fichas de caso ---------------- */
.caso__meta{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:26px 0 34px;
  padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.caso__meta b{display:block; font-size:11.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-45); font-weight:640; margin-bottom:5px}
.caso__meta span{font-size:15px; color:var(--ink); line-height:1.5}
.caso__bloque{margin:0 0 30px}
.caso__bloque h2{font-size:21px; letter-spacing:-.018em; margin-bottom:9px}
.caso__num{color:var(--blue); font-variant-numeric:tabular-nums; margin-right:8px}
.pend{background:#fffbe9; border:1px dashed #dcc98a; border-radius:3px;
  padding:13px 16px; font-size:14.5px; color:#6a5a24; margin:10px 0}
.pend b{color:#4d4118}
.verif{background:var(--lav-100); border:1px solid var(--lav-300); border-radius:3px; padding:20px 22px}
.verif p{margin:0; font-size:15px}
@media(max-width:760px){ .caso__meta{grid-template-columns:1fr; gap:14px} }

/* la figura del método: un diagrama vale más que una foto de banco */
.caso__fig{margin:0 0 30px}
.caso__fig figure{margin:0; border:1px solid var(--line); border-radius:3px; overflow:hidden}
.caso__fig img{display:block; width:100%; height:auto}
.caso__fig figcaption{font-size:13.5px; color:var(--ink-45); line-height:1.55;
  padding:13px 16px; border-top:1px solid var(--line); background:var(--lav-100)}
.caso__fig .hueco{aspect-ratio:16/9; display:grid; place-items:center; text-align:center;
  background:repeating-linear-gradient(45deg,#fafaff,#fafaff 9px,#f2f0ff 9px,#f2f0ff 18px);
  color:#6a5a24; font-size:14px; padding:24px}
.tarjeta__fig{aspect-ratio:16/10; border-bottom:1px solid var(--line); display:grid;
  place-items:center; text-align:center; font-size:13px; color:#6a5a24; padding:18px;
  background:repeating-linear-gradient(45deg,#fafaff,#fafaff 9px,#f2f0ff 9px,#f2f0ff 18px);
  margin:-26px -26px 20px}


/* ---- Organizaciones, con la prueba al lado ------------------------------
   Un muro de logos dice «confía en mí»; una cita dice «compruébalo». Cada
   fila lleva el producto publicado que documenta la colaboración, así que
   la sección afirma y demuestra en el mismo renglón. Además evita el
   problema de fondo: el emblema de la OMS y la mayoría de los escudos
   universitarios no se pueden usar sin autorización escrita. */
.aval{max-width:840px; margin:0 auto; text-align:left}
.aval__f{display:grid; grid-template-columns:.85fr 1.15fr; gap:22px; padding:15px 0;
  border-bottom:1px solid var(--line); align-items:baseline}
.aval__f:last-of-type{border-bottom:0}
.aval__f b{font-size:.98rem; font-weight:600; color:var(--navy)}
.aval__f span{font-size:.92rem; color:var(--ink-70); line-height:1.56}
.aval__f a{color:var(--blue); text-decoration:none; border-bottom:1px solid rgba(39,88,160,.32)}
.aval__f a:hover{border-color:var(--blue)}
.aval__pie{margin-top:22px; font-size:.88rem; color:var(--ink-45); text-align:center}
@media(max-width:720px){ .aval__f{grid-template-columns:1fr; gap:4px; padding:13px 0} }