/* ==========================================================================
   TOKENS + RESET  ·  variables de diseno del sitio
   Unica fuente de verdad de color, tipografia, espaciado y sombras.
   Ningun componente puede escribir un hex o un px suelto: todo sale de aqui.
   ========================================================================== */

:root {
  /* --- Marca ------------------------------------------------------------ */
  --brand:        #0f396c;  /* azul institucional: textos, cabecera, footer  */
  --brand-600:    #0c2e57;
  --brand-700:    #09223f;
  --brand-100:    #e8eef6;
  --brand-050:    #f1f7ff;  /* fondo de bloques suaves (ventajas, footer)    */

  --accent:       #acd36e;  /* lima: TODA accion primaria                    */
  --accent-600:   #9bc857;
  --accent-700:   #86b243;
  --accent-100:   #e9f0df;  /* fondo verde suave (cinta de envios)           */

  --teal:         #49a594;  /* etiqueta "Nuevo"                              */
  --rojo:         #da3f3f;  /* etiqueta "Oferta" y errores                   */
  --rojo-050:     #fbeaea;

  /* --- Neutrales -------------------------------------------------------- */
  --n-000: #ffffff;
  --n-050: #fafafa;
  --n-100: #f5f5f5;
  --n-200: #f4f4fa;
  --n-300: #eeeeee;
  --n-400: #dedede;
  --n-500: #b6b6b6;
  --n-600: #666666;
  --n-700: #3c3c3c;
  --n-800: #222222;
  --n-900: #111111;

  /* --- Roles semanticos ------------------------------------------------- */
  --fondo:        var(--n-000);
  --superficie:   var(--n-000);
  --tinta:        var(--n-800);
  --tinta-suave:  var(--n-600);
  --borde:        var(--n-400);
  --borde-suave:  var(--n-200);

  /* --- Tipografia ------------------------------------------------------- */
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-xs:   11px;
  --t-sm:   12px;
  --t-base: 14px;
  --t-md:   15px;
  --t-lg:   18px;
  --t-xl:   24px;
  --t-2xl:  32px;
  --t-3xl:  40px;

  /* --- Espaciado -------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- Contenedores (mismos anchos que la referencia) ------------------- */
  --ancho-fluid:  1620px;
  --offset-fluid: 60px;
  --ancho:        1280px;

  /* Separacion vertical entre secciones */
  --seccion-y: 60px;

  /* --- Formas ----------------------------------------------------------- */
  --radio:      10px;
  --radio-sm:   6px;
  --radio-lg:   16px;
  --radio-pill: 999px;

  --sombra-sm: 0 1px 3px rgba(15, 57, 108, .07);
  --sombra-md: 0 8px 24px rgba(15, 57, 108, .10);
  --sombra-lg: 0 18px 48px rgba(15, 57, 108, .16);

  /* --- Movimiento ------------------------------------------------------- */
  --trans: .25s cubic-bezier(.4, 0, .2, 1);

  /* --- Capas ------------------------------------------------------------ */
  --z-header:   100;
  --z-mega:     90;
  --z-overlay:  200;
  --z-drawer:   210;
  --z-flotante: 150;
  --z-toast:    300;
}

@media (max-width: 1024px) {
  :root {
    --seccion-y: 40px;
    --offset-fluid: 20px;
  }
}

@media (max-width: 640px) {
  :root {
    --seccion-y: 32px;
    --offset-fluid: 15px;
    --t-2xl: 24px;
    --t-3xl: 28px;
  }
}

/* ==========================================================================
   RESET MINIMO
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--font);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* La referencia usa Poppins en absolutamente todo. */
body, body * { font-family: var(--font); }

h1, h2, h3, h4, h5, h6, p, figure, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { background: none; border: 0; cursor: pointer; }

table { border-collapse: collapse; }

/* Foco propio del sistema: nunca el azul del navegador. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radio-sm);
}

::selection { background: var(--accent); color: var(--brand); }

[x-cloak] { display: none !important; }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}