/* ══════════════════════════════════════════════════════════════
   SÉ VIAL · style-v2.css
   Estilos EXCLUSIVOS de la versión 2 (página con slug "v2").
   Se carga solo en templates/page-v2.php y SIEMPRE después de
   style.css, así que sobrescribe sin tocar la v1.

   REGLA DE ORO: todo selector va anidado bajo .sevial-v2
   (el <main class="sevial-v2"> de page-v2.php). Nada de aquí
   afecta a la home actual (v1).
   ══════════════════════════════════════════════════════════════ */

/* ── Tokens propios de la v2 ── */
.sevial-v2 {
  --alert:      #E4572E;   /* rojo/ámbar de aviso (siniestralidad) */
  --alert-soft: #FFE7DE;
  --lane:       #FFC845;   /* amarillo de marca vial (línea de carril) */
}

.sevial-v2 [class*="v2-"] i { line-height: 1; }


/* ══════════════════════════════════════════════════════════════
   0. SEPARADOR "LÍNEA DE CARRETERA" bajo los eyebrows (.label)
   ══════════════════════════════════════════════════════════════ */
.sevial-v2 .label { position: relative; }
.sevial-v2 .label::after {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  margin-top: .6rem;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg,
              var(--accent) 0 12px, transparent 12px 20px);
  opacity: .9;
}
.sevial-v2 .about-text--centered .label::after,
.sevial-v2 .text-center .label::after,
.sevial-v2 .stats-header .label::after,
.sevial-v2 .message-section .label::after,
.sevial-v2 .campana-dirigida .label::after,
.sevial-v2 .form-header .label::after { margin-inline: auto; }


/* ══════════════════════════════════════════════════════════════
   1. HERO · línea de carril central animada
   ══════════════════════════════════════════════════════════════ */
.sevial-v2 .hero-road { position: absolute; inset: 0; overflow: hidden; }
.sevial-v2 .hero-road::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10%;
  width: 8px;
  height: 120%;
  transform: translateX(-50%);
  background: repeating-linear-gradient(to top,
              rgba(255,255,255,.55) 0 26px, transparent 26px 58px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 85%);
          mask-image: linear-gradient(to top, #000 0%, transparent 85%);
  animation: v2-lane 1.1s linear infinite;
}
@keyframes v2-lane { to { background-position: 0 58px; } }
@media (prefers-reduced-motion: reduce) {
  .sevial-v2 .hero-road::before { animation: none; }
}


/* ══════════════════════════════════════════════════════════════
   2. ¿QUÉ ES? · las "pills" pasan a icon-chips
   ══════════════════════════════════════════════════════════════ */
.sevial-v2 .about-pills { gap: .75rem; margin-top: 2rem; }
.sevial-v2 .about-pills .pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 1.15rem;
  font-weight: 700;
  border: 1.5px solid var(--light-blue);
  background: var(--white);
  color: var(--blue);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.sevial-v2 .about-pills .pill:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.sevial-v2 .about-pills .pill::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--sky);
  font-size: .95em;
}
/* Gratuito / Impacto real / RSC / Fesvial */
.sevial-v2 .about-pills .pill:nth-child(1)::before { content: "\f4c0"; } /* hand-holding-dollar */
.sevial-v2 .about-pills .pill:nth-child(2)::before { content: "\f140"; } /* bullseye */
.sevial-v2 .about-pills .pill:nth-child(3)::before { content: "\f06c"; } /* leaf */
.sevial-v2 .about-pills .pill:nth-child(4)::before { content: "\f132"; } /* shield */


/* ══════════════════════════════════════════════════════════════
   3. DATOS 2025 · glass cards + nº fantasma + aro luminoso + estelas
   ══════════════════════════════════════════════════════════════ */
.sevial-v2 .stats-section { position: relative; overflow: hidden; }
.sevial-v2 .stats-section .container { position: relative; z-index: 1; }

