/* Design System — tokens (de DesignSistem/src/data.js) + utilidades compartidas.
   Lo usan todas las páginas para mantener el mismo lenguaje visual que Inicio. */
:root{
  /* Marca */
  --azul:#1E5EFF; --azul-700:#1640B0; --dorado:#F6B800; --rojo:#D62828; --verde:#25A93E;
  --marino:#071632; --marino-2:#0B2148; --tinta:#0E1B33;
  /* Neutros */
  --negro:#121212; --gris-700:#3A4357; --gris-500:#5A6478; --gris-400:#8A93A6;
  --gris-300:#9AA3B2; --linea:#E7EBF1; --fondo:#F4F6FA; --blanco:#fff;
  /* Semánticos */
  --exito:#198754; --advertencia:#B08200; --error:#D62828; --info:#1E5EFF;
  /* Radios / sombras / layout */
  --r-sm:8px; --r:11px; --r-lg:16px;
  --sombra-sm:0 4px 10px rgba(7,22,50,.12); --sombra:0 8px 20px -10px rgba(7,22,50,.2);
  --sombra-lg:0 18px 34px -16px rgba(7,22,50,.4);
  --contenedor:1240px;
  --ff:'Manrope',sans-serif; --ff-display:'League Spartan',sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--fondo)}
::selection{background:var(--dorado);color:var(--marino)}

.container{max-width:var(--contenedor);margin:0 auto;padding:0 24px}

/* Título de sección (punto azul + League Spartan) — igual que en Inicio */
.section-title{display:flex;align-items:center;gap:9px;margin:0 0 16px}
.section-title .dot{width:11px;height:11px;border-radius:50%;background:var(--azul)}
.section-title h2{font-family:var(--ff-display);font-weight:700;font-size:24px;color:var(--tinta);margin:0}

/* Cards con hover (igual que en Inicio) */
.pcard{transition:transform .2s ease, box-shadow .2s ease}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--sombra-lg)}
.catcard{transition:transform .2s ease, box-shadow .2s ease}
.catcard:hover{transform:translateY(-5px);box-shadow:0 18px 34px -16px rgba(7,22,50,.35)}
.navlink{transition:color .15s}
.navlink:hover{color:var(--azul)}

/* Scroll horizontal de los rieles */
.fjx::-webkit-scrollbar{height:8px}
.fjx::-webkit-scrollbar-thumb{background:#C9D3E2;border-radius:8px}

/* Botones */
.btn{font-family:var(--ff);font-weight:700;border:none;border-radius:var(--r);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;font-size:14px}
.btn-azul{background:var(--azul);color:#fff}
.btn-verde{background:var(--verde);color:#fff}
.btn-dorado{background:var(--dorado);color:#3A2A00}
.btn-rojo{background:var(--rojo);color:#fff}
.btn-ghost{background:#fff;color:var(--azul);border:1.5px solid var(--azul)}

/* Inputs */
.input{width:100%;padding:11px 13px;border:1px solid #D7DEE8;border-radius:var(--r-sm);font-family:var(--ff);font-size:14px;outline:none;background:#fff}

/* Alert (estados/mensajes, semánticos) */
.alert{border-radius:10px;padding:12px;font-size:13px;font-weight:600}
.alert-info{background:#E8EFFF;border:1px solid #BFD3FF;color:var(--info)}
.alert-exito{background:#E8F5EE;border:1px solid #B6E0C8;color:var(--exito)}
.alert-adv{background:#FFF6E0;border:1px solid #F2DDA0;color:var(--advertencia)}
.alert-error{background:#FDECEC;border:1px solid #F4C2C2;color:var(--error)}

/* Chip de filtro */
.chip{padding:8px 14px;border-radius:9px;font-family:var(--ff);font-weight:700;font-size:12px;cursor:pointer;border:1.5px solid #D7DEE8;background:#fff;color:var(--gris-500)}
.chip.activo{border-color:var(--azul);background:var(--azul);color:#fff}

/* Reglas globales */
img{max-width:100%}
image-slot{display:block;overflow:hidden;max-width:100%}
image-slot img{max-width:100%;height:100%;object-fit:cover}
html,body{overflow-x:hidden}
.cat-filtros-btn{background:#fff;border:1px solid #D7DEE8;border-radius:10px;padding:10px 16px;font-family:var(--ff);font-weight:700;font-size:14px;color:var(--azul);cursor:pointer}

/* Responsive básico (grillas) */
@media (max-width:900px){
  .grid-6{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:560px){
  .grid-6,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ===== Móvil (≤768px) — frontend de usuario ===== */
@media (max-width:768px){
  /* Ocultar en móvil (favoritos/cuenta del header + secciones marcadas, p. ej. "¿Por qué comprar?") */
  .hide-mobile{display:none!important}

  /* Header: logo + acciones en una fila, buscador en fila propia, menú → drawer */
  .hdr-top{display:flex!important;flex-wrap:wrap;gap:12px!important;padding:12px 16px!important;align-items:center}
  .hdr-logo img{height:50px!important}
  .hdr-search{order:3;flex-basis:100%!important;max-width:100%!important}
  .hdr-act{margin-left:auto;gap:12px!important}
  .hdr-nav{display:none!important}
  .hdr-burger{display:inline-flex!important;align-items:center;justify-content:center}

  /* Hero apilado */
  .hero-grid{grid-template-columns:minmax(0,1fr)!important;padding:28px 16px 16px!important;gap:18px!important}
  .hero-grid > div{min-width:0!important}
  .hero-grid h1{font-size:32px!important}
  .hero-cta{grid-template-columns:1fr!important;max-width:none!important}
  .trust-grid{grid-template-columns:1fr 1fr!important;gap:12px!important;padding:16px!important}

  /* Preventa apilada */
  .preventa-grid{grid-template-columns:1fr!important;text-align:center;gap:14px!important;padding:22px!important}
  .preventa-grid img{max-width:70%!important;height:auto!important}

  /* Footer: solo Ayuda y contacto + Síguenos */
  .f-grid{grid-template-columns:1fr!important;gap:22px!important}
  .f-logo,.f-nav{display:none!important}

  /* Catálogo: filtros en panel desplegable */
  .cat-layout{grid-template-columns:1fr!important}
  .cat-filtros-btn{display:inline-block!important}
  .cat-side{display:none!important;position:static!important}
  .cat-side.open-mobile{display:block!important}

  /* Producto: 1 columna */
  .prod-detail{grid-template-columns:1fr!important;gap:22px!important}

  /* Padding de contenedores */
  .container{padding:0 16px!important}
}