/* GESNUCLEAR — hoja de estilo única. Navy #2E2E2E · Teal #E85808 */
:root{
  --navy:#2E2E2E; --navy-d:#1C1C1C; --navy-l:#565656;
  --teal:#E85808; --teal-c:#FF9A52; --teal-p:#FDEDE3;
  --ink:#2E2E2E; --gris:#5E5A57; --gris-c:#8E8884;
  --linea:#E3DFDB; --papel:#F7F5F3; --blanco:#fff;
  --ancho:1180px; --radio:4px;
  --t:.22s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--blanco); color:var(--ink);
  font:400 16.5px/1.65 Manrope,-apple-system,Segoe UI,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
.env{max-width:var(--ancho);margin:0 auto;padding:0 28px}

/* ---------- tipografía ---------- */
h1,h2,h3,h4{margin:0;letter-spacing:-.018em;font-weight:700;line-height:1.14}
h1{font-size:clamp(34px,4.6vw,56px);font-weight:300}
h1 b{font-weight:700}
h2{font-size:clamp(26px,3.1vw,38px);font-weight:300}
h2 b{font-weight:700}
h3{font-size:19px;line-height:1.3;letter-spacing:-.01em}
p{margin:0 0 1.05em}
.grande{font-size:clamp(17px,1.5vw,19.5px);line-height:1.6;color:var(--gris)}
.sello{font:700 11px/1 Manrope;letter-spacing:.2em;color:var(--teal);text-transform:uppercase}
.sello-b{color:var(--teal-c)}
.apunte{font-size:14px;line-height:1.6;color:var(--gris-c)}

/* ---------- cabecera ---------- */
.cab{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
     backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.cab .env{display:flex;align-items:center;justify-content:space-between;height:88px;gap:24px}
.marca{display:flex;align-items:center;flex:0 0 auto}
.marca svg,.marca img{height:56px;width:auto;display:block}
.menu{display:flex;align-items:center;gap:26px;font:600 13.5px Manrope;color:var(--gris)}
.menu a{position:relative;padding:4px 0;transition:color var(--t)}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
               background:var(--teal);transition:right var(--t)}
.menu a:hover{color:var(--navy)} .menu a:hover::after{right:0}
.menu a.on{color:var(--navy)} .menu a.on::after{right:0}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--teal);color:#fff;
     font:700 12.5px Manrope;letter-spacing:.07em;text-transform:uppercase;
     padding:13px 22px;border-radius:var(--radio);transition:background var(--t),transform var(--t)}
.btn:hover{background:#C8490A;transform:translateY(-1px)}
.btn.fan{background:transparent;color:var(--navy);border:1px solid var(--linea)}
.btn.fan:hover{background:var(--papel);border-color:var(--navy-l)}
.btn.clara{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.38)}
.btn.clara:hover{background:rgba(255,255,255,.1)}
.menu-btn{display:none}

