/* ============================================================
   CONEX361° — pages.css
   Bloques de página: héroe, rosa de progreso, bloqueos,
   regla de Incoterms, servicios, sectores, fases, fichas.
   ============================================================ */

/* ---------------------------------------------------------
   1. HÉROE
   --------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
  padding-top:var(--header-h);
  background:var(--mar-profundo);
}
.hero__media{position:absolute;inset:0;z-index:0;pointer-events:none;}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:70% center;}
.hero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;}
.hero__veil::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(5,22,36,.97) 0%,
    rgba(5,22,36,.93) 27%,
    rgba(5,22,36,.58) 49%,
    rgba(5,22,36,.14) 70%,
    rgba(5,22,36,.44) 100%);
}
.hero__veil::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(5,22,36,.86) 0%, rgba(5,22,36,0) 22%,
    rgba(5,22,36,0) 60%, rgba(5,22,36,.94) 100%);
}
.hero__in{
  position:relative;z-index:2;
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(1.5rem,3.4vh,2.6rem);
}
.hero__eyebrow{margin-bottom:clamp(1rem,2vw,1.5rem);}
.hero__title{font-size:var(--t-mega);line-height:.9;letter-spacing:-.045em;color:#fff;max-width:19ch;}
.hero__title .on{position:relative;color:var(--export);white-space:nowrap;}
.hero__title .on::after{
  content:'';position:absolute;left:0;right:0;bottom:.03em;height:.05em;
  background:var(--export);transform:scaleX(0);transform-origin:left;
  animation:subrayaOn 1s var(--e-out) 1.15s forwards;
}
@keyframes subrayaOn{to{transform:scaleX(1);}}
.hero__lead{
  margin-top:clamp(1.1rem,2vw,1.5rem);
  color:#B4C4D4;max-width:47ch;
  font-size:clamp(1rem,1.05vw,1.11rem);line-height:1.58;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:clamp(1.5rem,2.6vw,2rem);}
.hero__foot{
  position:relative;z-index:2;
  border-top:1px solid rgba(255,255,255,.13);
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2.2rem;
  padding-block:1.1rem;
}
.hero__stat{display:flex;align-items:baseline;gap:.65rem;color:#8FA3B8;font-size:var(--t-xs);}
.hero__stat b{font-family:var(--f-display);font-weight:700;font-size:1.35rem;color:#fff;letter-spacing:-.03em;line-height:1;}
.hero__stat i{font-style:normal;color:var(--export);}
.hero__scroll{margin-left:auto;display:inline-flex;align-items:center;gap:.7rem;color:#8FA3B8;font-size:var(--t-micro);letter-spacing:.19em;text-transform:uppercase;}
.hero__scroll span{width:22px;height:34px;border:1px solid rgba(255,255,255,.3);border-radius:var(--r-pill);position:relative;flex:none;}
.hero__scroll span::after{
  content:'';position:absolute;left:50%;top:7px;width:2px;height:6px;border-radius:2px;
  background:var(--export);transform:translateX(-50%);
  animation:calado 1.9s var(--e-io) infinite;
}
@keyframes calado{0%{transform:translate(-50%,0);opacity:0;}25%{opacity:1;}75%{transform:translate(-50%,13px);opacity:0;}100%{opacity:0;}}
@media(max-width:860px){
  /* En vertical la composición a tercios no cabe: el bucle pasa a ser una
     banda centrada detrás del titular, con la opacidad bajada. */
  .hero__media{inset:50% 0 auto 0;height:auto;aspect-ratio:16/9;transform:translateY(-50%);opacity:.5;}
  .hero__media img{height:100%;object-position:66% center;}
  .hero__veil::before{
    background:linear-gradient(to bottom,
      rgba(5,22,36,.93) 0%, rgba(5,22,36,.55) 38%,
      rgba(5,22,36,.74) 68%, rgba(5,22,36,.97) 100%);
  }
  .hero__title{max-width:100%;}
  .hero__scroll{display:none;}
  .hero__foot{gap:.7rem 1.6rem;}
  .hero__stat{font-size:var(--t-micro);}
}
@media(max-width:560px){.hero__cta .btn{flex:1 1 100%;}.hero__lead{font-size:1rem;}}