/* estelas de carretera al fondo */
.sevial-v2 .v2-stats-road {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: auto;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(0,174,239,.5));
  -webkit-mask-image: linear-gradient(to top, #000 25%, transparent 100%);
          mask-image: linear-gradient(to top, #000 25%, transparent 100%);
}

/* rejilla y tarjetas */
.sevial-v2 .stats-grid { position: relative; z-index: 1; gap: 1.75rem; }
.sevial-v2 .stat-block {
  position: relative;
  overflow: hidden;
  padding: 2.5rem 1.5rem 2rem;
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(0,174,239,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 20px 44px rgba(0,18,45,.4);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
/* contenido por encima */
.sevial-v2 .stat-icon,
.sevial-v2 .stat-number,
.sevial-v2 .stat-label,
.sevial-v2 .stat-sublabel { position: relative; z-index: 1; }

/* icono en aro luminoso */
.sevial-v2 .stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  margin-bottom: 1.5rem;
  border-radius: 50%;
  font-size: 1.7rem;
  color: #35c1f2;
  background: radial-gradient(circle at 50% 45%, rgba(0,174,239,.16), rgba(0,40,85,0) 70%);
  border: 2px solid rgba(0,174,239,.75);
  box-shadow: 0 0 22px rgba(0,174,239,.4), inset 0 0 18px rgba(0,174,239,.15);
}
.sevial-v2 .stat-icon::after {   /* punto de conexión bajo el icono */
  content: "";
  position: absolute;
  bottom: -13px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #35c1f2;
  box-shadow: 0 0 10px rgba(0,174,239,.9);
}
/* primera tarjeta en tono alerta (naranja) */
.sevial-v2 .stat-block:first-child .stat-icon {
  color: #ff9a5b;
  border-color: rgba(255,138,60,.8);
  background: radial-gradient(circle at 50% 45%, rgba(255,138,60,.18), rgba(40,20,0,0) 70%);
  box-shadow: 0 0 22px rgba(255,138,60,.45), inset 0 0 18px rgba(255,138,60,.15);
}
.sevial-v2 .stat-block:first-child .stat-icon::after {
  background: #ff9a5b;
  box-shadow: 0 0 10px rgba(255,138,60,.9);
}

/* cifra grande */
.sevial-v2 .stat-number {
  font-size: clamp(3rem, 7vw, 4.5rem);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(180deg, #ffffff, #bcd8f5);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.sevial-v2 .stat-label {
  margin-top: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: #dcebfb;
}
.sevial-v2 .stat-sublabel { color: rgba(255,255,255,.5); }

/* barra de progreso con punto */
.sevial-v2 .stat-block::after {
  content: "";
  display: block;
  position: relative;
  z-index: 1;
  height: 3px;
  width: 80%;
  margin: 1.5rem auto 0;
  border-radius: 2px;
  background:
    radial-gradient(circle at 32% 50%, #bfefff 0 3px, transparent 3.6px),
    linear-gradient(90deg, rgba(0,174,239,.12), rgba(0,174,239,.6) 45%, rgba(0,174,239,.12));
}
.sevial-v2 .stat-block:first-child::after {
  background:
    radial-gradient(circle at 32% 50%, #ffd0b0 0 3px, transparent 3.6px),
    linear-gradient(90deg, rgba(255,138,60,.12), rgba(255,138,60,.65) 45%, rgba(255,138,60,.12));
}

/* línea destacada con escudo */
.sevial-v2 .v2-stats-note {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  max-width: 640px;
  margin: 2.75rem auto 0;
  text-align: center;
  font-size: 1.05rem;
  color: rgba(255,255,255,.85);
}
.sevial-v2 .v2-stats-note i { color: var(--sky); font-size: 1.2rem; }
.sevial-v2 .v2-stats-note strong { color: #fff; }


/* ══════════════════════════════════════════════════════════════
   4. MENSAJE DE CAMPAÑA · comilla gigante de fondo
   ══════════════════════════════════════════════════════════════ */
.sevial-v2 .message-section { position: relative; overflow: hidden; }
.sevial-v2 .message-section::before {
  content: "\201C";
  position: absolute;
  top: -2.5rem;
  left: 1.5rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18rem;
  line-height: 1;
  color: var(--accent);
  opacity: .07;
  pointer-events: none;
  z-index: 0;
}
.sevial-v2 .message-icon { box-shadow: 0 10px 30px rgba(0,113,206,.25); }


/* ══════════════════════════════════════════════════════════════
   5. DECÁLOGO · "RUTA DE CARRETERA" (timeline con hitos)
   El grid pasa a una ruta vertical con línea discontinua central
   y 10 hitos numerados; en desktop las tarjetas alternan lados.
   ══════════════════════════════════════════════════════════════ */
.sevial-v2 .decalogo-grid {
  display: block;
  position: relative;
  max-width: 900px;
  margin-inline: auto;
  padding: 1rem 0;
}
.sevial-v2 .decalogo-grid::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 6px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: linear-gradient(180deg, var(--navy), var(--blue));
}
.sevial-v2 .decalogo-grid::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom,
              rgba(255,255,255,.85) 0 14px, transparent 14px 34px);
}
.sevial-v2 .decalogo-card {
  position: relative;
  width: calc(50% - 46px);
  margin-bottom: 1.75rem;
  text-align: left;
  z-index: 1;
}
.sevial-v2 .decalogo-card:nth-child(odd)  { margin-right: auto; }
.sevial-v2 .decalogo-card:nth-child(even) { margin-left: auto; }
.sevial-v2 .decalogo-num {
  position: absolute;
  top: -6px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 800;
  color: var(--white);
  background: var(--accent);
  border: 4px solid var(--white);
  box-shadow: var(--shadow-md);
  z-index: 2;
}
.sevial-v2 .decalogo-card:nth-child(odd)  .decalogo-num { right: -70px; }
.sevial-v2 .decalogo-card:nth-child(even) .decalogo-num { left: -70px; }
.sevial-v2 .decalogo-card::before {
  content: "";
  position: absolute;
  top: 16px;
  width: 34px;
  height: 3px;
  background: var(--accent);
  opacity: .5;
}
.sevial-v2 .decalogo-card:nth-child(odd)::before  { right: -36px; }
.sevial-v2 .decalogo-card:nth-child(even)::before { left: -36px; }

@media (max-width: 860px) {
  .sevial-v2 .decalogo-grid::before,
  .sevial-v2 .decalogo-grid::after { left: 24px; }
  .sevial-v2 .decalogo-card,
  .sevial-v2 .decalogo-card:nth-child(odd),
  .sevial-v2 .decalogo-card:nth-child(even) {
    width: auto;
    margin: 0 0 1.5rem 60px;
  }
  .sevial-v2 .decalogo-card:nth-child(odd)  .decalogo-num,
  .sevial-v2 .decalogo-card:nth-child(even) .decalogo-num { left: -60px; right: auto; }
  .sevial-v2 .decalogo-card:nth-child(odd)::before,
  .sevial-v2 .decalogo-card:nth-child(even)::before { left: -26px; right: auto; width: 24px; }
}


/* ══════════════════════════════════════════════════════════════
   6. ¿CÓMO APLICAR? · flujo horizontal de 3 pasos
   (bloque .v2-flow insertado en page-v2.php)
   ══════════════════════════════════════════════════════════════ */
.sevial-v2 .v2-flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 1rem;
  margin: 3rem auto 0;
  max-width: 960px;
}
.sevial-v2 .v2-flow-step {
  position: relative;
  flex: 1 1 0;
  background: var(--white);
  border: 1.5px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 2.25rem 1.5rem 1.75rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.sevial-v2 .v2-flow-step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.sevial-v2 .v2-flow-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.8rem;
  color: var(--white);
  background: linear-gradient(135deg, var(--accent), var(--sky));
  box-shadow: 0 8px 20px rgba(0,113,206,.28);
}
.sevial-v2 .v2-flow-num {
  position: absolute;
  top: 1rem;
  left: 1.1rem;
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1;
  color: var(--navy);
}
.sevial-v2 .v2-flow-step h4 {
  margin: 0 0 .5rem;
  color: var(--navy);
  font-size: 1.05rem;
}
.sevial-v2 .v2-flow-step p {
  margin: 0;
  color: var(--gray-600);
  font-size: .92rem;
  line-height: 1.6;
}
.sevial-v2 .v2-flow-arrow {
  display: flex;
  align-items: center;
  color: var(--accent);
  font-size: 1.4rem;
  opacity: .55;
}
@media (max-width: 780px) {
  .sevial-v2 .v2-flow { flex-direction: column; align-items: center; }
  .sevial-v2 .v2-flow-step { width: 100%; max-width: 420px; }
  .sevial-v2 .v2-flow-arrow { transform: rotate(90deg); }
}


/* ══════════════════════════════════════════════════════════════
   7. HERO · grafismo "red de agentes + carretera" (recreado en SVG)
   Layout a 2 columnas: texto en vivo (izq) + grafismo (der).
   ══════════════════════════════════════════════════════════════ */
.sevial-v2 .v2-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
.sevial-v2 .v2-hero-graphic {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
}
.sevial-v2 .v2-hero-net {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 8px 30px rgba(0,60,138,.45));
}
/* animaciones sutiles */
.sevial-v2 .v2-ring-outer {
  transform-box: fill-box;
  transform-origin: center;
  animation: v2-spin 48s linear infinite;
}
.sevial-v2 .v2-orbit { animation: v2-dash 3.5s linear infinite; }
.sevial-v2 .v2-roadline { animation: v2-flow 2.2s linear infinite; }
@keyframes v2-spin { to { transform: rotate(360deg); } }
@keyframes v2-dash { to { stroke-dashoffset: -22; } }
@keyframes v2-flow { to { stroke-dashoffset: -30; } }

/* nodos de iconos */
.sevial-v2 .v2-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: clamp(44px, 8.5vw, 58px);
  height: clamp(44px, 8.5vw, 58px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #eaf7ff;
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  background: radial-gradient(circle at 30% 28%, rgba(0,174,239,.4), rgba(0,40,85,.9));
  border: 1.5px solid rgba(0,174,239,.6);
  box-shadow: 0 0 18px rgba(0,174,239,.35), inset 0 0 12px rgba(0,174,239,.18);
  animation: v2-node-pulse 4s ease-in-out infinite;
}
.sevial-v2 .v2-node:nth-child(odd) { animation-delay: 1.2s; }
.sevial-v2 .v2-node:nth-child(3n)  { animation-delay: 2.1s; }
@keyframes v2-node-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(0,174,239,.3),  inset 0 0 12px rgba(0,174,239,.15); }
  50%      { box-shadow: 0 0 26px rgba(0,174,239,.55), inset 0 0 14px rgba(0,174,239,.28); }
}

