/* =========================================================
   SalpicArte – Responsive Overrides
   Colores de marca: #ff2d9b | #c71fff | #00f5ff | #39ff14 | #ffe600
   Breakpoints: 1024px | 768px | 480px
   ========================================================= */

/* --- Reset viewport base --- */
:root {
  --color-bg: #080810;
  --color-pink: #ff2d9b;
  --color-purple: #c71fff;
  --color-cyan: #00f5ff;
  --color-green: #39ff14;
  --color-yellow: #ffe600;
}

/* === SMALL DESKTOP (≤ 1024px) === */
@media (max-width: 1024px) {

  /* Contenedores generales */
  .container,
  [class*="container"],
  [class*="wrapper"] {
    max-width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  /* Grillas de cards → 2 columnas */
  [class*="grid"],
  [class*="cards"],
  [class*="services"],
  [class*="activities"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  /* Hero: reducir tamaño de títulos */
  [class*="hero"] h1,
  [class*="banner"] h1,
  [class*="title"] {
    font-size: clamp(2rem, 5vw, 3.5rem) !important;
  }

  [class*="hero"] p,
  [class*="hero"] [class*="subtitle"] {
    font-size: clamp(1rem, 2vw, 1.25rem) !important;
  }

  /* Galería → 3 columnas */
  [class*="gallery"],
  [class*="photos"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Carrusel de fotos: en tablet/mobile, una foto por vez (en desktop se ven 3) */
  .carousel-track { gap: 0; }
  .carousel-slide { min-width: 100%; height: 360px; background: #030308; }
  .carousel-slide img { object-fit: contain; }
}

/* === TABLET (≤ 768px) === */
@media (max-width: 768px) {

  /* Contenedores */
  .container,
  [class*="container"],
  [class*="wrapper"] {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* Navbar: ocultar links, mostrar hamburger */
  nav [class*="links"],
  nav [class*="menu"],
  nav ul,
  header [class*="nav-links"],
  header ul {
    display: none !important;
  }

  nav [class*="hamburger"],
  nav [class*="burger"],
  nav [class*="toggle"],
  header [class*="hamburger"],
  header [class*="toggle"] {
    display: flex !important;
  }

  /* Navbar abierta con clase .open / .active */
  nav.open [class*="links"],
  nav.active [class*="links"],
  nav [class*="links"].open,
  nav [class*="links"].active {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    inset: 0;
    background: rgba(8, 8, 16, 0.97);
    align-items: center;
    justify-content: center;
    gap: 2rem;
    z-index: 1000;
  }

  /* Markup real del sitio: <nav> sin clases + <ul id="navMenu"> +
     botón .nav-toggle que agrega/quita .nav-open en <nav>. La regla
     genérica "nav ul { display:none !important }" de arriba no la
     desactiva sola, hace falta esta con más especificidad. */
  nav.nav-open ul {
    display: flex !important;
  }

  /* Hero: layout vertical */
  [class*="hero"],
  [class*="banner"] {
    flex-direction: column !important;
    text-align: center !important;
    padding-top: 5rem !important;
    padding-bottom: 3rem !important;
  }

  [class*="hero"] h1,
  [class*="banner"] h1 {
    font-size: clamp(1.8rem, 8vw, 2.8rem) !important;
    line-height: 1.2 !important;
  }

  [class*="hero"] [class*="cta"],
  [class*="hero"] button,
  [class*="hero"] a[class*="btn"] {
    width: 100%;
    max-width: 320px;
    margin: 0 auto !important;
    display: block !important;
    text-align: center;
  }

  /* Hero en mobile: ahora usa un video vertical propio (9:16,
     "videos/salpicarte-vertical.mp4", elegido en injectVideo()
     de js/hero-video.js vía matchMedia) en vez de recortar el horizontal de
     16:9. Con la proporción exacta del video no hace falta recortar
     nada. El padding-top no sirve para separarlo del nav: .hero-bg es
     position:absolute con inset:0, así que ignora el padding del
     padre y el nav (fixed, encima) queda superpuesto sobre el video.
     Separamos explícitamente: el nav libera 68px arriba. */
  #hero {
    min-height: auto !important;
    height: calc(68px + 100vw * 16 / 9) !important;
    padding: 0 !important;
  }
  .hero-bg {
    top: 68px !important;
    bottom: auto !important;
    height: calc(100vw * 16 / 9) !important;
    background-image: none !important;
    background-color: var(--color-bg, #080810);
  }

  /* Grillas → 1 columna */
  [class*="grid"],
  [class*="cards"],
  [class*="services"],
  [class*="activities"],
  [class*="pricing"],
  [class*="plans"] {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* Layout flex de 2 columnas → vertical */
  [class*="about"],
  [class*="info"],
  [class*="split"],
  [class*="two-col"] {
    flex-direction: column !important;
  }

  [class*="about"] img,
  [class*="info"] img,
  [class*="split"] img {
    width: 100% !important;
    max-width: 480px;
    margin: 0 auto !important;
    display: block !important;
  }

  /* Galería → 2 columnas */
  [class*="gallery"],
  [class*="photos"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Secciones: reducir padding vertical */
  section,
  [class*="section"] {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* Tipografía de secciones */
  h2, [class*="section-title"] {
    font-size: clamp(1.5rem, 6vw, 2.2rem) !important;
  }

  h3 {
    font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
  }

  /* Footer */
  footer,
  [class*="footer"] {
    flex-direction: column !important;
    text-align: center !important;
    gap: 1.5rem !important;
  }

  [class*="footer"] [class*="links"],
  [class*="footer"] ul {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
}

/* === MÓVIL (≤ 480px) === */
@media (max-width: 480px) {

  /* Contenedores */
  .container,
  [class*="container"],
  [class*="wrapper"] {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Hero */
  [class*="hero"] h1,
  [class*="banner"] h1 {
    font-size: clamp(1.5rem, 9vw, 2.2rem) !important;
  }

  [class*="hero"] p,
  [class*="hero"] [class*="subtitle"] {
    font-size: 0.95rem !important;
  }

  /* Botones full width */
  button:not(.carousel-btn):not(.nav-toggle),
  a[class*="btn"],
  [class*="button"] {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 1rem !important;
    padding: 0.85rem 1.25rem !important;
  }

  /* Galería → 1 columna */
  [class*="gallery"],
  [class*="photos"] {
    grid-template-columns: 1fr !important;
  }

  /* Cards */
  [class*="card"] {
    border-radius: 12px !important;
  }

  /* Tipografía base */
  body {
    font-size: 15px !important;
  }

  h2, [class*="section-title"] {
    font-size: clamp(1.3rem, 7vw, 1.8rem) !important;
  }

  /* Secciones: menos padding */
  section,
  [class*="section"] {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Countdown / timers */
  [class*="countdown"],
  [class*="timer"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.5rem !important;
  }

  [class*="countdown"] [class*="unit"],
  [class*="timer"] [class*="digit"] {
    font-size: clamp(1.8rem, 12vw, 2.5rem) !important;
  }

  /* Formularios */
  form,
  [class*="form"] {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  input:not([type="radio"]):not([type="checkbox"]),
  textarea,
  select {
    width: 100% !important;
    font-size: 16px !important; /* evita zoom en iOS */
  }

  input[type="radio"],
  input[type="checkbox"] {
    width: 18px !important;
    flex-shrink: 0;
  }

  /* Navbar: reducir altura */
  nav,
  header {
    padding: 0.75rem 1rem !important;
  }

  nav [class*="logo"],
  header [class*="logo"] {
    font-size: 1.2rem !important;
  }
}

/* === MÓVIL PEQUEÑO (≤ 360px) === */
@media (max-width: 360px) {
  [class*="hero"] h1,
  [class*="banner"] h1 {
    font-size: 1.4rem !important;
  }

  [class*="countdown"] [class*="unit"],
  [class*="timer"] [class*="digit"] {
    font-size: 1.6rem !important;
  }
}

/* =========================================================
   HERO — quitar difuminado (blur) sobre el video
   ========================================================= */
[class*="hero"],
[class*="hero"] > *,
[class*="hero"]::before,
[class*="hero"]::after,
[class*="banner"],
[class*="banner"] > *,
[class*="banner"]::before,
[class*="banner"]::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

[class*="hero"]::before,
[class*="hero"]::after,
[class*="banner"]::before,
[class*="banner"]::after {
  opacity: 0.3 !important;
}

/* =========================================================
   ESTILOS GLOBALES
   ========================================================= */

/* Márgenes laterales de la página */
body > *,
#root,
#app {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.container,
[class*="container"],
[class*="wrapper"] {
  max-width: 100% !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}