/* ---------------------------------------------------------
   2. ROSA DE PROGRESO — el 361° de la marca, en clave náutica
   Marca el rumbo recorrido en la página: de 0° a 361°.
   --------------------------------------------------------- */
.rosa{
  position:fixed;right:clamp(.8rem,2vw,1.7rem);bottom:clamp(.8rem,2vw,1.7rem);
  z-index:780;width:76px;height:76px;pointer-events:none;
  opacity:0;transform:scale(.85);
  transition:opacity var(--d-2) var(--e-out),transform var(--d-2) var(--e-out);
}
.rosa[data-on='1']{opacity:1;transform:none;}
.rosa svg{width:100%;height:100%;overflow:visible;}
.rosa__track{fill:none;stroke:rgba(12,63,94,.16);stroke-width:2;}
.is-dark-zone .rosa__track{stroke:rgba(255,255,255,.18);}
.rosa__bar{fill:none;stroke:var(--export);stroke-width:2.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;}
.rosa__tick{stroke:rgba(12,63,94,.3);stroke-width:1;}
.is-dark-zone .rosa__tick{stroke:rgba(255,255,255,.3);}
.rosa__aguja{stroke:var(--mar);stroke-width:2;stroke-linecap:round;transform-origin:50% 50%;}
.is-dark-zone .rosa__aguja{stroke:#fff;}
.rosa__txt{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.02em;color:var(--mar);
  font-variant-numeric:tabular-nums;
}
.is-dark-zone .rosa__txt{color:#fff;}
@media(max-width:720px){.rosa{display:none;}}

/* ---------------------------------------------------------
   3. MANIFIESTO Y CIFRAS
   --------------------------------------------------------- */
.manifiesto{font-size:clamp(1.6rem,4.2vw,3.3rem);line-height:1.14;letter-spacing:-.035em;font-family:var(--f-display);font-weight:700;max-width:19ch;}
.manifiesto em{font-style:normal;color:var(--ink-3);}
.statline{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);}
.statline > div{background:var(--bg);padding:clamp(1.4rem,2.6vw,2.1rem);}
.statline b{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(2rem,4.2vw,3rem);letter-spacing:-.04em;line-height:1;color:var(--ink);}
.statline b i{font-style:normal;color:var(--accent-ink);}
.statline span{display:block;margin-top:.7rem;font-size:var(--t-xs);color:var(--ink-2);line-height:1.5;}

/* ---------------------------------------------------------
   4. LOS TRES BLOQUEOS — tarjetas con número de bahía
   --------------------------------------------------------- */
.bloqueo{
  position:relative;border:1px solid var(--rule);padding:clamp(1.6rem,2.8vw,2.4rem);
  display:flex;flex-direction:column;gap:.9rem;overflow:hidden;
  transition:border-color var(--d-2),transform var(--d-2) var(--e-out);
}
.bloqueo:hover{border-color:color-mix(in srgb,var(--ink) 26%,transparent);transform:translateY(-3px);}
.bloqueo__n{
  position:absolute;right:-.12em;top:-.22em;
  font-family:var(--f-display);font-weight:700;font-size:clamp(5rem,11vw,8.5rem);
  line-height:1;letter-spacing:-.06em;color:color-mix(in srgb,var(--ink) 6%,transparent);
  user-select:none;pointer-events:none;
}
.bloqueo h3{font-size:var(--t-md);position:relative;}
.bloqueo p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.65;position:relative;max-width:38ch;}
.bloqueo__coste{
  margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--rule);
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--accent-ink);letter-spacing:.04em;
  position:relative;
}

/* ---------------------------------------------------------
   5. REGLA DE INCOTERMS — la pieza firma del sitio
   Un solo trayecto de la fábrica a tu almacén; el Incoterm
   elegido decide dónde deja de pagar el proveedor y empiezas tú.
   --------------------------------------------------------- */
