/* =====================================================================
   SAEF Soluciones Administrativas
   base.css - nucleo compartido por las cuatro paginas
   Extraido tal cual de el <style> de SAEF_Home.html (decision D1: banda de clientes de la Home). NINGUNA REGLA FUE MODIFICADA.
   ===================================================================== */
/* ============================================================
   SAEF — DUMMY HERO  ·  v1
   Paleta tomada del logo y del anuncio exterior del cliente
   ============================================================ */
:root{
  --navy-950:#08192E;
  --navy-900:#0E2440;
  --navy-800:#143054;
  --navy-700:#1C4272;
  --navy-600:#305478;
  --blue-500:#0084B4;
  --blue-400:#1B9DD9;
  --cyan-300:#4FC3E8;
  --orange-600:#DE6A1E;
  --orange-500:#F07A2D;
  --orange-400:#FF9A4D;
  --wa:#25D366;
  --wa-dark:#1EBE5A;
  --paper:#F5F8FB;
  --ink:#0E2440;

  --display:'Poppins', 'Century Gothic', 'Avenir Next', var(--sans);
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --nav-h:96px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

/* ---------- transición amable al cambiar de página ----------
   La clase .tr la pone un script en el <head>, así que si el
   navegador no ejecuta JS la página se ve normal desde el inicio. */
/* La entrada la hace una animación de CSS, no el JS: así la página nunca
   se puede quedar en blanco aunque algo falle. El JS sólo hace la salida. */
html.tr body{animation:paginaEntra .52s cubic-bezier(.22,.61,.36,1) both}
@keyframes paginaEntra{from{opacity:0}to{opacity:1}}
html.tr.saliendo body{animation:none;opacity:0;transition:opacity .26s ease-in;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.tr body,html.tr.saliendo body{animation:none;opacity:1;transition:none}
}
/* el menú es fijo: los anclajes deben frenar antes para no quedar tapados */
section[id],header[id]{scroll-margin-top:calc(var(--nav-h) + 18px)}
body{
  font-family:var(--sans);
  background:#fff;   /* el pliegue de la sección de blogs revela esta hoja */
  color:#fff;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ===================== NAV ===================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center;
  padding:0 clamp(20px,4vw,64px);
  transition:height .35s ease, background .35s ease, box-shadow .35s ease;
}
.nav.scrolled{
  height:74px;
  background:rgba(8,25,46,.92);
  backdrop-filter:blur(14px);
  box-shadow:0 8px 34px rgba(0,0,0,.34);
}
.nav__logo{display:flex;align-items:center;gap:12px;flex-shrink:0;text-decoration:none}
.nav__logo img{height:clamp(38px,4.2vw,52px);width:auto;display:block;transition:height .35s ease}
.nav.scrolled .nav__logo img{height:40px}

.nav__menu{
  margin-left:auto; display:flex; align-items:center; gap:clamp(6px,1.4vw,10px);
}
.nav__item{position:relative}
.nav__link{
  font-family:var(--display);
  display:flex;align-items:center;gap:6px;
  font-size:14.5px;font-weight:500;letter-spacing:.01em;
  color:rgba(255,255,255,.86);
  text-decoration:none;
  padding:10px 13px;border-radius:8px;
  white-space:nowrap;
  transition:color .2s ease, background .2s ease;
}
.nav__link:hover,.nav__item:hover>.nav__link{color:#fff;background:rgba(255,255,255,.07)}
.nav__link .chev{width:9px;height:9px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s ease}
.nav__item:hover .chev{transform:rotate(225deg) translateY(-2px)}

/* underline accent */
.nav__link::after{
  content:'';position:absolute;left:13px;right:13px;bottom:4px;height:2px;
  background:var(--orange-500);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.5,0,.2,1);
}
.nav__item:hover .nav__link::after{transform:scaleX(1)}

/* megamenu */
.mega{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(10px);
  min-width:288px;
  background:rgba(255,255,255,.98);
  border-radius:14px;
  padding:10px;
  box-shadow:0 26px 60px rgba(5,18,34,.42);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.nav__item:hover .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega::before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px}
.mega__head{
  font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--blue-500);padding:9px 14px 7px;
}
.mega a{
  display:flex;align-items:flex-start;gap:11px;
  padding:10px 14px;border-radius:9px;
  color:var(--navy-800);text-decoration:none;
  transition:background .18s ease, transform .18s ease;
}
.mega a:hover{background:var(--paper);transform:translateX(3px)}
.mega a .dot{width:6px;height:6px;border-radius:50%;background:var(--orange-500);margin-top:7px;flex-shrink:0;opacity:.55;transition:opacity .18s}
.mega a:hover .dot{opacity:1}
.mega a>span{display:block;min-width:0}
.mega a strong{display:block;font-size:14px;font-weight:600;line-height:1.35}
.mega a strong+span{display:block;font-size:11.5px;color:#6B7C90;margin-top:2px;line-height:1.4}
/* megamenú de dos columnas: una por familia de servicio */
.mega--doble{display:grid;grid-template-columns:1fr 1fr;gap:0 10px;min-width:648px}
.mega--doble .mega__col+.mega__col{border-left:1px solid #EDF2F7}

/* whatsapp cta */
.nav__wa{
  font-family:var(--display);
  display:flex;align-items:center;gap:9px;
  margin-left:14px;
  background:var(--wa);
  color:#fff;text-decoration:none;
  font-weight:600;font-size:14.5px;letter-spacing:.01em;
  padding:13px 22px;border-radius:100px;
  box-shadow:0 8px 24px rgba(37,211,102,.34);
  transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, background .25s ease;
  white-space:nowrap;
}
.nav__wa:hover{background:var(--wa-dark);transform:translateY(-2px);box-shadow:0 12px 30px rgba(37,211,102,.46)}
.nav__wa svg{width:19px;height:19px;fill:#fff;flex-shrink:0}
.nav__wa .pulse{position:relative;display:flex}
.nav__wa .pulse::after{
  content:'';position:absolute;inset:-5px;border-radius:50%;
  border:2px solid rgba(255,255,255,.6);
  animation:waPulse 2.4s ease-out infinite;
}
@keyframes waPulse{0%{transform:scale(.7);opacity:.9}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}

.nav__wa--mini{display:none;width:44px;height:44px;border-radius:50%;background:var(--wa);align-items:center;justify-content:center;margin-left:auto;box-shadow:0 6px 18px rgba(37,211,102,.4);text-decoration:none}
.nav__wa--mini svg{width:22px;height:22px;fill:#fff}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:10px;margin-left:auto}
.nav__burger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s}
.nav__burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger.open span:nth-child(2){opacity:0}
.nav__burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* nav compacto en pantallas intermedias: el menú NO colapsa a hamburguesa */
@media (max-width:1400px){
  .nav__link{font-size:13.5px;padding:9px 10px}
  .nav__wa{font-size:13.5px;padding:11px 18px;margin-left:8px}
  .nav{padding:0 clamp(16px,3vw,40px)}
}
@media (max-width:1150px){
  .nav__link{font-size:12.5px;padding:8px 8px;letter-spacing:-.005em}
  .nav__link::after{left:8px;right:8px}
  .nav__wa{font-size:12.5px;padding:10px 15px;gap:7px;margin-left:6px}
  .nav__wa svg{width:17px;height:17px}
  .nav__logo img{height:40px}
  :root{--nav-h:82px}
}

/* ===================== HERO ===================== */
.hero{
  position:relative;overflow:hidden;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(var(--nav-h) + clamp(20px,3.5vh,44px)) clamp(20px,4vw,64px) clamp(140px,18vh,205px);
  background:var(--navy-950);
}

/* fondo rotativo */
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.slide{
  position:absolute;inset:0;
  background-image:var(--img);background-size:cover;background-position:center;
  opacity:0;transform:scale(1.04);
  transition:opacity 1.5s ease;
  will-change:opacity,transform;
}
.slide.is-on{opacity:1;animation:kenburns 11s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.03)}to{transform:scale(1.13)}}

/* desenfoque suave sólo en la zona del texto: la foto se sigue viendo,
   pero el detalle fino deja de competir con la lectura */
.hero__soft{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  backdrop-filter:blur(3.5px);-webkit-backdrop-filter:blur(3.5px);
  mask-image:radial-gradient(760px 430px at 50% 44%, #000 0%, rgba(0,0,0,.85) 48%, transparent 76%);
  -webkit-mask-image:radial-gradient(760px 430px at 50% 44%, #000 0%, rgba(0,0,0,.85) 48%, transparent 76%);
}

/* velo: el más ligero que mantiene el texto en contraste AA sobre las tres fotos.
   Medido con el percentil 90 de luminancia detrás del titular y del párrafo:
   4.81 en la foto más clara, 5.87 y 7.09 en las otras (AA normal exige 4.5). */
.hero__scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(940px 530px at 50% 44%, rgba(6,20,38,.74) 0%, rgba(6,20,38,.38) 60%, rgba(6,20,38,.12) 82%),
    linear-gradient(180deg, rgba(6,20,38,.82) 0%, rgba(6,20,38,.18) 20%, rgba(6,20,38,.18) 58%, rgba(6,20,38,.72) 100%),
    linear-gradient(200deg, rgba(0,132,180,.10) 0%, rgba(240,122,45,.08) 100%);
}

/* indicadores */
.hero__dots{
  position:absolute;right:clamp(16px,2.6vw,40px);top:50%;transform:translateY(-50%);
  z-index:6;display:flex;flex-direction:column;gap:11px;
}
.hero__dots button{
  width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.34);transition:all .35s ease;
}
.hero__dots button.is-on{background:var(--orange-500);height:26px;border-radius:6px}

.hero__inner{
  position:relative;z-index:5;
  width:100%;max-width:960px;margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}

.badge{display:block;margin-bottom:clamp(16px,3vh,28px)}
.badge img{height:clamp(26px,2.4vw,36px);width:auto;display:block;filter:drop-shadow(0 2px 10px rgba(4,14,28,.5))}

h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(30px, min(4.5vw, 7vh), 62px);
  line-height:1.1;letter-spacing:-.028em;
  margin-bottom:clamp(16px,2.4vh,24px);
  text-wrap:balance;
  text-shadow:0 2px 20px rgba(4,14,28,.5), 0 1px 3px rgba(4,14,28,.42);
}
h1 .l2{display:block;white-space:nowrap}
.tw{color:var(--orange-500);font-weight:700;white-space:nowrap}
.tw-caret{
  display:inline-block;width:3px;height:.8em;background:var(--orange-400);
  margin-left:5px;vertical-align:-.06em;border-radius:1px;
  animation:caret 1.05s steps(1) infinite;
}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}

