/* ==========================================================================
   By Karling — Cumplimiento: accesibilidad (WCAG 2.1 AA), contraste, banner de
   cookies y bloque legal del pie. Se carga DESPUÉS del <style> de cada página.
   ========================================================================== */

/* ── Accesibilidad base ── */
.skip-link {
  position: absolute; left: .75rem; top: -4rem; z-index: 100000;
  background: #3D2318; color: #fff; padding: .75rem 1.1rem; border-radius: 8px;
  font-weight: 700; text-decoration: none; transition: top .15s ease;
}
.skip-link:focus { top: .75rem; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
main:focus { outline: none; }
:focus-visible { outline: 3px solid #3D2318; outline-offset: 3px; border-radius: 4px; }
footer :focus-visible, .promo :focus-visible, .modal-overlay :focus-visible { outline-color: #FBEEE9; }
.modal-overlay .modal-container :focus-visible { outline-color: #3D2318; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Contraste (ratios calculados; objetivo AA 4.5:1 texto, 3:1 elementos gráficos) ── */
.hero-eyebrow, .section-label { color: #8A6150; }                /* antes rosa 1.9:1 → 4.7–5.4:1 */
.promo-text .section-label, .promo-text p { color: #FBEEE9; }    /* antes 3.9:1 → 4.8:1 */
.promo .btn-primary { background: var(--rose, #D7A893) !important; color: #3D2318 !important; } /* antes blanco/rosa 2.1:1 → 6.8:1 */
.promo .btn-primary:hover { background: #FBEEE9 !important; }
.nav-cta:hover { background: #3D2318 !important; }               /* antes blanco/rosa 2.1:1 al pasar el cursor */
.nav-links a:hover, .cat-link:hover, .prod-body h3:hover { color: #3D2318; }
.stars { color: #8A6150; }
.footer-bottom { opacity: .8 !important; }                       /* antes .5 → 3.8:1 */
.img-note {
  position: absolute; left: .6rem; bottom: .6rem; z-index: 3;
  background: rgba(61,35,24,.82); color: #fff; font-size: .72rem; line-height: 1;
  padding: .4rem .6rem; border-radius: 20px; pointer-events: none;
}

/* ── Bloque legal del pie ── */
.footer-legal { border-top: 1px solid rgba(245,213,200,.25); padding-top: 1.5rem; margin-bottom: 1.5rem; font-size: .85rem; }
.footer-legal ul { display: flex; flex-direction: row; flex-wrap: wrap; gap: .25rem 1.4rem; list-style: none; margin: 0 0 1rem; }
.footer-legal ul li a, .footer-legal ul li button {
  font-size: .85rem; opacity: .95; color: var(--light, #F5D5C8); background: none; border: 0;
  padding: .5rem 0; cursor: pointer; font-family: inherit; text-decoration: underline; display: inline-block;
}
.footer-legal ul li a:hover, .footer-legal ul li button:hover { color: var(--rose, #D7A893); opacity: 1; }
.footer-id, .footer-note { color: var(--light, #F5D5C8); opacity: .9; line-height: 1.7; max-width: 920px; margin-bottom: .6rem; }
.footer-note a { color: var(--light, #F5D5C8); text-decoration: underline; }
mark.pendiente { background: #fff3b0; color: #3D2318; padding: 0 .3rem; border-radius: 3px; font-weight: 700; }

/* ── Banner y panel de cookies ── */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10050; background: #fff; color: #3D2318;
  border-top: 3px solid #8A6150; box-shadow: 0 -6px 30px rgba(61,35,24,.2);
  padding: 1rem 5% calc(1rem + env(safe-area-inset-bottom, 0px));
}
.cookie-banner[hidden], .cookie-modal[hidden] { display: none; }
.cookie-inner { max-width: 1100px; margin: 0 auto; display: flex; gap: 1rem 2rem; align-items: center; flex-wrap: wrap; }
.cookie-text { flex: 1 1 320px; font-size: .92rem; line-height: 1.55; }
.cookie-text h2 { font-family: var(--font-display, serif); font-size: 1.1rem; margin: 0 0 .3rem; color: #3D2318; }
.cookie-text a { color: #8A6150; text-decoration: underline; font-weight: 700; }
.cookie-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.cookie-btn {
  min-height: 44px; padding: .65rem 1.25rem; border-radius: 30px; border: 2px solid #8A6150;
  background: #fff; color: #8A6150; font: 700 .9rem var(--font-body, sans-serif); cursor: pointer;
}
.cookie-btn:hover { background: #FBEEE9; }
.cookie-btn.solid { background: #8A6150; color: #fff; }
.cookie-btn.solid:hover { background: #3D2318; border-color: #3D2318; }
.cookie-modal {
  position: fixed; inset: 0; z-index: 10060; background: rgba(61,35,24,.6);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.cookie-dialog {
  background: #fff; color: #3D2318; border-radius: 16px; width: min(560px, 100%); max-height: 90vh; overflow-y: auto;
  padding: 1.5rem; box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.cookie-dialog h2 { font-family: var(--font-display, serif); font-size: 1.4rem; margin: 0 0 .5rem; }
.cookie-dialog > p { font-size: .92rem; line-height: 1.6; margin-bottom: 1rem; }
.cookie-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: .9rem 0; border-top: 1px solid #F5D5C8; font-size: .9rem; line-height: 1.5;
}
.cookie-row strong { display: block; color: #3D2318; }
.cookie-row small { color: #6B4A3C; font-size: .82rem; }
.cookie-row input { width: 1.5rem; height: 1.5rem; accent-color: #8A6150; flex-shrink: 0; margin-top: .2rem; }
.cookie-dialog .cookie-actions { margin-top: 1rem; justify-content: flex-end; }
@media (max-width: 560px) { .cookie-actions { width: 100%; } .cookie-btn { flex: 1 1 100%; } }

/* ── Corrección: el <nav> legal del pie heredaba el estilo de la barra superior (fondo blanco, sticky) ── */
.footer-legal nav {
  background: transparent; box-shadow: none; position: static; display: block;
  padding: 0; margin: 0; z-index: auto;
}
/* El botón flotante de WhatsApp ya no tapa el final del pie */
@media (max-width: 900px) { footer { padding-bottom: 5.5rem; } }