.inco{--corte:50%;}
.inco__mando{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(2rem,4vw,3rem);}
.inco__b{
  font-family:var(--f-mono);font-size:var(--t-sm);font-weight:600;letter-spacing:.08em;
  padding:.7rem 1.05rem;border:1px solid var(--rule);border-radius:var(--r-sm);
  color:var(--ink-2);background:transparent;min-height:44px;
  transition:background var(--d-1) var(--e-out),color var(--d-1),border-color var(--d-1);
}
.inco__b:hover{border-color:var(--ink-3);color:var(--ink);}
.inco__b[aria-pressed='true']{background:var(--export);border-color:var(--export);color:var(--mar);}

.inco__pista{position:relative;padding-block:clamp(2.4rem,5vw,3.6rem) 0;}
.inco__riel{position:relative;height:8px;background:var(--rule);border-radius:var(--r-pill);}
.inco__prov,.inco__tuyo{position:absolute;top:0;bottom:0;border-radius:var(--r-pill);transition:width var(--d-2) var(--e-swell),left var(--d-2) var(--e-swell);}
.inco__prov{left:0;width:var(--corte);background:var(--aire);}
.inco__tuyo{left:var(--corte);right:0;background:var(--export);}
/* Marca de traspaso: donde el coste cambia de bolsillo */
.inco__corte{
  position:absolute;left:var(--corte);top:50%;transform:translate(-50%,-50%);
  width:30px;height:30px;border-radius:50%;background:var(--bg);
  border:3px solid var(--mar);z-index:3;
  transition:left var(--d-2) var(--e-swell);
  display:grid;place-items:center;
}
.inco__corte::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--mar);}
.inco__corte b{
  position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;
  color:var(--mar);background:var(--export);padding:.35em .7em;border-radius:var(--r-sm);white-space:nowrap;
}
/* Marca de riesgo: en CFR y CIF el flete lo paga el proveedor pero el
   riesgo ya es tuyo desde que la carga sube a bordo. Es la trampa clásica
   del Incoterm, así que se dibuja aparte y no se mezcla con el coste. */
.inco__riesgo{
  position:absolute;left:var(--riesgo,var(--corte));top:50%;
  transform:translate(-50%,-50%);z-index:2;
  width:22px;height:22px;border-radius:50%;
  border:2px dashed var(--mar);background:transparent;
  transition:left var(--d-2) var(--e-swell),opacity var(--d-2);
}
.inco__riesgo[data-igual='1']{opacity:0;}
.inco__riesgo b{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);background:var(--bg);border:1px solid var(--rule);
  padding:.35em .7em;border-radius:var(--r-sm);white-space:nowrap;
}
.inco__hitos{
  display:grid;grid-template-columns:repeat(7,1fr);margin-top:3.4rem;gap:.4rem;
}
.inco__hito{display:flex;flex-direction:column;align-items:center;gap:.55rem;text-align:center;position:relative;}
.inco__hito::before{
  content:'';position:absolute;top:-3.4rem;left:50%;transform:translateX(-50%);
  width:1px;height:2.9rem;background:var(--rule);
}
.inco__hito svg{width:26px;height:26px;color:var(--ink-3);transition:color var(--d-2);}
.inco__hito span{font-size:var(--t-micro);letter-spacing:.06em;color:var(--ink-3);line-height:1.35;text-transform:uppercase;font-weight:600;}
.inco__hito[data-lado='prov'] svg{color:var(--aire-ink);}
.inco__hito[data-lado='prov'] span{color:var(--aire-ink);}
.inco__hito[data-lado='tuyo'] svg{color:var(--accent-ink);}
.inco__hito[data-lado='tuyo'] span{color:var(--accent-ink);}
.is-dark .inco__hito[data-lado='prov'] svg,.is-dark .inco__hito[data-lado='prov'] span{color:var(--aire);}
@media(max-width:820px){
  .inco__hitos{grid-template-columns:repeat(7,1fr);gap:.15rem;}
  .inco__hito span{font-size:9px;letter-spacing:.02em;}
  .inco__hito svg{width:20px;height:20px;}
}
.inco__lectura{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:clamp(2.4rem,5vw,3.4rem);}
.inco__lectura > div{background:var(--bg);padding:clamp(1.2rem,2.4vw,1.8rem);}
.inco__lectura dt{font-size:var(--t-micro);font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.6rem;}
.inco__lectura dd{margin:0;font-size:var(--t-sm);color:var(--ink);line-height:1.6;}
.inco__lectura dd b{font-family:var(--f-brand);font-weight:700;}
.inco__nota{margin-top:1.6rem;}

