/* ============================================================
   Especificaciones (mismo contenido que la landing de flotillas)
   Anatomía del equipo: la foto real con puntos numerados; en escritorio,
   líneas que se dibujan del punto a su nota (arriba y abajo del equipo).
   En móvil las notas pasan a lista numerada debajo de la foto.
   ============================================================ */

.bt.sp { background: #f6f9fc; padding: 96px 0 88px; color: var(--ink); }
.sp-head { text-align: center; max-width: 640px; margin: 0 auto 8px; }
.sp .eyebrow { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.sp-h2 { margin: 0 0 12px; font: 800 max(28px, min(3.5vw, 42px))/1.12 'Plus Jakarta Sans', sans-serif; letter-spacing: -1px; color: var(--ink); }
.sp-sub { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }

/* Figura */
.sp-figura { position: relative; max-width: 860px; margin: 8px auto 0; }
.sp-lienzo { position: relative; aspect-ratio: 1254 / 1004; }
.sp-foto { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 26px 34px #0a223b2e); }
.sp-lineas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sp-lineas line { stroke: var(--blue); stroke-width: 2.4; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.sp-punto {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--blue); color: #fff; font: 800 12px Inter, sans-serif;
  box-shadow: 0 0 0 4px #ffffffd9, 0 4px 12px #0a223b40;
}
.sp-punto::after {                                     /* pulso suave */
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--blue);
  animation: sp-pulso 2.4s var(--ease-out) infinite; opacity: 0;
}
@keyframes sp-pulso { 0% { transform: scale(.8); opacity: .6; } 70%, 100% { transform: scale(2); opacity: 0; } }

.sp-notas { list-style: none; margin: 0; padding: 0; }
.sp-nota b { display: block; font: 700 15px/1.25 'Plus Jakarta Sans', sans-serif; color: var(--ink); }
.sp-nota span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--muted); }

@media (min-width: 761px) {
  .sp-notas { position: absolute; inset: 0; }
  .sp-nota { position: absolute; left: var(--x); width: 180px; text-align: center; transform: translateX(-50%); }
  .sp-arriba { bottom: 80.08%; padding-bottom: 8px; }   /* termina donde llega la línea (y = 200) */
  .sp-abajo { top: 79.68%; padding-top: 8px; }          /* empieza donde termina la línea (y = 800) */
  .sp-der { transform: translateX(-78%); text-align: right; }
  .sp-izq { transform: translateX(-12%); text-align: left; }
}

/* Destacados (del centro hacia afuera) */
.sp-destacados {
  display: grid; grid-template-columns: repeat(3, 1fr); max-width: 860px; margin: 38px auto 0;
  padding: 26px 10px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #e3ebf2;
}
.sp-destacados > div { text-align: center; }
.sp-destacados > div + div { border-left: 1px solid #dce5ed; }
.sp-destacados strong { display: block; font: 800 30px 'Plus Jakarta Sans', sans-serif; letter-spacing: -.6px; color: var(--blue); }
.sp-destacados span { display: block; margin-top: 6px; font-size: 13px; color: #4e6b81; }

/* Tabla en dos columnas */
.sp-tabla { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; max-width: 860px; margin: 26px auto 0; }
.sp-tabla > div { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid #dce5ed; font-size: 14px; line-height: 1.6; }
.sp-tabla dt { font-weight: 600; color: var(--ink); }
.sp-tabla dd { margin: 0; color: var(--muted); }
.sp-mas { max-width: 860px; margin: 18px auto 0; }
.sp-mas summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 600; color: var(--blue);
}
.sp-mas summary::-webkit-details-marker { display: none; }
.sp-mas summary::after { content: "+"; font-size: 18px; transition: transform .25s var(--ease-out); }
.sp-mas[open] summary::after { transform: rotate(45deg); }
.sp-mas-cuerpo { overflow: hidden; }
.sp-mas-cuerpo p { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); }

/* Entrada: la foto se acerca, luego cada punto con su línea y su nota */
.sp-figura.anima .sp-foto { animation: sp-foto 1s var(--ease-out) backwards; }
@keyframes sp-foto { from { opacity: 0; transform: scale(.9) rotate(-3deg); } }
.sp-figura.anima .sp-punto { animation: sp-punto .5s var(--ease-pop) backwards; animation-delay: calc(.7s + var(--i) * .18s); }
@keyframes sp-punto { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } }
.sp-figura.anima .sp-lineas line { animation: sp-linea .55s var(--ease-out) backwards; animation-delay: calc(.85s + var(--i) * .18s); }
@keyframes sp-linea { from { opacity: 0; } }
.sp-figura.anima .sp-nota { animation: sp-nota .5s var(--ease-out) backwards; animation-delay: calc(1s + var(--i) * .18s); }
@keyframes sp-nota { from { opacity: 0; } }
.sp-figura.antes .sp-foto, .sp-figura.antes .sp-punto, .sp-figura.antes .sp-lineas line, .sp-figura.antes .sp-nota { opacity: 0; }

@media (max-width: 760px) {
  .bt.sp { padding: 60px 0; }
  .sp-sub { font-size: 15px; line-height: 1.55; }
  .sp-figura { margin-top: 0; }
  .sp-lienzo { margin: -12% 0 -15%; pointer-events: none; }   /* sin las franjas vacías donde en escritorio van las notas */
  .sp-lineas { display: none; }
  .sp-punto { width: 22px; height: 22px; font-size: 11px; }
  .sp-notas { display: grid; gap: 12px; margin-top: 4px; counter-reset: nota; }
  .sp-nota { display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; counter-increment: nota; }
  .sp-nota::before {
    content: counter(nota); grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    background: var(--blue); color: #fff; font: 800 11px Inter, sans-serif;
  }
  .sp-nota span { margin-top: 1px; }
  .sp-destacados { margin-top: 28px; padding: 20px 4px; }
  .sp-destacados strong { font-size: 23px; }
  .sp-destacados span { font-size: 12px; }
  .sp-tabla { grid-template-columns: 1fr; }
  .sp-tabla > div { grid-template-columns: 1fr 1.3fr; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-punto::after { animation: none; }
  .sp-figura.anima * { animation: none !important; }
  .sp-figura.antes * { opacity: 1 !important; }
}