/* ============ tipografías propias (sin depender de Google Fonts) ============ */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/space-grotesk-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/space-grotesk-latin-700-normal.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/poppins-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/space-mono-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/space-mono-latin-700-normal.woff2") format("woff2");}

:root{
  --crema:#F3F2E8;
  --crema-2:#FBFAF4;
  --verde:#00272A;
  --verde-2:#04353A;
  --vivo:#3FD9A4;
  --vivo-suave:#8FE9C8;
  --vivo-oscuro:#0C9268;
  --ambar:#E3A94F;
  --teal:#02616A;
  --tinta:#00272A;
  --tinta-2:#5A6F6A;
  --sobre-oscuro:#EAF2F0;
  --sobre-oscuro-2:#93B0AC;
  --linea:rgba(0,39,42,.13);
  --linea-oscura:rgba(234,242,240,.16);
  --r:14px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--crema);color:var(--tinta);
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}

.wrap{max-width:1240px;margin:0 auto;padding:0 28px;}

/* ============ tipografía ============ */
.display{
  font-weight:700;letter-spacing:-.035em;line-height:1.05;
  font-size:clamp(40px,7vw,82px);margin:0;text-wrap:balance;
}
.h2{
  font-weight:700;letter-spacing:-.03em;line-height:1.06;
  font-size:clamp(30px,4.6vw,54px);margin:0 0 18px;text-wrap:balance;
}
.h3{font-weight:700;letter-spacing:-.02em;font-size:22px;line-height:1.22;margin:0 0 8px;}
/* palabra de acento: misma tipografía, énfasis por color */
.ac{color:var(--vivo-oscuro);}
.metodo .ac,.equipo .ac{color:var(--vivo);}
.bx-viva .ac,.bx-honda .ac,.bx-teal .ac{color:inherit;}
.cierre .ac{color:inherit;}
.sub{font-size:19px;line-height:1.55;color:var(--tinta-2);max-width:46ch;margin:20px 0 0;}
.sub.claro{color:var(--sobre-oscuro-2);}

/* ============ botones ============ */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:15.5px;
  padding:13px 24px;border-radius:999px;text-decoration:none;border:1px solid transparent;
  transition:transform .16s ease,background .16s ease,color .16s ease;
  white-space:nowrap;cursor:pointer;
}
.btn:hover{transform:translateY(-1px);}
.btn-primario{background:var(--vivo);color:#00272A;}
.btn-primario:hover{background:var(--vivo-suave);}
.btn-linea{background:transparent;color:var(--tinta);border-color:rgba(0,39,42,.28);}
.btn-linea:hover{background:rgba(0,39,42,.06);}
.btn-linea.claro{color:var(--sobre-oscuro);border-color:rgba(234,242,240,.32);}
.btn-linea.claro:hover{background:rgba(234,242,240,.09);}
.btn .flecha{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(0,39,42,.16);font-size:12px;line-height:1;
}
.btn-linea .flecha{background:rgba(0,39,42,.1);}
.btn-linea.claro .flecha{background:rgba(234,242,240,.16);}

/* grupo de botones estilo referencia 1 */
.grupo-btn{
  display:inline-flex;gap:6px;padding:6px;background:var(--crema-2);
  border-radius:999px;border:1px solid var(--linea);
}
@media(max-width:620px){
  .grupo-btn{
    display:flex;flex-direction:column;align-items:stretch;gap:10px;
    padding:0;background:transparent;border:0;border-radius:0;width:100%;
  }
  .grupo-btn .btn{justify-content:center;padding:15px 22px;}
}

/* ============ nav ============ */
nav{
  position:sticky;top:0;z-index:50;background:rgba(243,242,232,.86);
  backdrop-filter:blur(12px);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:16px;padding-bottom:16px;}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--tinta);}
.logo .iso{height:30px;width:auto;display:block;}
.logo span{font-family:"Poppins",sans-serif;font-weight:500;font-size:21px;letter-spacing:.008em;line-height:1;}
.nav-links{display:none;gap:30px;}
@media(min-width:940px){.nav-links{display:flex;}}
.nav-links a{
  text-decoration:none;color:var(--tinta-2);font-size:15px;font-weight:500;
  transition:color .15s;
}
.nav-links a:hover{color:var(--tinta);}