/* ---------------------------------------------------------
   6. SERVICIOS — lista de filas con plancha flotante
   --------------------------------------------------------- */
.serv{position:relative;}
.serv__fila{
  display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,.9fr) auto;
  gap:clamp(1rem,3vw,2.4rem);align-items:center;
  padding:clamp(1.5rem,3vw,2.3rem) 0;border-top:1px solid var(--rule);
  transition:background var(--d-2) var(--e-out),padding-inline var(--d-2) var(--e-out);
  position:relative;
}
.serv__fila:last-child{border-bottom:1px solid var(--rule);}
.serv__fila:hover{background:var(--bg-alt);padding-inline:clamp(.6rem,1.6vw,1.4rem);}
.serv__n{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--accent-ink);letter-spacing:.1em;}
.serv__t{font-size:clamp(1.35rem,2.6vw,2.05rem);line-height:1.04;letter-spacing:-.03em;}
.serv__d{font-size:var(--t-sm);color:var(--ink-2);line-height:1.62;}
.serv__mas{width:34px;height:34px;flex:none;color:var(--ink-3);transition:color var(--d-2),transform var(--d-2) var(--e-out);}
.sect__row .serv__mas{margin-top:.35em;}
.sect__row:hover .serv__mas{color:var(--accent-ink);transform:translateX(4px);}
.serv__fila:hover .serv__mas{color:var(--accent-ink);transform:translateX(4px);}
@media(max-width:900px){
  .serv__fila{grid-template-columns:auto 1fr;gap:.4rem 1rem;}
  .serv__d{grid-column:2;}
  .serv__mas{display:none;}
}
.serv__peek{
  position:absolute;z-index:5;width:330px;pointer-events:none;
  opacity:0;transform:translate(-50%,-50%) scale(.94);
  transition:opacity var(--d-1) var(--e-out),transform var(--d-2) var(--e-out);
  box-shadow:var(--sh-3);
}
.serv__peek[data-on='1']{opacity:1;transform:translate(-50%,-50%) scale(1);}
.serv__peek img{width:100%;aspect-ratio:4/3;object-fit:cover;}
@media(max-width:1024px){.serv__peek{display:none;}}

/* ---------------------------------------------------------
   7. SECTORES
   --------------------------------------------------------- */
.sect__row{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1rem,3vw,2.4rem);align-items:start;
  padding:clamp(1.6rem,3.2vw,2.6rem) 0;border-top:1px solid var(--rule);position:relative;
  transition:padding-inline var(--d-2) var(--e-out);
}
.sect__row:last-child{border-bottom:1px solid var(--rule);}
.sect__row:hover{padding-inline:clamp(.6rem,1.6vw,1.4rem);}
.sect__n{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--accent-ink);letter-spacing:.1em;padding-top:.75em;}
.sect__t{font-size:clamp(1.5rem,3.6vw,2.7rem);line-height:1.02;letter-spacing:-.035em;}
.sect__d{margin-top:.6rem;font-size:var(--t-sm);color:var(--ink-2);max-width:70ch;line-height:1.62;}
.sect__peek{
  position:absolute;z-index:5;width:300px;pointer-events:none;
  opacity:0;transform:translate(-50%,-50%) scale(.94);
  transition:opacity var(--d-1) var(--e-out),transform var(--d-2) var(--e-out);
  box-shadow:var(--sh-3);
}
.sect__peek[data-on='1']{opacity:1;transform:translate(-50%,-50%) scale(1);}
.sect__peek img{width:100%;aspect-ratio:4/3;object-fit:cover;}
@media(max-width:1024px){.sect__peek{display:none;}}

