/* ═══════════════════════════════════════════
   EFFECTS — Efectos interactivos y fondos dinamicos premium
   Brillos, glows, hovers, degradados y ambient effects
   ═══════════════════════════════════════════ */

/* Botones — glow al pasar el raton */
.btn-navy:hover { box-shadow: 0 6px 24px rgba(22,37,68,0.25); }
.btn-white:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.08), 0 0 0 1px rgba(255,255,255,0.5); }
.btn-outline:hover { box-shadow: 0 4px 16px rgba(51,90,158,0.08); }

/* Bloque de cita — borde con gradiente animado */
.quote-block {
  border-left: 2px solid transparent;
  border-image: linear-gradient(180deg, var(--navy-300), var(--navy-200), var(--navy-100)) 1;
  transition: all 0.4s;
}
.quote-block:hover {
  border-image: linear-gradient(180deg, var(--navy-500), var(--navy-400), var(--navy-200)) 1;
  padding-left: 24px;
}

/* ── Quote cierre — mayor presencia visual ── */
.quote-section .quote-block {
  padding: 40px 20px 40px 36px;
  border-left: 3px solid var(--navy-300);
  border-image: linear-gradient(180deg, var(--navy-500), var(--navy-300), var(--navy-200)) 1;
  position: relative;
  overflow: visible;
}
.quote-section .quote-block::before {
  content: '\201C';
  position: absolute;
  top: -24px;
  left: -8px;
  font-family: 'DM Serif Display', serif;
  font-size: 90px;
  line-height: 1;
  color: var(--navy-200);
  pointer-events: none;
  animation: bridgeGuilleShimmer 6s ease-in-out infinite;
}
.quote-section .quote-block p {
  font-size: 28px;
  line-height: 1.5;
  color: var(--navy-700);
  animation: bridgeTextGlow 5s ease-in-out infinite;
}
.quote-section .quote-block cite {
  font-size: 15px;
  margin-top: 18px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
@media (max-width: 768px) {
  .quote-section .quote-block p { font-size: 24px; }
  .quote-section .quote-block::before { font-size: 70px; top: -18px; }
}
@media (max-width: 480px) {
  .quote-section .quote-block { padding-left: 24px; }
  .quote-section .quote-block p { font-size: 21px; }
  .quote-section .quote-block::before { font-size: 56px; top: -14px; left: -4px; }
}

/* Stats — texto con gradiente + glow tras contador */
@keyframes statGlow {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50%      { filter: drop-shadow(0 0 12px rgba(74,122,184,0.35)); }
}
.stat-val {
  background: linear-gradient(135deg, var(--navy-700), var(--navy-500));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: statGlow 3s ease-in-out infinite;
}
.stat-val { animation-delay: 0.8s; }
[data-counter]:nth-child(2) .stat-val { animation-delay: 1.2s; }
[data-counter]:nth-child(3) .stat-val { animation-delay: 1.6s; }
[data-counter]:nth-child(4) .stat-val { animation-delay: 2.0s; }

/* Banner de foto — hover mejorado */
.photo-banner { transition: all 0.4s; }
.photo-banner:hover { box-shadow: 0 8px 40px rgba(11,18,34,0.12); }

/* Competencias — glow al hover */
.comp-card:hover {
  box-shadow: 0 0 30px rgba(79,122,189,0.08), 0 8px 25px rgba(0,0,0,0.08);
}

/* Icono de tarjeta — flotacion suave */
.card:hover .card-icon { animation: floatSoft 1.5s ease-in-out infinite; }

/* Footer links — subrayado sutil */
.footer-links span::after {
  content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
  height: 1px; background: rgba(255,255,255,0.2);
  transform: scaleX(0); transition: transform 0.3s;
}
.footer-links span:hover::after { transform: scaleX(1); }

/* ═══════════════════════════════════════════
   BRIDGE STORYTELLING — Textos puente narrativos
   Conectores visuales premium entre secciones
   ═══════════════════════════════════════════ */

/* ── Animaciones propias de bridges ── */
@keyframes bridgeDotRing {
  0%   { transform: scale(0.8); opacity: 0.6; }
  50%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(0.8); opacity: 0; }
}
@keyframes bridgeGradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes bridgeArrowBounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(5px); opacity: 1; }
}
@keyframes bridgeGuilleShimmer {
  0%, 100% { opacity: 0.2; text-shadow: 0 0 0 transparent; transform: translateY(0) scale(1); }
  30%      { opacity: 0.5; text-shadow: 0 0 20px currentColor; transform: translateY(-5px) scale(1.05); }
  50%      { opacity: 0.6; text-shadow: 0 0 30px currentColor, 0 0 60px currentColor; transform: translateY(-8px) scale(1.08); }
  70%      { opacity: 0.45; text-shadow: 0 0 15px currentColor; transform: translateY(-3px) scale(1.03); }
}
@keyframes bridgeTextGlow {
  0%, 100% { text-shadow: 0 1px 2px rgba(38,64,96,0.08); }
  50%      { text-shadow: 0 0 20px rgba(74,122,184,0.2), 0 2px 8px rgba(38,64,96,0.12); }
}
@keyframes bridgeLetterBreathe {
  0%, 100% { letter-spacing: -0.01em; }
  50%      { letter-spacing: 0.04em; }
}
@keyframes bridgeCardSway {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-4px) rotate(0.3deg); }
  50%      { transform: translateY(-6px) rotate(-0.2deg); }
  75%      { transform: translateY(-3px) rotate(0.15deg); }
}
@keyframes bridgeOrbDrift {
  0%       { transform: translate(-50%, -50%) scale(1); }
  20%      { transform: translate(-42%, -56%) scale(1.08); }
  45%      { transform: translate(-56%, -46%) scale(0.95); }
  70%      { transform: translate(-46%, -54%) scale(1.04); }
  100%     { transform: translate(-50%, -50%) scale(1); }
}
@keyframes bridgeShine {
  0%       { left: -80%; opacity: 0; }
  5%       { opacity: 0.8; }
  50%      { left: 180%; opacity: 0; }
  100%     { left: 180%; opacity: 0; }
}