.lede{
  font-size:clamp(15px,1.16vw,18px);line-height:1.72;font-weight:300;
  color:rgba(255,255,255,.86);max-width:660px;margin-bottom:clamp(24px,3.8vh,38px);
  text-shadow:0 1px 14px rgba(4,14,28,.55), 0 1px 2px rgba(4,14,28,.4);
}
.lede b{font-weight:600;color:#fff}

.cta-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.btn{
  font-family:var(--display);
  display:inline-flex;align-items:center;gap:11px;
  font-size:15px;font-weight:600;letter-spacing:.01em;
  padding:17px 32px;border-radius:100px;
  text-decoration:none;cursor:pointer;border:0;
  transition:transform .3s cubic-bezier(.34,1.4,.5,1), box-shadow .3s ease, background .3s ease;
}
.btn--primary{background:linear-gradient(135deg,var(--orange-500),var(--orange-600));color:#fff;box-shadow:0 12px 34px rgba(222,106,30,.42)}
.btn--primary:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(222,106,30,.56)}
.btn .arw{transition:transform .3s ease}
.btn:hover .arw{transform:translateX(5px)}
.btn--ghost{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.34);backdrop-filter:blur(6px)}
.btn--ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.7);transform:translateY(-3px)}

/* botón terciario: descarga del PDF comercial */
.btn--pdf{
  background:transparent;color:rgba(255,255,255,.9);
  border:1.5px dashed rgba(255,255,255,.34);
  padding:16px 28px;
}
.btn--pdf:hover{
  background:rgba(255,255,255,.1);border-style:solid;
  border-color:var(--orange-400);color:#fff;transform:translateY(-3px);
}
.btn .dl{
  width:19px;height:19px;flex-shrink:0;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .34s cubic-bezier(.34,1.4,.5,1);
}
.btn--pdf:hover .dl{transform:translateY(2px)}

/* ---------- óvalos de cifras ---------- */
.hstats{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(10px,1.4vw,18px);
  margin-top:clamp(30px,5vh,58px);
}
.hstat{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:14px;
  background:#fff;border-radius:100px;
  padding:12px 30px 12px 12px;
  box-shadow:0 14px 34px rgba(4,14,28,.26);
  transition:transform .38s cubic-bezier(.34,1.4,.5,1), box-shadow .38s ease;
  cursor:default;
}
.hstat:hover{transform:translateY(-7px);box-shadow:0 26px 54px rgba(4,14,28,.36)}
/* destello que barre la ficha */
.hstat::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.72) 48%,transparent 64%);
  transform:translateX(-130%);transition:transform .85s cubic-bezier(.4,0,.2,1);
}
.hstat:hover::after{transform:translateX(130%)}
.hstat__ico{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;
  background:#FFF1E6;display:grid;place-items:center;
  transition:background .38s ease, transform .5s cubic-bezier(.34,1.5,.5,1);
}
.hstat:hover .hstat__ico{
  background:linear-gradient(140deg,var(--orange-400),var(--orange-600));
  transform:rotate(-10deg) scale(1.06);
}
.hstat__ico svg{
  width:23px;height:23px;fill:none;stroke:var(--orange-500);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .38s ease;
}
.hstat:hover .hstat__ico svg{stroke:#fff}
.hstat__tx{text-align:left;line-height:1}
.hstat__tx b{
  display:flex;align-items:baseline;gap:1px;
  font-family:var(--display);font-size:clamp(22px,2.1vw,30px);font-weight:700;
  letter-spacing:-.02em;color:var(--ink);transition:color .38s ease;
}
.hstat:hover .hstat__tx b{color:var(--orange-600)}
.hstat__tx b i{font-style:normal;color:var(--orange-500);font-size:.62em}
.hstat__tx small{
  display:block;margin-top:5px;
  font-size:11.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:#8496A8;
}

/* ============ SWOOSH INFERIOR (tomado del anuncio exterior) ============
   Curvas cruzadas naranja/azul con separador gris. Sin oleaje: cada capa
   sólo respira unos pocos píxeles, a ritmos distintos. */
.waves{
  position:absolute;left:0;right:0;bottom:-1px;
  height:clamp(112px,15.5vh,178px);
  z-index:8;pointer-events:none;line-height:0;overflow:hidden;
}
.waves svg{
  position:absolute;bottom:0;left:-3%;width:106%;height:100%;
  will-change:transform;
}
.w-grey  {animation:breathe 26s ease-in-out infinite alternate}
.w-grey2 {animation:breathe 31s ease-in-out infinite alternate-reverse}
.w-orange{animation:breathe 21s ease-in-out infinite alternate-reverse}
.w-orange2{animation:breathe 24s ease-in-out infinite alternate}
.w-blue  {animation:breathe 28s ease-in-out infinite alternate}
.w-blue2 {animation:breathe 19s ease-in-out infinite alternate-reverse}
@keyframes breathe{
  from{transform:translate3d(-.9%,2px,0)}
  to  {transform:translate3d(.9%,-2px,0)}
}

/* scroll cue */
.scrollcue{
  position:absolute;left:clamp(20px,4vw,64px);bottom:26px;z-index:9;
  display:flex;align-items:center;gap:12px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.55);font-weight:500;
}
.scrollcue .bar{width:1px;height:44px;background:linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,.6));position:relative;overflow:hidden}
.scrollcue .bar::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--orange-500);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%{top:-100%}60%,100%{top:100%}}

/* hero: pantallas chicas */
@media (max-width:900px){
  .hero__dots{right:12px}
  .hstats{gap:9px}
  .hstat{padding:10px 22px 10px 10px;gap:11px}
  .hstat__ico{width:44px;height:44px}
  .hstat__ico svg{width:20px;height:20px}
  .hstat__tx small{font-size:10px;letter-spacing:.06em}
}
@media (max-width:620px){
  /* el hero se compacta para caber en pantalla y dejar sitio a los puntos */
  .hero{padding:calc(var(--nav-h) + 16px) 20px calc(clamp(104px,14vh,150px) + 44px)}
  .waves{height:clamp(104px,14vh,150px)}
  h1{font-size:clamp(25px,7.4vw,34px);margin-bottom:14px}
  h1 .l2{white-space:normal}
  .badge{margin-bottom:14px}
  .badge img{height:24px}
  .lede{font-size:14px;line-height:1.62;margin-bottom:20px}
  .cta-row{flex-direction:column;align-items:stretch;width:100%;max-width:330px;gap:10px}
  .btn{justify-content:center;padding:15px 26px;font-size:14.5px}
  .hstats{flex-direction:column;width:100%;max-width:330px;margin-top:20px;gap:8px}
  .hstat{width:100%;padding:9px 20px 9px 9px;gap:11px}
  .hstat__ico{width:42px;height:42px}
  .hstat__ico svg{width:19px;height:19px}
  .hstat__tx b{font-size:21px}
  .hstat__tx small{font-size:9.5px;letter-spacing:.05em;margin-top:3px}
  .hero__dots{
    flex-direction:row;top:auto;right:auto;left:50%;
    bottom:calc(clamp(104px,14vh,150px) + 14px);transform:translateX(-50%);
  }
  .hero__dots button.is-on{height:9px;width:26px}
}