/* DESKTOP: 2 columnas + texto a la izquierda */
@media (min-width: 1024px) {
  .sevial-v2 .v2-hero-grid {
    grid-template-columns: 1.04fr .96fr;
    gap: 2rem;
  }
  .sevial-v2 .v2-hero-text { align-items: flex-start; text-align: left; }
  .sevial-v2 .v2-hero-text .hero-desc { margin-inline: 0; }
  .sevial-v2 .v2-hero-text .hero-logo-img { margin-inline: 0; }
  .sevial-v2 .v2-hero-graphic { max-width: 520px; }
}

@media (prefers-reduced-motion: reduce) {
  .sevial-v2 .v2-ring-outer,
  .sevial-v2 .v2-orbit,
  .sevial-v2 .v2-roadline,
  .sevial-v2 .v2-node { animation: none; }
}


/* ══════════════════════════════════════════════════════════════
   8. FIX · banda dentro de .campana-dirigida
   .campana-dirigida p (line-height:1.8) pisaba a .frase-destacada-banda p
   por ir después con igual especificidad. Restauramos el interlineado
   de la banda para que quede igual que las otras.
   ══════════════════════════════════════════════════════════════ */
.sevial-v2 .campana-dirigida .frase-destacada-banda p {
  line-height: 1.15;
  margin-bottom: .4rem;
}
.sevial-v2 .campana-dirigida .frase-destacada-banda p:last-child {
  margin-bottom: 0;
}


/* ══════════════════════════════════════════════════════════════
   9. DECÁLOGO bajo demanda
   Oculto en la home; se revela solo al pulsar "Decálogo" en el menú
   (JS en front-page.php añade la clase .is-revealed y hace scroll).
   ══════════════════════════════════════════════════════════════ */
.sevial-v2 #decalogo { display: none; }
.sevial-v2 #decalogo.is-revealed { display: block; }


/* ══════════════════════════════════════════════════════════════
   10. GALERÍA "pies de factura" — completos y apilados
   (en vez de cuadrícula recortada): 1 columna, imagen íntegra.
   Al pinchar abre la infografía en el overlay (lightbox existente).
   ══════════════════════════════════════════════════════════════ */
.sevial-v2 #galeria .galeria-grid {
  grid-template-columns: 1fr;   /* una sola columna → apilados */
  max-width: 820px;
  gap: 1.5rem;
}
.sevial-v2 #galeria .galeria-item {
  aspect-ratio: auto;           /* quita el cuadrado forzado */
}
.sevial-v2 #galeria .galeria-item img {
  height: auto;                 /* alto natural */
  object-fit: contain;          /* imagen completa, sin recortar */
}