/* ── Base del componente bridge ── */
.bridge-story {
  padding: 56px 32px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Orbe de fondo sutil */
.bridge-story .bridge-orb {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(147,181,225,0.18) 0%, rgba(107,154,212,0.06) 40%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: bridgeOrbDrift 18s ease-in-out infinite;
}

/* Punto decorativo con anillo pulsante */
.bridge-story::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-500), var(--navy-300));
  margin: 0 auto 22px;
  box-shadow: 0 0 16px rgba(74,122,184,0.4), 0 0 40px rgba(74,122,184,0.12);
  animation: glowPulse 3s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

/* Texto base */
.bridge-story p {
  font-size: 21px;
  line-height: 1.75;
  max-width: 580px;
  margin: 0 auto;
  color: var(--ink-muted);
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}
.bridge-story p strong {
  color: var(--navy-700);
  font-weight: 700;
}

/* Linea decorativa inferior con gradiente extendido */
.bridge-story::after {
  content: '';
  display: block;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--navy-300), var(--navy-400), var(--navy-300), transparent);
  margin: 24px auto 0;
  border-radius: 2px;
  animation: breathe 5s ease-in-out infinite;
}

/* ── Variante DOLOR — cita editorial con guillemets grandes ── */
.bridge-story--pain {
  padding: 64px 32px 32px;
}
.bridge-story--pain .bridge-quote-inner {
  position: relative;
  display: inline-block;
  max-width: 620px;
  padding: 36px 56px;
  background: linear-gradient(135deg, rgba(242,246,251,0.8), rgba(224,234,246,0.4));
  border-radius: 16px;
  border: 1px solid rgba(186,206,238,0.4);
  box-shadow: 0 4px 24px rgba(74,122,184,0.06), 0 1px 4px rgba(74,122,184,0.04);
  animation: bridgeCardSway 6s ease-in-out infinite;
}
/* Guillemet izquierdo decorativo grande */
.bridge-story--pain .bridge-quote-inner::before {
  content: '\AB';
  position: absolute;
  top: -14px;
  left: 14px;
  font-family: 'DM Serif Display', serif;
  font-size: 84px;
  line-height: 1;
  color: var(--navy-300);
  pointer-events: none;
  animation: bridgeGuilleShimmer 5s ease-in-out infinite;
}
/* Guillemet derecho decorativo grande */
.bridge-story--pain .bridge-quote-inner::after {
  content: '\BB';
  position: absolute;
  bottom: -26px;
  right: 14px;
  font-family: 'DM Serif Display', serif;
  font-size: 84px;
  line-height: 1;
  color: var(--navy-300);
  pointer-events: none;
  animation: bridgeGuilleShimmer 5s ease-in-out infinite reverse;
}
.bridge-story--pain p {
  font-family: 'DM Serif Display', serif;
  font-size: 30px;
  font-style: italic;
  color: var(--navy-700);
  line-height: 1.45;
  max-width: 560px;
  animation: bridgeTextGlow 4s ease-in-out infinite;
}

/* Respuesta bajo la cita de dolor */
.bridge-story .bridge-response {
  display: block;
  margin-top: 14px;
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy-500);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.bridge-story .bridge-response::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--navy-400);
  vertical-align: middle;
  margin-right: 8px;
  border-radius: 1px;
}

/* ── Variante TRANSICION — con contenedor y texto gradiente ── */
.bridge-story--transition {
  padding: 52px 32px 24px;
}
.bridge-story--transition .bridge-trans-inner {
  display: inline-block;
  max-width: 640px;
  padding: 26px 44px;
  background: linear-gradient(135deg, rgba(242,246,251,0.6), rgba(255,255,255,0.3));
  border-radius: 12px;
  border: 1px solid rgba(186,206,238,0.3);
  box-shadow: 0 2px 16px rgba(74,122,184,0.04);
  position: relative;
  z-index: 1;
  overflow: hidden;
  animation: bridgeCardSway 5.5s ease-in-out infinite;
}
/* Barrido de luz diagonal sobre tarjetas transición */
.bridge-story--transition .bridge-trans-inner::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -80%;
  width: 60%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  transform: skewX(-15deg);
  animation: bridgeShine 7s ease-in-out infinite;
  pointer-events: none;
}
.bridge-story--transition p {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.5;
  animation: bridgeTextGlow 6s ease-in-out infinite;
}
.bridge-story--transition p strong {
  background: linear-gradient(135deg, var(--navy-700), var(--navy-500), var(--navy-400));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  font-size: 28px;
  animation: bridgeGradientShift 3s ease-in-out infinite;
}

