/* Fundación de la Niña · estilos generales
   Colores de marca: magenta #C42C6A · caribe #14998A · mango #F08A24
   tinta #231A24 · papel #FFF8F0 · rosa suave #FCE4EC */

html { scroll-behavior: smooth; }
body { margin: 0; background: #FFF8F0; -webkit-font-smoothing: antialiased; }
section[id] { scroll-margin-top: 16px; }
img { max-width: 100%; }
a { color: #C42C6A; }
a:hover { color: #8F1E4C; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #F08A24; outline-offset: 3px;
}
input:focus, select:focus, textarea:focus { border-color: #C42C6A !important; outline: none; }
button[data-filtro].activo { background: #231A24 !important; color: #FFFFFF !important; }

/* Teléfonos */
@media (max-width: 640px) {
  h1 { font-size: 40px !important; line-height: 46px !important; }
  h2 { font-size: 30px !important; line-height: 38px !important; }
  section { padding-top: 56px !important; padding-bottom: 56px !important; }
  header img { height: 48px !important; }
  article, form { padding: 22px !important; }
  #historias article > div, #tienda > div > div { min-width: 0; }
  [style*="padding: 48px; box-sizing"] { padding: 24px !important; }
}

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

/* Menú compacto en teléfonos */
.boton-menu { display: none; }
@media (max-width: 640px) {
  .boton-menu {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px;
    font-family: Nunito, system-ui, sans-serif; font-size: 16px; font-weight: 800; color: #231A24;
    background: #FFFFFF; border: 2px solid #231A24; border-radius: 999px; cursor: pointer;
  }
  header { flex-wrap: wrap; }
  header nav { width: 100%; }
  header nav a:not([data-interes]) { display: none !important; }
  header nav.abierto a:not([data-interes]) { display: block !important; width: 100%; padding: 8px 0; }
}