/*!
Theme Name: Librería García Child
Theme URI: https://libreriagarcia.com.ar
Description: Child theme para Librería García - Versión UX Optimizada
Author: Leandro García & beUp!
Author URI: https://beup.com.ar
Template: astra
Version: 2.8.1
License: GNU General Public License v2 or later
*/

/* ===== VARIABLES CSS OPTIMIZADAS UX ===== */
:root {
  /* Colores con contraste WCAG 2.1 AAA (mínimo 7:1) */
  --color-primary: #D4AF37;        /* Oro - Contraste 8.5:1 sobre oscuro */
  --color-primary-dark: #9B7C1E;   /* Oro oscuro para fondos */
  --color-primary-light: #FFE55C;  /* Oro claro para detalles */
  --color-secondary: #6B6B6B;      /* Gris medio - Contraste 7.2:1 */
  --color-secondary-light: #9E9E9E;
  --color-dark: #1A1A1A;           /* Casi negro - Contraste 15.2:1 */
  --color-light: #FFFFFF;
  --color-success: #2E7D32;        /* Verde accesible */
  --color-success-light: #4CAF50;
  --color-danger: #C62828;         /* Rojo accesible */
  --color-danger-light: #E53935;
  --color-text-muted: #4A4A4A;
  --color-border: #D1D1D1;
  
  /* Tipografía */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px */
  
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Espaciado - Sistema 8px */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 3.75rem;  /* 60px */
  --space-4xl: 5rem;     /* 80px */
  
  /* Touch targets (mínimo 44x44px) */
  --touch-target-min: 2.75rem; /* 44px */
  
  /* Bordes */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.375rem;  /* 6px */
  --radius-lg: 0.5rem;    /* 8px */
  --radius-xl: 0.75rem;   /* 12px */
  
  /* Sombras - Mejor contraste */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 12px 36px rgba(0, 0, 0, 0.18);
  
  /* Transiciones - Suaves pero rápidas */
  --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Layout */
  --container-max-width: 75rem; /* 1200px */
  --container-padding: 1rem;
  --header-height: auto;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-modal: 1300;
  --z-popover: 1200;
  --z-toast: 1400;
}

/* ===== RESET MEJORADO ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px; /* Base para rem */
}

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

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-dark);
  background-color: var(--color-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== UTILIDADES DE ACCESIBILIDAD ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus visible mejorado para WCAG 2.1 */
*:focus-visible {
  outline: 3px solid var(--color-primary-dark);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* Skip to content link para accesibilidad */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: var(--color-dark);
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  z-index: var(--z-modal);
  transition: var(--transition-fast);
}

.skip-to-content:focus {
  top: 0;
}

/* ===== HEADER TOP (AMARILLO OPTIMIZADO) ===== */
.garcia-header-top {
  background-color: var(--color-primary);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-black);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  gap: var(--space-lg);
  flex-wrap: wrap;
  min-height: var(--touch-target-min);
}

.garcia-header-top-left {
  color: var(--color-dark);
  white-space: nowrap;
}

.garcia-header-top-center {
  flex: 1;
  min-width: 250px;
}

.garcia-header-top-center input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--color-dark);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  transition: var(--transition-fast);
}

.garcia-header-top-center input:hover {
  border-color: var(--color-primary-dark);
}

.garcia-header-top-center input:focus-visible {
  outline: none;
  border-color: var(--color-primary-dark);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.3);
}

.garcia-header-top-right {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.garcia-header-top-right a {
  text-decoration: none;
  transition: var(--transition-fast);
  font-size: var(--font-size-base);
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-xs);
  color: var(--color-dark);
  font-weight: var(--font-weight-bold);
}

.garcia-header-top-right a:hover {
  transform: translateY(-2px);
  color: var(--color-primary-dark);
}

.garcia-btn-contact {
  background-color: var(--color-dark);
  color: var(--color-primary);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: var(--font-weight-black);
  transition: var(--transition-fast);
  white-space: nowrap;
  font-size: var(--font-size-xs);
  border: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
}

.garcia-btn-contact:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-dark);
  transform: translateY(-2px);
}