/* Flecha animada */
.bridge-story--transition .bridge-arrow {
  display: block;
  margin: 18px auto 0;
  width: 34px;
  height: 34px;
  color: var(--navy-400);
  animation: bridgeArrowBounce 2s ease-in-out infinite;
}

/* ── Variante tintada — fondo con gradiente sutil ── */
.bridge-story--tinted {
  background: linear-gradient(180deg, var(--navy-50), rgba(224,234,246,0.4), var(--navy-50));
  padding-top: 56px;
  padding-bottom: 56px;
  margin-top: -1px;
  border-top: 1px solid rgba(186,206,238,0.25);
  border-bottom: 1px solid rgba(186,206,238,0.25);
}
.bridge-story--tinted::before {
  background: linear-gradient(135deg, var(--navy-400), var(--navy-200));
  box-shadow: 0 0 20px rgba(74,122,184,0.35), 0 0 50px rgba(74,122,184,0.1);
}
.bridge-story--tinted .bridge-orb {
  background: radial-gradient(circle, rgba(147,181,225,0.25) 0%, rgba(107,154,212,0.08) 40%, transparent 70%);
}
.bridge-story--tinted .bridge-trans-inner {
  background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3));
}

/* ══════════════════════════════════════════
   VARIANTES CROMÁTICAS — Diferenciación por zona
   ══════════════════════════════════════════ */

