/*
 * Estilos complementarios a Tailwind (Play CDN).
 * Acá vive todo lo que Tailwind no resuelve con utilidades: animaciones del
 * elemento de marca (rastro de puntos), revelado al hacer scroll, textura
 * de puntos de fondo y pequeños ajustes de accesibilidad/legibilidad.
 */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ------------------------------------------------------------------ */
/* Rastro de puntos (elemento de marca) — animación de entrada         */
/* ------------------------------------------------------------------ */
.dot-trail-anim circle {
  opacity: 0;
  transform: scale(0.4);
  transform-origin: center;
  animation: dotIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.dot-trail-anim circle:nth-child(1) { animation-delay: 0.05s; }
.dot-trail-anim circle:nth-child(2) { animation-delay: 0.15s; }
.dot-trail-anim circle:nth-child(3) { animation-delay: 0.25s; }
.dot-trail-anim circle:nth-child(4) { animation-delay: 0.35s; }
.dot-trail-anim circle:nth-child(5) { animation-delay: 0.45s; }
.dot-trail-anim circle:nth-child(6) { animation-delay: 0.55s; }
.dot-trail-anim circle:nth-child(7) { animation-delay: 0.65s; }

@keyframes dotIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Textura sutil de puntos para reforzar el motivo de marca sin repetirlo */
.bg-dot-texture {
  background-image: radial-gradient(circle, rgba(27, 137, 193, 0.16) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}

/* Campo de rastros: variante dispersa del isotipo (puntos ascendentes de
   distinto tamaño), usada como fondo de los héroes internos en lugar de
   fotos de stock genéricas. Repite el mismo lenguaje visual del logo. */
.bg-trail-field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='30' cy='230' r='9'/%3E%3Ccircle cx='55' cy='205' r='7'/%3E%3Ccircle cx='78' cy='185' r='5'/%3E%3Ccircle cx='98' cy='170' r='3'/%3E%3Ccircle cx='190' cy='60' r='8'/%3E%3Ccircle cx='168' cy='40' r='6'/%3E%3Ccircle cx='148' cy='24' r='4'/%3E%3Ccircle cx='132' cy='12' r='2.5'/%3E%3Ccircle cx='230' cy='190' r='6'/%3E%3Ccircle cx='212' cy='170' r='4.5'/%3E%3Ccircle cx='196' cy='154' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 260px 260px;
}

/* ------------------------------------------------------------------ */
/* Revelado progresivo al hacer scroll                                 */
/* ------------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .dot-trail-anim circle {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------------------------ */
/* Recorte de texto (fallback manual, no depende del plugin Tailwind)  */
/* ------------------------------------------------------------------ */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Header con sombra al hacer scroll                                   */
/* ------------------------------------------------------------------ */
header.header-scrolled {
  box-shadow: 0 1px 0 0 rgba(28, 36, 75, 0.06), 0 8px 24px -12px rgba(28, 36, 75, 0.12);
}

/* ------------------------------------------------------------------ */
/* Menú móvil: transición de apertura                                  */
/* ------------------------------------------------------------------ */
#mobile-menu {
  animation: menuIn 0.2s ease;
}
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ */
/* Video de fondo del hero                                             */
/* ------------------------------------------------------------------ */
.hero-video {
  object-fit: cover;
}

/* Hero de inicio a pantalla completa: resta la altura fija del header
   sticky (h-20 = 5rem) para que header + hero ocupen exactamente un
   viewport, sin sobrante ni recorte. dvh evita que la barra de
   direcciones móvil deje un hueco; vh queda como base para navegadores
   sin soporte de dvh. */
.hero-fullscreen {
  height: calc(100vh - 5rem);
}
@supports (height: 100dvh) {
  .hero-fullscreen {
    height: calc(100dvh - 5rem);
  }
}