/* Sara Parwa — tokens de diseño
   Fuente de verdad para color, tipografía, espacio y forma.
   Ningún otro archivo CSS debe declarar un hex literal. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Karla:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {

  /* ---- Color: marca ---- */
  --sp-fucsia:        #D40B5C;
  --sp-fucsia-hover:  #B80A50;
  --sp-vino:          #8E0A42;
  --sp-fucsia-tenue:  #FCE8EF;

  /* ---- Color: acentos del bordado ---- */
  --sp-turquesa:      #1BA7B8;
  --sp-turquesa-tenue:#E4F6F8;
  --sp-maiz:          #F2B705;
  --sp-maiz-tenue:    #FDF3D8;
  --sp-verde:         #1E8A54;
  --sp-verde-tenue:   #E3F3EA;

  /* ---- Color: neutros ---- */
  --sp-hueso:         #EFEAE3;
  --sp-blanco:        #FFFFFF;
  --sp-tierra:        #2A2018;
  --sp-tierra-suave:  #6B5D51;
  --sp-tierra-tenue:  #A2958A;
  --sp-linea:         #DED7CD;

  /* ---- Roles semánticos: usar estos en los componentes ---- */
  --color-fondo:          var(--sp-hueso);
  --color-superficie:     var(--sp-blanco);
  --color-texto:          var(--sp-tierra);
  --color-texto-suave:    var(--sp-tierra-suave);
  --color-texto-tenue:    var(--sp-tierra-tenue);
  --color-borde:          var(--sp-linea);
  --color-accion:         var(--sp-fucsia);
  --color-accion-hover:   var(--sp-fucsia-hover);
  --color-sobre-accion:   var(--sp-blanco);
  --color-oferta:         var(--sp-fucsia);
  --color-disponible:     var(--sp-verde);
  --color-a-pedido:       var(--sp-turquesa);
  --color-agotado:        var(--sp-tierra-tenue);

  /* ---- Tipografía ---- */
  --fuente-display: 'Fraunces', Georgia, serif;
  --fuente-cuerpo:  'Karla', system-ui, -apple-system, sans-serif;
  --fuente-datos:   'IBM Plex Mono', ui-monospace, monospace;

  /* Escala modular 1.25, base 16px */
  --texto-xs:   0.75rem;   /* 12px — etiquetas, SKU */
  --texto-sm:   0.875rem;  /* 14px — apoyo, metadatos */
  --texto-base: 1rem;      /* 16px — cuerpo */
  --texto-md:   1.25rem;   /* 20px — precio, subtítulos */
  --texto-lg:   1.5625rem; /* 25px — título de tarjeta */
  --texto-xl:   1.953rem;  /* 31px — título de sección */
  --texto-2xl:  2.441rem;  /* 39px — título de página */
  --texto-3xl:  3.052rem;  /* 49px — portada, solo escritorio */

  --interlinea-apretada: 1.15;
  --interlinea-normal:   1.6;

  /* Fraunces con wonk activo: el eje que le da el trazo irregular */
  --wonk-display: 'SOFT' 0, 'WONK' 1;

  /* ---- Espacio: escala de 4px ---- */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-6: 1.5rem;
  --e-8: 2rem;
  --e-12: 3rem;
  --e-16: 4rem;
  --e-24: 6rem;

  /* ---- Forma ---- */
  --radio-sm:  4px;
  --radio-md:  8px;
  --radio-lg:  16px;
  --radio-pill: 999px;

  --borde-fino: 1px solid var(--color-borde);

  /* Única sombra del sistema. Se usa solo en tarjetas al pasar el cursor. */
  --sombra-flotante: 0 4px 16px rgba(42, 32, 24, 0.10);

  /* ---- Contenedor ---- */
  --ancho-maximo: 1180px;
  --margen-lateral: var(--e-4);

  /* ---- Movimiento ---- */
  --transicion: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Temas seleccionables desde Configuración. */