/* ---------------------------------------------------------
   8. FASES 15+15+0
   --------------------------------------------------------- */
.fases{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);}
@media(max-width:860px){.fases{grid-template-columns:1fr;}}
.fase{background:var(--bg);padding:clamp(1.6rem,3vw,2.6rem);display:flex;flex-direction:column;gap:1rem;transition:background var(--d-2);}
.fase[data-active='1']{background:var(--bg-alt);}
.fase__reloj{font-family:var(--f-display);font-weight:700;font-size:clamp(2.6rem,6vw,4.4rem);line-height:.9;letter-spacing:-.05em;color:var(--ink);}
.fase__reloj i{font-style:normal;font-size:.32em;letter-spacing:0;color:var(--accent-ink);margin-left:.25em;}
.fase__t{font-size:var(--t-md);}
.fase__d{font-size:var(--t-sm);color:var(--ink-2);line-height:1.62;}
.fase__nos{margin-top:auto;padding-top:1.2rem;border-top:1px solid var(--rule);font-size:var(--t-xs);color:var(--ink-2);line-height:1.6;}
.fase__nos b{display:block;font-size:var(--t-micro);letter-spacing:.19em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:.5rem;font-weight:600;}

/* ---------------------------------------------------------
   9. CABECERA DE PÁGINA INTERIOR
   --------------------------------------------------------- */
.phead{
  background:var(--mar-profundo);color:#fff;position:relative;overflow:hidden;
  padding-top:calc(var(--header-h) + clamp(3rem,7vw,6rem));
  padding-bottom:clamp(3rem,7vw,5.5rem);
}
.phead::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:26px;
  background-repeat:repeat-x;background-position:center bottom;background-size:auto 26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='26' viewBox='0 0 120 26'%3E%3Cpath d='M0 13c10-7.5 20-7.5 30 0s20 7.5 30 0 20-7.5 30 0 20 7.5 30 0' fill='none' stroke='%231B506F' stroke-width='1.8'/%3E%3C/svg%3E");
  opacity:.7;pointer-events:none;
}
.phead__in{position:relative;z-index:2;}
.phead__t{font-size:var(--t-xxl);color:#fff;max-width:17ch;margin-top:1.2rem;}
.phead__d{margin-top:1.3rem;color:#B4C4D4;max-width:56ch;font-size:clamp(1.02rem,1.15vw,1.16rem);line-height:1.6;}
.phead__meta{display:flex;flex-wrap:wrap;gap:.9rem 2rem;margin-top:2rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.14);}

/* ---------------------------------------------------------
   10. LLAMADA FINAL
   --------------------------------------------------------- */
.cta-end{
  background:var(--mar);color:#fff;position:relative;overflow:hidden;
  padding-block:clamp(4rem,9vw,7.5rem);
}
.cta-end__t{font-size:var(--t-xl);color:#fff;max-width:20ch;}
.cta-end__d{margin-top:1.2rem;color:#B4C4D4;max-width:50ch;font-size:var(--t-sm);line-height:1.65;}
.cta-end__acc{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem;}
.cta-end__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--gut);align-items:center;}
@media(max-width:860px){.cta-end__grid{grid-template-columns:1fr;}}
.cta-end__ola{
  position:absolute;left:0;right:0;bottom:0;height:120px;opacity:.14;pointer-events:none;
  background-repeat:repeat-x;background-position:center bottom;background-size:auto 120px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='120' viewBox='0 0 480 120'%3E%3Cpath d='M0 60c40-34 80-34 120 0s80 34 120 0 80-34 120 0 80 34 120 0' fill='none' stroke='%23F2A900' stroke-width='2'/%3E%3Cpath d='M0 96c40-34 80-34 120 0s80 34 120 0 80-34 120 0 80 34 120 0' fill='none' stroke='%23F2A900' stroke-width='2'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------
   11. FICHAS DE OPERACIÓN
   --------------------------------------------------------- */
.ficha{position:relative;display:flex;flex-direction:column;border:1px solid var(--rule);background:var(--bg);overflow:hidden;}
.ficha__img{position:relative;overflow:hidden;background:var(--bg-alt);}
.ficha__img img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform var(--d-3) var(--e-out);}
.ficha:hover .ficha__img img{transform:scale(1.035);}
.ficha__cinta{
  position:absolute;left:0;top:1rem;background:var(--export);color:var(--mar);
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;
  padding:.4em .8em .4em 1rem;
}
.ficha__cuerpo{padding:clamp(1.3rem,2.4vw,1.9rem);display:flex;flex-direction:column;gap:.75rem;flex:1;}
.ficha__t{font-size:var(--t-md);}
.ficha__d{font-size:var(--t-sm);color:var(--ink-2);line-height:1.62;}
.ficha__specs{margin-top:auto;padding-top:1.1rem;}

/* ---------------------------------------------------------
   12. BLOQUE DE CITA / AVISO
   --------------------------------------------------------- */
.aviso{
  border:1px solid var(--rule);border-left:3px solid var(--export);
  padding:clamp(1.2rem,2.6vw,1.9rem);
  display:flex;flex-direction:column;gap:.7rem;
}
.aviso__t{font-family:var(--f-brand);font-weight:700;font-size:var(--t-md);letter-spacing:-.02em;}
.aviso p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.65;max-width:64ch;}

