/* ==========================================================
   base.css — Mascotas Ayacucho (LLAMATIVO + ACCESIBLE)
   - Capa fundacional de estilos (no rompe plantillas)
   - Header/Footer, tipografía, enlaces y botones
   - Componentes: secciones, tarjetas, badges, cintillos, alertas
   - Utilitarios: contenedor, sombras, radios, espaciados, foco
   Compatible: WP 6.8.x • Woo 10.x • Blocksy 2.x
   Cargar después de variables.css y antes de módulos específicos.
   ========================================================== */

/* ===== Variables mínimas (sin auto-referencias) ===== */
:root{
  --container: 1200px;
  --gutter: 1rem;

  /* superficies y tokens genéricos */
  --surface: #ffffff;
  --surface-muted: #f8fafc;
  --border: #e5e7eb;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.12);
  --lh-tight: 1.15;
  --lh-normal: 1.45;

  /* Paleta desde variables.css (con fallbacks seguros) */
  --brand:            var(--ma-red-500, #FF0000);
  --brand-contrast:   var(--ma-white, #ffffff);
  --accent:           var(--ma-amber-500, #FFB600);
  --accent-contrast:  var(--ma-black, #111111);
  --support:          var(--ma-teal-500, #0AC5CA);

  --text: #111827;
  --muted: #555;
  --bg: #ffffff;

  /* Derivados con fallback cuando no hay color-mix */
  --brand-600: color-mix(in srgb, var(--brand) 78%, #000);
  --accent-600: color-mix(in srgb, var(--accent) 72%, #000);
  --support-600: color-mix(in srgb, var(--support) 68%, #000);
  --brand-600-fallback:  #CC0000;
  --accent-600-fallback: #CC9200;
  --support-600-fallback:#089EA2;

  /* Focus ring accesible con fallback */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand) 45%, #fff);
  --focus-ring-fallback: 0 0 0 3px rgba(255,0,0,.35);

  /* Alto mínimo de header para reducir CLS */
  --header-min-h: 62px;
}

/* ===== Reset suave / tipografía base ===== */
html{
  font-size: clamp(15px, 0.95vw + 12px, 17px);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body{
  margin:0;
  font-family: var(--fuente-base, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
svg, video, canvas{ max-width:100%; height:auto; }

/* ===== 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:9999; border-radius:.5rem;
}
.skip-link:focus{ top:8px; outline:none; }

/* ===== Contenedor y secciones ===== */
.container, .wrap, .site-content{
  width:100%; max-width:var(--container);
  margin-inline:auto; padding-inline:var(--gutter);
}
.section{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding: clamp(18px, 2.2vw, 28px);
}

/* ===== Títulos (llamativos) ===== */
h1,h2,h3{
  color: var(--brand);
  font-family: var(--fuente-titulos, Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  font-weight:800; letter-spacing:-.01em;
  line-height: var(--lh-tight);
  margin: .4em 0 .35em;
}
h4,h5,h6{ line-height: var(--lh-normal); margin: .4em 0 .35em; }

/* Subrayado “pro” para headings destacados */
.heading-underline{
  position:relative; display:inline-block; padding-bottom:.25rem;
}
.heading-underline::after{
  content:""; position:absolute; left:0; bottom:0;
  width:60%; height:6px; border-radius:999px;
  background: linear-gradient(90deg, var(--brand), var(--support));
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* ===== Enlaces ===== */
a{
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 160ms ease, opacity 160ms ease, text-decoration-color 160ms ease;
}
@media (hover:hover){
  @supports (color: color-mix(in srgb, black 10%, white)){
    a:hover{ color: var(--accent-600); }
  }
  @supports not (color: color-mix(in srgb, black 10%, white)){
    a:hover{ color: var(--accent-600-fallback); }
  }
}
a:focus-visible{
  outline:none; box-shadow: var(--focus-ring); border-radius:.35rem;
  text-decoration: none;
}
@supports not (color: color-mix(in srgb, black 10%, white)){
  a:focus-visible{ box-shadow: var(--focus-ring-fallback); }
}

/* ===== Header / Footer (base; header.css / footer.css afinan) ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  background: var(--support); color:#fff; box-shadow: var(--shadow);
  min-height: var(--header-min-h);
}
.site-header a{ color:#fff; text-decoration:none; }
@media (hover:hover){
  .site-header a:hover{ text-decoration:underline; }
}

.site-footer{
  background: var(--support); color:#fff;
  padding-block: clamp(18px, 2.2vw, 32px);
}
.site-footer a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
@media (hover:hover){
  .site-footer a:hover{ opacity:.9; }
}

/* ===== Botón genérico (compatible Woo, sobrescrito luego por woo/palette) ===== */
.button, button, input[type="submit"]{
  --_bg: var(--btn-bg, var(--brand));
  --_ink: var(--btn-ink, #fff);
  --_radius: var(--btn-radius, .9rem);
  --_shadow: var(--btn-shadow, 0 8px 18px rgba(0,0,0,.10));

  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; cursor:pointer;
  box-shadow: var(--_shadow);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, opacity 120ms ease;
}
@media (hover:hover){
  @supports (color: color-mix(in srgb, black 10%, white)){
    .button:hover, button:hover, input[type="submit"]:hover{
      background: var(--btn-bg-hover, var(--brand-600));
    }
  }
  @supports not (color: color-mix(in srgb, black 10%, white)){
    .button:hover, button:hover, input[type="submit"]:hover{
      background: var(--btn-bg-hover, var(--brand-600-fallback));
    }
  }
}
.button:active, button:active, input[type="submit"]:active{ transform: translateY(1px); }
.button:focus-visible, button:focus-visible, input[type="submit"]:focus-visible{
  outline:none; box-shadow: var(--focus-ring);
}
@supports not (color: color-mix(in srgb, black 10%, white)){
  .button:focus-visible, button:focus-visible, input[type="submit"]:focus-visible{
    box-shadow: var(--focus-ring-fallback);
  }
}
.button[disabled], button[disabled], input[type="submit"][disabled],
.button:disabled, button:disabled, input[type="submit"]:disabled{
  opacity:.6; cursor:not-allowed; transform:none;
}

/* Variantes */
.button--outline{
  background:transparent; color:var(--brand);
  border:2px solid var(--brand);
}
@media (hover:hover){
  @supports (color: color-mix(in srgb, black 10%, white)){
    .button--outline:hover{ color:#fff; background:var(--brand-600); }
  }
  @supports not (color: color-mix(in srgb, black 10%, white)){
    .button--outline:hover{ color:#fff; background:var(--brand-600-fallback); }
  }
}
.button--accent{
  --btn-bg: var(--accent); 
  --btn-ink: var(--accent-contrast);
}
@media (hover:hover){
  @supports (color: color-mix(in srgb, black 10%, white)){
    .button--accent{ --btn-bg-hover: var(--accent-600); }
  }
  @supports not (color: color-mix(in srgb, black 10%, white)){
    .button--accent{ --btn-bg-hover: var(--accent-600-fallback); }
  }
}
.button--support{
  --btn-bg: var(--support); --btn-ink:#fff;
}
@media (hover:hover){
  @supports (color: color-mix(in srgb, black 10%, white)){
    .button--support{ --btn-bg-hover: var(--support-600); }
  }
  @supports not (color: color-mix(in srgb, black 10%, white)){
    .button--support{ --btn-bg-hover: var(--support-600-fallback); }
  }
}
.button--sm{ padding:.5rem .75rem; font-weight:600; }
.button--lg{ padding:.95rem 1.25rem; font-size: clamp(1rem, .3vw + 1rem, 1.125rem); }

/* ===== Tarjetas y callouts ===== */
.card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(14px, 2vw, 22px);
}
@media (hover:hover){
  .card--lift:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); transition: all .2s ease; }
}

.callout{
  position:relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--support) 10%, #fff), #fff);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(16px, 2.2vw, 24px);
  box-shadow: var(--shadow);
}
.callout__title{ margin:0 0 6px; font-weight:800; color: var(--brand); }
.callout__text{ margin:0; color: var(--text); }

/* Cintillo (ribbon) */
.ribbon{
  display:inline-block;
  background: linear-gradient(90deg, var(--brand), var(--support));
  color:#fff; font-weight:800;
  padding:.4rem .8rem; border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* Badges */
.badge{
  display:inline-block; font-weight:800; line-height:1;
  padding:.35rem .6rem; border-radius:999px; font-size:.85rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.badge--brand{ background:var(--brand); color:#fff; }
.badge--accent{ background:var(--accent); color:var(--accent-contrast); }
.badge--support{ background:var(--support); color:#00333a; }

/* ===== Alertas ===== */
.alert{
  display:flex; align-items:flex-start; gap:.75rem;
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  border:1px solid var(--border);
  background: var(--surface-muted);
}
.alert__title{ font-weight:800; margin:0; }
.alert--success{ border-color:#b7e3c0; background:#f2fbf4; color:#185c2b; }
.alert--info   { border-color:#b7e7ff; background:#f0f8ff; color:#083b61; }
.alert--warn   { border-color:#ffecb3; background:#fff8e6; color:#7a4b00; }
.alert--error  { border-color:#ffc9c9; background:#fff1f1; color:#7a0a0a; }

/* ===== Barra de anuncio / CTA superior ===== */
.announce-bar{
  position:relative; z-index:60;
  background: linear-gradient(90deg, var(--support), var(--brand));
  color:#fff; text-align:center;
  padding:.5rem .75rem; font-weight:700;
}
.announce-bar a{ color:#fff; text-decoration: underline; }

/* ===== Sección “hero-cta” ===== */
.hero-cta{
  border-radius: var(--radius);
  padding: clamp(18px, 3vw, 36px);
  background:
    radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--brand) 12%, transparent) 0%, transparent 60%),
    radial-gradient(80% 120% at 0% 100%, color-mix(in srgb, var(--support) 14%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, #fff, color-mix(in srgb, var(--surface-muted) 50%, #fff));
  border:1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.hero-cta .hero-cta__title{ margin:0 0 8px; font-weight:800; color:var(--brand); }
.hero-cta .hero-cta__text{ margin:0 0 14px; color:var(--text); }

/* ===== Listas / contenido ===== */
ul,ol{ padding-left:1.25rem; }
.section > :where(h1,h2,h3,h4,h5,h6){ margin-top:0; }

/* ===== Utilidades ===== */
.bg-brand{ background: var(--brand)!important; color:#fff!important; }
.bg-accent{ background: var(--accent)!important; color:#111!important; }
.bg-support{ background: var(--support)!important; color:#00333a!important; }
.text-brand{ color: var(--brand)!important; }
.text-accent{ color: var(--accent)!important; }
.text-support{ color: var(--support)!important; }

.rounded-sm{ border-radius: var(--radius-sm); }
.rounded   { border-radius: var(--radius); }
.shadow    { box-shadow: var(--shadow); }
.shadow-lg { box-shadow: var(--shadow-lg); }

.mt-0{ margin-top:0!important; } .mb-0{ margin-bottom:0!important; }
.mt-2{ margin-top:.5rem!important; } .mb-2{ margin-bottom:.5rem!important; }
.mt-4{ margin-top:1rem!important; } .mb-4{ margin-bottom:1rem!important; }
.p-2{ padding:.5rem!important; } .p-4{ padding:1rem!important; }
.px-4{ padding-inline:1rem!important; } .py-4{ padding-block:1rem!important; }

/* ===== Secciones con “stripe” alternado ===== */
.section-striped:nth-child(odd){ background: #ffffff; }
.section-striped:nth-child(even){
  background: linear-gradient(180deg, #fff, var(--surface-muted));
}

/* ===== Z-index alto para componentes propios ===== */
.regalos-bell{ z-index: 2147483647 !important; }
.regalos-panel, .regalos-toast{ z-index: 2147483647 !important; }

/* 💨 Preferencias de movimiento */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important; }
}