/* ==========================================================================
   XolloYa — SISTEMA DE DISEÑO · TOKENS
   Dirección de arte: limpio, mucho aire, UNA sola idea de color.
   Verde profundo de marca + neutros cálidos + rojo solo para descuentos.
   Referencias de sensación: Apple Store · Back Market · Idealo.
   Todo valor vive aquí: colores, tipografía (escala), espaciado (escala de 4),
   radios, sombras y movimiento (150–200 ms).
   ========================================================================== */

:root {
  /* ------------------------------ COLOR ------------------------------ */
  --color-principal:         #0E7A4B; /* verde profundo: marca y acciones */
  --color-principal-fuerte:  #0A6340; /* hover / pulsado */
  --color-principal-suave:   #E7F2EC; /* fondo tenue de marca */
  --color-sobre-principal:   #FFFFFF; /* texto sobre el verde */

  --color-texto:             #1B1A18; /* 15.9:1 sobre blanco */
  --color-texto-suave:       #57534E; /* 7.6:1  — subtítulos y descripciones */
  --color-texto-tenue:       #6E6760; /* 5.2:1 sobre el fondo cálido — AA garantizado */

  --color-fondo:             #F7F6F4; /* neutro cálido */
  --color-superficie:        #FFFFFF;
  --color-superficie-2:      #FBFAF9;
  --color-crema:             #FBF6EC; /* crema: fondo cálido del héroe */
  --color-crema-2:           #F5EDDD; /* arena */
  --color-crema-borde:       #EBE0CB;
  --color-arena:             #E7DCC6;
  --color-borde:             #E8E5E1; /* borde de 1 px muy claro */
  --color-borde-fuerte:      #D8D3CD;

  --color-descuento:         #C4342A; /* SOLO descuentos */
  --color-descuento-suave:   #FBECEA;
  /* Texto que va ENCIMA del color de descuento. En claro es blanco; en oscuro se
     cambia a oscuro porque #FF6257 es demasiado claro para llevar blanco encima. */
  --color-sobre-descuento:   #FFFFFF;
  --color-aviso:             #F2B22E; /* SOLO la cinta de borrador */
  --color-aviso-texto:       #3A2C00;

  --color-foco:              #0E7A4B; /* anillo de foco */
  --color-velo:              rgba(27, 26, 24, .48);
  --color-cristal:           rgba(255, 255, 255, .86);
  --color-hover:             rgba(27, 26, 24, .05);

  /* --------------------- TIPOGRAFÍA (una sola familia) --------------------- */
  --fuente: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;

  --t-xs:   .75rem;    /* 12 — etiquetas, contadores */
  --t-2xs:  .6875rem;  /* 11 — micro-etiquetas, insignias */
  --t-sm:   .875rem;   /* 14 — subtítulos, texto de tarjeta */
  --t-base: .9375rem;  /* 15 — texto */
  --t-md:   1rem;      /* 16 */
  --t-lg:   1.125rem;  /* 18 */
  --t-xl:   1.25rem;   /* 20 — precio (móvil) */
  --t-2xl:  1.375rem;  /* 22 — título de sección */
  --t-3xl:  1.875rem;  /* 30 — titular de portada (móvil) y precio de ficha */
  --t-4xl:  2.5rem;    /* 40 — titular de portada (escritorio) */
  --t-5xl:  2.75rem;   /* 44 — titular grande (escritorio ancho) */

  --t-precio: 1.4375rem; /* 23 — el dato que se viene a ver: SIEMPRE grande */

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-semi:   600;
  --peso-bold:   700;
  --peso-extra:  800;

  --interlinea-titulo: 1.15;
  --interlinea-texto:  1.5;

  /* ---------------- ESPACIADO (escala 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64) ---------------- */
  --esp-xs:  4px;
  --esp-sm:  8px;
  --esp-md: 12px;
  --esp-lg: 16px;
  --esp-xl: 24px;
  --esp-2xl:32px;
  --esp-3xl:48px;
  --esp-4xl:64px;
  --esp-seccion: 40px; /* ritmo entre secciones: 40 móvil → 64 escritorio (aire de sobra) */

  /* ------------------------------ RADIOS ------------------------------ */
  --radio-xs:  8px;
  --radio-sm: 10px;
  --radio-md: 12px;
  --radio-lg: 16px;
  --radio-xl: 20px;
  --radio-2xl: 26px;
  --radio-full: 999px;

  /* ----------------------------- SOMBRAS ----------------------------- */
  --sombra-xs: 0 1px 2px rgba(28, 25, 23, .05);
  --sombra-sm: 0 1px 3px rgba(28, 25, 23, .07), 0 1px 2px rgba(28, 25, 23, .04);
  --sombra-md: 0 4px 14px rgba(28, 25, 23, .08);
  --sombra-lg: 0 12px 30px rgba(28, 25, 23, .11);
  --sombra-xl: 0 20px 48px rgba(28, 25, 23, .16);
  /* Sombra que sube: para barras fijas abajo (no parece pegada al borde) */
  --sombra-flotante: 0 -8px 28px rgba(28, 25, 23, .12), 0 2px 6px rgba(28, 25, 23, .06);
  /* Sombra con el color de marca: insignias y botón de compra */
  --sombra-marca: 0 6px 18px rgba(14, 122, 75, .28);
  --anillo-foco: 0 0 0 3px var(--color-principal-suave);

  /* PORTADA 2026 (nuevas, no sustituyen a ninguna existente) */
  --color-hero-fondo:  #FBF6EC; /* fondo del héroe de portada */
  --sombra-chollo:      0 22px 50px -30px rgba(28, 25, 23, .45);

  /* ----------------------------- MEDIDAS ----------------------------- */
  --ancho-max: 1200px;
  --alto-cabecera: 60px;
  --alto-barra-app: 62px;
  --alto-compra-fija: 68px;
  --alto-aviso: 34px;
  /* Altura real que ocupa la cabecera fija al hacer scroll (para scroll-padding y anclas) */
  --alto-cabecera-total: 156px;
  --toque-min: 44px; /* área táctil mínima en móvil */

  /* --------------------- MOVIMIENTO (150–200 ms) --------------------- */
  --mov-rapido: 150ms cubic-bezier(.4, 0, .2, 1);
  --mov-medio:  180ms cubic-bezier(.4, 0, .2, 1);

  /* ------------------------------ CAPAS ------------------------------ */
  --z-cabecera: 100;
  --z-compra:   115; /* barra de compra fija: encima del contenido, bajo la nav */
  --z-barra:    120;
  --z-panel:    200;
  --z-aviso:    300; /* tostadas y avisos flotantes: siempre arriba */

  color-scheme: light dark;
}