/* ============ hero ============ */
.hero{padding:74px 0 64px;position:relative;}
.hero-grid{display:grid;gap:52px;align-items:center;}
@media(min-width:980px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:40px;}}
.micro{
  font-size:14.5px;color:var(--tinta-2);margin:18px 0 0;max-width:46ch;line-height:1.55;
}

/* orbes del hero */
.orbe{width:100%;aspect-ratio:1/1;max-width:460px;margin:0 auto;position:relative;}
.orbe svg{width:100%;height:100%;overflow:visible;}
.gira-lento{transform-origin:center;animation:gira 46s linear infinite;}
.gira-rapido{transform-origin:center;animation:gira 26s linear infinite reverse;}
@keyframes gira{to{transform:rotate(360deg);}}
.late{animation:late 3.4s ease-in-out infinite;transform-origin:center;}
@keyframes late{0%,100%{opacity:1;r:7;}50%{opacity:.55;r:10;}}

/* ============ marquesina ============ */
.banda{background:var(--verde);color:var(--sobre-oscuro);padding:34px 0 38px;overflow:hidden;}
.banda p{
  text-align:center;font-size:15px;color:var(--sobre-oscuro-2);margin:0 0 28px;
}
.pista{
  display:flex;width:max-content;
  animation:corre 34s linear infinite;
  will-change:transform;backface-visibility:hidden;
}
/* la pausa al pasar el mouse sólo donde hay mouse de verdad:
   en touch, iOS deja el :hover pegado tras un toque y el carrusel se congela */