/* ── Variante TEAL (zona herramientas gratuitas) ── */
.bridge-story--teal::before {
  background: linear-gradient(135deg, #2CB67D, #1A9A6A);
  box-shadow: 0 0 16px rgba(44,182,125,0.4), 0 0 40px rgba(44,182,125,0.12);
}
.bridge-story--teal::after {
  background: linear-gradient(90deg, transparent, rgba(44,182,125,0.3), rgba(26,154,106,0.4), rgba(44,182,125,0.3), transparent);
}
.bridge-story--teal .bridge-orb {
  background: radial-gradient(circle, rgba(44,182,125,0.15) 0%, rgba(26,154,106,0.05) 40%, transparent 70%);
}
.bridge-story--teal.bridge-story--transition p strong {
  background: linear-gradient(135deg, #1A6B4A, #2CB67D, #1A9A6A);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.bridge-story--teal .bridge-arrow {
  color: #2CB67D;
}
.bridge-story--teal.bridge-story--tinted {
  background: linear-gradient(180deg, #F0FBF6, rgba(44,182,125,0.08), #F0FBF6);
  border-color: rgba(44,182,125,0.2);
}
.bridge-story--teal.bridge-story--tinted .bridge-trans-inner {
  background: linear-gradient(135deg, rgba(240,251,246,0.7), rgba(255,255,255,0.3));
  border-color: rgba(44,182,125,0.2);
}
.bridge-story--teal.bridge-story--pain .bridge-quote-inner {
  background: linear-gradient(135deg, rgba(240,251,246,0.8), rgba(44,182,125,0.06));
  border-color: rgba(44,182,125,0.25);
  box-shadow: 0 4px 24px rgba(44,182,125,0.06);
}
.bridge-story--teal.bridge-story--pain .bridge-quote-inner::before,
.bridge-story--teal.bridge-story--pain .bridge-quote-inner::after {
  color: rgba(44,182,125,0.25);
}
.bridge-story--teal.bridge-story--pain p {
  color: #1A6B4A;
}
.bridge-story--teal .bridge-trans-inner {
  border-color: rgba(44,182,125,0.2);
}

/* ── Variante WARM (zona regulación/normativa) ── */
.bridge-story--warm::before {
  background: linear-gradient(135deg, var(--warm-500), var(--warm-400));
  box-shadow: 0 0 16px rgba(196,150,66,0.4), 0 0 40px rgba(196,150,66,0.12);
}
.bridge-story--warm::after {
  background: linear-gradient(90deg, transparent, rgba(196,150,66,0.25), rgba(212,173,94,0.35), rgba(196,150,66,0.25), transparent);
}
.bridge-story--warm .bridge-orb {
  background: radial-gradient(circle, rgba(212,173,94,0.15) 0%, rgba(196,150,66,0.05) 40%, transparent 70%);
}
.bridge-story--warm.bridge-story--transition p strong {
  background: linear-gradient(135deg, var(--warm-600), var(--warm-500), var(--warm-400));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.bridge-story--warm .bridge-arrow {
  color: var(--warm-500);
}
.bridge-story--warm.bridge-story--pain .bridge-quote-inner {
  background: linear-gradient(135deg, var(--warm-50), rgba(212,173,94,0.06));
  border-color: rgba(196,150,66,0.25);
  box-shadow: 0 4px 24px rgba(196,150,66,0.06);
}
.bridge-story--warm.bridge-story--pain .bridge-quote-inner::before,
.bridge-story--warm.bridge-story--pain .bridge-quote-inner::after {
  color: rgba(196,150,66,0.3);
}
.bridge-story--warm.bridge-story--pain p {
  color: var(--warm-600);
}
.bridge-story--warm .bridge-response {
  color: var(--warm-500);
}
.bridge-story--warm .bridge-response::before {
  background: var(--warm-400);
}
.bridge-story--warm .bridge-trans-inner {
  background: linear-gradient(135deg, rgba(251,246,234,0.6), rgba(255,255,255,0.3));
  border-color: rgba(196,150,66,0.2);
}

/* ══════════════════════════════════════════
   DARK MODE — Bridges
   ══════════════════════════════════════════ */
[data-theme="dark"] .bridge-story p {
  color: rgba(255,255,255,0.7);
}
[data-theme="dark"] .bridge-story p strong {
  color: rgba(255,255,255,0.95);
  -webkit-text-fill-color: unset;
  background: none;
}
[data-theme="dark"] .bridge-story--pain p {
  color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
[data-theme="dark"] .bridge-story .bridge-response {
  color: rgba(147,181,225,0.7);
}
[data-theme="dark"] .bridge-story .bridge-response::before {
  background: rgba(147,181,225,0.4);
}
[data-theme="dark"] .bridge-story::before {
  background: linear-gradient(135deg, rgba(147,181,225,0.7), rgba(107,154,212,0.4));
  box-shadow: 0 0 16px rgba(147,181,225,0.3), 0 0 40px rgba(147,181,225,0.1);
}
[data-theme="dark"] .bridge-story::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), rgba(255,255,255,0.15), rgba(255,255,255,0.1), transparent);
}
[data-theme="dark"] .bridge-story--tinted {
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border-color: rgba(255,255,255,0.05);
}
[data-theme="dark"] .bridge-story--transition p strong {
  background: linear-gradient(135deg, rgba(186,206,238,0.95), rgba(147,181,225,0.8), rgba(107,154,212,0.7));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: bridgeGradientShift 4s ease-in-out infinite;
}
[data-theme="dark"] .bridge-story--transition .bridge-trans-inner {
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .bridge-story--transition .bridge-trans-inner::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
}
[data-theme="dark"] .bridge-story--pain .bridge-quote-inner {
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}
[data-theme="dark"] .bridge-story--pain .bridge-quote-inner::before,
[data-theme="dark"] .bridge-story--pain .bridge-quote-inner::after {
  color: rgba(147,181,225,0.3);
}
[data-theme="dark"] .bridge-story .bridge-orb {
  background: radial-gradient(circle, rgba(147,181,225,0.1) 0%, rgba(107,154,212,0.04) 40%, transparent 70%);
}
[data-theme="dark"] .bridge-story .bridge-arrow {
  color: rgba(147,181,225,0.5);
}
/* Teal dark */
[data-theme="dark"] .bridge-story--teal::before {
  background: linear-gradient(135deg, rgba(44,182,125,0.7), rgba(26,154,106,0.4));
  box-shadow: 0 0 16px rgba(44,182,125,0.25);
}
[data-theme="dark"] .bridge-story--teal::after {
  background: linear-gradient(90deg, transparent, rgba(44,182,125,0.15), rgba(44,182,125,0.2), rgba(44,182,125,0.15), transparent);
}
[data-theme="dark"] .bridge-story--teal.bridge-story--transition p strong {
  background: linear-gradient(135deg, rgba(44,182,125,0.95), rgba(72,210,153,0.8));
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
[data-theme="dark"] .bridge-story--teal .bridge-arrow { color: rgba(44,182,125,0.5); }
[data-theme="dark"] .bridge-story--teal.bridge-story--tinted {
  background: linear-gradient(180deg, rgba(44,182,125,0.02), rgba(44,182,125,0.05), rgba(44,182,125,0.02));
  border-color: rgba(44,182,125,0.08);
}
[data-theme="dark"] .bridge-story--teal.bridge-story--pain p { color: rgba(72,210,153,0.9); }
[data-theme="dark"] .bridge-story--teal.bridge-story--pain .bridge-quote-inner::before,
[data-theme="dark"] .bridge-story--teal.bridge-story--pain .bridge-quote-inner::after { color: rgba(44,182,125,0.25); }
/* Warm dark */
[data-theme="dark"] .bridge-story--warm::before {
  background: linear-gradient(135deg, rgba(212,173,94,0.7), rgba(196,150,66,0.4));
  box-shadow: 0 0 16px rgba(196,150,66,0.25);
}
[data-theme="dark"] .bridge-story--warm::after {
  background: linear-gradient(90deg, transparent, rgba(212,173,94,0.12), rgba(212,173,94,0.18), rgba(212,173,94,0.12), transparent);
}
[data-theme="dark"] .bridge-story--warm.bridge-story--transition p strong {
  background: linear-gradient(135deg, rgba(237,217,168,0.95), rgba(212,173,94,0.8));
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
[data-theme="dark"] .bridge-story--warm .bridge-arrow { color: rgba(212,173,94,0.5); }
[data-theme="dark"] .bridge-story--warm.bridge-story--pain p { color: rgba(237,217,168,0.9); }
[data-theme="dark"] .bridge-story--warm.bridge-story--pain .bridge-quote-inner::before,
[data-theme="dark"] .bridge-story--warm.bridge-story--pain .bridge-quote-inner::after { color: rgba(196,150,66,0.25); }
[data-theme="dark"] .bridge-story--warm .bridge-response { color: rgba(212,173,94,0.6); }
[data-theme="dark"] .bridge-story--warm .bridge-response::before { background: rgba(212,173,94,0.35); }

/* ══════════════════════════════════════════
   HOMEPAGE DINAMISMO — Efectos continuos en todas las secciones
   Elimina estatismo · Iguala calidad premium al resto del site
   ══════════════════════════════════════════ */

/* ── Stats — valores con gradiente animado + glow ── */
.stat-val {
  background-size: 200% auto;
  animation: bridgeGradientShift 4s ease-in-out infinite, statGlow 3s ease-in-out infinite;
}
.stats-row > div {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.stats-row > div:hover {
  transform: translateY(-4px);
}

/* ── Section headings — glow sutil continuo ── */
.sh h2,
.baseia-teaser h2,
.diagnostico-teaser h2,
.mapa-teaser h2,
.personas-teaser h2 {
  animation: bridgeTextGlow 5s ease-in-out infinite;
}

/* ── Propuesta de valor — heading con gradiente animado ── */
@keyframes gradientTextShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.section > .section-inner > .sh h2 {
  background: linear-gradient(90deg, var(--navy-800), var(--navy-500), var(--navy-700), var(--navy-800));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientTextShift 6s ease-in-out infinite;
}

/* ── Propuesta de valor — cards con vida + borde gradiente hover ── */
@keyframes borderGradientSpin {
  0%   { --border-angle: 0deg; }
  100% { --border-angle: 360deg; }
}
.propval-grid .card {
  overflow: hidden;
  transition: box-shadow 0.4s, transform 0.4s;
}
.propval-grid .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(74,122,184,0.12), 0 0 0 2px rgba(74,122,184,0.15);
}
.propval-grid .card::before {
  content: ''; position: absolute; inset: -2px; border-radius: inherit;
  background: conic-gradient(from var(--border-angle, 0deg), var(--navy-200), var(--navy-400), var(--navy-200), var(--navy-400), var(--navy-200));
  z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity 0.5s;
}
.propval-grid .card:hover::before {
  opacity: 1;
  animation: borderGradientSpin 3s linear infinite;
}
.propval-grid .card .card-icon {
  animation: floatSoft 4s ease-in-out infinite;
}
.propval-grid .card:nth-child(2) .card-icon { animation-delay: 0.6s; }
.propval-grid .card:nth-child(3) .card-icon { animation-delay: 1.2s; }
/* Barrido de luz en cards */
.propval-grid .card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -80%;
  width: 60%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(74,122,184,0.04), transparent);
  transform: skewX(-15deg);
  animation: bridgeShine 9s ease-in-out infinite;
  pointer-events: none;
}
.propval-grid .card:nth-child(2)::after { animation-delay: 3s; }
.propval-grid .card:nth-child(3)::after { animation-delay: 6s; }

/* ── Utilia — features flotan escalonadas + foto Ken Burns ── */
.utilia-feat {
  animation: floatSoft 5s ease-in-out infinite;
}
.utilia-feat:nth-child(2) { animation-delay: 0.4s; }
.utilia-feat:nth-child(3) { animation-delay: 0.8s; }
.utilia-feat:nth-child(4) { animation-delay: 1.2s; }
.utilia-badge {
  animation: glowPulse 4s ease-in-out infinite;
}
.utilia-photo img {
  animation: kenBurnsBanner2 22s ease-in-out infinite;
}

/* ── Badges — float escalonado (oleada viva) ── */
.baseia-teaser-badge,
.mapa-teaser-badge {
  animation: floatSoft 5s ease-in-out infinite;
}
.baseia-teaser-badge:nth-child(2), .mapa-teaser-badge:nth-child(2) { animation-delay: 0.3s; }
.baseia-teaser-badge:nth-child(3), .mapa-teaser-badge:nth-child(3) { animation-delay: 0.6s; }
.baseia-teaser-badge:nth-child(4), .mapa-teaser-badge:nth-child(4) { animation-delay: 0.9s; }
.baseia-teaser-badge:nth-child(5), .mapa-teaser-badge:nth-child(5) { animation-delay: 1.2s; }

/* ── Recursos items — float escalonado + hover glow ── */
.recursos-teaser-item {
  animation: floatSoft 5s ease-in-out infinite;
  transition: box-shadow 0.3s, transform 0.3s, background 0.3s;
}
.recursos-teaser-item:hover {
  box-shadow: 0 4px 16px rgba(74,122,184,0.15), 0 0 0 1px rgba(74,122,184,0.12);
  transform: translateY(-3px) scale(1.04);
  background: rgba(242,246,251,0.9);
}
.recursos-teaser-item:nth-child(2) { animation-delay: 0.35s; }
.recursos-teaser-item:nth-child(3) { animation-delay: 0.7s; }
.recursos-teaser-item:nth-child(4) { animation-delay: 1.05s; }

/* ── Line-accent — pulso sutil ── */
.line-accent {
  animation: breathe 6s ease-in-out infinite;
}

/* ══════════════════════════════════════════
   CHAPTER OPENER — Sección inmersiva Zona 2
   Efectos: partículas, sweep de luz, entradas escalonadas
   ══════════════════════════════════════════ */
.chapter-opener {
  background: #0B0F1A;
  padding: 100px 32px 88px;
  position: relative;
  overflow: hidden;
}

/* ── Resplandor ambiental multi-capa ── */
.chapter-opener::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(22,160,134,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at 15% 75%, rgba(22,160,134,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 85% 25%, rgba(44,182,125,0.05) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 1.2s ease-out;
}
.chapter-opener.is-visible::before {
  opacity: 1;
}

/* ── Orbe central pulsante ── */
.chapter-opener::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(22,160,134,0.12) 0%, rgba(22,160,134,0.03) 40%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
  opacity: 0;
  animation: none;
}
.chapter-opener.is-visible::after {
  animation: chapterOrbPulse 6s ease-in-out 600ms infinite;
  opacity: 1;
}

/* ── Partículas flotantes ── */
.chapter-opener__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.chapter-opener__particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(22,160,134,0.5);
  border-radius: 50%;
  opacity: 0;
}
.chapter-opener.is-visible .chapter-opener__particle {
  animation: chapterParticleFloat 8s ease-in-out infinite;
}
.chapter-opener__particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.chapter-opener__particle:nth-child(2) { top: 60%; left: 85%; animation-delay: 1.2s; width: 4px; height: 4px; }
.chapter-opener__particle:nth-child(3) { top: 75%; left: 25%; animation-delay: 2.8s; width: 2px; height: 2px; }
.chapter-opener__particle:nth-child(4) { top: 15%; left: 70%; animation-delay: 4s; }
.chapter-opener__particle:nth-child(5) { top: 45%; left: 5%; animation-delay: 5.5s; width: 4px; height: 4px; }
.chapter-opener__particle:nth-child(6) { top: 35%; left: 92%; animation-delay: 3.2s; width: 2px; height: 2px; }

/* ── Línea de luz que barre horizontalmente ── */
.chapter-opener__sweep {
  position: absolute;
  top: 0;
  left: -100%;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(22,160,134,0.04) 30%, rgba(22,160,134,0.08) 50%, rgba(22,160,134,0.04) 70%, transparent 100%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}
.chapter-opener.is-visible .chapter-opener__sweep {
  animation: chapterSweep 8s ease-in-out 1s infinite;
}

/* ── Tag "A partir de aquí" ── */
.chapter-opener__tag {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #16A086;
  padding: 5px 16px;
  border: 1px solid rgba(22,160,134,0.3);
  border-radius: 20px;
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(16px) scale(0.9);
}
.chapter-opener.is-visible .chapter-opener__tag {
  animation: chapterTagEnter 600ms cubic-bezier(0.22,1,0.36,1) forwards;
}

/* ── Eyebrow ── */
.chapter-opener__eyebrow {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(22,160,134,0.8);
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(14px);
}
.chapter-opener.is-visible .chapter-opener__eyebrow {
  animation: chapterFadeUp 700ms cubic-bezier(0.22,1,0.36,1) 300ms forwards;
}

/* ── Título ── */
.chapter-opener__title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 4vw, 38px);
  line-height: 1.2;
  color: rgba(255,255,255,0.93);
  max-width: 680px;
  margin: 0 auto 0;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(22px);
}
.chapter-opener.is-visible .chapter-opener__title {
  animation: chapterFadeUp 900ms cubic-bezier(0.22,1,0.36,1) 500ms forwards;
  text-shadow: 0 0 60px rgba(22,160,134,0.12);
}