@media (min-width: 768px) {
  :root {
    --esp-seccion: var(--esp-3xl); /* 48 */
    --alto-cabecera: 68px;
    --alto-cabecera-total: 104px;
    --t-precio: 1.5rem;
  }
}
@media (min-width: 1024px) {
  :root { --esp-seccion: var(--esp-4xl); } /* 64: el aire que hace respirar la página */
}

/* ==========================================================================
   MODO OSCURO AUTOMÁTICO
   El verde sube de luminosidad para mantener el contraste sobre fondo oscuro.
   Los cuadros de producto quedan blancos a propósito: las fotos de producto
   se leen mejor sobre blanco, también en oscuro.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --color-principal:         #3DD68C;
    --color-principal-fuerte:  #5AE29F;
    --color-principal-suave:   #14301F;
    --color-sobre-principal:   #08231A;

    --color-texto:             #F5F3F0;
    --color-texto-suave:       #B3ADA6;
    --color-texto-tenue:       #928C84;

    --color-fondo:             #121110;
    --color-superficie:        #1A1917;
    --color-superficie-2:      #201E1C;
    --color-crema:             #1E1B16;
    --color-crema-2:           #241F19;
    --color-crema-borde:       #33291D;
    --color-arena:             #3A2F22;
    --color-borde:             #2D2A27;
    --color-borde-fuerte:      #3E3A35;

    --color-descuento:         #FF6257;
    --color-descuento-suave:   #3A1C19;
    --color-sobre-descuento:   #121110; /* oscuro sobre el coral: AA (blanco daba 2,94:1) */

    --color-foco:              #5AE29F;
    --color-velo:              rgba(0, 0, 0, .62);
    --color-cristal:           rgba(26, 25, 23, .86);
    --color-hover:             rgba(255, 255, 255, .07);

    --sombra-xs: 0 1px 2px rgba(0, 0, 0, .40);
    --sombra-sm: 0 1px 3px rgba(0, 0, 0, .45);
    --sombra-md: 0 4px 14px rgba(0, 0, 0, .50);
    --sombra-lg: 0 12px 30px rgba(0, 0, 0, .55);
    --sombra-xl: 0 20px 48px rgba(0, 0, 0, .62);
    --sombra-flotante: 0 -8px 28px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
    --sombra-marca: 0 6px 18px rgba(0, 0, 0, .5);
    --anillo-foco: 0 0 0 3px rgba(90, 226, 159, .32);

    /* PORTADA 2026 en oscuro: el crema se vuelve marrón y ensucia el héroe;
       sobre el fondo casi negro se usa un escalón por encima y sombra más dura. */
    --color-hero-fondo:  #191714;
    --sombra-chollo:      0 22px 50px -30px rgba(0, 0, 0, .85);
  }
}

