/* =========================================================
   DEPORTES JIMMY — DESIGN SYSTEM
   Basado en Brand Guidelines 2026
   Cargar DESPUÉS de los estilos de Elementor / WooCommerce
   ========================================================= */

/* -------------------------------------------------------
   1. VARIABLES GLOBALES (Custom Properties)
   ------------------------------------------------------- */
:root {

  /* --- Colores de marca (según brandbook) --- */
  --dj-red:        #FF0000;
  --dj-black:      #000000;
  --dj-gray:       #AEAEAF;
  --dj-white:      #FFFFFF;

  /* --- Variantes útiles derivadas (no están en el brandbook,
         pero se necesitan para fondos/bordes suaves) --- */
  --dj-gray-light:   #F4F4F5;
  --dj-gray-dark:    #4A4A4A;
  --dj-red-dark:     #C40000;   /* hover de botones rojos */
  --dj-black-soft:   #111111;   /* negro para fondos grandes (evita el #000 puro plano) */

  /* --- Degradado "Deluxe" del brandbook --- */
  --dj-gradient-deluxe: linear-gradient(135deg, var(--dj-red) 0%, var(--dj-black) 100%);
  --dj-gradient-deluxe-reverse: linear-gradient(315deg, var(--dj-red) 0%, var(--dj-black) 100%);

  /* --- Tipografías --- */
  --dj-font-display: 'Anton', sans-serif;      /* Titulares / impacto */
  --dj-font-body:    'Poppins', sans-serif;     /* Texto general — TODA la web */
  --dj-font-accent:  'The Blue Wave', cursive;  /* Acentos manuscritos (promos, slogans) */

  /* --- Pesos de Poppins disponibles --- */
  --dj-weight-thin:      100;
  --dj-weight-light:     300;
  --dj-weight-regular:   400;
  --dj-weight-medium:    500;
  --dj-weight-semibold:  600;
  --dj-weight-bold:      700;
  --dj-weight-black:     900;

  /* --- Espaciado (escala consistente para todo Elementor) --- */
  --dj-space-xs:   8px;
  --dj-space-sm:   16px;
  --dj-space-md:   24px;
  --dj-space-lg:   40px;
  --dj-space-xl:   64px;
  --dj-space-2xl:  96px;

  /* --- Bordes / radios --- */
  --dj-radius-sm: 4px;
  --dj-radius-md: 8px;
  --dj-radius-pill: 999px;

  /* --- Sombras --- */
  --dj-shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --dj-shadow-md: 0 8px 24px rgba(0,0,0,0.14);
  --dj-shadow-red: 0 8px 20px rgba(255,0,0,0.25);

  /* --- Transiciones --- */
  --dj-transition: all 0.25s ease;
}

/*
  BREAKPOINTS DE REFERENCIA (mobile-first)
  Nota: no se pueden usar custom properties dentro de @media,
  así que quedan documentados aquí para mantener consistencia
  en todo el CSS del tema:

  --bp-sm  : 576px  → móvil landscape
  --bp-md  : 768px  → tablet
  --bp-lg  : 1024px → tablet landscape / desktop pequeño
  --bp-xl  : 1280px → desktop
  --bp-xxl : 1536px → desktop grande
*/


/* -------------------------------------------------------
   2. BASE TIPOGRÁFICA
   ------------------------------------------------------- */
body,
.woocommerce,
.elementor-widget-container {
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-regular);
  color: var(--dj-black-soft);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.dj-heading {
  font-family: var(--dj-font-display);
  font-weight: 400; /* Anton solo tiene un peso (Regular) */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.05;
  color: var(--dj-black-soft);
  margin: 0 0 var(--dj-space-sm);
}

h1, .dj-h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
h2, .dj-h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3, .dj-h3 { font-size: clamp(1.4rem, 3vw, 2.2rem); }
h4, .dj-h4 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }

p, li, span, a {
  font-family: var(--dj-font-body);
}

/* Texto de acento manuscrito — usar con moderación (2-4 palabras) */
.dj-text-accent {
  font-family: var(--dj-font-accent);
  color: var(--dj-red);
  text-transform: none;
  font-weight: 400;
  line-height: 0.9;
}


/* -------------------------------------------------------
   3. UTILIDADES DE COLOR
   ------------------------------------------------------- */
.dj-bg-red        { background-color: var(--dj-red); }
.dj-bg-black      { background-color: var(--dj-black-soft); }
.dj-bg-gray       { background-color: var(--dj-gray); }
.dj-bg-gray-light { background-color: var(--dj-gray-light); }
.dj-bg-white      { background-color: var(--dj-white); }
.dj-bg-gradient   { background: var(--dj-gradient-deluxe); }
.dj-bg-gradient-reverse { background: var(--dj-gradient-deluxe-reverse); }

.dj-text-red   { color: var(--dj-red); }
.dj-text-black { color: var(--dj-black-soft); }
.dj-text-gray  { color: var(--dj-gray); }
.dj-text-white { color: var(--dj-white); }