.garcia-btn-contact:focus-visible {
  outline-offset: 2px;
  border-color: var(--color-light);
}

/* ===== NAVBAR PRINCIPAL OPTIMIZADA ===== */
.garcia-navbar {
  background-color: var(--color-secondary);
  padding: var(--space-md);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  min-height: 80px;
}

.garcia-navbar-left,
.garcia-navbar-right {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
  flex-wrap: wrap;
  flex: 1;
}

.garcia-navbar-left {
  justify-content: flex-start;
}

.garcia-navbar-right {
  justify-content: flex-end;
}

.garcia-navbar-left a,
.garcia-navbar-right a {
  color: var(--color-dark);
  text-decoration: none;
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: var(--transition-fast);
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: var(--space-xs) var(--space-sm);
}

.garcia-navbar-left a:hover,
.garcia-navbar-right a:hover {
  color: var(--color-primary-dark);
}

.garcia-navbar-left a::after,
.garcia-navbar-right a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--space-sm);
  right: var(--space-sm);
  height: 2px;
  background-color: var(--color-primary-dark);
  transform: scaleX(0);
  transition: var(--transition-fast);
}

.garcia-navbar-left a:hover::after,
.garcia-navbar-right a:hover::after {
  transform: scaleX(1);
}

/* Logo optimizado - eliminado space-between conflictivo */
.garcia-logo-nav {
  width: 80px;
  height: 60px;
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: var(--transition-base);
  flex-shrink: 0;
  padding: var(--space-xs);
  margin: 0 var(--space-md);
}

.garcia-logo-nav:hover {
  background-color: var(--color-primary-dark);
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

.garcia-logo-nav:focus-visible {
  outline-offset: 4px;
}

.garcia-logo-nav img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

/* ===== FOOTER OPTIMIZADO ===== */
.garcia-footer {
  background-color: var(--color-dark);
  color: var(--color-light);
  padding: var(--space-3xl) var(--space-md) var(--space-xl);
  margin-top: var(--space-4xl);
}

.garcia-footer-content {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.garcia-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

.garcia-footer-section h3 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-black);
  margin-bottom: var(--space-md);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.garcia-footer-section ul {
  list-style: none;
}

.garcia-footer-section li {
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.garcia-footer-section a {
  color: var(--color-border);
  text-decoration: none;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: var(--space-xs) 0;
}

.garcia-footer-section a:hover {
  color: var(--color-primary);
  text-decoration: underline;
  transform: translateX(4px);
}

.garcia-footer-socials {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.garcia-social-btn {
  background-color: var(--color-primary);
  color: var(--color-dark);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-xs);
  text-decoration: none;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--touch-target-min);
  border: 1px solid transparent;
}

.garcia-social-btn:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.garcia-social-btn:focus-visible {
  border-color: var(--color-light);
}

.garcia-footer-copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-xl);
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-border);
}

.garcia-footer-copyright p {
  margin: 0;
}

/* ===== HOME HERO ===== */
.garcia-hero {
  background: linear-gradient(135deg, #E8E8E8 0%, #D0D0D0 100%);
  padding: var(--space-4xl) var(--space-md);
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.garcia-hero h1 {
  font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-5xl));
  font-weight: var(--font-weight-black);
  margin-bottom: var(--space-md);
  color: var(--color-dark);
  line-height: var(--line-height-tight);
}

.garcia-hero p {
  font-size: clamp(var(--font-size-base), 3vw, var(--font-size-lg));
  color: var(--color-text-muted);
  margin-bottom: var(--space-xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== SECTIONS OPTIMIZADAS ===== */
.garcia-section {
  padding: var(--space-3xl) var(--container-padding);
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.garcia-section-title {
  font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl));
  font-weight: var(--font-weight-black);
  text-align: center;
  margin-bottom: var(--space-2xl);
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  padding-bottom: var(--space-md);
  color: var(--color-dark);
}

.garcia-section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background-color: var(--color-primary);
  border-radius: var(--radius-sm);
}

/* ===== GRIDS RESPONSIVOS ===== */
.garcia-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(var(--space-md), 4vw, var(--space-xl));
  margin-bottom: var(--space-3xl);
}