/* Cita grande */
.cita{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.16;letter-spacing:-.032em;
  max-width:24ch;
}
.cita__pie{margin-top:1.4rem;font-family:var(--f-body);font-weight:400;font-size:var(--t-sm);color:var(--ink-2);letter-spacing:0;}

/* ---------------------------------------------------------
   13. PASOS NUMERADOS
   --------------------------------------------------------- */
.pasos{counter-reset:paso;display:flex;flex-direction:column;}
.paso{
  counter-increment:paso;position:relative;
  padding:clamp(1.4rem,2.6vw,2rem) 0 clamp(1.4rem,2.6vw,2rem) clamp(3.4rem,6vw,5rem);
  border-top:1px solid var(--rule);
}
.pasos > .paso:last-child{border-bottom:1px solid var(--rule);}
.paso::before{
  content:counter(paso,decimal-leading-zero);
  position:absolute;left:0;top:clamp(1.4rem,2.6vw,2rem);
  font-family:var(--f-mono);font-size:var(--t-sm);color:var(--accent-ink);letter-spacing:.08em;
}
.paso h2,.paso h3{font-size:var(--t-md);margin-bottom:.5rem;}
.paso p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.66;max-width:62ch;}

/* ---------------------------------------------------------
   14. CAJA DE DATO DESTACADO
   --------------------------------------------------------- */
.dato{
  display:flex;flex-direction:column;gap:.4rem;
  padding:clamp(1.2rem,2.4vw,1.7rem);border:1px solid var(--rule);background:var(--bg);
}
.dato b{font-family:var(--f-display);font-weight:700;font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1;letter-spacing:-.04em;color:var(--ink);}
.dato b i{font-style:normal;color:var(--accent-ink);}
.dato span{font-size:var(--t-xs);color:var(--ink-2);line-height:1.55;}

/* ---------------------------------------------------------
   15. GALERÍA DE ILUSTRACIÓN A SANGRE
   --------------------------------------------------------- */
.plancha{position:relative;overflow:hidden;border:1px solid var(--rule);background:var(--bg-alt);}
.plancha img{width:100%;height:100%;object-fit:cover;display:block;}
.plancha figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:1.4rem 1.2rem .9rem;
  /* Banda sólida con un degradado encima, y no solo un degradado: la
     plancha de debajo es clara y el blanco se perdía en la primera línea.
     Al ser un color de fondo real, además se puede medir. */
  background-color:rgba(7,31,48,.88);
  background-image:linear-gradient(to top,rgba(7,31,48,.55),rgba(7,31,48,0));
  color:#fff;font-size:var(--t-xs);line-height:1.5;
}
.plancha figcaption b{display:block;font-family:var(--f-brand);font-weight:700;font-size:var(--t-sm);color:#fff;margin-bottom:.2rem;}