/* ==========================================================
   Paleta y tipografía 
   ========================================================== */
:root {
  --ink: #0c1c26; /* fondo oscuro */
  --deep: #123b4a; /* tono del velo sobre el video */
  --mist: #e9eef0; /* fondo claro */
  --signal: #7fd1c3; /* acento */
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--ink);
  color: #fff;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================
   PORTADA
   ========================================================== */
.hero {
  position: relative;
  min-height: 100vh; /* respaldo */
  min-height: 100svh; /* evita saltos por la barra del navegador en móvil */
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
}

/* Velo: oscurece el video para que el logo siempre se lea */
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(to bottom, rgba(12, 28, 38, 0.55), rgba(12, 28, 38, 0.35) 45%, rgba(12, 28, 38, 0.75)),
    rgba(18, 59, 74, 0.35);
}

/* Patrón tenue.  */
.hero__pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.3;
  background-image: url("../assets/patrones/lineas-diagonales.svg");
  background-size: 8px 8px; /* tamaño del mosaico: súbelo para líneas más separadas */
  pointer-events: none;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 6vh, 3.5rem);
  padding: 1.5rem;
  padding-top: max(1.5rem, env(safe-area-inset-top));
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  text-align: center;
}

.hero__logo {
  width: min(78vw, 400px);
  height: auto;
  /* Si el SVG es de color oscuro y se necesita blanco, descomentar: */
  /* filter: brightness(0) invert(1); */
  animation: logo-in 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  filter: drop-shadow(2px 2px 0.5px rgba(0, 0, 0, 0.3)) brightness(1.5);
}

@keyframes logo-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Botón de scroll */
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  min-height: 48px;
  color: #fff;
  font: 500 1rem/1 var(--font);
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition:
    background 0.25s,
    color 0.25s,
    border-color 0.25s;
}

.hero__cta:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

.hero__cta:focus-visible,
.hero__toggle:focus-visible,
.areas__list a:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
}

/* Pausar / reanudar video (accesibilidad) */
.hero__toggle {
  position: absolute;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(12, 28, 38, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.hero__toggle .icon-play {
  display: none;
}
.hero__toggle.is-paused .icon-play {
  display: block;
}
.hero__toggle.is-paused .icon-pause {
  display: none;
}

.texto-hero {
  text-align: justify;
  max-width: 600px;
}

/* ==========================================================
   Movimiento reducido: sin animación de entrada
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero__logo {
    animation: none;
  }
}