/* ==========================================================
   base.css — Regalos (OPTIMIZADO)
   - Header/Footer sólidos y accesibles
   - Títulos y enlaces con buen foco/hover
   - Botones genéricos compatibles con WooCommerce
   - Contenedor, secciones y utilitarios
   Compatible: WP 6.8.x • Woo 10.x • Blocksy 2.x
   ========================================================== */

/* ===== Utilitarios de accesibilidad ===== */
.sr-only,
.visually-hidden{
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}
.skip-link{
  position:absolute; top:-40px; left:0; background:#000; color:#fff; padding:.5rem .75rem;
  z-index:999; border-radius:.5rem;
}
.skip-link:focus{ top:8px; outline:none; }

/* ===== Layout base ===== */
.container{
  width:100%;
  max-width:var(--container, 1200px);
  margin-inline:auto;
  padding-inline:var(--gutter, 1rem);
}

/* ===== Header / Footer ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--brand); color:#fff;
  box-shadow: var(--shadow);
}
.site-header a{ color:#fff; text-decoration:none; }
.site-header a:hover{ opacity:.9; }

.site-footer{
  background:var(--brand); color:#fff;
  padding-block: var(--space-6, 2rem);
}
.site-footer a{ color:#fff; text-decoration:underline; text-underline-offset: 2px; }
.site-footer a:hover{ opacity:.9; }

/* ===== Secciones / tarjetas genéricas ===== */
.section{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding: var(--space-6, 2rem);
}

/* ===== Tipografía ===== */
h1,h2,h3{
  color:var(--brand);
  font-weight:800;
  letter-spacing:-.01em;
  line-height: var(--lh-tight, 1.15);
}
h4,h5,h6{ line-height: var(--lh-normal, 1.45); }

a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset: 2px;
  transition: color 160ms ease, opacity 160ms ease;
}
a:hover{ color:var(--accent-600); }
a:focus-visible{
  outline:none;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(34,204,211,.25));
  border-radius:.35rem;
  text-decoration: none;
}

/* ===== Botón genérico (compat Woo) =====
   Aplica a .button, <button>, input[type=submit]
   WooCommerce también usa .button: reforzamos sin romper estilos de Woo.
*/
.button,
button,
input[type="submit"]{
  --_bg: var(--btn-bg, var(--brand));
  --_bg-h: var(--btn-bg-hover, var(--brand-600));
  --_ink: var(--btn-ink, #fff);
  --_radius: var(--btn-radius, .85rem);
  --_shadow: var(--btn-shadow, var(--shadow));

  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background: var(--_bg);
  color: var(--_ink);
  border:0;
  border-radius: var(--_radius);
  padding:.75rem 1rem;
  font-weight:700;
  text-decoration:none;
  box-shadow: var(--_shadow);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, opacity 120ms ease;
  cursor:pointer;
}
.button:hover,
button:hover,
input[type="submit"]:hover{
  background: var(--_bg-h);
  transform: translateY(-1px);
}
.button:active,
button:active,
input[type="submit"]:active{
  transform: translateY(0);
}
.button:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible{
  outline:none; box-shadow: var(--focus-ring);
}

/* Estados disabled */
.button[disabled],
button[disabled],
input[type="submit"][disabled],
.button:disabled,
button:disabled,
input[type="submit"]:disabled{
  opacity:.6; cursor:not-allowed; transform:none;
}

/* Variantes utilitarias (opcionales) */
.button--outline{
  background:transparent; color:var(--brand);
  border:2px solid var(--brand);
}
.button--outline:hover{ color:#fff; background:var(--brand); }

/* Tamaños utilitarios */
.button--sm{ padding:.5rem .75rem; font-weight:600; }
.button--lg{ padding: .9rem 1.25rem; font-size: var(--step-1, 1.125rem); }

/* ===== Listas / contenido ===== */
ul,ol{ padding-left:1.25rem; }
.section > :where(h1,h2,h3,h4,h5,h6){ margin-top:0; }

/* ===== Imágenes ===== */
img{ max-width:100%; height:auto; display:block; }

/* ===== Preferencias de movimiento ===== */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}

.regalos-bell{z-index:2147483647 !important}
.regalos-panel,.regalos-toast{z-index:2147483647 !important}
