/* ==========================================================================
   VARIABLES DEL SISTEMA DE DISEÑO — Tienda Médica Pereira
   Colores tomados del logo:
   - Verde del logo #017B34 → COLOR DE MARCA (botones principales, etiquetas,
     palabras resaltadas y bloques de cierre). Blanco sobre este verde: 5,6:1 (AA).
   - Rojo del logo  #FA0100 → SOLO para errores (--color-error) y el logo.
   - Amarillo del corazón #FBC901 → acento (casi no se usa)
   ========================================================================== */
:root {
  /* ---------- Colores de marca ---------- */
  --color-primario: #017b34;
  --color-primario-oscuro: #015a26;
  --color-primario-claro: #e9f5ee;
  --color-primario-suave: #f2f8f4;   /* fondo "color de marca suave" entre secciones */
  --degradado-marca: radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, #018a3b 0%, #016a2d 55%, #014d21 100%);
  --color-secundario: #017b34;
  --color-secundario-oscuro: #015a26;
  --color-secundario-claro: #e7f5ec;
  --color-acento: #fbc901;
  --color-acento-claro: #fff8db;

  /* ---------- Colores funcionales ---------- */
  --color-oferta: #c40d3c;
  --color-exito: #017b34;
  --color-error: #c40d3c;
  /* Neutros cálidos: el color de marca queda solo para acciones principales y detalles */
  --color-texto: #1f2326;          /* gris carbón */
  --color-texto-suave: #5e6369;    /* contraste 6:1 sobre blanco */
  --color-texto-tenue: #6a6e73;    /* textos pequeños de apoyo, 5,1:1 sobre blanco (AA) */
  --color-carbon: #24282c;         /* barra superior y franja final del pie */
  --color-borde: #ebe9e6;          /* línea de 1 px casi invisible */
  --color-borde-fuerte: #d6d3cf;
  --color-fondo: #ffffff;
  --color-fondo-alterno: #f7f6f4;  /* gris muy claro cálido */
  --color-fondo-campo: #f3f2f0;    /* buscador y campos sobre blanco */
  --color-fondo-foto: #f3f2f0;     /* fondo neutro detrás de las fotos de producto */
  --color-overlay: rgba(24, 26, 28, 0.5);
  --color-whatsapp: #1a8d4a;
  /* Etiquetas sutiles: fondo muy claro + texto del color correspondiente */
  --tinte-verde: #edf6f0;
  --tinte-verde-texto: #0f6232;
  --tinte-rojo: #fcefef;
  --tinte-rojo-texto: #a3112b;
  --tinte-neutro: #f1f0ee;
  --tinte-neutro-texto: #3d4246;

  /* ---------- Tipografía ---------- */
  --fuente-base: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --texto-xs: 0.75rem;   /* 12px */
  --texto-sm: 0.875rem;  /* 14px */
  --texto-md: 1rem;      /* 16px */
  --texto-lg: 1.125rem;  /* 18px */
  --texto-xl: 1.25rem;   /* 20px */
  --texto-2xl: 1.5rem;   /* 24px */
  --texto-3xl: 2rem;     /* 32px */
  --texto-4xl: 2.5rem;   /* 40px */
  --peso-normal: 400;
  --peso-semi: 600;
  --peso-bold: 700;
  --peso-black: 800;
  --peso-titulo: 800;              /* titulares con carácter */
  --texto-titulo-seccion: clamp(2rem, 1.35rem + 2.2vw, 3.25rem);   /* 32 → 52 px */
  --tracking-titulo: -0.02em;
  --tracking-etiqueta: 0.08em;     /* etiquetas pequeñas en mayúsculas */
  --interlineado: 1.6;

  /* ---------- Espaciado (múltiplos de 4px) ---------- */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 20px;
  --esp-6: 24px;
  --esp-8: 32px;
  --esp-10: 40px;
  --esp-12: 48px;
  --esp-14: 56px;
  --esp-16: 64px;
  --esp-20: 80px;
  --esp-24: 96px;
  --esp-28: 112px;
  --seccion-y: 56px;               /* aire entre secciones (96 px en escritorio) */

  /* ---------- Bordes redondeados ---------- */
  /* Regla única: controles (botones, campos, cantidad) 12 px · tarjetas 16 px ·
     banners y fotos grandes 24 px · etiquetas y chips en píldora */
  --radio-sm: 8px;
  --radio-md: 12px;
  --radio-lg: 16px;
  --radio-xl: 24px;
  --radio-control: 12px;
  --radio-pildora: 999px;
  --alto-control: 48px;

  /* ---------- Sombras ---------- */
  /* Sombras difusas y tenues (tinte carbón, nunca negro puro) */
  --sombra-tarjeta: 0 1px 2px rgba(36, 40, 44, 0.04);
  --sombra-hover: 0 14px 32px -12px rgba(36, 40, 44, 0.16), 0 2px 6px rgba(36, 40, 44, 0.04);
  --sombra-header: 0 6px 20px -10px rgba(36, 40, 44, 0.14);
  --sombra-flotante: 0 24px 56px -16px rgba(36, 40, 44, 0.28);
  --sombra-boton: 0 10px 20px -10px rgba(1, 90, 38, 0.55);
  /* Sombras en capas para bloques destacados (tarjetas en hover, resumen, banners) */
  --sombra-capas: 0 1px 2px rgba(36, 40, 44, 0.04), 0 8px 24px -8px rgba(36, 40, 44, 0.12), 0 24px 48px -24px rgba(36, 40, 44, 0.18);
  /* Sombra difusa en capas teñida de verde (beneficios, caja de compra) */
  --sombra-marca: 0 1px 2px rgba(1, 60, 26, 0.05), 0 10px 28px -14px rgba(1, 60, 26, 0.18), 0 28px 56px -32px rgba(1, 60, 26, 0.22);
  --sombra-marca-hover: 0 2px 4px rgba(1, 60, 26, 0.06), 0 18px 40px -16px rgba(1, 60, 26, 0.28), 0 36px 64px -36px rgba(1, 60, 26, 0.3);

  /* ---------- Superficie oscura de la marca (footer, encabezados de página) ---------- */
  --verde-noche: #0d2619;
  --verde-brillo: #c8f0d6;            /* palabra resaltada sobre el verde oscuro (13:1) */
  --texto-sobre-oscuro: rgba(255, 255, 255, 0.8);
  --texto-sobre-oscuro-tenue: rgba(255, 255, 255, 0.7);
  /* Degradado en malla: manchas suaves de los verdes del logo */
  --malla-marca: radial-gradient(42% 60% at 18% 22%, rgba(1, 138, 59, 0.55) 0%, rgba(1, 138, 59, 0) 70%),
    radial-gradient(38% 55% at 82% 78%, rgba(1, 106, 45, 0.6) 0%, rgba(1, 106, 45, 0) 70%),
    radial-gradient(30% 45% at 62% 18%, rgba(46, 160, 92, 0.3) 0%, rgba(46, 160, 92, 0) 70%),
    radial-gradient(34% 50% at 35% 92%, rgba(0, 77, 33, 0.7) 0%, rgba(0, 77, 33, 0) 70%);
  /* Textura de ruido muy fina (SVG, sin imágenes externas) */
  --ruido: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
  /* Cruz médica para la marca de agua */
  --cruz-agua: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23fff' d='M38 6h24a4 4 0 0 1 4 4v24h24a4 4 0 0 1 4 4v24a4 4 0 0 1-4 4H66v24a4 4 0 0 1-4 4H38a4 4 0 0 1-4-4V66H10a4 4 0 0 1-4-4V38a4 4 0 0 1 4-4h24V10a4 4 0 0 1 4-4z'/%3E%3C/svg%3E");
  /* Borde degradado fino: verde de marca a transparente */
  --borde-degradado: linear-gradient(140deg, rgba(1, 123, 52, 0.5) 0%, rgba(1, 123, 52, 0.12) 45%, rgba(1, 123, 52, 0) 75%);
  --borde-degradado-activo: linear-gradient(140deg, rgba(1, 123, 52, 0.95) 0%, rgba(1, 123, 52, 0.4) 50%, rgba(1, 123, 52, 0.1) 100%);
  /* Degradado de marca más profundo (botón principal de compra) */
  --degradado-marca-profundo: radial-gradient(120% 160% at 0% 0%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(135deg, #02a04a 0%, #017b34 42%, #014a1f 100%);
  --sombra-boton-marca: 0 2px 4px rgba(1, 60, 26, 0.16), 0 12px 24px -10px rgba(1, 123, 52, 0.55);
  --alto-compra: 52px;
  --fondo-tarjeta-marca: linear-gradient(180deg, #fff 0%, #fbfdfb 55%, var(--color-primario-suave) 100%);
  --duracion-entrada: 500ms;

  /* Anillo de foco suave del color de marca */
  --anillo-foco: 0 0 0 3px rgba(1, 123, 52, 0.25);

  /* ---------- Contenedor ---------- */
  --ancho-max: 1280px;
  --margen-lateral: 16px;

  /* ---------- Movimiento ---------- */
  --duracion-rapida: 150ms;
  --duracion-media: 200ms;
  --duracion-lenta: 250ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* ---------- Capas ---------- */
  --z-header: 100;
  --z-menu: 150;
  --z-flotante: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* Puntos de quiebre de referencia (en CSS se escriben a mano): 480, 768, 1024, 1280 */
}

@media (min-width: 768px) {
  :root {
    --margen-lateral: 24px;
  }
}
@media (min-width: 1024px) {
  :root {
    --seccion-y: 96px;
  }
}
@media (min-width: 1280px) {
  :root {
    --margen-lateral: 32px;
  }
}

/* Respetar a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duracion-rapida: 0ms;
    --duracion-media: 0ms;
    --duracion-lenta: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}