/* ==========================================================================
   ELECCIÓN MANUAL DE TEMA (atributo en <html>)
   data-tema="claro" | data-tema="oscuro".

   Los mismos valores que el bloque de arriba, pero colgados de un selector con
   MÁS especificidad (:root[data-tema=…] = 0,2,0 frente a :root = 0,1,0). Así el
   atributo manda sobre el sistema en AMBOS sentidos: si el sistema es oscuro y
   el usuario eligió claro, gana claro; y si el sistema es claro y eligió oscuro,
   gana oscuro. Sin atributo, sigue mandando @media (prefers-color-scheme).
   No hay paleta nueva: son exactamente los valores ya definidos arriba.
   ========================================================================== */
:root[data-tema="claro"] {
  color-scheme: light;

  --color-principal:         #0E7A4B;
  --color-principal-fuerte:  #0A6340;
  --color-principal-suave:   #E7F2EC;
  --color-sobre-principal:   #FFFFFF;

  --color-texto:             #1B1A18;
  --color-texto-suave:       #57534E;
  --color-texto-tenue:       #6E6760;

  --color-fondo:             #F7F6F4;
  --color-superficie:        #FFFFFF;
  --color-superficie-2:      #FBFAF9;
  --color-crema:             #FBF6EC;
  --color-crema-2:           #F5EDDD;
  --color-crema-borde:       #EBE0CB;
  --color-arena:             #E7DCC6;
  --color-borde:             #E8E5E1;
  --color-borde-fuerte:      #D8D3CD;

  --color-descuento:         #C4342A;
  --color-descuento-suave:   #FBECEA;
  --color-sobre-descuento:   #FFFFFF;

  --color-foco:              #0E7A4B;
  --color-velo:              rgba(27, 26, 24, .48);
  --color-cristal:           rgba(255, 255, 255, .86);
  --color-hover:             rgba(27, 26, 24, .05);

  --sombra-xs: 0 1px 2px rgba(28, 25, 23, .05);
  --sombra-sm: 0 1px 3px rgba(28, 25, 23, .07), 0 1px 2px rgba(28, 25, 23, .04);
  --sombra-md: 0 4px 14px rgba(28, 25, 23, .08);
  --sombra-lg: 0 12px 30px rgba(28, 25, 23, .11);
  --sombra-xl: 0 20px 48px rgba(28, 25, 23, .16);
  --sombra-flotante: 0 -8px 28px rgba(28, 25, 23, .12), 0 2px 6px rgba(28, 25, 23, .06);
  --sombra-marca: 0 6px 18px rgba(14, 122, 75, .28);
  --anillo-foco: 0 0 0 3px var(--color-principal-suave);

  /* PORTADA 2026 (nuevas, no sustituyen a ninguna existente) */
  --color-hero-fondo:  #FBF6EC; /* fondo del héroe de portada */
  --sombra-chollo:      0 22px 50px -30px rgba(28, 25, 23, .45);
}

:root[data-tema="oscuro"] {
  color-scheme: dark;

  --color-principal:         #3DD68C;
  --color-principal-fuerte:  #5AE29F;
  --color-principal-suave:   #14301F;
  --color-sobre-principal:   #08231A;

  --color-texto:             #F5F3F0;
  --color-texto-suave:       #B3ADA6;
  --color-texto-tenue:       #928C84;

  --color-fondo:             #121110;
  --color-superficie:        #1A1917;
  --color-superficie-2:      #201E1C;
  --color-crema:             #1E1B16;
  --color-crema-2:           #241F19;
  --color-crema-borde:       #33291D;
  --color-arena:             #3A2F22;
  --color-borde:             #2D2A27;
  --color-borde-fuerte:      #3E3A35;

  --color-descuento:         #FF6257;
  --color-descuento-suave:   #3A1C19;
  --color-sobre-descuento:   #121110;

  --color-foco:              #5AE29F;
  --color-velo:              rgba(0, 0, 0, .62);
  --color-cristal:           rgba(26, 25, 23, .86);
  --color-hover:             rgba(255, 255, 255, .07);

  --sombra-xs: 0 1px 2px rgba(0, 0, 0, .40);
  --sombra-sm: 0 1px 3px rgba(0, 0, 0, .45);
  --sombra-md: 0 4px 14px rgba(0, 0, 0, .50);
  --sombra-lg: 0 12px 30px rgba(0, 0, 0, .55);
  --sombra-xl: 0 20px 48px rgba(0, 0, 0, .62);
  --sombra-flotante: 0 -8px 28px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
  --sombra-marca: 0 6px 18px rgba(0, 0, 0, .5);
  --anillo-foco: 0 0 0 3px rgba(90, 226, 159, .32);

  /* PORTADA 2026 en oscuro */
  --color-hero-fondo:  #191714;
  --sombra-chollo:      0 22px 50px -30px rgba(0, 0, 0, .85);
}

/* Soporte neutro para fotografías originales, también en tema oscuro. */
:root { --color-foto: #FFFFFF; }