/* ---------- portada ---------- */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 480px at 82% 42%,rgba(255,154,82,.13),transparent 62%)}
.hero .env{position:relative;z-index:2;padding:76px 28px 70px;max-width:var(--ancho)}
.hero h1{max-width:17ch;margin-bottom:22px}
.hero .grande{color:#DFD9D3;max-width:52ch}
.hero-acc{display:flex;gap:11px;flex-wrap:wrap;margin-top:30px}
.gantry{position:absolute;right:-70px;top:50%;transform:translateY(-50%);
        width:560px;opacity:.95;z-index:1}

/* ---------- cifras ---------- */
.cifras{display:flex;flex-wrap:wrap;gap:54px;margin-top:52px;padding-top:30px;
        border-top:1px solid rgba(255,255,255,.18)}
.cifra .n{font:200 42px/1 Manrope;letter-spacing:-.025em}
.cifra .l{font:600 10.5px/1.45 Manrope;letter-spacing:.12em;color:#BFB9B4;
          text-transform:uppercase;margin-top:9px;max-width:21ch}

/* ---------- secciones ---------- */
section{padding:74px 0}
section.papel{background:var(--papel)}
section.oscura{background:var(--navy);color:#fff}
section.oscura .grande{color:#D5CFC9}
.enc{max-width:62ch;margin-bottom:44px}
.enc h2{margin:14px 0 16px}
.linea-sup{display:block;width:44px;height:3px;background:var(--teal);margin-bottom:22px}

/* ---------- selector de público ---------- */
.publico{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pub{position:relative;display:block;border:1px solid var(--linea);border-radius:var(--radio);
     padding:34px 32px 30px;background:#fff;transition:border-color var(--t),transform var(--t),box-shadow var(--t)}
.pub:hover{border-color:var(--teal);transform:translateY(-3px);
           box-shadow:0 14px 34px -22px rgba(46,46,46,.45)}
.pub h3{margin:14px 0 10px;font-size:23px}
.pub p{color:var(--gris);font-size:15.5px;margin-bottom:18px}
.pub .ir{font:700 12px Manrope;letter-spacing:.09em;text-transform:uppercase;color:var(--teal)}

/* ---------- lista vertical de capacidades ---------- */
.caps{border-top:1px solid var(--linea)}
.cap{display:grid;grid-template-columns:76px 1fr 1.25fr;gap:28px;align-items:start;
     padding:30px 0;border-bottom:1px solid var(--linea);transition:background var(--t)}
.cap:hover{background:var(--papel)}
.cap .num{font:200 34px/1 Manrope;color:var(--teal);letter-spacing:-.02em}
.cap h3{padding-top:4px}
.cap p{margin:0;color:var(--gris);font-size:15.5px}
.cap ul{margin:10px 0 0;padding-left:17px;color:var(--gris);font-size:15px}
.cap li{margin-bottom:4px}

/* ---------- tarjetas "Ideal para" ---------- */
.modelos{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.modelo{display:flex;flex-direction:column;border:1px solid var(--linea);
        border-radius:var(--radio);background:#fff;overflow:hidden;transition:border-color var(--t),box-shadow var(--t)}
.modelo:hover{border-color:var(--teal);box-shadow:0 14px 34px -24px rgba(46,46,46,.45)}
.modelo .top{padding:30px 30px 24px;flex:1}
.modelo .et{font:700 10.5px Manrope;letter-spacing:.15em;text-transform:uppercase;color:var(--teal)}
.modelo h3{margin:13px 0 12px;font-size:21px}
.modelo p{color:var(--gris);font-size:15.5px;margin-bottom:0}
.modelo ul{margin:14px 0 0;padding-left:17px;color:var(--gris);font-size:15px}
.ideal{background:var(--teal-p);border-top:1px solid #F8DCCB;padding:19px 30px}
.ideal .t{font:700 10.5px Manrope;letter-spacing:.14em;text-transform:uppercase;color:#B44409}
.ideal p{margin:7px 0 0;font-size:15px;color:#8A3A0C;line-height:1.55}

/* ---------- lista de límites ---------- */
.limites{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.limite{border:1px solid rgba(255,255,255,.16);border-radius:var(--radio);padding:24px 24px 22px}
.limite h3{font-size:16.5px;margin-bottom:9px;color:#fff}
.limite p{margin:0;font-size:14.5px;color:#BDB7B1;line-height:1.55}

/* ---------- ficha de persona ---------- */
.ficha{display:grid;grid-template-columns:1fr 1.5fr;gap:46px;align-items:start}
.ficha .ret{border:1px solid var(--linea);border-radius:var(--radio);padding:34px;background:var(--papel);text-align:center}
.ficha .ret .ini{font:200 72px/1 Manrope;color:var(--teal);letter-spacing:-.03em}
.ficha .ret .nom{font-weight:700;margin-top:16px;font-size:18px}
.ficha .ret .car{font-size:14px;color:var(--gris);margin-top:4px}

/* ---------- contacto ---------- */
.contacto{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
.dato{border-bottom:1px solid var(--linea);padding:18px 0}
.dato .k{font:700 10.5px Manrope;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-c)}
.dato .v{font-size:17px;margin-top:6px;font-weight:600}
form label{display:block;font:700 11px Manrope;letter-spacing:.11em;text-transform:uppercase;
           color:var(--gris);margin:0 0 7px}
form input,form select,form textarea{width:100%;font:400 15.5px Manrope;color:var(--ink);
  padding:12px 14px;border:1px solid var(--linea);border-radius:var(--radio);background:#fff;
  margin-bottom:18px;transition:border-color var(--t)}
form input:focus,form select:focus,form textarea:focus{outline:none;border-color:var(--teal)}
form textarea{min-height:120px;resize:vertical}

/* ---------- llamada final ---------- */
.cierre{background:var(--navy-d);color:#fff;padding:66px 0}
.cierre h2{max-width:20ch;margin-bottom:18px}
.cierre p{color:#D5CFC9;max-width:54ch}

/* ---------- pie ---------- */
.pie{background:var(--navy);color:#BFB9B4;padding:52px 0 26px;font-size:14.5px}
.pie .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-bottom:34px;
           border-bottom:1px solid rgba(255,255,255,.14)}
.pie svg,.pie img{height:40px;width:auto}
.pie h4{font:700 10.5px Manrope;letter-spacing:.15em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.pie a{display:block;margin-bottom:8px;transition:color var(--t)}
.pie a:hover{color:#fff}
.pie .bajo{display:flex;justify-content:space-between;gap:20px;padding-top:22px;font-size:13px;color:#9A938D}

.dos{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}

/* ---------- menú móvil ---------- */
.menu-btn{display:none;background:none;border:1px solid var(--linea);border-radius:var(--radio);
          width:42px;height:42px;cursor:pointer;align-items:center;justify-content:center;padding:0}
.menu-btn span{display:block;width:18px;height:2px;background:var(--navy);position:relative}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--navy)}
.menu-btn span::before{top:-6px} .menu-btn span::after{top:6px}

/* ---------- utilidades ---------- */
.nota{border-left:3px solid #E2B33C;background:#FDF8EC;padding:16px 20px;border-radius:0 var(--radio) var(--radio) 0;
      font-size:14.5px;color:#7A5B12;margin:26px 0}
.nota b{color:#5E460C}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .gantry{display:none}
  .publico,.modelos,.ficha,.contacto{grid-template-columns:1fr}
  .limites{grid-template-columns:1fr}
  .pie .cols{grid-template-columns:1fr 1fr}
  .cap{grid-template-columns:52px 1fr;gap:18px}
  .cap .col3{grid-column:2}
}
@media (max-width:760px){
  .dos{grid-template-columns:1fr;gap:38px}
  .menu-btn{display:flex}
  .cab .env{position:relative}
  .cab > .env > .btn{display:none}
  .menu{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;
        align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--linea);
        box-shadow:0 18px 30px -24px rgba(46,46,46,.5)}
  .menu a{padding:15px 28px;border-top:1px solid var(--linea);font-size:15px}
  .menu a::after{display:none}
  .cab.abierto .menu{display:flex}
  .cab .env{height:70px}.marca svg,.marca img{height:44px}
  .hero .env{padding:52px 24px 48px}
  section{padding:54px 0}
  .cifras{gap:30px}
  .pie .cols{grid-template-columns:1fr}
}

/* ===================================================================
   CAPA DE MOVIMIENTO Y TEXTURA
   =================================================================== */

/* ---------- aparición al hacer scroll ---------- */
[data-rev]{opacity:0;transform:translateY(22px);
  transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--d,0ms)}
[data-rev].vis{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-rev]{opacity:1;transform:none;transition:none}
  .anillo,.pulso,.electron{animation:none !important}
}

/* ---------- cabecera con sombra al bajar ---------- */
.cab{transition:box-shadow var(--t),border-color var(--t)}
.cab.fija{box-shadow:0 10px 30px -26px rgba(46,46,46,.9)}

/* ---------- textura de fondo ---------- */
.hero{background:
  radial-gradient(1100px 620px at 78% 38%,rgba(255,154,82,.16),transparent 60%),
  linear-gradient(168deg,#3A3A3A 0%,var(--navy) 46%,#1F1F1F 100%)}
.hero::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.17) 1px,transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(760px 520px at 24% 34%,#000,transparent 72%);
  mask-image:radial-gradient(760px 520px at 24% 34%,#000,transparent 72%)}
section.oscura{background:linear-gradient(170deg,#3A3A3A,#1C1C1C)}
.cierre{position:relative;overflow:hidden;
  background:linear-gradient(140deg,#1C1C1C 0%,#2E2E2E 58%,#B04508 160%)}
.cierre::before{content:"";position:absolute;right:-120px;top:-140px;width:520px;height:520px;
  border-radius:50%;border:1px solid rgba(255,154,82,.2)}
.cierre::after{content:"";position:absolute;right:-40px;top:-60px;width:340px;height:340px;
  border-radius:50%;border:1px solid rgba(255,154,82,.14)}
.cierre .env{position:relative;z-index:2}

/* ---------- gantry animado ---------- */
.gantry{will-change:transform}
.anillo{transform-origin:200px 200px;animation:girar 46s linear infinite}
.electron{transform-origin:200px 200px;animation:girar 7s linear infinite}
.pulso{animation:latir 3.4s ease-in-out infinite}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes latir{0%,100%{opacity:.55;r:5.5}50%{opacity:1;r:8}}

/* ---------- iconos de línea ---------- */
.ico{width:44px;height:44px;flex:0 0 44px;display:block}
.ico circle,.ico path,.ico line,.ico rect,.ico ellipse{
  vector-effect:non-scaling-stroke;transition:stroke var(--t)}
.cap{grid-template-columns:44px 64px 1fr 1.25fr}
.cap .num{font-size:30px;padding-top:7px}
/* regla antigua retirada: el acento ahora lo hereda del medallon */

/* ---------- tarjetas con más cuerpo ---------- */
.pub{overflow:hidden}
.pub::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;
  background:var(--teal);transition:width .45s cubic-bezier(.2,.7,.3,1)}
.pub:hover::before{width:100%}
.modelo{position:relative}
.modelo::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;
  background:var(--teal);transition:width .45s cubic-bezier(.2,.7,.3,1)}
.modelo:hover::before{width:100%}
.modelo .top{position:relative}
.modelo .nm{position:absolute;right:24px;top:18px;font:200 56px/1 Manrope;
  color:#F2F0ED;letter-spacing:-.04em;pointer-events:none;user-select:none}

/* ---------- cifras ---------- */
.cifra .n{font-variant-numeric:tabular-nums}
.cifra{position:relative;padding-left:18px}
.cifra::before{content:"";position:absolute;left:0;top:6px;bottom:18px;width:2px;
  background:linear-gradient(var(--teal-c),rgba(255,154,82,0))}

/* ---------- línea de tiempo del arranque ---------- */
.linea-t{margin-top:10px}
.linea-t .barra{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:14px}
.linea-t .m{height:62px;border-radius:3px;position:relative;
  background:linear-gradient(180deg,#FDF0E8,#FADFCE);border:1px solid #F8DCCB}
.linea-t .m.fijo{background:linear-gradient(180deg,#424242,var(--navy));border-color:var(--navy)}
.linea-t .m span{position:absolute;left:0;right:0;bottom:-24px;text-align:center;
  font:700 10px Manrope;letter-spacing:.09em;color:var(--gris-c);text-transform:uppercase}
.linea-t .m i{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;font:700 11px Manrope;font-style:normal;color:#A94309}
.linea-t .m.fijo i{color:#fff}
.linea-t .pies{display:grid;grid-template-columns:4fr 2fr;gap:28px;margin-top:48px}
.linea-t .pie-t{font-size:14.5px;color:var(--gris);line-height:1.55}
.linea-t .pie-t b{color:var(--navy)}

/* ---------- botones con flecha ---------- */
.btn .fl{display:inline-block;transition:transform var(--t)}
.btn:hover .fl{transform:translateX(3px)}
.ir .fl{display:inline-block;transition:transform var(--t)}
.pub:hover .ir .fl{transform:translateX(4px)}

@media (max-width:980px){
  .cap{grid-template-columns:44px 1fr;gap:16px}
  .cap .num{display:none}
  .cap .col3{grid-column:1 / -1}
  .linea-t .barra{grid-template-columns:repeat(3,1fr);row-gap:30px}
  .linea-t .pies{grid-template-columns:1fr}
}

/* ---------- bajada en la cabecera ---------- */
.marca{display:flex;align-items:center;gap:15px}
.marca .baj{display:block;padding-left:15px;border-left:1px solid var(--linea);
  font:600 9.5px/1.6 Manrope;letter-spacing:.075em;color:var(--gris);
  text-transform:uppercase;white-space:nowrap}
.marca .baj b{display:block;color:var(--navy);font-weight:700;letter-spacing:.07em;font-size:10px}
.marca .baj i{display:block;font-style:normal}
@media (max-width:1340px){ .marca .baj{display:none} }

/* ---------- cuatro límites ---------- */
.limites.cuatro{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){ .limites.cuatro{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px){ .limites.cuatro{grid-template-columns:1fr} }

/* ---------- enlace al perfil del gerente ---------- */
.ret .lk{display:inline-block;margin-top:14px;font:700 11.5px Manrope;letter-spacing:.07em;
  text-transform:uppercase;color:var(--teal);transition:color var(--t)}
.ret .lk:hover{color:#A8400A;text-decoration:underline}

/* ---------- croquis y saltos de sección ---------- */
.croquis{margin:62px 0 10px}
.croquis svg{width:100%;height:auto;display:block;border-radius:5px}
section.oscura .croquis{margin-top:0}
.salto{display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap;
  border:1px solid var(--linea);border-left:4px solid var(--teal);border-radius:var(--radio);
  padding:28px 30px;margin:42px 0 10px;background:var(--papel)}
@media (max-width:980px){ .marca .baj{display:none} }

/* ---------- rejillas de límites, responsivas de verdad ---------- */
.limites.tres{grid-template-columns:repeat(3,1fr)}
.limites.dos{grid-template-columns:repeat(2,1fr)}
@media (max-width:1100px){ .limites.tres{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px){ .limites.tres,.limites.dos{grid-template-columns:1fr} }

/* ===================================================================
   CABECERA FLOTANTE: transparente sobre la portada, pastilla al bajar
   =================================================================== */
.cab{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;
  border-bottom:0;box-shadow:none;padding:16px 0;
  transition:padding .38s cubic-bezier(.4,0,.2,1)}
.cab .env{max-width:1340px;height:74px;padding:0 26px;border-radius:999px;
  background:transparent;box-shadow:none;
  transition:background .38s cubic-bezier(.4,0,.2,1),box-shadow .38s,height .38s}
.cab.fija{padding:10px 0;box-shadow:none}
.cab.fija .env{height:66px;background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 18px 46px -26px rgba(26,26,26,.62)}

/* estado de arriba, sobre la portada navy */
.lg{display:block;line-height:0}
.cab .lg-oscuro{display:none}
.cab .menu a{color:rgba(255,255,255,.86)}
.cab .menu a:hover,.cab .menu a.on{color:#fff}
.cab .marca .baj{border-left-color:rgba(255,255,255,.28);color:rgba(255,255,255,.7)}
.cab .marca .baj b{color:#fff}
.cab .menu-btn{border-color:rgba(255,255,255,.38)}
.cab .menu-btn span,.cab .menu-btn span::before,.cab .menu-btn span::after{background:#fff}

/* estado al bajar */
.cab.fija .lg-claro{display:none}
.cab.fija .lg-oscuro{display:block}
.cab.fija .menu a{color:var(--gris)}
.cab.fija .menu a:hover,.cab.fija .menu a.on{color:var(--navy)}
.cab.fija .marca .baj{border-left-color:var(--linea);color:var(--gris)}
.cab.fija .marca .baj b{color:var(--navy)}
.cab.fija .menu-btn{border-color:var(--linea)}
.cab.fija .menu-btn span,.cab.fija .menu-btn span::before,.cab.fija .menu-btn span::after{background:var(--navy)}

/* la portada deja sitio a la cabecera */
.hero{padding-top:96px}

/* menú de celular, siempre legible */
@media (max-width:760px){
  .cab .env{height:64px;padding:0 18px}
  .cab.fija .env{height:60px}
  .cab .menu{top:calc(100% + 8px);left:10px;right:10px;border-radius:10px;border-bottom:0;
    background:#fff;box-shadow:0 22px 50px -26px rgba(26,26,26,.7);overflow:hidden}
  .cab .menu a{color:var(--navy)}
  .cab .menu a:hover,.cab .menu a.on{color:var(--navy)}
}

/* ---------- imágenes de la página de ciclotrón ---------- */
.figs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:10px}
.fig{border:1px solid rgba(255,255,255,.18);border-radius:var(--radio);overflow:hidden;
  background:rgba(255,255,255,.05);margin:0;transition:border-color var(--t)}
.fig:hover{border-color:rgba(255,154,82,.5)}
.fig img{width:100%;height:330px;object-fit:contain;display:block;background:#F3F1EE;padding:26px 24px}
.fig figcaption{padding:18px 22px 20px}
.fig .t{font:700 14.5px Manrope;color:#fff;margin-bottom:5px}
.fig .d{font:400 13.5px/1.55 Manrope;color:#CBC5BF;margin:0}
@media (max-width:860px){ .figs{grid-template-columns:1fr} .fig img{height:240px} }

/* ---------- retrato del gerente ---------- */
.ret{padding:26px 26px 30px}
.ret .retrato{display:block;width:100%;max-width:320px;height:auto;margin:0 auto 14px}
@media (max-width:980px){ .ret .retrato{max-width:260px} }
.ret picture{display:block}

/* ===================================================================
   SECUENCIA CON RIEL: medallón, número como antetítulo y línea que une
   =================================================================== */
.caps{border-top:0}
.cap{position:relative;display:grid;grid-template-columns:68px 1fr 1.3fr;gap:30px;
  align-items:start;padding:28px 0 30px;border-bottom:0;background:none}
.cap:hover{background:none}
.cap::before{content:"";position:absolute;left:34px;top:0;bottom:0;width:1px;
  background:var(--linea);z-index:0}
.cap:first-child::before{top:34px}
.cap:last-child::before{bottom:auto;height:34px}

.bul{position:relative;z-index:2;line-height:0}
.aro{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;
  background:#fff;border:1px solid var(--linea);color:var(--navy);--ac:var(--teal);
  transition:background var(--t),border-color var(--t),color var(--t),
             transform var(--t),box-shadow var(--t)}
.cap:hover .aro{background:var(--teal);border-color:var(--teal);color:#fff;--ac:#fff;
  transform:translateY(-3px);box-shadow:0 16px 28px -16px rgba(232,88,8,.8)}
.ico{width:29px;height:29px;flex:none;--ac:var(--teal)}

.rot{padding-top:14px}
.paso{display:block;font:700 10.5px/1 Manrope;letter-spacing:.2em;color:var(--teal);
  margin-bottom:9px;transition:letter-spacing var(--t)}
.cap:hover .paso{letter-spacing:.26em}
.rot h3{font-size:19.5px}
.cap .col3{padding-top:14px}
.cap .num{display:none}

@media (max-width:980px){
  .cap{grid-template-columns:68px 1fr;gap:22px}
  .cap .col3{grid-column:2;padding-top:4px}
  .rot{padding-top:16px}
}
@media (max-width:760px){
  .cap{grid-template-columns:54px 1fr;gap:16px;padding:22px 0 24px}
  .cap::before{left:27px}
  .cap:first-child::before{top:27px} .cap:last-child::before{height:27px}
  .aro{width:54px;height:54px} .ico{width:24px;height:24px}
  .rot{padding-top:9px} .rot h3{font-size:18px}
  .cap .col3{grid-column:1 / -1;padding-top:12px}
}

/* ---------- el número, con más presencia y su filete ---------- */
.paso{display:flex;align-items:center;gap:10px;font:800 12.5px/1 Manrope;
  letter-spacing:.22em;color:var(--teal);margin-bottom:11px}
.paso::before{content:"";width:18px;height:2px;background:var(--teal);flex:none;
  transition:width var(--t)}
.cap:hover .paso::before{width:30px}
.cap:hover .paso{letter-spacing:.22em}

/* ---------- el riel se dibuja cuando la fila aparece ---------- */
.cap::before{transform:scaleY(0);transform-origin:top;
  transition:transform .7s cubic-bezier(.3,.7,.3,1) .12s}
.cap.vis::before{transform:scaleY(1)}
@media (prefers-reduced-motion:reduce){ .cap::before{transform:none;transition:none} }

/* ===================================================================
   PROPORCIÓN: medallón y una sola columna de contenido, sin huecos
   =================================================================== */
.cap{grid-template-columns:68px minmax(0,1fr);gap:28px;padding:26px 0 30px}
.cpo{min-width:0;padding-top:10px}
.rot{padding-top:0;margin-bottom:12px}
.rot h3{font-size:20px;line-height:1.3}
.cap .col3{padding-top:0;grid-column:auto}
.cap .col3 p{max-width:78ch;margin-bottom:0}
.cap .col3 ul{margin-top:12px;max-width:78ch;columns:1}
.cap .col3 li{margin-bottom:6px}
.paso{margin-bottom:10px}

/* las listas largas se reparten en dos columnas cuando hay sitio */
@media (min-width:1080px){
  .cap .col3 ul.doble{columns:2;column-gap:40px;max-width:none}
  .cap .col3 ul.doble li{break-inside:avoid}
}
@media (max-width:980px){
  .cap{grid-template-columns:68px minmax(0,1fr);gap:22px}
  .cap .col3{grid-column:auto}
  .cpo{padding-top:12px}
}
@media (max-width:760px){
  .cap{grid-template-columns:54px minmax(0,1fr);gap:16px}
  .cpo{padding-top:6px}
  .cap .col3{grid-column:auto}
}

/* ---------- el ícono ocupa el 56% del medallón, no el 43% ---------- */
.ico{width:38px;height:38px}
@media (max-width:760px){ .ico{width:30px;height:30px} }

/* ---------- el acento del ícono se hereda del medallón ----------
   .ico lo declaraba en sí mismo y ganaba a la herencia, así que al
   llenarse el círculo las partes de acento quedaban del mismo color
   que el fondo y desaparecían. Ahora se declara arriba. */
.cap{--ac:var(--teal)}
.ico{--ac:inherit}
.aro{--ac:var(--teal)}
.cap:hover .aro{--ac:#fff}

/* ===================================================================
   NUMERACIÓN CON PESO Y BLOQUE DE FRASE
   =================================================================== */
/* el número de cada paso, casi el doble que antes */
.paso{display:flex;align-items:center;gap:12px;font:800 22px/1 Manrope;
  letter-spacing:.1em;color:var(--teal);margin-bottom:10px}
.paso::before{content:"";width:26px;height:3px;background:var(--teal);flex:none;
  transition:width var(--t)}
.cap:hover .paso::before{width:44px}

/* el número de las tarjetas de público */
.pub .sello{display:flex;align-items:center;gap:11px;font:800 22px/1 Manrope;
  letter-spacing:.1em;color:var(--teal);text-transform:none}
.pub .sello::before{content:"";width:24px;height:3px;background:var(--teal);flex:none;
  transition:width var(--t)}
.pub:hover .sello::before{width:40px}

/* el número fantasma de las tarjetas de modelo, más presente */
.modelo .nm{font:200 74px/1 Manrope;color:var(--teal);opacity:.14;right:26px;top:14px}
.modelo .et{font:800 12px Manrope;letter-spacing:.16em}

/* "Ideal para" resaltado */
.ideal .t{font:800 11.5px Manrope;letter-spacing:.16em}
.ideal p{font-weight:600;color:#12585C}

/* ---------- bloque de frase: el remate de cada página ---------- */
.gancho-s{padding:0 0 78px;background:var(--papel)}
.gancho-s.claro{background:#fff}
.gancho-w{max-width:900px;margin:0 auto;text-align:center;padding:0 28px}
.gancho-w .fl-sup{display:block;width:54px;height:3px;background:var(--teal);margin:0 auto 26px}
.gancho{font:400 clamp(24px,3.1vw,36px)/1.32 'Source Serif 4',Georgia,serif;
  color:var(--navy);letter-spacing:-.008em;margin:0}
.gancho b{font-weight:600;color:var(--teal)}
.gancho-w .firma{display:block;margin-top:20px;font:700 10.5px Manrope;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gris-c);background:none;padding:0}
@media (max-width:760px){ .gancho-s{padding-bottom:54px} }

/* ====== 7/11: planos 3D, titulares a dos columnas y texto justificado ====== */

/* las imagenes tecnicas, a todo el ancho de la columna */
.planos{display:grid;gap:26px;margin-top:10px}
.plano{margin:44px 0 0;border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;background:#fff}
.planos .plano{margin:0}
.plano img{width:100%;height:auto;display:block;background:var(--papel)}
.plano figcaption{padding:17px 24px 19px;border-top:1px solid var(--linea);
  display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline}
.plano .t{font:700 14.5px Manrope;color:var(--navy);flex:0 0 auto}
.plano .d{font:400 14px/1.56 Manrope;color:var(--gris);margin:0;flex:1 1 320px;min-width:0}
.plano .lupa{font:700 10.5px Manrope;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);text-decoration:none;border-bottom:1px solid currentColor;
  padding-bottom:2px;flex:0 0 auto;white-space:nowrap}
.plano .lupa:hover{color:var(--navy)}
.oscura .plano{border-color:rgba(255,255,255,.18)}
@media (max-width:620px){
  .plano figcaption{display:block;padding:15px 18px 17px}
  .plano .t{margin-bottom:6px}
  .plano .lupa{display:inline-block;margin-top:12px}
}

/* el rotulo manda y el titular acompana, sin gritar */
.dos .sello{font-size:13px;letter-spacing:.16em}
.dos h2{font-size:clamp(20px,1.9vw,23.5px);line-height:1.3;letter-spacing:-.008em;
  font-weight:400;margin:12px 0 14px}
.dos h2 b{font-weight:700}

/* parrafos justificados, como un documento impreso */
.enc p.grande,.dos p.grande,.limite p,.plano .d,.nota,.col3 p,.col3 li,.apunte{
  text-align:justify;text-align-last:left;hyphens:auto;-webkit-hyphens:auto}
.hero .grande,.gancho,.gancho-w .firma{text-align:inherit;hyphens:manual}
@media (max-width:560px){
  .enc p.grande,.dos p.grande,.limite p,.plano .d,.nota,.col3 p,.col3 li,.apunte{
    text-align:left;hyphens:manual}
}