/* ==========================================================
   base.css — Regalos (OPTIMIZADO)
   Compatible: WP 6.8.x • Woo 10.x • Blocksy 2.x
   - Header/Footer accesibles
   - Enlaces con foco visible
   - Botones genéricos compatibles con WooCommerce
   - Contenedor, secciones y utilitarios
   ========================================================== */

/* ===== Defaults & Design Tokens ===== */
:root{
  --brand:        #0ea5e9;            /* azul principal */
  --brand-600:    #0284c7;
  --accent:       #22c55e;            /* acento (links) */
  --accent-600:   #16a34a;
  --surface:      #ffffff;
  --radius:       1rem;
  --shadow:       0 4px 20px rgba(0,0,0,.06);
  --focus-ring:   0 0 0 3px rgba(14,165,233,.25);
  --container:    1200px;
  --gutter:       1rem;
  --space-6:      2rem;
  --lh-tight:     1.15;
  --lh-normal:    1.45;
  --step-1:       1.125rem;           /* ~18px */
}

/* ===== 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);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--wide{ max-width: min(100%, calc(var(--container) + 160px)); }

/* ===== 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-header a:focus-visible{
  outline:none; box-shadow: var(--focus-ring); border-radius:.35rem;
}

.site-footer{
  background:var(--brand); color:#fff;
  padding-block: var(--space-6);
}
.site-footer a{ color:#fff; text-decoration:underline; text-underline-offset: 2px; }
.site-footer a:hover{ opacity:.9; }
.site-footer a:focus-visible{
  outline:none; box-shadow: var(--focus-ring); border-radius:.35rem;
}

/* ===== Secciones / tarjetas genéricas ===== */
.section{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding: var(--space-6);
}

/* ===== Tipografía ===== */
h1,h2,h3{
  color:var(--brand);
  font-weight:800;
  letter-spacing:-.01em;
  line-height: var(--lh-tight);
}
h4,h5,h6{ line-height: var(--lh-normal); }

a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset: 2px;
  transition: color 160ms ease, opacity 160ms ease, box-shadow 120ms ease;
}
a:hover{ color:var(--accent-600); }
a:focus-visible{
  outline:none;
  box-shadow: var(--focus-ring);
  border-radius:.35rem;
  text-decoration: none;
}

/* ===== Botón genérico (compat Woo) =====
   Aplica a .button, <button>, input[type=submit> y equivalentes Woo.
*/
.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.add_to_cart_button,
.single_add_to_cart_button{
  --_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;
  line-height:1;                /* evita “botes” verticales */
  min-height:44px;              /* objetivo táctil mínimo */
  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,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover{
  background: var(--_bg-h);
  transform: translateY(-1px);
}
.button:active,
button:active,
input[type="submit"]:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.add_to_cart_button:active,
.single_add_to_cart_button:active{
  transform: translateY(0);
}
.button:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.add_to_cart_button:focus-visible,
.single_add_to_cart_button: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,
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce input.button: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; min-height:38px; }
.button--lg{ padding:.9rem 1.25rem; font-size: var(--step-1); }

/* ===== Listas / contenido ===== */
ul,ol{ padding-left:1.25rem; margin-block: .75rem 1rem; }
.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 }
}

/* ===== Z-index específicos (notificaciones) ===== */
.regalos-bell{z-index:2147483647 !important}
.regalos-panel,.regalos-toast{z-index:2147483647 !important}