.garcia-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(var(--space-md), 3vw, var(--space-lg));
}

/* ===== CARDS MEJORADAS ===== */
.garcia-card {
  background-color: #F9F9F9;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-primary);
  transition: var(--transition-base);
  height: 100%;
  display: flex;
  flex-direction: column;
}

@media (prefers-reduced-motion: no-preference) {
  .garcia-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
}

.garcia-card h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-black);
  margin-bottom: var(--space-md);
  color: var(--color-dark);
}

.garcia-card p {
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-sm);
  flex-grow: 1;
}

.garcia-card-logo {
  margin: var(--space-lg) 0;
  text-align: center;
  padding: var(--space-md);
  background-color: var(--color-light);
  border-radius: var(--radius-sm);
  border: 2px dashed var(--color-secondary-light);
  font-size: var(--font-size-xs);
  color: var(--color-secondary);
  font-weight: var(--font-weight-black);
}

.garcia-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-dark);
  color: var(--color-primary);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  transition: var(--transition-fast);
  min-height: var(--touch-target-min);
  border: 2px solid transparent;
  align-self: flex-start;
}

.garcia-card-cta:hover {
  background-color: var(--color-primary);
  color: var(--color-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.garcia-card-cta:focus-visible {
  border-color: var(--color-primary-dark);
}

/* ===== PRODUCT CARDS OPTIMIZADAS ===== */
.garcia-product-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition-base);
  background-color: var(--color-light);
  height: 100%;
  display: flex;
  flex-direction: column;
}

@media (prefers-reduced-motion: no-preference) {
  .garcia-product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
  }
}

.garcia-product-image {
  background-color: #E8E8E8;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.garcia-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-base);
}

@media (prefers-reduced-motion: no-preference) {
  .garcia-product-card:hover .garcia-product-image img {
    transform: scale(1.08);
  }
}

.garcia-product-info {
  padding: var(--space-md);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.garcia-product-author {
  font-size: var(--font-size-xs);
  color: var(--color-secondary);
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.garcia-product-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-sm);
  color: var(--color-dark);
  line-height: var(--line-height-tight);
  min-height: 2.5rem;
}

.garcia-product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
  margin-top: auto;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.garcia-product-price {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-black);
  color: var(--color-dark);
}

.garcia-btn-comprar {
  background-color: var(--color-dark);
  color: var(--color-light);
  border: 2px solid var(--color-dark);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-black);
  cursor: pointer;
  text-transform: uppercase;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
}

