/* ============================================================================
   ⚠️⚠️ NO TOCAR ESTE ARCHIVO ⚠️⚠️  (a menos que sepas de diseño / CSS)
   ============================================================================
   Casa Nagual — CAPA UNIVERSAL RESPONSIVE

   Este archivo se carga DE ÚLTIMO en TODAS las páginas (index, ritual,
   hogar, mascotas y próximamente). Su trabajo es que la página se vea
   bien en CUALQUIER dispositivo:

     · Cualquier TAMAÑO de pantalla  → desde 280 px (celular mini) hasta
                                       televisores y monitores 4K.
     · Cualquier GAMA               → celulares lentos, con poca memoria o
                                       con plan de datos limitado.
     · Cualquier NAVEGADOR          → Chrome, Safari (iPhone/Mac), Firefox,
                                       Edge, Samsung Internet, Opera y
                                       navegadores viejos de Android.

   🖼️ Aquí NO hay imágenes ni videos ni textos: sólo reglas de tamaño.
   ⚠️ Un cambio aquí afecta A TODAS las páginas al mismo tiempo.
   ============================================================================ */


/* ============================================================================
   1. BASE SEGURA — evita que algo se salga de la pantalla
   ============================================================================ */

html {
  /* Safari en iPhone agranda solo la letra al girar el celular: esto lo evita */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Ningún elemento puede ser más ancho que la pantalla */
img,
video,
svg,
iframe,
table,
pre {
  max-width: 100%;
}

/* Palabras muy largas (correos, enlaces, nombres) se parten en vez de
   empujar el diseño hacia los lados */
h1, h2, h3, h4, p, span, strong, small, a, li, td {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Al tocar un botón en celular no queda un recuadro azul feo */
a, button, .btn, .nav-toggle, .video-card, .ritual-tile {
  -webkit-tap-highlight-color: rgba(62, 49, 36, .14);
}

/* Los enlaces del menú que van a secciones (#productos, #ingredientes...)
   ya no quedan escondidos debajo de la barra fija de arriba */
[id] {
  scroll-margin-top: clamp(92px, 15vh, 150px);
}


/* ============================================================================
   2. ALTO DE PANTALLA REAL EN CELULAR
   En el celular la barra del navegador aparece y desaparece: "100vh" mide
   mal y deja huecos o corta el contenido. "svh/dvh" mide el alto real.
   Se deja primero la versión antigua (para navegadores viejos) y luego la
   moderna: el navegador usa la última que entiende.
   ============================================================================ */

.hero {
  min-height: 100vh;
  min-height: 100svh;
}

.page-hero {
  min-height: 78vh;
  min-height: 78svh;
}

.nav-links {
  max-height: min(70vh, 430px);
  max-height: min(70dvh, 430px);
}

.image-lightbox-media {
  min-height: 68vh;
  min-height: 68svh;
}

.image-lightbox-media img {
  max-height: calc(100vh - 88px);
  max-height: calc(100dvh - 88px);
}


/* ============================================================================
   3. ZONAS SEGURAS (iPhone con "notch" / barra de gestos)
   Evita que el menú, el botón de WhatsApp o el pie queden tapados.
   ============================================================================ */

@supports (padding: max(0px)) {
  .top-nav {
    top: max(14px, env(safe-area-inset-top));
  }

  /* Sólo con el celular acostado hay "notch" a los lados */
  @media (orientation: landscape) {
    .top-nav {
      padding-left: max(14px, env(safe-area-inset-left));
      padding-right: max(14px, env(safe-area-inset-right));
    }

    .container {
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }
  }

  .ws-float {
    bottom: max(24px, env(safe-area-inset-bottom));
    right: max(24px, env(safe-area-inset-right));
  }

  footer {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }

  .video-lightbox,
  .image-lightbox {
    padding-top: max(18px, env(safe-area-inset-top));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }

  .image-lightbox-close {
    top: max(18px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
  }
}


/* ============================================================================
   4. COMPATIBILIDAD ENTRE NAVEGADORES
   ============================================================================ */

/* Efecto "vidrio esmerilado": Safari lo necesita con el prefijo -webkit- */
.top-nav,
.hero-badge,
.page-hero-badge,
.video-card::before {
  -webkit-backdrop-filter: blur(14px);
}

/* Si el navegador NO sabe hacer ese efecto (Firefox viejo, Android viejo),
   se usa un fondo sólido para que el texto siga siendo legible */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .top-nav {
    background: rgba(255, 253, 248, .98);
  }

  .hero-badge,
  .page-hero-badge,
  .video-card::before {
    background: rgba(255, 253, 248, .96);
  }
}

/* Redes de scroll horizontal: que no "reboten" arrastrando la página entera */
.video-carousel,
.image-carousel,
.nav-links,
.video-lightbox,
.image-lightbox,
.image-lightbox-copy {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Carrusel de videos: centrado cuando caben, y sin cortar la primera tarjeta
   cuando NO caben (con "justify-content: center" la primera quedaba
   inalcanzable en pantallas medianas). */
@media (min-width: 901px) {
  .video-carousel {
    justify-content: flex-start;
  }

  .video-carousel > *:first-child {
    margin-left: auto;
  }

  .video-carousel > *:last-child {
    margin-right: auto;
  }
}

/* Respaldo para navegadores muy viejos que no entienden min() / clamp():
   primero un valor simple y luego el moderno. */
.container {
  width: 92%;
  width: min(var(--max, 1180px), calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================================
   5. PANTALLAS TÁCTILES (celular / tablet)
   En pantallas sin mouse, los efectos "hover" se quedaban pegados después
   de tocar. Aquí se apagan.
   ============================================================================ */

@media (hover: none) {
  .btn:hover,
  .ritual-tile:hover,
  .step-card:hover,
  .poster-card:hover,
  .image-carousel-btn:hover,
  .ws-float:hover {
    transform: none;
  }

  .product-feature:hover img,
  .product-side-card:hover img,
  .gallery-card:hover img {
    transform: none;
  }

  .btn:hover {
    background: var(--earth);
  }

  .btn-honey:hover {
    background: var(--honey);
  }

  .btn-light:hover {
    background: rgba(255, 253, 248, .72);
  }
}

/* Todo lo que se toca con el dedo mide al menos 44 px (recomendación Apple/Google) */
.nav-links a,
.socials a,
.image-carousel-btn,
.nav-toggle,
.video-back-btn,
.image-lightbox-close {
  min-height: 44px;
}

.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
}


/* ============================================================================
   6. TAMAÑOS DE PANTALLA
   ============================================================================ */

/* --- 6.1 Portátil pequeño / tablet horizontal (981 px – 1200 px) ------------
   El menú de escritorio con 7 enlaces quedaba muy apretado. */
@media (min-width: 981px) and (max-width: 1200px) {
  :root {
    --logo-desktop-height: 88px;
  }

  .top-nav {
    gap: 12px;
  }

  .nav-links {
    gap: 13px;
    font-size: .84rem;
  }

  .brand-text strong {
    font-size: .92rem;
  }

  .btn {
    padding: 11px 16px;
  }
}

/* --- 6.2 Tablet vertical (601 px – 980 px) ---------------------------------
   Aprovecha el ancho: 2 columnas en vez de 1. */
@media (min-width: 601px) and (max-width: 980px) {
  .lines-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lines-grid .product-side-card:last-child {
    grid-column: 1 / -1;
    min-height: 300px;
  }

  .ingredient-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .video-card {
    flex: 0 0 300px;
    height: 500px;
  }
}

/* --- 6.3 Celular mini / gama baja (hasta 360 px) ---------------------------
   Android de 320-360 px, iPhone SE 1ª generación, celulares económicos. */
@media (max-width: 360px) {
  :root {
    --logo-mobile-height: 50px;
  }

  .container {
    width: calc(100% - 18px);
  }

  .top-nav {
    width: calc(100% - 16px);
    gap: 6px;
    padding: 6px 8px;
  }

  .btn {
    min-height: 38px;
    padding: 8px 10px;
    font-size: .72rem;
    gap: 5px;
  }

  .nav-toggle {
    width: 38px;
    height: 38px;
  }

  .hero {
    padding-top: 100px;
  }

  .hero-left {
    min-height: 560px;
  }

  .hero-caption h1 {
    font-size: clamp(1.9rem, 12vw, 2.7rem);
  }

  .intro-panel,
  .ingredient-text,
  .ritual-tile,
  .quick-order,
  .step-card {
    padding: 18px;
  }

  .ingredient-item {
    grid-template-columns: 34px 1fr;
    gap: 10px;
    padding: 12px;
  }

  .ingredient-item i {
    width: 34px;
    height: 34px;
    font-size: .86rem;
  }

  .marquee-content span {
    font-size: .74rem;
    margin: 0 14px;
  }

  .video-card {
    flex: 0 0 86%;
    height: 460px;
  }

  .cta-box {
    padding: 28px 14px;
  }

  .cta-box img {
    width: 76px;
    height: 76px;
  }

  footer h3 {
    font-size: 1.1rem;
  }

  footer p {
    font-size: .84rem;
  }
}

/* --- 6.4 Pantallas muy angostas (menos de 300 px: relojes, ventanas
           divididas, navegadores con zoom muy alto) ------------------------- */
@media (max-width: 300px) {
  .top-nav {
    grid-template-columns: 1fr auto;
    row-gap: 6px;
  }

  .top-nav .btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .brand img {
    height: 44px;
  }
}

/* --- 6.5 Monitores grandes y 4K -------------------------------------------- */
@media (min-width: 1900px) {
  :root {
    --max: 1480px;
  }

  .video-card {
    flex: 0 0 360px;
    height: 620px;
  }
}

@media (min-width: 2400px) {
  :root {
    --max: 1680px;
  }

  body {
    font-size: 1.06rem;
  }
}

/* --- 6.6 Celular acostado (horizontal) con poca altura ---------------------- */
@media (max-height: 430px) and (orientation: landscape) {
  :root {
    --logo-mobile-height: 42px;
  }

  .hero,
  .page-hero {
    min-height: auto;
    padding: 84px 0 32px;
  }

  .hero-left,
  .page-hero-board {
    min-height: 88vh;
    min-height: 88svh;
  }

  .video-card {
    height: 82vh;
    height: 82svh;
    min-height: 260px;
  }

  .nav-links {
    max-height: 58vh;
    max-height: 58dvh;
  }

  .cta-section,
  .section,
  .video-section,
  .ingredients {
    padding: 36px 0;
  }
}

/* --- 6.7 Pantallas plegables / muy altas y angostas ------------------------ */
@media (max-width: 420px) and (min-height: 900px) {
  .hero-left {
    min-height: 72vh;
    min-height: 72svh;
  }

  .video-card {
    height: 62vh;
    height: 62svh;
  }
}


/* ============================================================================
   7. GAMA BAJA / AHORRO DE DATOS / MENOS MOVIMIENTO
   La clase "modo-ligero" la pone sola la página (ver rendimiento-universal.js)
   cuando detecta un celular lento, con poca memoria o con ahorro de datos.
   ============================================================================ */

/* El usuario pidió menos animación en la configuración de su celular */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .marquee-content {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    white-space: normal;
  }

  .marquee-container {
    white-space: normal;
  }
}

/* Celular lento: se quitan los efectos que más consumen batería y procesador */
.modo-ligero .top-nav,
.modo-ligero .hero-badge,
.modo-ligero .page-hero-badge,
.modo-ligero .video-card::before {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(255, 253, 248, .97);
}

.modo-ligero body::before {
  display: none;
}

.modo-ligero .product-feature,
.modo-ligero .product-side-card,
.modo-ligero .gallery-card,
.modo-ligero .ritual-tile,
.modo-ligero .step-card,
.modo-ligero .poster-card,
.modo-ligero .intro-panel,
.modo-ligero .ingredient-text,
.modo-ligero .ingredient-photo,
.modo-ligero .cta-box,
.modo-ligero .quick-order {
  box-shadow: 0 8px 20px rgba(62, 49, 36, .10);
}

.modo-ligero .marquee-content {
  animation-duration: 40s;
}

.modo-ligero .reveal {
  transition-duration: .35s;
}

/* Tarjeta de video en modo ligero: se queda la foto de portada y se reproduce
   sólo cuando la persona la toca (ahorra datos y batería) */
.modo-ligero .video-card::before {
  content: "Tocar para reproducir";
}


/* ============================================================================
   8. IMPRESIÓN (por si alguien imprime el catálogo)
   ============================================================================ */

@media print {
  .top-nav,
  .ws-float,
  .video-section,
  .image-carousel-controls,
  .marquee-container {
    display: none !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  body {
    background: white;
  }

  .image-carousel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow: visible;
  }

  .image-carousel > * {
    max-width: 100%;
    break-inside: avoid;
  }
}
/* ⚠️ FIN DEL ARCHIVO — NO TOCAR ⚠️ */