@media(hover:hover) and (pointer:fine){
  .pista:hover{animation-play-state:paused;}
}
@keyframes corre{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}
.pista-grupo{display:flex;align-items:center;gap:72px;padding-right:72px;}
@media(max-width:700px){
  .pista-grupo{gap:44px;padding-right:44px;}
  .pista{animation-duration:20s;}
}
.marca{display:flex;align-items:center;justify-content:center;flex:none;}
.marca img{
  display:block;width:auto;max-height:72px;opacity:.62;
  transition:opacity .22s ease;
}
.marca.tenue img{opacity:.85;}
.marca:hover img{opacity:1;}
.desvanece{position:relative;}
.desvanece::before,.desvanece::after{
  content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.desvanece::before{left:0;background:linear-gradient(90deg,#00272A,rgba(0,39,42,0));}
.desvanece::after{right:0;background:linear-gradient(270deg,#00272A,rgba(0,39,42,0));}

/* ============ secciones ============ */
section{padding:96px 0;}
.centrado{text-align:center;}
.centrado .sub{margin-left:auto;margin-right:auto;text-align:center;}

/* ============ gráfico del método ============ */
.metodo{background:var(--verde);color:var(--sobre-oscuro);border-radius:0;}

.grafico{margin-top:64px;position:relative;}

/* columnas punteadas: atraviesan gráfico y textos, en una sola capa */
.gr-lineas{
  position:absolute;left:0;right:0;top:16%;bottom:0;pointer-events:none;z-index:0;
}
.gr-lineas span{
  position:absolute;top:0;bottom:0;width:1px;
  background-image:linear-gradient(to bottom,rgba(234,242,240,.28) 3px,rgba(234,242,240,0) 3px);
  background-size:1px 9px;background-repeat:repeat-y;
}
.gr-lineas span:nth-child(1){left:0;}
.gr-lineas span:nth-child(2){left:25%;}
.gr-lineas span:nth-child(3){left:50%;}
.gr-lineas span:nth-child(4){left:75%;}
.gr-lineas span:nth-child(5){right:0;}

.gr-curva{
  display:block;width:100%;height:auto;overflow:visible;position:relative;z-index:1;
}
.trazo{
  fill:none;stroke:var(--vivo);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;
}
.grafico.visible .trazo{animation:dibuja 2.3s cubic-bezier(.33,0,.15,1) forwards;}
@keyframes dibuja{to{stroke-dashoffset:0;}}

.nodo{opacity:0;}
.grafico.visible .nodo{animation:aparece .55s cubic-bezier(.2,.8,.3,1) forwards;}
.grafico.visible .nodo.n1{animation-delay:.75s;}
.grafico.visible .nodo.n2{animation-delay:1.15s;}
.grafico.visible .nodo.n3{animation-delay:1.55s;}
.grafico.visible .nodo.n4{animation-delay:1.95s;}
@keyframes aparece{from{opacity:0;}to{opacity:1;}}

.gr-cols{display:grid;position:relative;z-index:1;margin-top:16px;}
.gr-col h4{
  font-size:19px;font-weight:500;letter-spacing:-.012em;line-height:1.24;
  margin:0 0 9px;color:var(--sobre-oscuro);
}
.gr-col p{margin:0;font-size:14px;line-height:1.52;color:var(--sobre-oscuro-2);max-width:31ch;}

@media(min-width:820px){
  .gr-cols{grid-template-columns:repeat(4,1fr);}
  .gr-col{padding:0 20px 6px 18px;}
}
@media(max-width:819px){
  .gr-lineas{display:none;}
  .gr-curva{margin-bottom:34px;}
  .grafico{margin-top:40px;}
  .gr-cols{grid-template-columns:1fr;margin-top:0;}
  .gr-col{
    padding:0 0 30px 28px;position:relative;
    background-image:linear-gradient(to bottom,rgba(234,242,240,.28) 3px,rgba(234,242,240,0) 3px);
    background-size:1px 9px;background-repeat:repeat-y;background-position:left top;
  }
  .gr-col:last-child{background-image:none;padding-bottom:0;}
  .gr-col::before{
    content:"";position:absolute;left:-6px;top:4px;width:13px;height:13px;border-radius:50%;
    background:var(--vivo);box-shadow:0 0 0 6px rgba(63,217,164,.15);
  }
  .gr-col p{max-width:none;}
}

.cta-centro{display:flex;justify-content:center;margin-top:48px;}
@media(max-width:560px){.cta-centro{justify-content:flex-start;}}

/* ============ qué hacemos ============ */
.qh-grid{display:grid;gap:48px;}
@media(min-width:980px){.qh-grid{grid-template-columns:1.02fr .98fr;gap:60px;align-items:center;}}
.qh-texto{display:flex;flex-direction:column;}
.qh-texto .h2{max-width:15ch;}
.qh-texto .sub{max-width:48ch;}
.qh-lista{list-style:none;margin:48px 0 0;padding:0;}
@media(min-width:980px){.qh-lista{margin-top:auto;padding-top:50px;}}
.qh-lista li{
  display:grid;grid-template-columns:36px 1fr;gap:16px;align-items:start;
  margin-bottom:26px;
}
.qh-lista li:last-child{margin-bottom:0;}
.chip{
  width:36px;height:36px;border-radius:10px;background:rgba(0,39,42,.075);
  display:grid;place-items:center;color:var(--verde);flex:none;
}
.qh-lista h4{margin:0 0 5px;font-size:16.5px;font-weight:700;letter-spacing:-.024em;line-height:1.25;}
.qh-lista p{margin:0;font-size:14.5px;line-height:1.5;color:var(--tinta2);}
.qh-figura{position:relative;}
.qh-figura img{
  display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:18px;
}

/* ============ tarjeta de tecnología ============ */
.tecno{
  background:linear-gradient(158deg,#8FE0D2 0%,#57B3AE 46%,#38A08F 100%);
  padding:88px 0;position:relative;overflow:hidden;
}
.tecno::before{
  content:"";position:absolute;top:-30%;right:-14%;width:62vw;height:62vw;max-width:900px;max-height:900px;
  border-radius:50%;border:1px solid rgba(255,255,255,.26);
  box-shadow:0 0 0 70px rgba(255,255,255,.07),0 0 0 160px rgba(255,255,255,.05);
  pointer-events:none;
}
.td-card{
  background:var(--crema-2);border-radius:20px;
  padding:clamp(30px,4vw,56px);padding-bottom:0;
  box-shadow:0 34px 70px rgba(0,39,42,.18);
  position:relative;z-index:1;overflow:hidden;
}
.td-texto{text-align:center;}
.td-texto .h2{font-size:clamp(27px,3.6vw,44px);max-width:21ch;margin:0 auto 18px;}
.td-texto .td-parrafo{color:var(--tinta-2);font-size:16.5px;max-width:62ch;margin:0 auto;}

/* dispositivos: se apoyan abajo y se cortan contra el borde de la tarjeta */
.td-dispositivos{
  display:flex;align-items:flex-end;justify-content:center;
  margin-top:clamp(36px,5vw,60px);
  margin-bottom:clamp(-56px,-4vw,-30px);
}
.marco-tab,.marco-desk,.marco-celu{position:relative;flex:none;}
.marco-tab img,.marco-desk img,.marco-celu img{display:block;width:100%;height:auto;}

.marco-tab{
  width:min(28%,300px);margin-right:-5%;margin-bottom:2%;z-index:1;
  border-radius:12px 12px 0 0;overflow:hidden;background:var(--verde);
  border:3px solid #072F32;border-bottom:0;
  box-shadow:0 -6px 30px rgba(0,39,42,.2);
}
.marco-desk{
  width:min(54%,600px);z-index:2;
  border-radius:12px 12px 0 0;overflow:hidden;background:var(--verde);
  box-shadow:0 -6px 48px rgba(0,39,42,.26);
}
.marco-desk .chrome{
  height:24px;background:#04353A;display:flex;align-items:center;gap:5px;padding:0 10px;
}
.marco-desk .chrome i{width:6px;height:6px;border-radius:50%;background:rgba(234,242,240,.26);flex:none;}
.marco-celu{
  width:min(15%,138px);margin-left:-4%;margin-bottom:-7%;z-index:3;
  border-radius:16px 16px 0 0;overflow:hidden;background:#fff;
  border:3px solid #072F32;border-bottom:0;
  box-shadow:0 -6px 30px rgba(0,39,42,.34);
}
@media(max-width:760px){
  .marco-tab{width:26%;margin-right:-7%;}
  .marco-desk{width:60%;}
  .marco-celu{width:20%;margin-left:-6%;margin-bottom:-9%;}
}

/* ============ bento de IA y automatizaciones ============ */
.bento{display:grid;gap:14px;}
@media(min-width:900px){
  .bento{grid-template-columns:repeat(4,1fr);}
  .bx-texto{grid-column:span 2;}
  .bx-visual{grid-column:span 2;}
  .bx-ancha{grid-column:span 2;}
}
.bx{border-radius:18px;padding:30px 28px;display:flex;flex-direction:column;overflow:hidden;position:relative;}

.bx-texto{background:var(--crema-2);border:1px solid var(--linea);}
.bx-texto h3{
  font-weight:700;letter-spacing:-.033em;line-height:1.1;
  font-size:clamp(24px,2.9vw,34px);margin:0 0 16px;max-width:20ch;
}
.bx-texto p{color:var(--tinta-2);font-size:16px;margin:0 0 26px;max-width:46ch;}
.bx-texto .btn{align-self:flex-start;margin-top:auto;}

.bx-visual{background:linear-gradient(158deg,#8FE0D2 0%,#57B3AE 48%,#2E8F82 100%);padding:0;min-height:280px;}
.bx-visual svg{width:100%;height:100%;display:block;}
.gira-b{transform-origin:center;animation:gira 60s linear infinite;}
.gira-b2{transform-origin:center;animation:gira 38s linear infinite reverse;}

.bx-viva{background:var(--vivo);color:#00272A;}
.bx-honda{background:var(--verde);color:var(--sobre-oscuro);}
.bx-teal{background:var(--teal);color:var(--sobre-oscuro);}
.bx h4{font-weight:700;letter-spacing:-.025em;font-size:19px;line-height:1.24;margin:0;max-width:18ch;}
.bx-honda h4,.bx-teal h4{margin-bottom:0;}
.bx .pie{margin:0;font-size:14px;line-height:1.45;opacity:.72;max-width:30ch;}
.bx-etiquetas{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;}
.bx-dosc{display:grid;gap:20px;align-items:center;}
@media(min-width:620px){.bx-dosc{grid-template-columns:1.15fr .85fr;}}
.bx-lado{display:flex;flex-direction:column;}
.bx-lado h4{margin-bottom:14px;}
.bx-fig svg{width:100%;max-width:210px;height:auto;display:block;margin:0 auto;}
.bx-x{
  font-weight:700;letter-spacing:-.05em;line-height:1;
  font-size:clamp(58px,7.5vw,88px);color:var(--vivo);
  text-align:center;margin:26px 0;flex:1;display:grid;place-items:center;
  text-shadow:0 0 22px rgba(63,217,164,.55), 0 0 58px rgba(63,217,164,.32), 0 0 100px rgba(63,217,164,.18);
}
.bx-grafico{position:relative;margin:20px -8px 16px;}
.bx-grafico svg{width:100%;height:auto;display:block;}
.bx-tag{
  position:absolute;top:2px;right:6px;z-index:2;
  background:var(--vivo);color:#00272A;font-weight:700;font-size:14px;
  letter-spacing:-.02em;padding:5px 12px;border-radius:999px;
}
.bx-etiquetas span{
  font-size:12.5px;font-weight:500;padding:5px 12px;border-radius:999px;
  background:rgba(0,39,42,.12);
}

/* ============ equipo ============ */
.equipo{background:var(--verde);color:var(--sobre-oscuro);}
.equipo .h2{max-width:22ch;margin-left:auto;margin-right:auto;}
.retratos{display:grid;gap:22px;margin-top:56px;}
@media(min-width:720px){.retratos{grid-template-columns:repeat(3,1fr);}}
.persona{margin:0;}
.retrato{
  aspect-ratio:4/5;border-radius:var(--r);position:relative;overflow:hidden;
  background:linear-gradient(158deg,#14514E 0%,#0A3739 55%,#062A2D 100%);
  border:1px solid var(--linea-oscura);margin-bottom:18px;
}
.retrato img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.retrato .marca-foto{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:"Space Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.18em;
  color:rgba(234,242,240,.28);text-transform:uppercase;
}
.persona h4{font-size:19px;font-weight:700;letter-spacing:-.025em;margin:0 0 6px;}
.persona .rol{
  font-family:"Space Mono",ui-monospace,monospace;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;color:var(--vivo);
  margin:0 0 9px;min-height:1.1em;
}
.persona .area{margin:0;font-size:14.5px;line-height:1.45;color:var(--sobre-oscuro-2);}

/* ============ artículos ============ */
.art-cab{display:grid;gap:26px;margin-bottom:34px;}
@media(min-width:900px){.art-cab{grid-template-columns:1fr auto;align-items:end;}}
.art-cab .h2{margin-bottom:14px;max-width:16ch;}
.art-cab .sub{margin:0;max-width:52ch;}

.articulo{
  background:var(--crema-2);border:1px solid var(--linea);border-radius:18px;
  overflow:hidden;text-decoration:none;color:var(--tinta);
  display:grid;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
@media(min-width:860px){.articulo{grid-template-columns:1.05fr 1fr;align-items:stretch;}}
.articulo:hover{transform:translateY(-3px);border-color:rgba(0,39,42,.3);box-shadow:0 18px 40px rgba(0,39,42,.09);}
.art-img{
  aspect-ratio:16/10;position:relative;overflow:hidden;align-self:center;
  background:linear-gradient(150deg,#14514E 0%,#0A3739 58%,#062A2D 100%);
}
.art-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.art-img .slot-img{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:"Space Mono",ui-monospace,monospace;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(234,242,240,.26);
}
.art-cuerpo{padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:11px;justify-content:center;}
.art-tag{
  align-self:flex-start;font-family:"Space Grotesk",sans-serif;font-size:11.5px;font-weight:500;
  padding:3px 10px;border-radius:999px;background:rgba(0,39,42,.07);color:var(--tinta-2);
}
.art-meta{
  font-family:"Space Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-2);
}
.articulo h4{font-weight:700;font-size:clamp(21px,2.4vw,29px);line-height:1.16;margin:0;letter-spacing:-.03em;max-width:22ch;}
.art-bajada{margin:0;font-size:16px;line-height:1.55;color:var(--tinta-2);max-width:44ch;}
.art-leer{margin-top:6px;font-weight:500;color:var(--vivo-oscuro);display:inline-flex;align-items:center;gap:7px;}
.articulo:hover .art-leer .flecha{transform:translateX(3px);}


/* ============ nota / artículo ============ */
.nota{padding:clamp(34px,4vw,56px) 0 clamp(60px,7vw,96px);}
.nota-grid{display:grid;gap:44px;}
@media(min-width:1020px){
  .nota-grid{grid-template-columns:minmax(0,1fr) 336px;gap:60px;align-items:start;}
}
.nota-volver{
  display:inline-block;margin-bottom:22px;text-decoration:none;
  color:var(--tinta-2);font-size:14.5px;transition:color .16s ease;
}
.nota-volver:hover{color:var(--vivo-oscuro);}
.nota-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.nota-titulo{
  font-weight:700;letter-spacing:-.035em;line-height:1.05;
  font-size:clamp(32px,4.6vw,54px);margin:0 0 18px;max-width:19ch;text-wrap:balance;
}
.nota-bajada{font-size:19px;line-height:1.55;color:var(--tinta-2);margin:0 0 26px;max-width:56ch;}
.nota-firma{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:14.5px;color:var(--tinta-2);padding-bottom:26px;
  border-bottom:1px solid var(--linea);
}
.nota-firma img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:center 18%;}
.nota-firma b{font-weight:700;color:var(--tinta);}
.nota-firma .punto{opacity:.5;}
.nota-tapa{margin:30px 0 0;}
.nota-tapa img{width:100%;height:auto;border-radius:16px;display:block;}
.nota-cuerpo{margin-top:34px;}
.nota-cuerpo p{font-size:18px;line-height:1.78;margin:0 0 24px;max-width:68ch;}
.nota-cuerpo p:last-child{margin-bottom:0;}
.nota-cita{
  margin:34px 0;padding:4px 0 4px 26px;border-left:3px solid var(--vivo);
  font-size:clamp(21px,2.4vw,26px);line-height:1.34;font-weight:700;
  letter-spacing:-.024em;max-width:30ch;
}
.nota-final{
  font-size:clamp(19px,2.1vw,22px)!important;line-height:1.45!important;
  font-weight:700;letter-spacing:-.022em;margin-top:34px!important;max-width:34ch!important;
}

.nota-lateral{display:grid;gap:16px;}
@media(min-width:1020px){.nota-lateral{position:sticky;top:96px;}}
.tarjeta{background:var(--crema-2);border:1px solid var(--linea);border-radius:18px;padding:24px 22px;}
.tarjeta h3{font-size:16px;font-weight:700;letter-spacing:-.022em;margin:0 0 12px;}
.tarjeta-autor{text-align:center;padding:0;overflow:hidden;}
.autor-foto{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center top;
  border-radius:0;margin:0 0 20px;display:block;
}
.tarjeta-autor h3{font-size:20px;margin:0 0 4px;padding:0 22px;}
.autor-rol{margin:0 0 12px;padding:0 22px;font-size:13px;line-height:1.4;color:var(--vivo-oscuro);font-weight:500;}
.autor-bio{margin:0;padding:0 22px 26px;font-size:14.5px;line-height:1.6;color:var(--tinta-2);}
@media(max-width:1019px){
  .autor-foto{aspect-ratio:16/11;object-position:center 20%;}
}
.tarjeta-cta{background:var(--verde);border-color:var(--verde);color:var(--sobre-oscuro);}
.tarjeta-cta h3{color:var(--crema-2);font-size:19px;line-height:1.2;max-width:16ch;}
.tarjeta-cta p{margin:0 0 18px;font-size:14.5px;line-height:1.55;color:var(--sobre-oscuro-2);}
.nota-tags{display:flex;flex-wrap:wrap;gap:8px;}
.comparte{display:flex;gap:10px;}
.comparte a,.comparte button{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--linea);
  background:transparent;color:var(--tinta);cursor:pointer;
  display:grid;place-items:center;text-decoration:none;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.comparte a:hover,.comparte button:hover{background:var(--verde);border-color:var(--verde);color:var(--crema-2);}
.comparte-aviso[hidden]{display:none;}
.comparte-aviso{display:block;margin-top:12px;font-size:13px;color:var(--vivo-oscuro);font-weight:500;}

/* ============ cierre ============ */
.cierre{background:var(--vivo);color:#00272A;border-radius:0;}
.cierre .sub{color:rgba(0,39,42,.74);}
.cierre .btn-oscuro{background:var(--verde);color:var(--sobre-oscuro);}
.cierre .btn-oscuro .flecha{background:rgba(234,242,240,.18);}
.cierre .btn-oscuro:hover{background:#04353A;}

/* ============ pie ============ */
footer{background:var(--verde);color:var(--sobre-oscuro-2);padding:66px 0 34px;}
.pie-grid{display:grid;gap:40px;}
@media(min-width:860px){.pie-grid{grid-template-columns:1.7fr 1fr 1fr 1fr;gap:44px;}}
.pie-marca p{margin:20px 0 0;font-size:15px;line-height:1.55;color:var(--sobre-oscuro-2);max-width:38ch;}
.pie-redes{display:flex;gap:10px;margin-top:24px;}
.pie-redes a{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--linea-oscura);
  display:grid;place-items:center;color:var(--sobre-oscuro-2);margin:0;
  transition:border-color .16s ease,color .16s ease;
}
.pie-redes a:hover{border-color:var(--vivo);color:var(--vivo);}
footer h5{
  font-family:"Space Grotesk",sans-serif;font-size:15px;font-weight:700;letter-spacing:-.015em;
  text-transform:none;color:var(--sobre-oscuro);margin:0 0 18px;
}
footer a{color:var(--sobre-oscuro-2);text-decoration:none;font-size:14.5px;display:block;margin-bottom:11px;}
footer a:hover{color:var(--sobre-oscuro);}
.pie-abajo{
  border-top:1px solid var(--linea-oscura);margin-top:52px;padding-top:24px;
  display:flex;flex-wrap:wrap;gap:12px 30px;align-items:center;justify-content:space-between;
  font-family:"Space Grotesk",sans-serif;font-size:13.5px;letter-spacing:0;text-transform:none;
  color:rgba(234,242,240,.42);
}
.pie-abajo .legales{display:flex;gap:28px;}
.pie-abajo .legales a{display:inline;margin:0;font-size:13.5px;}

/* aviso de maqueta */
.aviso{
  background:var(--ambar);color:#00272A;font-family:"Space Mono",ui-monospace,monospace;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-align:center;
  padding:9px 16px;font-weight:700;
}

a:focus-visible,.btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px;}

/* ============ liderazgo / project management ============ */
.lider{background:var(--crema);padding:clamp(62px,6.5vw,78px) 0 0;overflow:hidden;}
.lider .h2{max-width:18ch;margin-left:auto;margin-right:auto;}
.lider .sub{max-width:52ch;}

.ld-cards{display:grid;gap:16px;margin-top:clamp(34px,3.6vw,42px);}
@media(min-width:900px){.ld-cards{grid-template-columns:1fr 1fr;gap:20px;}}
.ld-card{
  background:var(--crema-2);border:1px solid var(--linea);border-radius:18px;
  padding:clamp(24px,2.6vw,34px);
}
.ld-marca{width:32px;height:3px;border-radius:2px;background:var(--vivo-oscuro);margin-bottom:18px;}
.ld-card h3{
  font-weight:700;letter-spacing:-.028em;line-height:1.14;
  font-size:clamp(21px,2.4vw,28px);margin:0 0 14px;max-width:24ch;text-wrap:balance;
}
.ld-card p{margin:0;color:var(--tinta-2);font-size:16.5px;line-height:1.6;}

.ld-visual{
  position:relative;width:100%;max-width:1100px;margin:clamp(18px,2.2vw,30px) auto 0;
  aspect-ratio:600/218;overflow:hidden;
}
.ld-visual::before{
  content:"";position:absolute;left:50%;top:92%;transform:translate(-50%,-50%);
  width:70%;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle,rgba(63,217,164,.22) 0%,rgba(63,217,164,.07) 46%,rgba(63,217,164,0) 70%);
  pointer-events:none;
}
.rd-svg{position:absolute;top:0;left:0;width:100%;height:auto;display:block;}
.rd-eje{font-size:14.5px;font-weight:700;fill:var(--tinta);letter-spacing:-.015em;}
@media(max-width:760px){.rd-eje{font-size:18px;}}
.rd-serie{opacity:0;transform:scale(.72);transform-origin:330px 250px;
  transition:opacity .65s ease,transform .85s cubic-bezier(.2,.72,.28,1);}
.ld-visual.visible .rd-s1{opacity:1;transform:none;transition-delay:.05s;}
.ld-visual.visible .rd-s2{opacity:1;transform:none;transition-delay:.28s;}
.ld-visual.visible .rd-s3{opacity:1;transform:none;transition-delay:.5s;}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  html{scroll-behavior:auto;}
  .trazo{stroke-dashoffset:0!important;}
  .nodo{opacity:1!important;}
  .rd-serie{opacity:1!important;transform:none!important;}
}