/* ── Frase destacada "Aquí empieza la tuya." ── */
.chapter-opener__highlight {
  margin: 20px auto 0;
  max-width: 680px;
  opacity: 0;
  transform: translateY(24px);
}
.chapter-opener.is-visible .chapter-opener__highlight {
  animation: chapterFadeUp 900ms cubic-bezier(0.22,1,0.36,1) 800ms forwards;
}
.chapter-opener__highlight strong {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 3.5vw, 34px);
  line-height: 1.2;
  background: linear-gradient(135deg, #16A086 0%, #2CB67D 40%, #16A086 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}
.chapter-opener.is-visible .chapter-opener__highlight strong {
  animation: chapterGradientShift 4s ease-in-out 1.5s infinite;
}
/* Glow bajo el strong — porque clip text no admite text-shadow */
.chapter-opener__highlight strong::after {
  content: 'Aquí empieza la tuya.';
  position: absolute;
  inset: 0;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  line-height: inherit;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 50px rgba(22,160,134,0.35), 0 0 100px rgba(22,160,134,0.15);
  pointer-events: none;
  z-index: -1;
}

/* ── Keyframes del opener ── */
@keyframes chapterFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes chapterTagEnter {
  from { opacity: 0; transform: translateY(16px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes chapterGradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes chapterOrbPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 0.6; filter: blur(40px); }
  50%      { transform: translate(-50%, -50%) scale(1.15); opacity: 1;   filter: blur(55px); }
}
@keyframes chapterParticleFloat {
  0%   { opacity: 0;   transform: translateY(0) scale(1); }
  15%  { opacity: 0.7; }
  50%  { opacity: 0.4; transform: translateY(-40px) scale(1.3); }
  85%  { opacity: 0.6; }
  100% { opacity: 0;   transform: translateY(-80px) scale(0.8); }
}
@keyframes chapterSweep {
  0%   { left: -30%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

/* ── Pausa fuera del viewport ── */
.chapter-opener.is-paused .chapter-opener__particle,
.chapter-opener.is-paused .chapter-opener__sweep,
.chapter-opener.is-paused::after {
  animation-play-state: paused !important;
}

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .chapter-opener__tag,
  .chapter-opener__eyebrow,
  .chapter-opener__title,
  .chapter-opener__highlight { opacity: 1 !important; transform: none !important; animation: none !important; }
  .chapter-opener__highlight strong { animation: none !important; }
  .chapter-opener::before { opacity: 1 !important; }
  .chapter-opener::after { animation: none !important; opacity: 0.6 !important; }
  .chapter-opener__particle { animation: none !important; opacity: 0 !important; }
  .chapter-opener__sweep { animation: none !important; opacity: 0 !important; }
}

/* ── Responsive — Chapter opener ── */
@media (max-width: 768px) {
  .chapter-opener { padding: 80px 24px 64px; }
  .chapter-opener::after { width: 350px; height: 350px; }
  .chapter-opener__tag { font-size: 10px; padding: 4px 14px; }
}
@media (max-width: 480px) {
  .chapter-opener { padding: 64px 16px 48px; }
  .chapter-opener__title { font-size: clamp(20px, 5vw, 30px); }
  .chapter-opener__highlight strong { font-size: clamp(18px, 4.5vw, 26px); }
  .chapter-opener::after { width: 250px; height: 250px; }
  .chapter-opener__tag { font-size: 9px; letter-spacing: 0.14em; }
}

/* ── CTA — botón principal con glow + h2 glow ── */
.cta-section .btn-white {
  animation: glowPulse 3s ease-in-out infinite;
}
.cta-section h2 {
  animation: bridgeTextGlow 4s ease-in-out infinite;
}

/* ── Eyebrows — dash que pulsa ── */
.sh .eyebrow,
.baseia-teaser .eyebrow,
.diagnostico-teaser .eyebrow,
.mapa-teaser .eyebrow,
.recursos-teaser .eyebrow,
.personas-teaser .eyebrow {
  animation: breathe 5s ease-in-out infinite;
}

/* ── Responsive — reducir amplitud en mobile ── */
@media (max-width: 480px) {
  .propval-grid .card .card-icon,
  .utilia-feat,
  .baseia-teaser-badge,
  .mapa-teaser-badge,
  .recursos-teaser-item {
    animation-duration: 6s; /* más lento = menos agresivo en pantalla chica */
  }
}

/* ══════════════════════════════════════════
   RESPONSIVE — Bridges
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  .bridge-story { padding: 48px 24px 20px; }
  .bridge-story--pain { padding: 52px 24px 28px; }
  .bridge-story--transition { padding: 48px 24px 20px; }
  .bridge-story--pain .bridge-quote-inner { padding: 28px 36px; }
  .bridge-story--transition .bridge-trans-inner { padding: 20px 28px; }
  .bridge-story--pain .bridge-quote-inner::before { font-size: 64px; left: 10px; top: -8px; }
  .bridge-story--pain .bridge-quote-inner::after { font-size: 64px; right: 10px; bottom: -18px; }
  .bridge-story--pain p { font-size: 25px; }
  .bridge-story--transition p { font-size: 21px; }
  .bridge-story--transition p strong { font-size: 24px; }
  .bridge-story .bridge-orb { width: 350px; height: 350px; }
}
@media (max-width: 480px) {
  .bridge-story { padding: 40px 16px 14px; }
  .bridge-story--pain { padding: 44px 16px 22px; }
  .bridge-story--transition { padding: 40px 16px 16px; }
  .bridge-story p { font-size: 18px; }
  .bridge-story--pain p { font-size: 22px; }
  .bridge-story--transition p { font-size: 19px; }
  .bridge-story--transition p strong { font-size: 21px; }
  .bridge-story--pain .bridge-quote-inner { padding: 22px 28px; }
  .bridge-story--transition .bridge-trans-inner { padding: 16px 22px; }
  .bridge-story--pain .bridge-quote-inner::before { font-size: 50px; left: 6px; }
  .bridge-story--pain .bridge-quote-inner::after { font-size: 50px; right: 6px; }
}

/* ═══════════════════════════════════════════
   FONDOS DINAMICOS PREMIUM — Sistema de orbes flotantes
   Efectos de movimiento elegantes en tonalidades azul suave
   ═══════════════════════════════════════════ */

/* ── Orbes inyectados por JS en secciones blancas ── */
.bg-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.bg-orb--1 {
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(147,181,225,0.45) 0%, rgba(107,154,212,0.20) 30%, rgba(74,122,184,0.08) 55%, transparent 75%);
  filter: blur(40px);
  animation: orbWander1 20s ease-in-out infinite;
}
.bg-orb--2 {
  width: 650px; height: 650px;
  background: radial-gradient(circle, rgba(186,206,238,0.40) 0%, rgba(147,181,225,0.18) 30%, rgba(74,122,184,0.06) 55%, transparent 75%);
  filter: blur(35px);
  animation: orbWander2 25s ease-in-out infinite;
}
.bg-orb--3 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(107,154,212,0.35) 0%, rgba(74,122,184,0.15) 30%, rgba(59,96,152,0.05) 55%, transparent 70%);
  filter: blur(40px);
  animation: orbWander3 18s ease-in-out infinite;
}
.bg-orb--accent {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(44,182,125,0.25) 0%, rgba(44,182,125,0.10) 30%, rgba(44,182,125,0.03) 55%, transparent 70%);
  filter: blur(40px);
  animation: orbWander2 22s ease-in-out infinite reverse;
}