.garcia-btn-comprar:hover {
  background-color: var(--color-primary);
  color: var(--color-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.garcia-btn-comprar:active {
  transform: translateY(0);
}

/* ===== CTA BUTTON MEJORADO ===== */
.garcia-cta-button {
  background-color: var(--color-primary);
  color: var(--color-dark);
  border: 2px solid transparent;
  padding: var(--space-md) var(--space-2xl);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-black);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-transform: uppercase;
  transition: var(--transition-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: var(--touch-target-min);
  text-decoration: none;
  letter-spacing: 0.5px;
}

.garcia-cta-button:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.garcia-cta-button:active {
  transform: translateY(0);
}

.garcia-cta-button:focus-visible {
  border-color: var(--color-dark);
  outline-offset: 2px;
}

/* ===== ANIMACIONES CON PREFERS-REDUCED-MOTION ===== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .garcia-fade-in { animation: fadeIn 0.6s ease-in-out forwards; }
  .garcia-slide-up { animation: slideInUp 0.6s ease-out forwards; }
  .garcia-scale-in { animation: scaleIn 0.6s ease-out forwards; }
  .garcia-stagger-in { animation: slideInUp 0.5s ease-out forwards; }
  
  .garcia-stagger-in:nth-child(1) { animation-delay: 0s; }
  .garcia-stagger-in:nth-child(2) { animation-delay: 0.08s; }
  .garcia-stagger-in:nth-child(3) { animation-delay: 0.16s; }
  .garcia-stagger-in:nth-child(4) { animation-delay: 0.24s; }
  .garcia-stagger-in:nth-child(5) { animation-delay: 0.32s; }
  .garcia-stagger-in:nth-child(6) { animation-delay: 0.4s; }
}

/* ===== RESPONSIVE AVANZADO ===== */
/* Tablets */
@media (max-width: 768px) {
  :root {
    --container-padding: 1.5rem;
    --space-3xl: 2.5rem;
    --space-4xl: 3rem;
  }
  
  .garcia-header-top {
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-sm);
  }
  
  .garcia-header-top-left {
    white-space: normal;
    text-align: center;
  }
  
  .garcia-header-top-center {
    min-width: 100%;
  }
  
  .garcia-header-top-right {
    justify-content: center;
    min-width: 100%;
    gap: var(--space-lg);
  }
  
  .garcia-navbar {
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
  }
  
  .garcia-navbar-left,
  .garcia-navbar-right {
    justify-content: center;
    flex: none;
  }
  
  .garcia-logo-nav {
    margin: var(--space-sm) 0;
    order: -1;
  }
  
  /* Aumentar touch targets en móvil */
  .garcia-navbar-left a,
  .garcia-navbar-right a,
  .garcia-header-top-right a {
    padding: var(--space-sm);
    min-height: var(--touch-target-min);
  }
  
  .garcia-hero {
    padding: var(--space-3xl) var(--space-md);
  }
  
  .garcia-hero h1 {
    font-size: var(--font-size-3xl);
  }
  
  .garcia-section {
    padding: var(--space-2xl) var(--space-md);
  }
  
  .garcia-card {
    padding: var(--space-lg);
  }
  
  .garcia-product-info {
    padding: var(--space-sm);
  }
}

/* Mobile pequeño */
@media (max-width: 480px) {
  :root {
    --container-padding: 1rem;
    --font-size-base: 0.875rem;
    --touch-target-min: 2.5rem; /* 40px - mínimo aceptable para móvil */
  }
  
  .garcia-header-top {
    font-size: var(--font-size-xs);
  }
  
  .garcia-navbar-left,
  .garcia-navbar-right {
    gap: var(--space-sm);
    flex-wrap: wrap;
  }
  
  .garcia-navbar-left a,
  .garcia-navbar-right a {
    font-size: var(--font-size-xs);
  }
  
  .garcia-hero {
    padding: var(--space-2xl) var(--space-md);
  }
  
  .garcia-hero h1 {
    font-size: var(--font-size-2xl);
  }
  
  .garcia-card h3 {
    font-size: var(--font-size-lg);
  }
  
  .garcia-product-footer {
    flex-direction: column;
    align-items: stretch;
  }
  
  .garcia-btn-comprar {
    width: 100%;
  }
}

/* Desktop grande */
@media (min-width: 1440px) {
  :root {
    --container-max-width: 1280px;
  }
  
  .garcia-section {
    padding: var(--space-4xl) 0;
  }
}

/* ===== ESTADOS DE CARGA Y ERROR ===== */
.garcia-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  opacity: 0.7;
  cursor: wait;
}

.garcia-loading::after {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.garcia-error-message {
  background-color: var(--color-danger-light);
  color: var(--color-light);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  text-align: center;
  margin: var(--space-md) 0;
}

.garcia-success-message {
  background-color: var(--color-success);
  color: var(--color-light);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  text-align: center;
  margin: var(--space-md) 0;
}

/* ===== PRINT OPTIMIZADO ===== */
@media print {
  .garcia-navbar,
  .garcia-header-top,
  .garcia-footer,
  .garcia-btn-comprar,
  .garcia-card-cta,
  .garcia-cta-button {
    display: none !important;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
  }
  
  .garcia-section {
    page-break-inside: avoid;
  }
  
  .garcia-card,
  .garcia-product-card {
    border: 1px solid #ccc;
    break-inside: avoid;
  }
}

/* ===== UTILIDADES ADICIONALES ===== */
/* Container widths consistentes con Astra */
:root {
  --wp--custom--ast-content-width-size: 1200px !important;
}

section {
  width: 100%;
  margin: 0;
  padding: var(--space-3xl) var(--container-padding);
  box-sizing: border-box;
}

section > div:first-child {
  max-width: var(--container-max-width) !important;
  margin: 0 auto !important;
  width: 100%;
  box-sizing: border-box;
}

/* Text truncation utilities */
.garcia-text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garcia-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Visually hidden but accessible */
.garcia-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --color-primary: #FFD700;
    --color-primary-dark: #DAA520;
    --color-secondary: #555555;
    --color-dark: #000000;
    --color-light: #FFFFFF;
  }
  
  .garcia-card,
  .garcia-product-card {
    border: 2px solid currentColor;
  }
  
  .garcia-btn-comprar,
  .garcia-card-cta {
    border: 2px solid currentColor;
  }
}