/* ===================== FRANJA DE RESPALDO ===================== */
.trust{
  position:relative;z-index:10;
  background:#fff;color:var(--ink);
  padding:34px clamp(20px,4vw,64px);
}
.trust__inner{
  max-width:1560px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:30px;flex-wrap:wrap;
}
.trust__lbl{
  font-size:10.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:#93A3B5;line-height:1.6;max-width:190px;
}
.trust__logos{display:flex;align-items:center;gap:clamp(24px,3.6vw,58px);flex-wrap:wrap}
.plogo{display:flex;align-items:center;gap:9px;filter:grayscale(1);opacity:.55;transition:filter .3s ease,opacity .3s ease}
.plogo:hover{filter:grayscale(0);opacity:1}
.plogo__mark{font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.plogo__mark em{font-style:normal;color:var(--orange-500)}
.plogo__sub{font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#93A3B5}

/* ===================== RESPONSIVE ===================== */
@media (max-width:900px){
  .nav__menu{display:none;position:fixed;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:rgba(8,25,46,.985);backdrop-filter:blur(16px);padding:14px 20px 28px;box-shadow:0 24px 50px rgba(0,0,0,.44);max-height:calc(100vh - var(--nav-h));overflow-y:auto}
  .nav__menu.open{display:flex}
  .nav__link{padding:15px 8px;font-size:16px;border-bottom:1px solid rgba(255,255,255,.07)}
  .nav__link::after{display:none}
  .mega{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;min-width:0;background:transparent;box-shadow:none;padding:2px 0 10px 8px}
  /* en móvil las dos familias se apilan y sí llevan su título */
  .mega--doble{display:block;min-width:0}
  .mega--doble .mega__col+.mega__col{border-left:0;border-top:1px solid rgba(255,255,255,.08);margin-top:6px}
  .mega__head{display:block;color:var(--cyan-300);padding:12px 8px 4px}
  .mega a{color:rgba(255,255,255,.72);padding:10px 8px}
  .mega a:hover{background:rgba(255,255,255,.06)}
  .mega a strong{font-size:13.5px;font-weight:500}
  .mega a strong+span{display:none}
  .nav__wa{margin:16px 8px 0;justify-content:center}
  .nav__burger{display:flex;order:3;margin-left:10px}
  .nav__wa--mini{display:flex;order:2}
}

/* tablet: la foto se reduce y el texto conserva legibilidad */
@media (max-width:1250px){
  .hero__copy{max-width:min(620px,60%)}
  .btn{padding:15px 26px;font-size:14.5px}
}
@media (max-width:1060px){
  .hero__copy{max-width:64%}
  .btn{padding:14px 22px;font-size:13.5px;gap:9px}
  .stat__l{font-size:10.5px}
}
@media (max-width:1180px){
  .visual{width:47%}
  .visual__shape::after{
    background:
      linear-gradient(100deg, rgba(8,25,46,.99) 0%, rgba(11,30,54,.82) 26%, rgba(14,36,64,.3) 52%, rgba(14,36,64,.05) 72%),
      linear-gradient(200deg, rgba(0,132,180,.10) 0%, rgba(240,122,45,.14) 100%);
  }
}
/* móvil: la foto pasa a ser banda superior y el texto va debajo */

@media (max-width:520px){
  h1{font-size:clamp(31px,8.6vw,42px)}
  .cta-row{flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
  .stat{padding-left:14px}
  .trust__inner{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
}

/* ============================================================
   SECCIÓN 2 · DOLORES — fondo claro
   Lenguaje de tarjeta tomado de la referencia del cliente:
   círculo de icono, etiqueta gris, título, divisor y texto.
   El giro convierte la tarjeta blanca en la tarjeta azul destacada.
   ============================================================ */
.pains{
  position:relative;
  background:#FBFCFD;
  color:var(--ink);
  padding:clamp(72px,9vh,120px) clamp(20px,4vw,64px) clamp(80px,10vh,130px);
  overflow:hidden;
}
/* curva suave gris en la esquina superior, como en la referencia */
.pains__bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1200px 520px at -8% -12%, #EFF2F6 0%, rgba(239,242,246,0) 62%),
    radial-gradient(900px 480px at 108% 104%, #EEF3F8 0%, rgba(238,243,248,0) 60%);
}
.pains__inner{position:relative;z-index:2;max-width:1280px;margin:0 auto}

/* ---------- encabezado ---------- */
.shead{text-align:center;max-width:820px;margin:0 auto clamp(44px,6vh,68px)}
.shead__eyebrow{
  display:block;font-family:var(--display);
  font-size:clamp(13px,1.05vw,15.5px);font-weight:600;
  color:var(--orange-500);margin-bottom:18px;letter-spacing:.005em;
}
.shead__title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(29px,3.75vw,52px);line-height:1.14;
  letter-spacing:-.02em;color:var(--ink);
}
.shead__title .hl{color:var(--blue-500)}
.shead__sub{
  margin-top:20px;font-size:clamp(15px,1.15vw,17.5px);line-height:1.7;
  color:#5F7185;font-weight:300;
}
.shead__sub b{font-weight:600;color:#37485C}

/* ---------- grid ---------- */
.pgrid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,1.9vw,28px);
}

/* ---------- tarjeta ---------- */
.pcard{
  position:relative;min-height:242px;
  perspective:1600px;
  outline:none;cursor:default;
}
.pcard__inner{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transition:transform .72s cubic-bezier(.4,.05,.2,1);
}
@media (hover:hover){
  .pcard:hover .pcard__inner{transform:rotateY(180deg)}
}
.pcard.flipped .pcard__inner,
.pcard:focus-visible .pcard__inner{transform:rotateY(180deg)}

.pface{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:18px;
  padding:clamp(20px,1.65vw,26px);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.pface--front{
  background:#fff;
  border:1px solid #E7EDF4;
  box-shadow:0 2px 4px rgba(16,40,70,.03), 0 14px 34px rgba(16,40,70,.055);
  transition:box-shadow .4s ease;
}
.pcard:hover .pface--front{box-shadow:0 4px 8px rgba(16,40,70,.05), 0 22px 46px rgba(16,40,70,.09)}
.pface--back{
  transform:rotateY(180deg);
  background:linear-gradient(155deg, #1C4272 0%, #143054 55%, #0E2440 100%);
  color:#fff;
  box-shadow:0 18px 44px rgba(14,36,64,.28);
}

/* icono en círculo */
.pcard__head{display:flex;align-items:center;gap:13px;margin-bottom:15px}
.pcard__ico{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;
  background:#F2F5F9;display:grid;place-items:center;
  transition:background .4s ease;
}
.pcard:hover .pcard__ico{background:#FFF1E6}
.pcard__ico svg{
  width:23px;height:23px;fill:none;stroke:var(--orange-500);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}

/* etiqueta gris pequeña */
.pcard__label{
  font-size:12.5px;font-weight:400;color:#93A3B5;
  letter-spacing:.01em;
}
.pcard__label b{font-weight:600;color:#B0BECD}
.pcard__label--on{color:var(--orange-400);font-weight:500;margin-bottom:9px}

/* título / cita */
.pcard__quote{
  font-family:var(--display);font-weight:600;
  font-size:clamp(16.5px,1.28vw,19px);line-height:1.36;
  letter-spacing:-.012em;color:var(--ink);
}
.pface--back h3{
  font-family:var(--display);font-weight:600;
  font-size:clamp(16px,1.22vw,18.5px);line-height:1.34;
  letter-spacing:-.012em;color:#fff;
}
.pface--back p{
  font-size:13.6px;line-height:1.62;font-weight:300;
  color:rgba(255,255,255,.8);
}

/* divisor fino, como en la referencia */
.divider{display:block;height:1px;background:#E7EDF4;margin:14px 0 12px}
.divider--on{background:rgba(255,255,255,.22);margin:13px 0 11px}

/* pie de la cara frontal */
.pcard__hint{
  margin-top:auto;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:12.5px;font-weight:600;
  color:var(--blue-500);
}
.pcard__hint i{
  width:22px;height:22px;border-radius:50%;background:#EAF4FA;
  display:inline-block;position:relative;transition:background .3s ease,transform .3s ease;
}
.pcard__hint i::before,.pcard__hint i::after{
  content:'';position:absolute;background:var(--blue-500);border-radius:1px;
}
.pcard__hint i::before{left:6px;right:6px;top:10.2px;height:1.6px}
.pcard__hint i::after{right:6.5px;top:7px;width:1.6px;height:1.6px;box-shadow:1.6px 1.6px 0 var(--blue-500), 0 3.2px 0 var(--blue-500)}
.pcard:hover .pcard__hint i{background:var(--blue-500);transform:translateX(3px)}
.pcard:hover .pcard__hint i::before,.pcard:hover .pcard__hint i::after{background:#fff}
.pcard:hover .pcard__hint i::after{box-shadow:1.6px 1.6px 0 #fff, 0 3.2px 0 #fff}

/* marca de agua, como las ilustraciones tenues de la referencia */
.pcard__wm{
  position:absolute;right:-14px;bottom:-18px;
  width:130px;height:130px;pointer-events:none;
}
.pcard__wm svg{
  width:100%;height:100%;fill:none;stroke:var(--orange-500);
  stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;opacity:.09;
}
.pface--back .pcard__wm svg{stroke:#fff;opacity:.10}

/* ---------- cierre ---------- */
.pclose{
  margin-top:clamp(44px,5.5vh,64px);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(24px,3vw,52px);flex-wrap:wrap;
  background:#fff;border:1px solid #E7EDF4;border-radius:20px;
  padding:clamp(28px,3vw,42px) clamp(26px,3.4vw,52px);
  box-shadow:0 14px 38px rgba(16,40,70,.06);
  position:relative;overflow:hidden;
}
.pclose::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(var(--orange-500),var(--blue-500));
}
.pclose__txt{
  font-family:var(--display);font-weight:600;
  font-size:clamp(18px,1.75vw,26px);line-height:1.42;
  letter-spacing:-.015em;color:var(--ink);
}
.pclose__txt .hl{color:var(--orange-500)}

/* ---------- entrada ---------- */
.reveal{opacity:0;transform:translateY(26px)}
.reveal.in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .pcard{min-height:234px}
}
@media (max-width:680px){
  .pgrid{grid-template-columns:1fr}
  .pcard{min-height:216px}
  .pclose{flex-direction:column;align-items:flex-start;text-align:left}
  .pclose .btn{width:100%;justify-content:center}
  .shead__sub b{display:inline}
}
@media (prefers-reduced-motion:reduce){
  .pcard__inner{transition:none}
}


/* ============================================================
   SECCIÓN 3 · MÉTODO SAEF® — fondo azul oscuro
   Línea de tiempo horizontal con avance + franja de comprobación
   ============================================================ */
.metodo{
  position:relative;overflow:hidden;color:#fff;
  padding:clamp(76px,10vh,126px) clamp(20px,4vw,64px) clamp(76px,10vh,120px);
  background:linear-gradient(165deg,#0E2440 0%,#0B1E36 48%,#08192E 100%);
}
.metodo__bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 520px at 82% 8%, rgba(0,132,180,.26) 0%, transparent 62%),
    radial-gradient(760px 480px at 6% 92%, rgba(240,122,45,.14) 0%, transparent 62%);
}
.metodo__grid{
  position:absolute;inset:0;pointer-events:none;opacity:.11;
  background-image:linear-gradient(rgba(79,195,232,.35) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(79,195,232,.35) 1px,transparent 1px);
  background-size:78px 78px;
  mask-image:radial-gradient(900px 640px at 50% 12%, #000 0%, transparent 74%);
  -webkit-mask-image:radial-gradient(900px 640px at 50% 12%, #000 0%, transparent 74%);
}
.metodo__inner{position:relative;z-index:2;max-width:1280px;margin:0 auto}

/* ---------------- encabezado a la izquierda, recorrido a la derecha ---------------- */
.met__grid{
  display:grid;grid-template-columns:.8fr 1.2fr;
  gap:clamp(28px,4vw,68px);align-items:center;
}
.met__lead{text-align:left}
.met__lead .shead__eyebrow{display:block;text-align:left;margin-bottom:16px}
.met__title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(27px,3.3vw,46px);line-height:1.1;letter-spacing:-.028em;
  color:#fff;margin-bottom:18px;
}
.met__title .hl{color:var(--orange-500)}
.met__title sup{font-size:.34em;vertical-align:.95em;margin-left:2px;opacity:.7}
.met__sub{
  font-size:clamp(14.5px,1.08vw,16.5px);line-height:1.74;font-weight:300;
  color:rgba(255,255,255,.72);max-width:420px;
}
.met__mark{
  margin-top:26px;padding-left:16px;border-left:3px solid var(--orange-500);
  font-family:var(--display);font-size:13.5px;font-weight:600;color:#fff;line-height:1.5;
}
.met__mark span{display:block;font-family:var(--sans);font-weight:300;font-size:12.5px;color:rgba(255,255,255,.6);margin-top:4px}

/* ---------------- línea de tiempo ---------------- */
.tl{position:relative;margin-bottom:clamp(24px,3.2vh,38px)}
.tl__rail{
  position:absolute;z-index:1;left:12.5%;right:12.5%;top:30px;height:3px;
  background:rgba(255,255,255,.14);border-radius:3px;
}
.tl__fill{
  position:absolute;left:0;top:0;height:100%;width:var(--p,0%);
  background:linear-gradient(90deg,var(--orange-600),var(--orange-400));
  border-radius:3px;box-shadow:0 0 16px rgba(240,122,45,.75);
  transition:width .7s cubic-bezier(.4,0,.2,1);
}
.tl__spark{
  position:absolute;right:-5px;top:50%;transform:translateY(-50%);
  width:11px;height:11px;border-radius:50%;background:#FFD9B8;
  box-shadow:0 0 14px 4px rgba(255,154,77,.85);
  animation:chispa 1.8s ease-in-out infinite;
}
@keyframes chispa{0%,100%{transform:translateY(-50%) scale(1);opacity:1}50%{transform:translateY(-50%) scale(1.35);opacity:.75}}

.tl__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;position:relative;z-index:2}
.tl__step{
  background:none;border:0;cursor:pointer;padding:0 4px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  font-family:var(--display);color:inherit;
}
.tl__dot{
  position:relative;width:62px;height:62px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  background:#0B2038;border:2px solid rgba(255,255,255,.16);isolation:isolate;
  font-size:16px;font-weight:700;letter-spacing:.02em;color:rgba(255,255,255,.5);
  transition:all .5s cubic-bezier(.34,1.4,.5,1);
}
.tl__step:hover .tl__dot{border-color:rgba(255,255,255,.45);color:#fff;transform:translateY(-2px)}
.tl__num{transition:opacity .3s ease}
.tl__ck{
  position:absolute;width:24px;height:24px;opacity:0;transition:opacity .3s ease;
  fill:none;stroke:var(--orange-400);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
}
.tl__step.is-done .tl__dot{border-color:rgba(240,122,45,.55);background:#122A44}
.tl__step.is-done .tl__num{opacity:0}
.tl__step.is-done .tl__ck{opacity:1}
.tl__step.is-active .tl__dot{
  background:linear-gradient(140deg,var(--orange-400),var(--orange-600));
  border-color:transparent;color:#fff;transform:scale(1.14);
  box-shadow:0 0 0 8px rgba(240,122,45,.13), 0 0 0 16px rgba(240,122,45,.06), 0 14px 30px rgba(222,106,30,.5);
}
/* aro que late en el paso activo */
.tl__step.is-active .tl__dot::after{
  content:'';position:absolute;inset:-2px;border-radius:50%;
  border:2px solid rgba(240,122,45,.65);
  animation:latido 2.4s ease-out infinite;
}
@keyframes latido{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.85);opacity:0}}
.tl__name{
  display:block;font-size:clamp(13px,1.05vw,16px);font-weight:600;
  letter-spacing:-.012em;color:rgba(255,255,255,.55);transition:color .35s ease;
}
.tl__step.is-active .tl__name{color:#fff}
.tl__step.is-done .tl__name{color:rgba(255,255,255,.75)}

/* ---------------- panel de detalle ---------------- */
.tlp{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(22px,3vw,48px);
  background:#fff;color:var(--ink);
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  padding:clamp(26px,3vw,44px);
  box-shadow:0 26px 60px rgba(4,14,28,.34);
}
.tlp.is-swapping .tlp__body,.tlp.is-swapping .tlp__side{opacity:0;transform:translateY(10px)}
.tlp__body,.tlp__side{transition:opacity .32s ease, transform .32s ease}
.tlp__tag{
  display:inline-block;font-family:var(--display);font-size:11.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--orange-600);margin-bottom:14px;
}
.tlp__tag b{font-weight:700}
.tlp h3{
  font-family:var(--display);font-weight:600;
  font-size:clamp(20px,2.05vw,30px);line-height:1.26;letter-spacing:-.02em;
  margin-bottom:16px;
}
.tlp p{font-size:clamp(14.5px,1.08vw,16.5px);line-height:1.75;font-weight:300;color:#56697D}
.tlp__side{border-left:1px solid #E7EDF4;padding-left:clamp(20px,2.4vw,38px)}
.tlp__sidetag{
  display:block;font-family:var(--display);font-size:11.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--blue-500);margin-bottom:16px;
}
.tlp__list{list-style:none}
.tlp__list li{
  position:relative;padding-left:26px;margin-bottom:13px;
  font-size:14px;line-height:1.6;font-weight:400;color:#3F5468;
}
.tlp__list li::before{
  content:'';position:absolute;left:0;top:7px;
  width:7px;height:7px;border-radius:50%;
  background:var(--orange-500);box-shadow:0 0 0 4px rgba(240,122,45,.14);
}

/* ---------------- franja de comprobación (rediseño visual) ---------------- */
.check{
  margin-top:clamp(48px,6vh,78px);
  display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(28px,4vw,60px);
  align-items:center;
  border-radius:22px;padding:clamp(30px,3.4vw,48px);
  background:linear-gradient(140deg, rgba(240,122,45,.14) 0%, rgba(240,122,45,.03) 42%, rgba(0,132,180,.09) 100%);
  border:1px solid rgba(240,122,45,.24);
  position:relative;overflow:hidden;
}
.check::before{
  content:'';position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle, rgba(240,122,45,.18) 0%, transparent 68%);
}
.check__head{position:relative;z-index:2}
.check__badge{
  display:inline-block;font-family:var(--display);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:linear-gradient(135deg,var(--orange-500),var(--orange-600));
  padding:7px 14px;border-radius:100px;margin-bottom:18px;
}
.check__head h3{
  font-family:var(--display);font-weight:700;
  font-size:clamp(21px,2.3vw,34px);line-height:1.18;letter-spacing:-.024em;margin-bottom:14px;
}
.check__head h3 .hl{color:var(--orange-500)}
.check__head p{font-size:clamp(14px,1.05vw,16px);line-height:1.7;font-weight:300;color:rgba(255,255,255,.72)}

/* tres validaciones restantes: solo etiqueta, sin párrafo */
.check__mini{list-style:none;margin-top:24px;display:grid;gap:11px}
.check__mini li{
  display:flex;align-items:center;gap:11px;
  font-size:13.8px;font-weight:400;color:rgba(255,255,255,.8);line-height:1.4;
}
.check__ico{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:rgba(240,122,45,.18);border:1px solid rgba(240,122,45,.42);
  display:grid;place-items:center;
}
.check__ico svg{width:11px;height:11px;fill:none;stroke:var(--orange-400);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* ---------- diagrama ---------- */
.diag{
  position:relative;z-index:2;
  background:rgba(6,20,38,.42);
  border:1px solid rgba(255,255,255,.11);
  border-radius:18px;
  padding:clamp(20px,2.2vw,30px);
  backdrop-filter:blur(8px);
}
.diag__lbl{
  display:block;text-align:center;font-family:var(--display);
  font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin-bottom:20px;
}
.diag__mods{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(6px,.8vw,12px)}
.mod{
  appearance:none;font:inherit;color:inherit;cursor:pointer;
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:15px 8px 13px;border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  transition:background .45s ease, border-color .45s ease, transform .45s cubic-bezier(.34,1.4,.5,1);
  transition-delay:calc(var(--i) * .12s);
}
.mod img{
  width:clamp(30px,3vw,40px);height:auto;display:block;
  filter:grayscale(1) opacity(.42);
  transition:filter .5s ease, transform .5s cubic-bezier(.34,1.5,.5,1);
  transition-delay:calc(var(--i) * .12s);
}
.mod b{
  font-family:var(--display);font-size:clamp(10.5px,.85vw,12.5px);font-weight:600;
  line-height:1.25;text-align:center;color:rgba(255,255,255,.5);letter-spacing:-.01em;
  transition:color .45s ease;transition-delay:calc(var(--i) * .12s);
}
/* palomita que aparece al validarse el módulo */
.mod__ck{
  position:absolute;top:7px;right:7px;
  width:17px;height:17px;border-radius:50%;
  background:var(--orange-500);display:grid;place-items:center;
  opacity:0;transform:scale(.4);
  transition:opacity .35s ease, transform .45s cubic-bezier(.34,1.7,.5,1);
  transition-delay:calc(var(--i) * .12s + .18s);
}
.mod__ck svg{width:9px;height:9px;fill:none;stroke:#fff;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.diag.on .mod{background:rgba(240,122,45,.08);border-color:rgba(240,122,45,.32);transform:translateY(-3px)}
.diag.on .mod img{filter:none;transform:scale(1.06)}
.diag.on .mod b{color:#fff}
.diag.on .mod__ck{opacity:1;transform:scale(1)}
.mod:hover{transform:translateY(-6px);border-color:rgba(240,122,45,.6)}
.mod.is-sel{
  background:rgba(240,122,45,.16);border-color:var(--orange-500);
  transform:translateY(-6px);
  box-shadow:0 0 0 3px rgba(240,122,45,.16), 0 16px 34px rgba(222,106,30,.28);
}
.mod.is-sel img{filter:none;transform:scale(1.12)}
.mod.is-sel b{color:#fff}

/* renglón de detalle */
.diag__detail{
  margin:16px 0 0;min-height:38px;
  font-size:13.2px;line-height:1.55;font-weight:300;color:rgba(255,255,255,.62);
  text-align:center;transition:opacity .28s ease;
}
.diag__detail.is-swap{opacity:0}
.diag__detail span{color:var(--orange-400);font-weight:600}

/* recorrido elegido: el trazo sólo se aclara, sin parpadear.
   El movimiento lo lleva un único punto que recorre la ruta. */
.ln.is-hot{background:rgba(255,175,110,.9);box-shadow:0 0 8px rgba(255,154,77,.5)}
.mod:hover img{transform:scale(1.14)}

/* líneas que convergen — divs, no SVG: evita que el escalado no uniforme
   deforme el grosor del trazo y descuadre los guiones */
.diag__flow{height:76px;margin:2px 0;position:relative}
.ln{position:absolute;background:rgba(240,122,45,.55);border-radius:2px}
.ln--drop{
  left:var(--x);top:0;width:2px;height:30px;margin-left:-1px;
  transform:scaleY(0);transform-origin:top;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
  transition-delay:calc(1s + var(--i) * .12s);
}
.ln--bus{
  left:8.333%;right:8.333%;top:29px;height:2px;
  transform:scaleX(0);transform-origin:center;
  transition:transform .55s cubic-bezier(.4,0,.2,1);transition-delay:1.42s;
}
.ln--trunk{
  left:50%;top:29px;width:2px;height:47px;margin-left:-1px;
  background:var(--orange-500);
  transform:scaleY(0);transform-origin:top;
  transition:transform .45s cubic-bezier(.4,0,.2,1);transition-delay:1.95s;
}
.diag.on .ln--drop,.diag.on .ln--trunk{transform:scaleY(1)}
.diag.on .ln--bus{transform:scaleX(1)}

/* nodo de unión */
.diag__node{
  position:absolute;left:50%;top:30px;width:11px;height:11px;border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  background:var(--orange-500);
  box-shadow:0 0 0 5px rgba(240,122,45,.16), 0 0 16px rgba(240,122,45,.65);
  transition:transform .5s cubic-bezier(.34,1.7,.5,1);transition-delay:1.78s;
}
.diag.on .diag__node{transform:translate(-50%,-50%) scale(1)}

/* punto viajero: recorre bajada, bus y tronco hasta Contabilidad */
.diag__pulse{
  position:absolute;left:0;top:0;width:9px;height:9px;border-radius:50%;
  margin:-4.5px 0 0 -4.5px;
  background:#FFD9B8;box-shadow:0 0 12px 3px rgba(255,154,77,.8);
  opacity:0;transition:opacity .35s ease;
  will-change:transform;
}
.diag.on .diag__pulse{opacity:1}

/* destino */
.diag__destico{width:26px;height:auto;display:block;flex-shrink:0}
.diag__dest{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:17px 22px;border-radius:13px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.13);
  transition:all .6s cubic-bezier(.4,0,.2,1);transition-delay:1.9s;
}
.diag.on .diag__dest{
  background:linear-gradient(120deg, rgba(240,122,45,.18), rgba(0,132,180,.14));
  border-color:rgba(240,122,45,.5);
  box-shadow:0 12px 34px rgba(222,106,30,.22);
}
.diag__destname{
  font-family:var(--display);font-size:clamp(15px,1.35vw,18.5px);font-weight:700;
  letter-spacing:-.012em;color:#fff;
}
.diag__badge{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--display);font-size:11.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  color:#fff;background:linear-gradient(135deg,var(--orange-500),var(--orange-600));
  padding:6px 13px;border-radius:100px;
  opacity:0;transform:scale(.8);
  transition:opacity .5s ease, transform .5s cubic-bezier(.34,1.6,.5,1);transition-delay:2.15s;
}
.diag.on .diag__badge{opacity:1;transform:scale(1)}
.diag__badge svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:1040px){
  .check{grid-template-columns:1fr}
}
@media (max-width:520px){
  .diag__mods{grid-template-columns:repeat(2,1fr)}
  .diag__destico{width:22px}
  /* con 2 columnas, las bajadas se alinean a 25% y 75% */
  .ln--drop:nth-child(2),.ln--drop:nth-child(5){display:none}
  .ln--bus{left:8.33%;right:8.33%}
  .diag__flow{height:58px}
  .mod{font-size:12px;padding:11px}
}

/* ---------------- franja de cursos ---------------- */
.courses{
  margin-top:clamp(30px,3.6vh,44px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3.4vw,54px);
  align-items:center;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;padding:clamp(26px,3vw,40px);
}
.courses__tag{
  display:inline-block;font-family:var(--display);font-size:11px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--cyan-300);
  border:1px solid rgba(79,195,232,.35);border-radius:100px;padding:5px 13px;margin-bottom:14px;
}
.courses h3{
  font-family:var(--display);font-weight:600;
  font-size:clamp(18px,1.65vw,24px);line-height:1.28;letter-spacing:-.018em;margin-bottom:11px;
}
.courses p{font-size:14px;line-height:1.7;font-weight:300;color:rgba(255,255,255,.68)}
.courses__form{display:flex;gap:12px;flex-wrap:wrap}
.courses__form input{
  flex:1 1 200px;min-width:0;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  border-radius:100px;padding:16px 22px;
  color:#fff;font-family:var(--sans);font-size:14.5px;
  transition:border-color .25s ease, background .25s ease;
}
.courses__form input::placeholder{color:rgba(255,255,255,.4)}
.courses__form input:focus{outline:none;border-color:var(--cyan-300);background:rgba(255,255,255,.1)}
.courses__form .btn{flex:0 0 auto}

/* ---------------- responsive ---------------- */
@media (max-width:1040px){
  .met__grid{grid-template-columns:1fr;gap:30px}
  .met__sub{max-width:none}
  .diag__mods{grid-template-columns:repeat(3,1fr)}
  .tlp{grid-template-columns:1fr;gap:24px}
  .tlp__side{border-left:0;border-top:1px solid #E7EDF4;padding-left:0;padding-top:24px}
  .check{grid-template-columns:1fr}
  .courses{grid-template-columns:1fr}
}
@media (max-width:860px){
  /* la línea de tiempo se vuelve vertical */
  .tl__steps{grid-template-columns:1fr;gap:0}
  .tl__step{flex-direction:row;align-items:center;text-align:left;gap:16px;padding:11px 0}
  .tl__dot{width:46px;height:46px;font-size:13.5px}
  .tl__rail{left:22px;right:auto;top:14px;bottom:14px;width:2px;height:auto}
  .tl__fill{width:100%;height:var(--p,0%);transition:height .65s cubic-bezier(.4,0,.2,1)}
  .tl__hint{margin-top:3px}
}
@media (max-width:560px){
  .courses__form{flex-direction:column}
  .courses__form .btn{width:100%;justify-content:center}
}


/* ============================================================
   SECCIÓN 4 · CONFIANZA — fondo claro, composición a la izquierda
   ============================================================ */
.conf{
  position:relative;overflow:hidden;color:var(--ink);background:#FFFFFF;
  padding:0 clamp(20px,4vw,64px) 0;
}
.conf__wavebar{
  position:relative;height:clamp(112px,15.5vh,178px);
  margin:0 calc(-1 * clamp(20px,4vw,64px)) clamp(30px,4vh,52px);
  background:#08192E;
}
.conf__wavebar .waves{bottom:0}
.conf__bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(880px 420px at 100% 30%, #EEF4F9 0%, rgba(238,244,249,0) 62%),
    radial-gradient(820px 460px at -6% 82%, #FDF3EA 0%, rgba(253,243,234,0) 64%);
}
.conf__inner{position:relative;z-index:2;max-width:1280px;margin:0 auto}

/* ---------- retícula única: el texto y el engranaje comparten la columna
   izquierda mientras la foto ocupa la derecha a lo alto. Así no queda hueco
   muerto debajo del titular y la sección se lee como una sola pieza. ---------- */
.conf__grid{
  display:grid;
  grid-template-columns:.86fr 1.14fr;
  column-gap:clamp(28px,3.6vw,58px);
  row-gap:clamp(14px,2.4vh,30px);
  align-items:start;
}
.conf__media{grid-column:1;grid-row:1 / span 2;align-self:center}
.conf__lead{grid-column:2;grid-row:1}
.valores{grid-column:2;grid-row:2}
.conf__lead{text-align:right}
.conf__lead .shead__eyebrow{text-align:right;margin-bottom:16px}
.conf__title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(26px,3.2vw,45px);line-height:1.11;letter-spacing:-.028em;
  color:var(--ink);margin-bottom:20px;
}
.conf__title .hl{color:var(--blue-500)}
.conf__sub{
  font-size:clamp(15px,1.1vw,17px);line-height:1.72;font-weight:300;
  color:#56697D;max-width:480px;margin-left:auto;
}

/* ---------- foto + ficha ---------- */
.conf__media{position:relative}
.conf__media{position:relative}
.conf__media::before{            /* sombra difusa: refuerza la sensación de levitación */
  content:'';position:absolute;left:8%;right:8%;top:58%;height:120px;z-index:0;
  background:radial-gradient(ellipse at center, rgba(16,40,70,.24) 0%, rgba(16,40,70,0) 72%);
  filter:blur(18px);
  animation:sombra 7s ease-in-out infinite;
}
.foto{
  position:relative;z-index:1;border-radius:22px;
  box-shadow:0 34px 70px rgba(16,40,70,.26), 0 8px 20px rgba(16,40,70,.1);
  animation:flotar 7s ease-in-out infinite;
}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes sombra{0%,100%{opacity:.85;transform:scaleX(1)}50%{opacity:.5;transform:scaleX(.92)}}
.foto img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover;border-radius:22px}
.foto::after{
  content:'';position:absolute;inset:0;border-radius:22px;
  background:linear-gradient(200deg, rgba(8,25,46,0) 42%, rgba(8,25,46,.55) 100%);
}
.foto__badge{
  position:absolute;top:-20px;right:22px;z-index:4;
  display:flex;align-items:center;gap:11px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-radius:100px;padding:9px 18px 9px 9px;
  box-shadow:0 12px 30px rgba(16,40,70,.22);
}
.foto__ico{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--orange-400),var(--orange-600));
}
.foto__ico svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.foto__tx b{display:block;font-family:var(--display);font-size:13px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.foto__tx small{display:block;font-size:10.5px;color:#7A8B9D;margin-top:1px}

.ficha{
  position:relative;z-index:3;
  animation:flotar 7s ease-in-out infinite;animation-delay:-1.4s;
  width:min(94%,520px);margin:-58px auto 0 0;
  background:linear-gradient(155deg,#0E2440 0%,#143054 60%,#1C4272 100%);
  color:#fff;border-radius:18px;padding:clamp(20px,2.2vw,28px);
  box-shadow:0 24px 54px rgba(14,36,64,.34);overflow:hidden;
}
.ficha::before{
  content:'';position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle, rgba(0,132,180,.35) 0%, transparent 68%);
}
.ficha__top{display:flex;gap:15px;align-items:center;margin-bottom:16px;position:relative;z-index:2}
.ficha__avatar{
  width:54px;height:54px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--cyan-300),var(--blue-500) 55%,var(--navy-700));
  font-family:var(--display);font-size:18px;font-weight:700;color:#fff;
  box-shadow:0 8px 20px rgba(0,132,180,.36);
}
.ficha__rol{
  display:block;font-family:var(--display);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange-400);margin-bottom:4px;
}
.ficha h3{font-family:var(--display);font-weight:600;font-size:clamp(15px,1.25vw,17.5px);line-height:1.26;margin-bottom:4px}
.ficha__ced{font-size:12px;color:rgba(255,255,255,.62)}
.ficha__ced b{color:#fff;font-weight:600}
.ficha blockquote{
  position:relative;z-index:2;font-size:13.5px;line-height:1.68;font-weight:300;
  color:rgba(255,255,255,.84);font-style:italic;padding-left:16px;border-left:2px solid var(--orange-500);
}

/* ---------- etiquetas de bloque ---------- */
.blk__lbl{
  display:block;font-family:var(--display);font-size:10.5px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:#93A3B5;margin-bottom:16px;text-align:right;
}
.blk__head{display:flex;align-items:center;justify-content:flex-end;gap:13px;margin-bottom:4px}
.blk__head .blk__lbl{margin-bottom:0}
.val__hint{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;color:#AFBDCA;opacity:0;transform:translateX(-6px);
  transition:opacity .4s ease, transform .4s ease;
}
.valores:hover .val__hint{opacity:1;transform:none}
.val__hint svg{width:12px;height:12px;fill:none;stroke:var(--orange-500);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- engranaje real ----------
   Fila horizontal: distancia entre centros = 0.925 × tamaño (2 × radio primitivo).
   El de en medio gira al revés con medio diente de desfase; así encajan siempre. */
.gears{position:relative;padding:2px 0 0}
.gearwrap{
  --S:clamp(96px,12.2vw,196px);
  position:relative;
  width:calc(var(--S) * 2.85);
  /* los engranes van posicionados en absoluto: el relleno superior les reserva
     su altura para que los cuadros fluyan debajo sin encimarse */
  height:auto;padding-top:var(--S);
  margin:0 auto;
}
.gear{
  position:absolute;top:0;width:var(--S);height:var(--S);
  cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;
}
.gear:active{cursor:grabbing}
.gear--1{left:0;z-index:3}
.gear--2{left:calc(var(--S) * .925);z-index:2}
.gear--3{left:calc(var(--S) * 1.85);z-index:3}
.gear svg{
  width:100%;height:100%;display:block;pointer-events:none;
  filter:drop-shadow(0 12px 24px rgba(27,157,217,.3));
}
.gear__l{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  font-family:var(--display);font-weight:700;
  font-size:calc(var(--S) * .26);letter-spacing:-.02em;color:var(--ink);
}

/* cuadros: una fila debajo, alineada con el ancho del engranaje */
.vcards{
  width:100%;margin:clamp(16px,2.2vh,26px) auto 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(9px,1vw,14px);
}
.vcard{
  position:relative;
  background:#fff;border:1px solid #E7EDF4;border-radius:14px;
  padding:13px 15px;box-shadow:0 10px 26px rgba(16,40,70,.09);
  animation:floatcard 6s ease-in-out infinite;
}
.vcard--1{animation-delay:0s}
.vcard--2{animation-delay:-2s}
.vcard--3{animation-delay:-4s}
/* rayita que lo ata con su engrane */
.vcard::before{
  content:'';position:absolute;left:50%;top:calc(-1 * clamp(16px,2.2vh,26px));
  width:1px;height:clamp(16px,2.2vh,26px);
  background:repeating-linear-gradient(180deg,#CBD8E4 0 3px,transparent 3px 6px);
}
@keyframes floatcard{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.vcard b{
  display:block;font-family:var(--display);font-size:clamp(12.5px,1.02vw,14.5px);font-weight:600;
  line-height:1.25;letter-spacing:-.012em;color:var(--ink);margin-bottom:5px;
}
/* inicial en degradado azul */
.vcard b em{
  font-style:normal;font-size:1.3em;font-weight:700;
  background:linear-gradient(145deg,#4FC3E8 0%,#1B9DD9 48%,#2B4B78 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.vcard span{display:block;font-size:clamp(11px,.92vw,12.4px);line-height:1.48;font-weight:300;color:#67788B}

/* ---------- clientes: banda de piso que cierra la sección ---------- */
.clientes{
  position:relative;
  margin-top:clamp(22px,3.4vh,42px);
  /* la etiqueta ocupa la franja superior: se compensa abajo para que la fila
     de logos quede ópticamente centrada en la banda, no pegada al borde */
  padding:clamp(24px,3.2vh,36px) 0 clamp(26px,3.4vh,40px);
}
.clientes::before{
  content:'';position:absolute;z-index:-1;top:0;bottom:0;
  left:50%;transform:translateX(-50%);width:100vw;
  background:linear-gradient(180deg,#F8FAFD 0%,#FFFFFF 100%);
  border-top:1px solid #EAF0F6;
}

.mq{
  position:relative;
  margin:0 calc(-1 * clamp(20px,4vw,64px));
  padding:2px 0;
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.mq__row{
  overflow:hidden;
  /* el relleno deja aire para que el logo crezca sin que el recorte lo corte;
     el margen negativo evita que ese relleno altere la altura de la banda */
  padding:14px 0;margin:-14px 0;
}
.mq__track{display:flex;align-items:center;gap:0;width:max-content;animation:marq 52s linear infinite}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq__row:hover .mq__track{animation-play-state:paused}

/* logo suelto sobre la banda: sin recuadro, sólo aire alrededor.
   La altura fija iguala el peso óptico de marcas de formas muy distintas. */
.cli{
  display:grid;place-items:center;flex-shrink:0;
  height:74px;padding:0 clamp(24px,2.9vw,46px);
}
.cli img{
  display:block;width:auto;height:auto;max-width:168px;max-height:60px;
  /* en reposo van apagados para que la fila se lea como una sola pieza;
     al pasar el cursor recuperan su color */
  filter:grayscale(1) contrast(1.14) brightness(.86) opacity(.72);
  transition:filter .34s ease, transform .34s cubic-bezier(.34,1.4,.5,1);
}
.cli:hover img{filter:none;transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){
  .mq__track{animation:none}
  .cli img{filter:none;transform:none}
}
@media (max-width:560px){
  .cli{height:62px;padding:0 22px}
  .cli img{max-width:132px;max-height:50px}
}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .conf__grid{grid-template-columns:1fr;row-gap:30px}
  .conf__lead,.conf__media,.valores{grid-column:1}
  .conf__lead{text-align:left}
  .conf__lead .shead__eyebrow{text-align:left}
  .conf__sub{margin-left:0}
  .blk__lbl{text-align:left}
  .blk__head{justify-content:flex-start}
  .conf__lead{grid-row:auto}.conf__media{grid-row:auto}.valores{grid-row:auto}
  .ficha{width:min(96%,560px)}
}
@media (max-width:900px){
  /* el engranaje mantiene la fila, sólo se achica; los cuadros pasan a columna */
  .gears{padding:14px 0 0}
  .gearwrap{--S:min(25vw,124px);width:calc(var(--S) * 2.85);height:auto;margin:0 auto;padding-top:var(--S)}
  .gear--1{left:0}
  .gear--2{left:calc(var(--S) * .925)}
  .gear--3{left:calc(var(--S) * 1.85)}
  .vcards{width:100%;grid-template-columns:1fr;gap:10px}
  .vcard{animation:none}
  .vcard::before{display:none}
}
@media (max-width:560px){
  .foto__badge{top:-16px;right:14px;padding:7px 14px 7px 7px}
  .foto__tx b{font-size:12px}
  .ficha{margin-top:-42px}
  .pill__tx b{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .mq__track,.vcard,.foto,.ficha,.conf__media::before{animation:none}
}



/* ============================================================
   SECCIÓN 5 · BLOG — fondo claro, carrusel de artículos
   Tres tarjetas visibles: la del centro derecha, las orillas inclinadas.
   ============================================================ */
/* la sección se comporta como una hoja apoyada sobre la anterior,
   con la esquina superior izquierda doblada hacia adentro */
.blog{
  --dobl:clamp(58px,7.4vw,116px);
  position:relative;color:var(--ink);background:#F5F8FB;
  padding:clamp(48px,6vh,84px) 0 clamp(60px,7.5vh,96px);
  margin-top:clamp(10px,1.6vh,22px);
  clip-path:polygon(0 var(--dobl), var(--dobl) 0, 100% 0, 100% 100%, 0 100%);
  box-shadow:0 -14px 34px rgba(16,40,70,.07);
}
/* la solapa: el mismo papel visto por el reverso */
.blog::before{
  content:'';position:absolute;top:0;left:0;z-index:3;
  width:var(--dobl);height:var(--dobl);
  background:linear-gradient(135deg,#FFFFFF 0%,#E4EBF3 46%,#CFDBE7 100%);
  clip-path:polygon(100% 0, 0 100%, 100% 100%);
  filter:drop-shadow(-3px -3px 7px rgba(16,40,70,.16));
}
/* sombra suave a lo largo del pliegue */
.blog::after{
  content:'';position:absolute;top:0;left:0;z-index:2;pointer-events:none;
  width:calc(var(--dobl) * 1.5);height:calc(var(--dobl) * 1.5);
  background:linear-gradient(135deg, rgba(16,40,70,.13) 0%, rgba(16,40,70,0) 42%);
}
.blog__bg{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(900px 420px at 8% 0%, #FFFFFF 0%, rgba(255,255,255,0) 62%),
    radial-gradient(820px 460px at 96% 100%, #FDF3EA 0%, rgba(253,243,234,0) 64%);
}
.blog__inner{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,64px)}
.blog__head{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(20px,3vw,48px);flex-wrap:wrap;margin-bottom:clamp(30px,4.5vh,52px)}
.blog__ttl .shead__eyebrow{display:block;text-align:left;margin-bottom:14px}
.blog__ttl h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.2vw,45px);line-height:1.1;letter-spacing:-.028em;color:var(--ink)}
.blog__ttl h2 .hl{color:var(--blue-500)}

.blog__carrusel{
  position:relative;z-index:2;
  --gut:calc(max(0px, (100vw - 1280px) / 2) + clamp(20px,4vw,64px));
  --gap:clamp(14px,1.6vw,22px);
  --ancho:calc((min(100vw, 1280px) - 2 * clamp(20px,4vw,64px) - 2 * var(--gap)) / 3);
}
.blog__pista{
  display:flex;gap:var(--gap);
  overflow-x:auto;overscroll-behavior-x:contain;
  padding:26px var(--gut) 34px;
  scrollbar-width:none;-ms-overflow-style:none;
  scroll-behavior:smooth;
}
.blog__pista::-webkit-scrollbar{display:none}

.blog__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:52px;height:52px;border-radius:50%;
  background:#fff;border:1px solid #E4EBF2;color:var(--ink);
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 12px 30px rgba(16,40,70,.14);
  transition:transform .3s cubic-bezier(.34,1.4,.5,1), background .3s ease, color .3s ease, opacity .3s ease;
}
.blog__nav svg{width:18px;height:13px}
.blog__nav:hover{background:var(--orange-500);border-color:var(--orange-500);color:#fff;transform:translateY(-50%) scale(1.08)}
.blog__nav[disabled]{opacity:.3;pointer-events:none}
.blog__nav--prev{left:max(8px, calc(var(--gut) - 64px))}
.blog__nav--next{right:max(8px, calc(var(--gut) - 64px))}

.post{
  position:relative;overflow:hidden;flex:0 0 auto;
  width:max(266px, var(--ancho));
  background:#fff;border:1px solid #E7EDF4;border-radius:20px;
  display:flex;flex-direction:column;cursor:pointer;
  transform-origin:center 62%;
  transform:translateY(var(--lift,0px)) rotate(var(--rot,0deg)) scale(var(--sc,1));
  box-shadow:0 12px 30px rgba(16,40,70,.1);
  transition:transform .55s cubic-bezier(.32,.9,.3,1), box-shadow .45s ease, border-color .34s ease, opacity .5s ease;
}
.post:hover{--lift:-8px;border-color:transparent;box-shadow:0 26px 52px rgba(16,40,70,.16)}

/* espacio de la foto: se carga desde el panel */
.post__img{
  position:relative;overflow:hidden;border-radius:20px 20px 0 0;aspect-ratio:16/10;
  background:color-mix(in srgb, var(--c) 7%, #F7F9FC);border-bottom:1px solid #E7EDF4;
}
.ph{
  position:absolute;inset:12px;border-radius:12px;
  border:1.5px dashed color-mix(in srgb, var(--c) 42%, #D8E1EA);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  font-family:var(--display);font-size:11.5px;font-weight:500;
  color:color-mix(in srgb, var(--c) 62%, #8496A8);
  transition:border-color .35s ease, background .35s ease;
}
.ph svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.post:hover .ph{border-color:var(--c);background:color-mix(in srgb, var(--c) 6%, transparent)}
.post__flag{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#fff;background:rgba(8,25,46,.78);backdrop-filter:blur(6px);padding:6px 12px;border-radius:100px;
}

.post__body{display:flex;flex-direction:column;flex:1;padding:20px clamp(20px,1.7vw,24px) clamp(18px,1.5vw,22px)}
.post__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.post__cat{font-family:var(--display);font-size:11.5px;font-weight:600;color:var(--c)}
.post__fecha{font-size:11.5px;color:#93A3B5;white-space:nowrap}
.post h3{font-family:var(--display);font-weight:600;font-size:clamp(15.5px,1.24vw,18px);line-height:1.32;letter-spacing:-.015em;color:var(--ink)}
.post__res{font-size:13.2px;line-height:1.6;font-weight:300;color:#67788B;margin-top:9px}
.post__go{
  margin-top:auto;align-self:flex-end;
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:#F2F6FA;color:var(--ink);display:grid;place-items:center;
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.post:hover .post__go{background:var(--c);color:#fff;transform:translateX(3px)}

@media (max-width:620px){
  .blog__head{flex-direction:column;align-items:flex-start;gap:20px}
  .blog__head .btn{width:100%;justify-content:center}
  .blog__nav{display:none}
  .post{width:min(78vw,300px)}
}


/* ============================================================
   CIERRE · CTA + FOOTER — azul oscuro, entra con el swoosh
   ============================================================ */
.pie{position:relative;color:#fff;background:linear-gradient(170deg,#0E2440 0%,#0B1E36 52%,#08192E 100%)}
.pie__wavebar{
  position:relative;z-index:1;isolation:isolate;   /* contiene el z-index alto del swoosh */
  height:clamp(96px,13vh,158px);
  background:#F5F8FB;   /* la hoja de blogs entra por arriba */
}
.pie__wavebar .waves{bottom:0}
.pie__bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(880px 460px at 88% 10%, rgba(0,132,180,.22) 0%, transparent 62%),
    radial-gradient(760px 460px at 4% 92%, rgba(240,122,45,.14) 0%, transparent 64%);
}
.pie__inner{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,64px) clamp(26px,3.5vh,40px)}
.pie__lbl{
  display:block;font-family:var(--display);font-size:10.5px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--cyan-300);margin-bottom:12px;
}

/* ---------- banner de CTA ----------
   Sube por encima del swoosh para cabalgar la unión entre blogs y footer.
   Ningún ancestro recorta, así que no se corta. */
.ctab{
  position:relative;z-index:6;
  margin-top:clamp(-104px,-9vh,-72px);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,44px);flex-wrap:wrap;
  padding:clamp(26px,3vw,40px) clamp(28px,3.4vw,48px);
  border-radius:22px;
  /* la franja de color va como capa del fondo para que el radio la recorte
     junto con la tarjeta y no quede flotando por fuera */
  background:linear-gradient(var(--orange-500),var(--blue-500)) left center / 6px 100% no-repeat, #fff;
  border:1px solid #E7EDF4;
  box-shadow:0 30px 70px rgba(6,20,38,.34), 0 6px 18px rgba(6,20,38,.14);
}
.ctab__tx{position:relative;z-index:2}
.ctab h2{
  font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:clamp(19px,2vw,29px);line-height:1.2;letter-spacing:-.022em;margin-bottom:7px;
}
.ctab p{font-size:clamp(13.5px,1vw,15.5px);line-height:1.6;font-weight:300;color:#56697D}
.ctab__acc{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:11px}
.ctab__wa{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;font-weight:600;color:#1EBE5A;text-decoration:none;
  transition:color .25s ease;
}
.ctab__wa:hover{color:#17A34C;text-decoration:underline;text-underline-offset:3px}
.ctab__wa svg{width:17px;height:17px;fill:currentColor}

/* ---------- formulario + datos ---------- */
.pie__grid{
  display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,4.5vw,72px);
  padding:clamp(48px,6.5vh,82px) 0 clamp(34px,4.5vh,52px);
  align-items:start;
}
/* cuando algún botón manda al formulario, el formulario se hace notar */
.form{position:relative;border-radius:18px}
.form.destacado{animation:formLlama 1.9s cubic-bezier(.4,0,.2,1)}
@keyframes formLlama{
  0%{box-shadow:0 0 0 0 rgba(240,122,45,0)}
  16%{box-shadow:0 0 0 10px rgba(240,122,45,.17)}
  100%{box-shadow:0 0 0 24px rgba(240,122,45,0)}
}
@media (prefers-reduced-motion:reduce){.form.destacado{animation:none}}
.form h3{
  font-family:var(--display);font-weight:600;
  font-size:clamp(20px,2vw,28px);line-height:1.22;letter-spacing:-.022em;margin-bottom:24px;
}
.form__fila{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.campo{display:block;margin-bottom:14px}
.campo>span{
  display:block;font-family:var(--display);font-size:12px;font-weight:600;
  color:rgba(255,255,255,.72);margin-bottom:7px;
}
.campo>span i{color:var(--orange-400);font-style:normal}
.campo input,.campo select,.campo textarea{
  width:100%;font-family:var(--sans);font-size:14.5px;color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);border-radius:12px;
  padding:14px 16px;resize:vertical;
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.campo textarea{min-height:96px}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(255,255,255,.36)}
.campo select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23FF9A4D' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px;padding-right:42px;
}
.campo select option{background:#0E2440;color:#fff}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--cyan-300);background:rgba(255,255,255,.1);
  box-shadow:0 0 0 3px rgba(79,195,232,.14);
}
.acepto{display:flex;align-items:flex-start;gap:11px;margin:6px 0 22px;cursor:pointer}
.acepto input{
  appearance:none;width:19px;height:19px;flex-shrink:0;margin-top:1px;
  border:1.5px solid rgba(255,255,255,.32);border-radius:5px;cursor:pointer;
  transition:background .25s ease, border-color .25s ease;
}
.acepto input:checked{
  background:var(--orange-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='%23fff' stroke-width='3.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  border-color:transparent;
}
.acepto span{font-size:12.8px;line-height:1.55;color:rgba(255,255,255,.66)}
.acepto a{color:var(--cyan-300);text-decoration:underline;text-underline-offset:2px}
.form__aviso{margin-top:14px;font-size:13px;line-height:1.5;min-height:1px}
.form__aviso.is-mal{color:#FFB4A0}
.form__aviso.is-bien{color:#8EE6B4}

/* ---------- datos ---------- */
.datos__logo{height:46px;width:auto;display:block;margin-bottom:16px}
.datos__claim{font-size:14.5px;line-height:1.65;font-weight:300;color:rgba(255,255,255,.68);margin-bottom:26px;max-width:330px}
.datos__lista{list-style:none;display:grid;gap:17px;margin-bottom:30px}
.datos__lista li{display:flex;gap:13px;align-items:flex-start}
.datos__ico{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
}
.datos__ico svg{width:17px;height:17px;fill:none;stroke:var(--orange-400);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.datos__ico--wa svg{fill:var(--orange-400);stroke:none}
.datos__lista b{
  display:block;font-family:var(--display);font-size:14.5px;font-weight:600;
  color:#fff;margin-bottom:3px;letter-spacing:-.01em;
}
.datos__lista b a{color:#fff;text-decoration:none;transition:color .25s ease}
.datos__lista b a:hover{color:var(--orange-400)}
.datos__lista span span,.datos__lista li>span:last-child{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.55)}

/* tarjeta de descarga del PDF comercial */
.descarga{
  display:flex;align-items:center;gap:14px;text-decoration:none;
  margin:22px 0 26px;padding:15px 17px;border-radius:16px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  transition:background .32s ease, border-color .32s ease, transform .32s cubic-bezier(.34,1.4,.5,1);
}
.descarga:hover{background:rgba(255,255,255,.09);border-color:rgba(240,122,45,.55);transform:translateY(-3px)}
.descarga__ico{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;
  background:rgba(240,122,45,.16);border:1px solid rgba(240,122,45,.34);
  transition:background .32s ease;
}
.descarga:hover .descarga__ico{background:rgba(240,122,45,.28)}
.descarga__ico svg{width:21px;height:21px;fill:none;stroke:var(--orange-400);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.descarga__tx{min-width:0;flex:1}
.descarga__tx b{
  display:block;font-family:var(--display);font-size:14.5px;font-weight:600;
  letter-spacing:-.015em;color:#fff;margin-bottom:3px;
}
.descarga__tx span{display:block;font-size:12px;color:rgba(255,255,255,.56)}
.descarga__go{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:rgba(255,255,255,.08);
  transition:background .32s ease, transform .38s cubic-bezier(.34,1.4,.5,1);
}
.descarga__go svg{width:15px;height:15px;fill:none;stroke:rgba(255,255,255,.72);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .32s ease}
.descarga:hover .descarga__go{background:var(--orange-500);transform:translateY(3px)}
.descarga:hover .descarga__go svg{stroke:#fff}

.sellos__g{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.sellos__g img{height:24px;width:auto;opacity:.72;transition:opacity .3s ease}
.sellos__g img:hover{opacity:1}
.sello{
  display:flex;flex-direction:column;font-family:var(--display);font-size:15px;font-weight:700;
  color:rgba(255,255,255,.72);letter-spacing:-.01em;line-height:1.1;transition:color .3s ease;
}
.sello:hover{color:#fff}
.sello i{font-style:normal;font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:3px}

/* ---------- franja legal ---------- */
.legal{border-top:1px solid rgba(255,255,255,.11);padding-top:24px}
.legal__nav{display:flex;flex-wrap:wrap;gap:8px 26px;margin-bottom:16px}
.legal__nav a{
  font-family:var(--display);font-size:13px;font-weight:500;
  color:rgba(255,255,255,.62);text-decoration:none;transition:color .25s ease;
}
.legal__nav a{position:relative;padding:2px 0}
.legal__nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1.5px;border-radius:2px;
  background:var(--orange-400);transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.5,0,.2,1);
}
.legal__nav a:hover{color:var(--orange-400)}
.legal__nav a:hover::after{transform:scaleX(1)}
.legal__fin{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:11.5px;color:rgba(255,255,255,.36)}

@media (max-width:1000px){
  .pie__grid{grid-template-columns:1fr;gap:44px}
}
@media (max-width:640px){
  .ctab{flex-direction:column;align-items:flex-start;text-align:left;margin-top:-64px}
  .ctab__acc{width:100%}
  .ctab__acc .btn{width:100%;justify-content:center}
  .form__fila{grid-template-columns:1fr}
  .legal__fin{flex-direction:column;gap:6px}
}

/* ===================================================================
   ANADIDO DESPUES DEL PROTOTIPO
   El prototipo nunca tuvo imagenes reales de articulo: dibujaba un
   recuadro punteado que decia "Imagen del articulo". Estas reglas son
   para cuando SI hay portada cargada desde el panel, mas el reset de
   la tarjeta de la portada, que pasa de <article> a <a> para que toda
   la tarjeta lleve al articulo.

   NADA DE AQUI MODIFICA UNA REGLA DEL PROTOTIPO: solo anade.
   La verificacion de la cascada compara hasta esta linea.
   =================================================================== */
a.post{text-decoration:none;color:inherit;display:flex;flex-direction:column}
.post__img img{width:100%;height:100%;object-fit:cover;display:block}

/* El campo trampa del antirrobots: invisible para las personas y fuera
   del recorrido del teclado, pero presente en el HTML para que los robots
   lo rellenen. No se usa display:none porque hay robots que lo detectan. */
.trampa{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* -------------------------------------------------------------------
   FASE 14 · teclado
   Dos anadidos, ninguno cambia nada para quien usa el raton.

   1) El megamenu solo se abria con :hover, y como esta oculto con
      visibility:hidden sus enlaces NO eran alcanzables con el tabulador:
      quien navega con teclado no podia llegar a ninguno de los ocho.
      :focus-within repite EXACTAMENTE la misma regla de :hover.
   2) Foco visible. El navegador dibuja un anillo por defecto, pero las
      reglas de outline del prototipo lo apagan en varios controles.
      :focus-visible solo aparece al navegar con teclado, nunca al hacer
      clic, asi que el aspecto con raton es identico al del prototipo.
   ------------------------------------------------------------------- */
/* Solo por encima de 900px, que es donde el nav es horizontal y el
   megamenu es un panel flotante. NO es un punto de corte nuevo: es el
   mismo 900 que ya usa el prototipo, visto por el otro lado. Por debajo
   el menu ya es una lista desplegada y sus enlaces se tabulan solos. */
@media (min-width:901px){
  .nav__item:focus-within>.nav__link{color:#fff;background:rgba(255,255,255,.07)}
  .nav__item:focus-within .chev{transform:rotate(225deg) translateY(-2px)}
  .nav__item:focus-within .nav__link::after{transform:scaleX(1)}
  .nav__item:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--cyan-300);
  outline-offset:2px;
  border-radius:3px;
}

/* -------------------------------------------------------------------
   FASE 15 · franja de cursos sin formulario
   Al quitar el campo de correo (cambio del cliente, 2026-09-07) la
   columna derecha de .courses se queda solo con el boton.

   justify-content:flex-end NO es una decision estetica nueva: devuelve
   el boton EXACTAMENTE donde estaba. En el prototipo, .courses__form
   ocupaba toda la columna derecha con el campo de correo creciendo
   (flex:1 1 200px) y el boton al final, asi que el borde derecho del
   boton coincidia con el borde interior del recuadro. Sin el campo, un
   flex normal lo dejaba al PRINCIPIO de esa columna, o sea flotando
   hacia el 55% del ancho, que es lo que se veia mal.

   El resto son los valores que ya tenia .courses__form: ancho natural
   del boton y, por debajo de 560px, ancho completo. El punto de corte
   tambien es el del prototipo.
   ------------------------------------------------------------------- */
.courses__cta{display:flex;justify-content:flex-end}
.courses__cta .btn{flex:0 0 auto}
@media (max-width:560px){
  .courses__cta .btn{width:100%;justify-content:center}
}


/* -------------------------------------------------------------------
   FASE 17 · MISION Y VISION
   Bloque nuevo entregado por el diseñador en SAEF_SEC-NOSOTROS_v1.html
   (2026-09-09). Va dentro de la seccion Nosotros, entre los engranes
   CAT y la banda de clientes.

   SE COPIA VERBATIM del <style> de ese archivo, donde ya venia como un
   bloque contiguo al final y con sus propios @media. NO toca ni una
   regla del prototipo: comprobado con el diff contra base.css, 89
   lineas anadidas y CERO modificadas, y todos los selectores son .mv*.

   Los puntos de corte que usa -- 900 y 560 -- son los del prototipo;
   no introduce ninguno nuevo. Respeta prefers-reduced-motion.

   La unica regla que roza algo existente es '.mv + .clientes', y es un
   selector nuevo: no cambia '.clientes', solo le quita el margen
   superior CUANDO va precedida por este bloque. En las demas paginas
   .clientes no existe, asi que no puede afectarlas.
   ------------------------------------------------------------------- */
/* ============================================================
   MISIÓN Y VISIÓN — bloque partido en diagonal
   Las tres capas comparten la misma recta: si se toca un punto
   del polígono hay que tocarlo en las tres.
   ============================================================ */
.mv{
  /* vive dentro de la sección Nosotros, que es blanca: se sale a sangre
     completa con el mismo recurso que usa la banda de clientes */
  position:relative;left:50%;transform:translateX(-50%);width:100vw;
  overflow:hidden;isolation:isolate;color:#fff;
  margin-top:clamp(34px,5vh,56px);
  padding:clamp(38px,5vh,58px) clamp(20px,4vw,64px) clamp(40px,5.4vh,62px);
}
/* --- capa de arriba: misión --- */
.mv__alto{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(0,132,180,.34) 0%, transparent 62%),
    linear-gradient(150deg,#0E2440 0%,#0B1E36 52%,#08192E 100%);
  clip-path:polygon(0 0, 100% 0, 100% 42%, 0 66%);
}
/* --- capa de abajo: visión --- */
.mv__bajo{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(820px 480px at 88% 100%, rgba(240,122,45,.24) 0%, transparent 60%),
    linear-gradient(150deg,#1C4272 0%,#264C7E 48%,#305478 100%);
  clip-path:polygon(0 66%, 100% 42%, 100% 100%, 0 100%);
}
/* --- hebra naranja sobre el corte --- */
.mv__hilo{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--orange-600),var(--orange-500) 46%,var(--cyan-300));
  clip-path:polygon(0 66%, 100% 42%, 100% calc(42% + 3px), 0 calc(66% + 3px));
  opacity:.9;
}
/* --- retícula tenue, la misma del Método --- */
.mv__malla{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.08;
  background-image:linear-gradient(rgba(79,195,232,.4) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(79,195,232,.4) 1px,transparent 1px);
  background-size:78px 78px;
  mask-image:radial-gradient(900px 620px at 50% 40%, #000 0%, transparent 76%);
  -webkit-mask-image:radial-gradient(900px 620px at 50% 40%, #000 0%, transparent 76%);
}
/* --- isotipo al agua, como en la pieza del cliente --- */
.mv__marca{
  position:absolute;z-index:1;pointer-events:none;
  left:clamp(-30px,-2vw,-10px);bottom:clamp(-30px,-3vh,-12px);
  width:clamp(96px,11vw,160px);opacity:.08;
  filter:grayscale(1) brightness(3.2);
}

/* la banda de clientes va pegada al bloque: sin franja blanca de por medio */
.mv + .clientes{margin-top:0}

.mv__inner{position:relative;z-index:3;max-width:1180px;margin:0 auto}

/* --- cada mitad --- */
.mv__bloque{max-width:min(480px,84%)}
.mv__bloque--vis{margin-left:auto;text-align:right;margin-top:clamp(30px,4.6vh,54px)}

.mv__rot{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--display);font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--orange-400);
  margin-bottom:10px;
}
/* sobre el azul medio el cian de marca se queda corto para texto chico:
   la etiqueta usa un cian más claro y así pasa AA con holgura */
.mv__bloque--vis .mv__rot{color:#A5E4F7;flex-direction:row-reverse}
.mv__rot::before{
  content:'';width:20px;height:2px;border-radius:2px;background:currentColor;opacity:.8;
}
.mv h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(27px,3.3vw,44px);line-height:1;letter-spacing:-.035em;
  margin-bottom:clamp(10px,1.4vh,15px);
  /* el mismo relieve suave de la pieza del cliente, sin caer en sombra dura */
  text-shadow:0 8px 24px rgba(0,0,0,.26);
}
.mv h2 em{font-style:normal;color:var(--orange-500)}
.mv__bloque--vis h2 em{color:var(--cyan-300)}
.mv p{
  font-size:clamp(14.5px,1.1vw,17px);line-height:1.62;font-weight:300;
  color:rgba(255,255,255,.9);
}
.mv p b{font-weight:600;color:#fff}

/* --- entrada al hacer scroll --- */
.mv__bloque{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
.mv__bloque--vis{transform:translateY(20px)}
.mv.is-vista .mv__bloque{opacity:1;transform:none}
.mv.is-vista .mv__bloque--vis{transition-delay:.16s}

/* --- responsive --- */
@media (max-width:900px){
  /* el corte se endereza para que no se coma el texto */
  .mv__alto{clip-path:polygon(0 0, 100% 0, 100% 46%, 0 58%)}
  .mv__bajo{clip-path:polygon(0 58%, 100% 46%, 100% 100%, 0 100%)}
  .mv__hilo{clip-path:polygon(0 58%, 100% 46%, 100% calc(46% + 3px), 0 calc(58% + 3px))}
  .mv__bloque{max-width:min(560px,100%)}  /* la línea no debe pasar de ~65 caracteres */
  .mv__bloque--vis{text-align:left;margin-top:clamp(42px,7vh,72px)}
  .mv__bloque--vis .mv__rot{flex-direction:row}
}
@media (max-width:560px){
  .mv__alto{clip-path:polygon(0 0, 100% 0, 100% 48%, 0 54%)}
  .mv__bajo{clip-path:polygon(0 54%, 100% 48%, 100% 100%, 0 100%)}
  .mv__hilo{clip-path:polygon(0 54%, 100% 48%, 100% calc(48% + 3px), 0 calc(54% + 3px))}
  .mv h2{font-size:clamp(26px,8vw,34px)}
  .mv__marca{width:82px;opacity:.07}
}
@media (prefers-reduced-motion:reduce){
  .mv__bloque{opacity:1;transform:none;transition:none}
}