/* Barrido de luz diagonal — desactivado por corte visible en limites de seccion */
.bg-sweep {
  display: none;
}

/* ── Base para secciones blancas con efectos ── */
.section--animated {
  position: relative !important;
  overflow: hidden;
}
.section--animated > *:not(.bg-orb):not(.bg-sweep) {
  position: relative;
  z-index: 1;
}

/* ── Grids y componentes internos ── */
.value-cards,
.comp-grid,
.utilia-inner {
  position: relative;
}

/* Tarjetas — borde gradiente hover */
.card { position: relative; }
.card::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  background: linear-gradient(135deg, rgba(74,122,184,0.08), transparent 40%, transparent 60%, rgba(74,122,184,0.05));
  z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity 0.4s;
}
.card:hover::before { opacity: 1; }

/* Comp-cards — shine effect */
.comp-card { position: relative; overflow: hidden; }
.comp-card::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
  transition: left 0.6s ease; pointer-events: none;
}
.comp-card:hover::after { left: 150%; }

/* Timeline — glow lateral */
.tl-list { position: relative; }
.tl-list::after {
  content: ''; position: absolute; left: -20px; top: 10%; bottom: 10%;
  width: 80px;
  background: linear-gradient(180deg, transparent, rgba(74,122,184,0.14) 25%, rgba(74,122,184,0.16) 50%, rgba(74,122,184,0.14) 75%, transparent);
  filter: blur(25px); pointer-events: none;
  animation: breathe 8s ease-in-out infinite;
}