/* -------------------------------------------------------
   4. TEXTURA GRANULADA (fondo "Elementos Gráficos" del brandbook)
   Simulada en CSS con ruido SVG + degradado, para no depender
   de un archivo de imagen pesado. Se puede reemplazar por el
   PNG/JPG original exportado del brandbook si prefieres más fidelidad.
   ------------------------------------------------------- */
.dj-texture-red,
.dj-texture-gray {
  position: relative;
  background-repeat: repeat;
  background-blend-mode: multiply;
}

.dj-texture-red {
  background-color: var(--dj-red);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>"),
    var(--dj-gradient-deluxe);
}

.dj-texture-gray {
  background-color: var(--dj-gray);
  opacity: 0.78;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.25'/></svg>");
}

/* Overlay oscuro para poner texto blanco encima de fotos (como el hero de referencia) */
.dj-overlay-dark {
  position: relative;
}
.dj-overlay-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0) 100%);
  z-index: 1;
}
.dj-overlay-dark > * {
  position: relative;
  z-index: 2;
}


/* -------------------------------------------------------
   5. BOTONES
   ------------------------------------------------------- */
.dj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.95rem;
  padding: 14px 32px;
  border-radius: var(--dj-radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--dj-transition);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

/* Efecto de brillo que cruza el botón al pasar el mouse */
.dj-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.dj-btn:hover::before {
  left: 125%;
}

.dj-btn-primary {
  background-color: var(--dj-red);
  color: var(--dj-white);
}
.dj-btn-primary:hover {
  background-color: var(--dj-red-dark);
  box-shadow: var(--dj-shadow-red);
  transform: translateY(-2px);
}

.dj-btn-outline {
  background-color: transparent;
  border-color: var(--dj-black-soft);
  color: var(--dj-black-soft);
}
.dj-btn-outline:hover {
  background-color: var(--dj-black-soft);
  color: var(--dj-white);
}

.dj-btn-outline-white {
  background-color: transparent;
  border-color: var(--dj-white);
  color: var(--dj-white);
}
.dj-btn-outline-white:hover {
  background-color: var(--dj-white);
  color: var(--dj-black-soft);
}


/* -------------------------------------------------------
   6. WOOCOMMERCE — overrides base de marca
   (esto se irá ampliando cuando construyamos shop/single-product)
   ------------------------------------------------------- */
.woocommerce ul.products li.product .price {
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-bold);
  color: var(--dj-red);
}

.woocommerce span.onsale {
  background-color: var(--dj-red);
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-bold);
  text-transform: uppercase;
  border-radius: var(--dj-radius-sm);
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-bold);
  text-transform: uppercase;
  background-color: var(--dj-red);
  color: var(--dj-white) !important;
  border-radius: var(--dj-radius-sm);
  transition: var(--dj-transition);
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: var(--dj-red-dark);
  color: var(--dj-white) !important;
}


/* -------------------------------------------------------
   7. RESPONSIVE — ajustes base
   ------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --dj-space-lg: 28px;
    --dj-space-xl: 40px;
    --dj-space-2xl: 56px;
  }

  .dj-btn {
    padding: 12px 24px;
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  h1, .dj-h1 { font-size: 2rem; }
  h2, .dj-h2 { font-size: 1.6rem; }
}


/* ===========================================================
   v3.11 — NADA SE SALE DE LA PANTALLA
   -----------------------------------------------------------
   El fallo que se veía en el carrito: la página medía más ancho
   que el celular, así que el navegador la dejaba desplazada de
   lado y el texto aparecía cortado por la IZQUIERDA ("…s",
   "…ted total"). No es que estuviera descentrado: es que había
   scroll horizontal.

   Basta con que UN elemento se pase de ancho —una tabla, una
   foto, un bloque de WooCommerce, un margen negativo— para que
   toda la web se desplace. Y como el 80% del tráfico entra por
   celular, esto no puede depender de que nadie meta la pata:
   se blinda de raíz.

   `overflow-x: clip` en vez de `hidden` a propósito: `hidden`
   convierte la página en un contenedor de scroll y rompe el
   header pegajoso en iPhone. `clip` corta lo que sobra sin tocar
   el scroll. Donde no exista, queda `hidden` como respaldo.
   =========================================================== */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

/* Una palabra larguísima (un nombre de producto sin espacios, un
   enlace pegado) puede ensanchar la página ella sola. Que corte. */
body {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Nada de contenido incrustado más ancho que su hueco */
img,
svg,
video,
iframe,
embed,
object,
table {
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* Las tablas de WooCommerce (carrito, pedidos, direcciones) son
   lo que más se desborda en celular.

   ⚠️ Aquí NO va `table-layout: fixed`. Se probó y es peor el
   remedio: reparte todas las columnas iguales, así que el nombre
   del producto salía partido palabra a palabra —"Agarre de /
   Manos / Everlast"— al lado de una columna de precio medio
   vacía. Basta con que la tabla no pase del ancho, que la foto
   tenga tope (eso está en shop.css) y que las palabras largas
   sepan cortarse. */
@media (max-width: 640px) {
  table {
    width: 100% !important;
  }
  table td,
  table th {
    word-break: break-word;
  }
}