/* ===== COMPONENTES COMPARTIDOS: BREADCRUMB Y BOTONES DE COMPARTIR =====
   Antes estaban copiados letra por letra dentro de cada <style> inline de
   single-concurso.php y single-evento.php. Al vivir acá se cachean una sola
   vez para todo el sitio en vez de viajar duplicados en cada página. */
.garcia-breadcrumb {
  font-size: 12px;
  color: #999;
  margin-bottom: 40px;
  text-transform: uppercase;
}

.garcia-breadcrumb a {
  color: #666;
  text-decoration: none;
  transition: all 0.3s;
}

.garcia-breadcrumb a:hover {
  color: #8A6D1B;
}

.garcia-share-title {
  font-weight: 900;
  font-size: 14px;
  text-transform: uppercase;
  color: #333;
  margin: 0 0 16px 0;
}

.garcia-share-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.garcia-share-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 2px solid;
  border-radius: 4px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  transition: all 0.3s;
}

.garcia-share-facebook {
  border-color: #1877f2;
  color: #1877f2;
}

.garcia-share-facebook:hover {
  background: #1877f2;
  color: white;
}

.garcia-share-twitter {
  border-color: #1da1f2;
  color: #1da1f2;
}

.garcia-share-twitter:hover {
  background: #1da1f2;
  color: white;
}

.garcia-share-whatsapp {
  border-color: #25d366;
  color: #25d366;
}

.garcia-share-whatsapp:hover {
  background: #25d366;
  color: white;
}

/* ===== AVISOS DE WOOCOMMERCE (carrito, checkout, "agregado al carrito", errores de stock, etc.) =====
   Antes usaban el estilo por defecto de WooCommerce (banda de color plano
   sin relación con la identidad visual del sitio). Reutiliza las variables
   WCAG ya definidas arriba en vez de colores nuevos. */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  list-style: none;
  margin: 0 0 var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-light);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-secondary);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-sm);
  color: var(--color-dark);
  line-height: var(--line-height-normal);
}

.woocommerce-message {
  border-left-color: var(--color-success);
}

.woocommerce-message::before {
  /* position:static!important porque el ::before por defecto de WooCommerce
     usa position:absolute (icono superpuesto al texto) — como nunca
     declarábamos "position" acá, esa regla seguía ganando aunque el
     content/color sí fueran los nuestros. Mismo motivo para font-family. */
  position: static !important;
  font-family: inherit !important;
  content: "\2713";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-success);
  color: var(--color-light);
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-xs);
}

.woocommerce-error {
  border-left-color: var(--color-danger);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

.woocommerce-error li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
}

.woocommerce-error li::before {
  position: static !important;
  font-family: inherit !important;
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-danger);
  color: var(--color-light);
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-sm);
}

.woocommerce-info {
  border-left-color: var(--color-primary-dark);
}

.woocommerce-info::before {
  position: static !important;
  font-family: inherit !important;
  content: "i";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-primary-dark);
  color: var(--color-light);
  font-weight: var(--font-weight-black);
  font-style: normal;
  font-size: var(--font-size-xs);
}

.woocommerce-message a.button.wc-forward,
.woocommerce-error a.button.wc-forward,
.woocommerce-info a.button.wc-forward {
  margin-left: auto;
  display: inline-block;
  background: var(--color-dark);
  color: var(--color-light);
  border: 2px solid var(--color-dark);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-fast);
}