/* Utilia section — orbe accent */
.utilia-section { position: relative; overflow: hidden; }

/* ═══════════════════════════════════════════
   ANIMACIONES AVANZADAS
   Transiciones de página · Timeline · Parallax
   ═══════════════════════════════════════════ */

/* ── Mejora 4: Transiciones entre páginas ── */
@keyframes pageExit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-12px); }
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-exit {
  animation: pageExit 220ms ease-in forwards;
  pointer-events: none;
}
.page-enter {
  animation: pageEnter 280ms ease-out forwards;
}

/* ── Mejora 3: Timeline interactiva ── */

/* Línea de progreso que se dibuja con el scroll */
.tl-progress-line {
  position: absolute;
  left: 50%;
  margin-left: -1.25px;
  top: 0;
  bottom: 0;
  width: 2.5px;
  transform-origin: top center;
  transform: scaleY(0);
  background: linear-gradient(180deg, var(--navy-500), var(--navy-400));
  z-index: 2;
  pointer-events: none;
  transition: transform 0.08s linear;
  border-radius: 2px;
}

/* Dots interactivos */
.tl-dot {
  cursor: pointer;
}
.tl-dot:focus-visible {
  outline: 2px solid var(--navy-500);
  outline-offset: 3px;
}

/* Pulse al entrar en viewport */
@keyframes tlDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,122,184,0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(74,122,184,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,122,184,0); }
}
.tl-dot-pulse {
  animation: tlDotPulse 1.2s ease-out;
}
.tl-entry[data-branch="form"] .tl-dot-pulse {
  animation-name: tlDotPulseWarm;
}
@keyframes tlDotPulseWarm {
  0%   { box-shadow: 0 0 0 0 rgba(196,150,66,0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(196,150,66,0); }
  100% { box-shadow: 0 0 0 0 rgba(196,150,66,0); }
}

/* Estado activo del hito */
.tl-entry.tl-active .tl-body {
  border-left: 3px solid var(--navy-500);
  padding-left: 12px;
  transition: border-color 0.3s, padding-left 0.3s;
}
.tl-entry[data-branch="form"].tl-active .tl-body {
  border-left-color: var(--warm-500);
}
.tl-entry.tl-active .tl-body h3 {
  color: var(--navy-600);
}
.tl-entry[data-branch="form"].tl-active .tl-body h3 {
  color: var(--warm-600);
}
.tl-entry[data-branch="exp"].tl-active .tl-dot {
  background: var(--navy-500);
  border-color: var(--navy-500);
  transform: scale(1.2);
}
.tl-entry[data-branch="form"].tl-active .tl-dot {
  background: var(--warm-500);
  border-color: var(--warm-500);
  transform: scale(1.2);
}

/* Hover escalado en dots */
.tl-dot:hover {
  transform: scale(1.25);
}

/* ── Ken Burns — will-change para rendimiento ── */
.photo-banner img {
  will-change: transform;
}

/* ── Timeline entries — entrada direccional combinada con reveal ── */
.tl-entry.reveal[data-branch="exp"] {
  transform: translateX(-30px) translateY(22px);
}
.tl-entry.reveal[data-branch="form"] {
  transform: translateX(30px) translateY(22px);
}
.tl-entry.reveal[data-branch].visible {
  transform: translateX(0) translateY(0);
}