/* Keyframes fuera del media query: los navegadores los ignoran si no se referencian,
   así que no consumen recursos aunque el usuario prefiera movimiento reducido */
@keyframes pk-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

@keyframes pk-pulse-ring {
  0%   { transform: scale(1);    opacity: 0.5; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* Flotación más pronunciada para la imagen del hero */
@keyframes pk-hero-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}

@keyframes shimmer-text {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@media (prefers-reduced-motion: no-preference) {

  .btn-accent,
  .hero-cta-primary {
    position: relative;
    overflow: hidden;
  }

  .btn-accent::after,
  .hero-cta-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    transition: left 0.55s ease;
    pointer-events: none;
  }

  .btn-accent:hover::after,
  .hero-cta-primary:hover::after {
    left: 150%;
  }

  .servicio-item-card:hover,
  .about-card:hover,
  .english-path-card:hover {
    box-shadow:
      0 20px 48px rgba(0, 0, 0, 0.32),
      0 0 0 1px rgba(99, 102, 241, 0.22),
      0 8px 24px rgba(99, 102, 241, 0.12);
  }

  /* 3.2 s: lento suficiente para no marear, rápido suficiente para que se perciba movimiento */
  .servicio-circulo { animation: pk-float 3.2s ease-in-out infinite; }

  /* 0.4 s entre tarjeta y tarjeta: los círculos flotan en oleada, no al unísono */
  .servicio-item-card:nth-child(2) .servicio-circulo { animation-delay: 0.4s; }
  .servicio-item-card:nth-child(3) .servicio-circulo { animation-delay: 0.8s; }
  .servicio-item-card:nth-child(4) .servicio-circulo { animation-delay: 1.2s; }
  .servicio-item-card:nth-child(5) .servicio-circulo { animation-delay: 1.6s; }
  .servicio-item-card:nth-child(6) .servicio-circulo { animation-delay: 2.0s; }

  /* overflow visible aquí porque components.css no lo pone; sin esto el anillo queda cortado */
  .whatsapp-btn { overflow: visible; }

  .whatsapp-btn::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 2px solid rgba(37, 211, 102, 0.55);
    /* 2.2 s: el anillo expande y desaparece; menos de 2 s parecería urgente, más de 3 s deja de llamar atención */
    animation: pk-pulse-ring 2.2s ease-out infinite;
    pointer-events: none;
  }

  section h2 {
    position: relative;
    /* fit-content hace que el h2 encoja al ancho del texto; así el ::after de width:100% coincide con el título */
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  section h2::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent, #6366f1), var(--accent-2, #059669));
    border-radius: 2px;
    /* scaleX desde el centro: la línea ocupa todo el título y se expande hacia ambos lados */
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  section h2.is-visible::after { transform: scaleX(1); }

  /* 5 s: más lento que los círculos de servicio (3.2 s) para que la imagen parezca más pesada */
  #hero .hero-bg__img { animation: pk-hero-float 5s ease-in-out infinite; }

  .text-accent {
    background: linear-gradient(
      90deg,
      var(--accent) 15%,
      var(--accent-muted) 50%,
      var(--accent) 85%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer-text 3.5s linear infinite;
  }

  .servicio-item-card:hover .servicio-circulo {
    transform: scale(1.12) translateY(-3px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35) !important;
  }
}

:root:not([data-theme="light"]) #servicios {
  background:
    radial-gradient(ellipse 80% 80% at  0% 20%, rgba( 99, 102, 241, 0.45) 0%, transparent 58%),
    radial-gradient(ellipse 65% 65% at 100% 80%, rgba(139,  92, 246, 0.38) 0%, transparent 55%),
    linear-gradient(160deg, #1a1645 0%, #16133a 40%, #0f1428 100%);
}

:root:not([data-theme="light"]) #servicios .servicio-item-card {
  background: rgba(30, 27, 75, 0.62) !important;
  border-color: rgba(139, 92, 246, 0.25) !important;
  backdrop-filter: blur(18px) saturate(1.4);
}

:root:not([data-theme="light"]) #servicios .servicio-item-card:hover {
  background: rgba(49, 46, 129, 0.70) !important;
  border-color: rgba(167, 139, 250, 0.40) !important;
}