.woocommerce-message a.button.wc-forward:hover,
.woocommerce-error a.button.wc-forward:hover,
.woocommerce-info a.button.wc-forward:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

@media (max-width: 480px) {
  .woocommerce-message,
  .woocommerce-error,
  .woocommerce-info {
    flex-direction: column;
    align-items: flex-start;
  }

  .woocommerce-message a.button.wc-forward,
  .woocommerce-error a.button.wc-forward,
  .woocommerce-info a.button.wc-forward {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
}

/* ===== BOTÓN CTA OSCURO (patrón repetido en decenas de archivos) =====
   Antes cada botón repetía background/color inline + onmouseover/onmouseout
   en JS para invertir los colores al pasar el mouse. Centralizado acá: el
   tamaño (padding/font-size/border-radius) puede seguir viniendo por
   style="" inline si un botón puntual lo necesita distinto, pero el color
   y el hover ya no se duplican ni dependen de JS. */
.garcia-btn-dark {
  display: inline-block;
  background: #333333;
  color: #FFFF00;
  border: 2px solid #333333;
  padding: 12px 24px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  transition: all 0.3s;
  cursor: pointer;
  text-align: center;
}

.garcia-btn-dark:hover,
.garcia-btn-dark:focus-visible {
  background: #FFFF00;
  color: #333333;
}

/* Variante con fondo amarillo de base (invierte igual al hover) */
.garcia-btn-light {
  display: inline-block;
  background: #FFFF00;
  color: #333333;
  border: 2px solid #333333;
  padding: 12px 24px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  transition: all 0.3s;
  cursor: pointer;
  text-align: center;
}

.garcia-btn-light:hover,
.garcia-btn-light:focus-visible {
  background: #333333;
  color: #FFFF00;
}

/* Badge/contador oscuro con texto amarillo (ej. cantidad de productos en una categoría) */
.garcia-badge-dark {
  display: inline-block;
  background: #333333;
  color: #FFFF00;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 900;
  flex-shrink: 0;
}

/* ===== CHECKOUT (shortcode [woocommerce_checkout]) =====
   El carrito tiene su propio override de plantilla (woocommerce/cart/cart.php);
   el checkout no lo tiene, así que esto es lo único que le da la identidad
   visual del sitio. Todo scopeado a .woocommerce-checkout (clase que
   WooCommerce agrega al <body> de esa página) para no filtrarse a otros
   formularios del sitio (antes usaba label, input[type="text"], select
   sueltos sin scope). */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3,
.woocommerce-checkout #order_review_heading {
  font-weight: 900 !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  color: #333 !important;
  letter-spacing: 0.5px !important;
}

.woocommerce-checkout label {
  font-weight: 900 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  color: #333 !important;
  letter-spacing: 0.3px !important;
}

.woocommerce-checkout label abbr {
  color: var(--color-danger) !important;
}

.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  border: 2px solid #ddd !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  background: white !important;
  color: #333 !important;
}

.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: #333 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(51, 51, 51, 0.12) !important;
}

.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table {
  border-collapse: collapse !important;
  background: transparent !important;
}

.woocommerce-checkout table.shop_table th {
  font-weight: 900 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  color: #333 !important;
  background: transparent !important;
}

.woocommerce-checkout table.shop_table td,
.woocommerce-checkout table.shop_table th {
  border-bottom: 1px solid #ddd !important;
  color: #333 !important;
}

.woocommerce-checkout table.shop_table tfoot tr.order-total {
  background: #FFFF00 !important;
}

.woocommerce-checkout table.shop_table tfoot tr.order-total th,
.woocommerce-checkout table.shop_table tfoot tr.order-total td {
  background: #FFFF00 !important;
  color: #333 !important;
  font-weight: 900 !important;
  border: none !important;
}

.woocommerce-checkout table.shop_table tfoot tr.cart-subtotal th,
.woocommerce-checkout table.shop_table tfoot tr.cart-subtotal td {
  color: #666 !important;
  font-size: 13px !important;
}