[data-theme="cusco"] {
  --sp-fucsia: #7B2CBF; --sp-fucsia-hover: #5A189A; --sp-vino: #3C096C;
  --sp-fucsia-tenue: #F1E8F8; --color-accion: var(--sp-fucsia);
  --color-accion-hover: var(--sp-fucsia-hover); --color-oferta: var(--sp-fucsia);
}
[data-theme="naturaleza"] {
  --sp-fucsia: #287A4B; --sp-fucsia-hover: #1D5C38; --sp-vino: #17482D;
  --sp-fucsia-tenue: #E5F2EA; --color-accion: var(--sp-fucsia);
  --color-accion-hover: var(--sp-fucsia-hover); --color-oferta: var(--sp-fucsia);
}
[data-theme="oceano"] {
  --sp-fucsia: #176B87; --sp-fucsia-hover: #10536A; --sp-vino: #0B3C4D;
  --sp-fucsia-tenue: #E4F2F6; --color-accion: var(--sp-fucsia);
  --color-accion-hover: var(--sp-fucsia-hover); --color-oferta: var(--sp-fucsia);
}
[data-theme="terracota"] {
  --sp-fucsia: #B6532F; --sp-fucsia-hover: #914124; --sp-vino: #6F301D;
  --sp-fucsia-tenue: #F7EAE4; --color-accion: var(--sp-fucsia);
  --color-accion-hover: var(--sp-fucsia-hover); --color-oferta: var(--sp-fucsia);
}

/* Modo de brillo, elegido en Configuración. Se combina con el tema de color. */
[data-modo="medio"] {
  --color-fondo:       #DDD4C6;
  --color-superficie:  #EFE8DB;
  --color-texto-suave: #5C4F41;
  --color-texto-tenue: #8D7F6C;
  --color-borde:       #C7BCAA;
}
[data-modo="oscuro"] {
  --color-fondo:          #201811;
  --color-superficie:     #2C2119;
  --color-texto:          #F4EEE5;
  --color-texto-suave:    #CDC1B1;
  --color-texto-tenue:    #94897A;
  --color-borde:          #46392F;
  --sombra-flotante:      0 4px 18px rgba(0, 0, 0, 0.45);
}

@media (min-width: 768px) {
  :root { --margen-lateral: var(--e-8); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --transicion: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base);
  line-height: var(--interlinea-normal);
  -webkit-font-smoothing: antialiased;
}

/* Bloquea el scroll de fondo mientras hay un dialogo abierto (ej. aviso-modal). */
body.sin-scroll { overflow: hidden; }

h1, h2, h3 {
  font-family: var(--fuente-display);
  font-variation-settings: var(--wonk-display);
  font-weight: 500;
  line-height: var(--interlinea-apretada);
  letter-spacing: -0.01em;
  margin: 0 0 var(--e-4);
}

h1 { font-size: var(--texto-2xl); }
h2 { font-size: var(--texto-xl); }
h3 { font-size: var(--texto-lg); }

@media (min-width: 768px) {
  h1 { font-size: var(--texto-3xl); }
}

a {
  color: var(--color-accion);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--color-accion);
  outline-offset: 2px;
  border-radius: var(--radio-sm);
}

img { max-width: 100%; height: auto; display: block; }

.sp-precio { font-family: var(--fuente-datos); font-weight: 500; }
.sp-sku    { font-family: var(--fuente-datos); font-size: var(--texto-xs); color: var(--color-texto-tenue); }

/* ---- Botón principal: el de WhatsApp ---- */
.sp-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 48px;
  padding: 0 var(--e-6);
  border: none;
  border-radius: var(--radio-md);
  background: var(--color-accion);
  color: var(--color-sobre-accion);
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicion);
}
.sp-boton:hover { background: var(--color-accion-hover); }
.sp-boton:active { transform: translateY(1px); }

.sp-boton--linea {
  background: transparent;
  color: var(--color-accion);
  box-shadow: inset 0 0 0 1px var(--color-accion);
}
.sp-boton--linea:hover {
  background: var(--sp-fucsia-tenue);
}