/* ==========================================================================
   La Ruta Dorada de los Rollos de Canela — hoja de estilos
   El diseño vive en estilos inline dentro del HTML (viene de Claude Design).
   Aquí solo van: base, animaciones y las reglas responsive que antes
   resolvía JavaScript con el estado `narrow`.
   ========================================================================== */

html,
body {
  margin: 0;
  padding: 0;
  background: #FBF1E3;
}

* {
  box-sizing: border-box;
}

a {
  color: #B4531B;
  text-decoration: none;
}

a:hover {
  color: #8A3B10;
}

img {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   Animaciones
   -------------------------------------------------------------------------- */

@keyframes softDown {

  0%,
  100% {
    transform: translateY(0);
    opacity: .75;
  }

  50% {
    transform: translateY(7px);
    opacity: 1;
  }
}

@keyframes glaze {

  0%,
  100% {
    transform: rotate(-2.2deg) translateY(0);
  }

  50% {
    transform: rotate(-2.2deg) translateY(-9px);
  }
}

@media (prefers-reduced-motion: reduce) {

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

/* --------------------------------------------------------------------------
   Modo estrecho (< 560 px)

   El diseño original medía el ancho con JavaScript y guardaba un estado
   `narrow` para mostrar/ocultar la barra superior, el párrafo largo del hero
   y reordenar el indicador de scroll. Aquí se resuelve con media queries:
   sin parpadeo en la primera carga y sin depender de JS.

   Los elementos traen `display` en su estilo inline, así que hace falta
   !important para ganarle.
   -------------------------------------------------------------------------- */

@media (max-width: 559px) {

  [data-narrow="hide"] {
    display: none !important;
  }

  [data-narrow="only"] {
    display: block !important;
  }

  [data-narrow="cue"] {
    order: 3 !important;
  }
}

/* --------------------------------------------------------------------------
   Barra superior en móvil

   El diseño original la ocultaba por debajo de 560 px. Se mantiene visible
   porque las dos señales que lleva —material digital con acceso inmediato y
   garantía de 7 días— son justo las que quitan fricción antes de leer nada.

   A 14 px no cabe en una pantalla estrecha, así que se reduce el tipo y se
   aprieta el espaciado para que ocupe dos líneas limpias en lugar de cuatro
   apretadas.
   -------------------------------------------------------------------------- */

@media (max-width: 559px) {

  #topbar {
    flex-direction: column !important;
    padding: 7px 10px !important;
    gap: 5px !important;
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    text-align: center;
  }

  /* La píldora de la garantía, algo más compacta */
  #topbar span span[style*="border-radius: 999px"],
  #topbar span span[style*="border-radius:999px"] {
    padding: 3px 9px !important;
    font-size: 1em !important;
  }

  /* El punto rojo pierde protagonismo a este tamaño */
  #topbar span span[style*="border-radius: 50%"],
  #topbar span span[style*="border-radius:50%"] {
    width: 7px !important;
    height: 7px !important;
  }
}

@media (max-width: 380px) {

  #topbar {
    font-size: 9.5px !important;
  }
}

/* --------------------------------------------------------------------------
   Acordeones (módulos y FAQ)
   -------------------------------------------------------------------------- */

[data-acc],
[data-faq] {
  -webkit-tap-highlight-color: transparent;
}

[data-acc]:focus-visible,
[data-faq]:focus-visible,
a:focus-visible {
  outline: 3px solid #B4531B;
  outline-offset: 3px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Galería
   -------------------------------------------------------------------------- */

[data-dot] {
  transition: background .4s ease;
}

/* --------------------------------------------------------------------------
   Utilidades
   -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}