/* =====================================================================
   MaxPro / Movilcell — E-commerce front
   base.css · design tokens, reset, tipografía, layout
   ===================================================================== */

:root {
  /* --- Marca --- */
  --mc-lime:        #d5f200;   /* acento principal (neón) */
  --mc-lime-600:    #c2db00;
  --mc-lime-700:    #a9bf00;
  --mc-lime-soft:   #f3ffb0;

  --mc-black:       #0a0a0b;   /* superficies oscuras */
  --mc-ink:         #16161a;   /* texto principal */
  --mc-graphite:    #303034;

  /* --- Escala de grises --- */
  --mc-gray-50:     #f7f7f8;
  --mc-gray-100:    #efeff1;
  --mc-gray-200:    #e3e3e6;
  --mc-gray-300:    #cfcfd4;
  --mc-gray-400:    #a4a4ad;
  --mc-gray-500:    #76767f;
  --mc-gray-600:    #56565e;
  --mc-gray-700:    #3a3a40;
  --mc-white:       #ffffff;

  /* Fondo de la tienda: gris muy claro. Las superficies (tarjetas, ficha,
     galería) van en blanco para despegarse de él. */
  --mc-bg:          #f7f7f8;
  --mc-surface:     #ffffff;

  /* --- Semánticos --- */
  --mc-price:       #e11900;   /* precio con descuento (rojo) */
  --mc-success:     #16a34a;
  --mc-warning:     #f59e0b;
  --mc-danger:      #dc2626;
  --mc-info:        #2563eb;

  /* --- Tipografía --- */
  --mc-font-display: "Urbanist", "Segoe UI", system-ui, sans-serif;
  --mc-font-body:    "Inter", "Segoe UI", system-ui, sans-serif;

  --mc-fs-xs:   .75rem;
  --mc-fs-sm:   .8125rem;
  --mc-fs-base: .9375rem;
  --mc-fs-md:   1rem;
  --mc-fs-lg:   1.125rem;
  --mc-fs-xl:   1.375rem;
  --mc-fs-2xl:  1.75rem;
  --mc-fs-3xl:  2.25rem;
  --mc-fs-4xl:  clamp(2.25rem, 4vw, 3.5rem);

  /* --- Radios --- */
  --mc-radius-sm: 6px;
  --mc-radius:    12px;
  --mc-radius-lg: 20px;
  --mc-radius-pill: 999px;
  /* Controles (botones y selects/inputs): mismo redondeado en toda la página,
     ni píldora ni esquina cuadrada. */
  --mc-radius-ctl: 10px;

  /* --- Sombras --- */
  --mc-shadow-sm: 0 1px 2px rgba(16,16,20,.06), 0 1px 3px rgba(16,16,20,.05);
  --mc-shadow:    0 4px 14px rgba(16,16,20,.08);
  --mc-shadow-lg: 0 18px 40px -12px rgba(16,16,20,.22);
  --mc-ring:      0 0 0 3px rgba(213,242,0,.45);

  /* --- Layout --- */
  --mc-container: 1280px;
  --mc-gutter:    clamp(16px, 4vw, 40px);   /* aire lateral del contenedor */
  --mc-header-h:  72px;
  --mc-topbar-h:  36px;
  /* Alto total de la cabecera fija (cinta + aire + isla del header). Es el
     espacio que hay que reservar arriba en las páginas que NO ponen contenido
     debajo de ella. */
  --mc-top-h:     calc(var(--mc-topbar-h) + var(--mc-header-h) + 1.4rem);

  /* --- Transiciones --- */
  --mc-ease: cubic-bezier(.16, 1, .3, 1);
  --mc-t:    .25s var(--mc-ease);
}

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

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

body {
  margin: 0;
  font-family: var(--mc-font-body);
  font-size: var(--mc-fs-base);
  line-height: 1.55;
  color: var(--mc-ink);
  background: var(--mc-bg);
  /* La cabecera va fija por encima del contenido: aquí se le hace el hueco.
     Las páginas que quieren su primer bloque DEBAJO de ella (la home, con el
     banner a sangre) añaden la clase mc-overlay y se quedan sin hueco. */
  padding-top: var(--mc-top-h);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Páginas con el primer bloque bajo la cabecera: el hueco lo pone ese bloque */
body.mc-overlay { padding-top: 0; }
/* La ficha embebida en la vista rápida no lleva cabecera: tampoco su hueco */
body.mc-quick { padding-top: 0; }

img, svg, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; transition: color var(--mc-t); }
a:hover { color: var(--mc-graphite); }

h1, h2, h3, h4, h5 {
  font-family: var(--mc-font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  color: var(--mc-ink);
}

::selection { background: var(--mc-lime); color: var(--mc-black); }

/* Scrollbar fina (webkit) */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--mc-gray-300); border-radius: 999px; border: 2px solid var(--mc-white); }
*::-webkit-scrollbar-thumb:hover { background: var(--mc-gray-400); }

/* --------------------------- Utilidades ---------------------------- */
.mc-container {
  width: 100%;
  max-width: var(--mc-container);
  margin-inline: auto;
  padding-inline: var(--mc-gutter);
}

.mc-eyebrow {
  font-family: var(--mc-font-display);
  font-size: var(--mc-fs-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mc-gray-500);
}

.mc-section { padding-block: clamp(40px, 6vw, 80px); }

.mc-display { font-size: var(--mc-fs-4xl); font-weight: 700; letter-spacing: -.02em; }

.mc-text-muted { color: var(--mc-gray-500); }
.mc-text-lime  { color: var(--mc-lime-700); }

.mc-divider { height: 1px; background: var(--mc-gray-200); border: 0; margin: 0; }

/* Patrón de acento: subrayado lima */
.mc-mark {
  background: linear-gradient(transparent 62%, var(--mc-lime) 62%);
  padding-inline: .1em;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}