.woocommerce-checkout #order_review.woocommerce-checkout-review-order {
  background: #f9f9f9 !important;
  border: 2px solid #FFFF00 !important;
  border-radius: 8px !important;
}

.woocommerce-checkout #payment.woocommerce-checkout-payment {
  background: transparent !important;
}

.woocommerce-checkout #payment ul.wc_payment_methods {
  background: #f0f0f0 !important;
  border-radius: 4px !important;
}

.woocommerce-checkout #payment li.wc_payment_method {
  border-bottom: 1px solid #ddd !important;
  background: transparent !important;
}

.woocommerce-checkout #payment li.wc_payment_method:last-child {
  border-bottom: none !important;
}

.woocommerce-checkout #payment li label {
  color: #333 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

.woocommerce-checkout .payment_box {
  background: white !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  background: #f0f0f0 !important;
  border-radius: 4px !important;
  border: 1px solid #ddd !important;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label {
  color: #333 !important;
  font-size: 13px !important;
}

.woocommerce-checkout #place_order,
.woocommerce-checkout button[name="woocommerce_checkout_place_order"] {
  background: #333 !important;
  color: #FFFF00 !important;
  border: 2px solid #333 !important;
  border-radius: 4px !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.woocommerce-checkout #place_order:hover,
.woocommerce-checkout button[name="woocommerce_checkout_place_order"]:hover {
  background: #FFFF00 !important;
  color: #333 !important;
  box-shadow: 0 4px 12px rgba(255, 255, 0, 0.3) !important;
}

.woocommerce-checkout input[type="checkbox"] {
  cursor: pointer !important;
}

.woocommerce-checkout .woocommerce-shipping-fields h3#ship-to-different-address {
  font-weight: 900 !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  color: #333 !important;
}

.woocommerce-checkout .woocommerce-shipping-fields h3#ship-to-different-address label {
  font-weight: 600 !important;
  text-transform: none !important;
  font-size: 14px !important;
}

.woocommerce-checkout select {
  appearance: none !important;
  background: white url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") no-repeat !important;
  background-position: right 8px center !important;
  background-size: 20px !important;
  padding-right: 32px !important;
}

.woocommerce-checkout textarea {
  resize: vertical !important;
  min-height: 100px !important;
}

.woocommerce-checkout .woocommerce-account-fields {
  background: transparent !important;
}

.woocommerce-checkout .woocommerce-account-fields .form-row label {
  font-weight: 600 !important;
  text-transform: none !important;
  font-size: 13px !important;
}

.woocommerce-checkout noscript {
  display: block !important;
  background: #fff3cd !important;
  border: 1px solid #ffc107 !important;
  color: #856404 !important;
  padding: 12px !important;
  border-radius: 4px !important;
  margin-bottom: 20px !important;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle {
  margin-bottom: 20px !important;
}

.woocommerce-checkout form.checkout_coupon {
  background: #f0f0f0 !important;
  padding: 16px !important;
  border-radius: 4px !important;
}

.woocommerce-checkout form.checkout_coupon input[type="text"] {
  background: white !important;
  border: 2px solid #ddd !important;
}

.woocommerce-checkout form.checkout_coupon button {
  background: #333 !important;
  color: #FFFF00 !important;
  border: 2px solid #333 !important;
  border-radius: 4px !important;
  font-weight: 900 !important;
  transition: all 0.3s !important;
}

.woocommerce-checkout form.checkout_coupon button:hover {
  background: #FFFF00 !important;
  color: #333 !important;
}

.woocommerce-checkout .woocommerce-form-login {
  background: #f9f9f9 !important;
  padding: 20px !important;
  border-radius: 4px !important;
  border: 1px solid #ddd !important;
}

.woocommerce-checkout .woocommerce-form-login h2 {
  color: #333 !important;
  font-weight: 900 !important;
}

.woocommerce-checkout input::placeholder,
.woocommerce-checkout textarea::placeholder {
  color: #999 !important;
  opacity: 1 !important;
}

.woocommerce-checkout input,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-checkout button,
.woocommerce-checkout a {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.woocommerce-checkout .required {
  color: var(--color-danger) !important;
  font-weight: 900 !important;
}