:root:not([data-theme="light"]) .galeria {
  background:
    radial-gradient(ellipse 80% 75% at 100% 15%, rgba(  5, 150, 105, 0.48) 0%, transparent 58%),
    radial-gradient(ellipse 65% 65% at   0% 85%, rgba(  6,  78,  59, 0.50) 0%, transparent 55%),
    linear-gradient(160deg, #042f1e 0%, #063d27 35%, #0a2e1f 70%, #0f1e16 100%);
}

:root:not([data-theme="light"]) .mapa {
  background:
    radial-gradient(ellipse 80% 75% at  90% 40%, rgba( 14, 116, 144, 0.50) 0%, transparent 58%),
    radial-gradient(ellipse 65% 60% at   5% 60%, rgba(  3,  82, 108, 0.42) 0%, transparent 55%),
    linear-gradient(160deg, #051c2c 0%, #082134 40%, #0a2540 70%, #091929 100%);
}

:root:not([data-theme="light"]) .faq {
  background:
    radial-gradient(ellipse 85% 75% at  50%  -5%, rgba(139,  92, 246, 0.52) 0%, transparent 55%),
    radial-gradient(ellipse 60% 55% at   0%  90%, rgba(109,  40, 217, 0.38) 0%, transparent 52%),
    radial-gradient(ellipse 55% 50% at 100%  70%, rgba(167, 139, 250, 0.25) 0%, transparent 52%),
    linear-gradient(160deg, #1c0b3a 0%, #220d44 35%, #1a0b35 65%, #120828 100%);
}

/* gradient text dark-navy → índigo → violeta; display:block es suficiente, no hace falta inline-block */
[data-theme="light"] section h2 {
  background: linear-gradient(135deg, #1e1b4b 0%, #4338ca 45%, #7c3aed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* el underline del ::after sigue funcionando porque está en el pseudo-elemento, no en el texto directamente */
[data-theme="light"] section h2::after {
  background: linear-gradient(90deg, #4338ca, #7c3aed);
}

[data-theme="light"] #servicios {
  background:
    radial-gradient(ellipse 100% 80% at 50% 50%, rgba(99, 102, 241, 0.07) 0%, transparent 65%),
    linear-gradient(160deg, #f5f3ff 0%, #eef2ff 50%, #f8fafc 100%);
}

/* cards blancas con borde superior del accent; el contraste con el fondo lavanda da el "pop" visual */
[data-theme="light"] #servicios .servicio-item-card {
  background: #ffffff !important;
  border-top: 3px solid rgba(79, 70, 229, 0.75) !important;
  border-left: 1px solid rgba(79, 70, 229, 0.10) !important;
  border-right: 1px solid rgba(79, 70, 229, 0.10) !important;
  border-bottom: 1px solid rgba(79, 70, 229, 0.10) !important;
  box-shadow:
    0 6px 24px rgba(79, 70, 229, 0.10),
    0 1px 4px rgba(79, 70, 229, 0.06) !important;
}

[data-theme="light"] #servicios .servicio-item-card:hover {
  box-shadow:
    0 20px 48px rgba(79, 70, 229, 0.18),
    0 4px 12px rgba(79, 70, 229, 0.10) !important;
}

[data-theme="light"] .galeria {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

[data-theme="light"] .mapa {
  background: linear-gradient(180deg, #f1f5f9 0%, #f8fafc 100%);
}

[data-theme="light"] .mapa .location-card {
  background: #ffffff !important;
  border-color: rgba(79, 70, 229, 0.12) !important;
  box-shadow:
    0 8px 32px rgba(15, 23, 42, 0.07),
    0 0 0 1px rgba(79, 70, 229, 0.08) !important;
}

/* lavanda profunda: una sola sección con color tiene más impacto que cuatro secciones con colores distintos */
[data-theme="light"] .faq {
  background:
    radial-gradient(ellipse 110% 65% at 50% -5%, rgba(79, 70, 229, 0.20) 0%, transparent 52%),
    radial-gradient(ellipse  70% 55% at  0% 90%, rgba(99, 102, 241, 0.10) 0%, transparent 50%),
    linear-gradient(160deg, #eef2ff 0%, #e0e7ff 40%, #ede9fe 70%, #f5f3ff 100%);
}

[data-theme="light"] .faq .accordion-flush .accordion-item {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(79, 70, 229, 0.15) !important;
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.08) !important;
}

[data-theme="light"] .faq .accordion-button {
  background: rgba(238, 242, 255, 0.85) !important;
  color: #1e1b4b;
}

[data-theme="light"] .faq .accordion-button:not(.collapsed) {
  background: rgba(224, 231, 255, 0.95) !important;
  color: #1e1b4b;
}

[data-theme="light"] .faq .accordion-body {
  background: #ffffff !important;
  border-top-color: rgba(79, 70, 229, 0.12) !important;
}