/* ==========================================================================
   TIENDA BRINTEL — mismo lenguaje visual que brintel.com.mx
   (colores, tipografías y composición tomados literalmente de
   Brintel-website/contenidos/estilos/main.css -- no es un sistema aparte)
   ========================================================================== */
:root {
  --green: #007A33;
  --green-deep: #004D20;
  --green-light: #EAF3EA;
  --red: #C1121F;
  --black: #070A08;
  --ink: #111814;

  --surface: #FFFFFF;
  --surface-2: #F3F6F3;
  --border: #D8E2D9;
  --border-strong: #B3C3B5;

  --text-primary: #0B1409;
  --text-body: #314038;
  --text-muted: #5A7060;
  --text-faint: #8AA08E;

  --grad-brand: linear-gradient(90deg, #070A08 0%, #004D20 35%, #007A33 62%, #8B0D16 82%, #C1121F 100%);

  --font-head: "Exo 2", sans-serif;
  --font-body: "Source Sans 3", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --container: 1340px;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); color: var(--text-primary); background: var(--surface); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(var(--container), 94vw); margin: 0 auto; }

/* ---- Header (idéntico al del sitio principal: fondo blanco) ---- */
.site-header { position: sticky; top: 0; z-index: 200; background: var(--surface); border-bottom: 1px solid var(--border); }
.site-header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-brand); }
.header-wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; min-height: 76px; gap: 12px 24px; padding: 12px 20px; }
.brand { display: flex; align-items: center; gap: 16px; }
.brand img { width: 170px; height: auto; }
.brand-tienda { position: relative; padding-left: 16px; font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; letter-spacing: .01em; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-tienda::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 30px; background: var(--border-strong); }
.main-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.main-nav > a { color: var(--text-body); font-family: var(--font-head); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 8px 14px; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; white-space: nowrap; }
.main-nav > a:hover, .main-nav > a.active { color: var(--green-deep); border-bottom-color: var(--green); }

/* ---- Acciones del header (carrito/cuenta/ajustes) -- separadas del nav de
   navegación (Categorías/Catálogo/Soporte) para que no se sientan como un
   6to link de menú más. Vive en tienda.js (contenedorAccionesHeader). ---- */
.header-acciones { display: flex; align-items: center; gap: 6px; padding-left: 12px; margin-left: 4px; border-left: 1px solid var(--border); }
@media (max-width: 900px) { .header-acciones { border-left: none; padding-left: 0; margin-left: 0; order: 4; } }

.cuenta-nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: var(--text-body); }
.cuenta-nav-icon:hover { background: var(--surface-2); color: var(--green-deep); }

/* ---- Switch de IVA -- reemplaza el link de texto "Precios con/sin IVA"
   por un interruptor real, más rápido de leer de un vistazo ---- */
.iva-switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 0 4px; user-select: none; }
.iva-switch-texto { font-family: var(--font-head); font-weight: 700; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.iva-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.iva-switch-track { position: relative; width: 34px; height: 19px; border-radius: 10px; background: var(--border-strong); transition: background .18s; flex-shrink: 0; }
.iva-switch-knob { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s; }
.iva-switch input:checked + .iva-switch-track { background: var(--green); }
.iva-switch input:checked + .iva-switch-track .iva-switch-knob { transform: translateX(15px); }
.iva-switch input:focus-visible + .iva-switch-track { outline: 2px solid var(--green-deep); outline-offset: 2px; }

/* ---- Buscador del header -- el elemento dominante entre el logo y el
   menú, con un desplegable de resultados en vivo (ver activarBusquedaHeader
   en tienda.js). Diseño de referencia: buscadores reales de e-commerce de
   la misma industria (sily.mx, vspshop.mx), donde la búsqueda es lo primero
   que se ve, no un ícono escondido. ---- */
.header-search { position: relative; flex: 1 1 320px; max-width: 560px; }
.header-search-form { display: flex; }
.header-search-input { flex: 1; min-width: 0; border: 1px solid var(--border-strong); border-right: none; padding: 10px 14px; font-size: .88rem; font-family: var(--font-body); background: #fff; }
.header-search-boton { border: 1px solid var(--green); background: var(--green); color: #fff; padding: 0 18px; cursor: pointer; display: flex; align-items: center; }
.header-search-boton:hover { background: var(--green-deep); }
.header-search-resultados { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--border); box-shadow: 0 12px 28px rgba(7,10,8,.12); z-index: 250; max-height: 420px; overflow-y: auto; }
.header-search-resultados.is-abierto { display: block; }
.header-search-item { display: flex; align-items: center; gap: 12px; padding: 9px 14px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--border); }
.header-search-item:last-of-type { border-bottom: none; }
.header-search-item:hover { background: var(--surface-2); }
.header-search-item img { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; }
.header-search-item-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.header-search-item-titulo { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-search-item-precio { font-size: .8rem; color: var(--green-deep); font-weight: 700; }
.header-search-vermas { display: block; text-align: center; padding: 10px; font-size: .82rem; font-weight: 700; color: var(--green-deep); text-decoration: none; }
.header-search-vacio { padding: 16px 14px; font-size: .82rem; color: var(--text-muted); margin: 0; }
@media (max-width: 760px) { .header-search { flex-basis: 100%; max-width: none; order: 3; } .brand { order: 1; } .main-nav { order: 2; } }

/* ---- Espacio entre el header (sticky) y el contenido -- antes se veía
   pegado porque el hero/inner-hero arrancaba justo debajo ---- */
main > *:first-child { margin-top: 30px; }

/* ---- Mega menú de categorías: riel de categorías (nvl1) a la izquierda +
   panel de subcategorías (nvl2) de la seleccionada a la derecha, para que
   el cliente entre directo a una subcategoría sin dos clics ---- */
.nav-item-mega { position: relative; display: inline-flex; align-items: center; }
.mega-trigger { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; color: var(--text-body); font-family: var(--font-head); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 8px 14px; border-bottom: 2px solid transparent; }
.mega-trigger::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4.5px solid currentColor; opacity: .55; transition: transform .22s; }
.nav-item-mega.is-open .mega-trigger { color: var(--green-deep); border-bottom-color: var(--green); }
.nav-item-mega.is-open .mega-trigger::after { transform: rotate(180deg); opacity: 1; }
.mega-menu { display: none; position: absolute; top: calc(100% + 14px); left: 0; width: min(760px, 94vw); background: var(--surface); border: 1px solid var(--border); box-shadow: 0 8px 40px rgba(0,0,0,.12); z-index: 1000; }
.nav-item-mega.is-open .mega-menu { display: block; }
.mega-layout { display: grid; grid-template-columns: 220px 1fr; max-height: 62vh; }
.mega-rail { border-right: 1px solid var(--border); overflow-y: auto; padding: 10px 0; }
.mega-rail-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; padding: 10px 16px; border: none; background: none; cursor: pointer; font-family: var(--font-body); font-size: .84rem; color: var(--text-body); border-left: 3px solid transparent; }
.mega-rail-item.is-activa { background: var(--green-light); color: var(--green-deep); border-left-color: var(--green); font-weight: 600; }
.mega-rail-cant { font-size: .68rem; color: var(--text-faint); font-family: var(--font-mono); }
.mega-rail-item.is-activa .mega-rail-cant { color: var(--green-deep); }
.mega-panel-detalle { padding: 20px 24px; overflow-y: auto; }
.mega-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mega-vertodo { font-size: .76rem; font-weight: 700; color: var(--green-deep); white-space: nowrap; }
.mega-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px 20px; }
.mega-title { font-family: var(--font-mono); font-size: .68rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin: 0; }
.mega-link { display: block; padding: 6px 8px; font-size: .85rem; color: var(--ink); }
.mega-link:hover { background: var(--green-light); }
.mega-link .cant { color: var(--text-faint); font-size: .72rem; }
/* En móvil el riel y el detalle de subcategorías se apilan en una sola
   columna -- antes cada uno tenía su propio scroll interno (o ninguno) y el
   panel completo podía crecer más alto que la pantalla, dejando las
   subcategorías de abajo inalcanzables. Ahora todo el menú es UN solo
   contenedor con scroll, fijo al viewport, así siempre se puede llegar
   hasta el final sin importar cuántas subcategorías tenga. */
@media (max-width: 760px) {
  .mega-menu { width: 94vw; max-height: min(70vh, 480px); overflow-y: auto; }
  .mega-layout { grid-template-columns: 1fr; max-height: none; }
  .mega-rail { border-right: none; border-bottom: 1px solid var(--border); max-height: none; overflow-y: visible; }
  .mega-panel-detalle { overflow-y: visible; }
}


/* ---- Franja de título de cada sección interna -- ahora con foto real de
   trabajos de Brintel de fondo (retocada con IA, ver
   scripts/retocar_fotos_reales.js) en vez de un gris plano. El degradado
   oscuro es lo que permite que el texto en blanco siga siendo legible sin
   importar qué tan clara salga la foto. La imagen se define por página
   (inline, --inner-hero-foto) para poder variar cuál foto usa cada una. ---- */
.inner-hero {
  position: relative;
  background:
    linear-gradient(100deg, rgba(4,10,6,.88) 0%, rgba(4,10,6,.62) 55%, rgba(4,10,6,.4) 100%),
    var(--inner-hero-foto, none) center/cover no-repeat,
    var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 46px 0 !important;
  color: #fff;
}
.inner-hero .kicker { color: #8FE3A8; }
.inner-hero h1, .inner-hero p { color: #fff; }
.kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; color: var(--green-deep); font-family: var(--font-mono); margin: 0 0 8px; }
h1 { font-family: var(--font-head); font-weight: 800; }
.section-title { font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; margin: 6px 0 22px; }
.section { padding: 44px 0; }

/* ---- Carrusel de marcas -- cada logo en una caja de tamaño fijo, sin
   importar su proporción nativa, para que el renglón se vea parejo ---- */
.marcas-carrusel-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marcas-carrusel-track { display: flex; align-items: center; width: max-content; animation: marcas-scroll 42s linear infinite; }
.marca-item { flex: 0 0 auto; width: 130px; height: 64px; display: flex; align-items: center; justify-content: center; padding: 0 16px; }
.marca-item img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1) opacity(.6); transition: filter .2s; }
.marca-item img:hover { filter: grayscale(0) opacity(1); }
@keyframes marcas-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marcas-carrusel-track { animation: none; overflow-x: auto; } }

/* ---- SmartHome (home) ---- */
.smarthome-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.smarthome-card { display: block; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.smarthome-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.1); }
.smarthome-card img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* ---- Categorías ---- */
.categorias-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.categoria-card { display: block; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--green); padding: 22px; transition: border-color .15s, transform .15s, box-shadow .15s; }
.categoria-card:hover { border-top-color: var(--red); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.categoria-card-icono { font-size: 1.8rem; display: block; margin-bottom: 10px; }
.categoria-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.categoria-card-tagline { margin: 0 0 8px; color: var(--text-body); font-size: .82rem; line-height: 1.4; }
.categoria-card p { margin: 0; color: var(--text-muted); font-size: .85rem; }
.categoria-count { display: inline-block; margin-top: 12px; font-size: .72rem; font-family: var(--font-mono); background: var(--green-light); color: var(--green-deep); padding: 4px 9px; }

/* ---- Toolbar / filtros ---- */
.tienda-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.tienda-toolbar select, .tienda-toolbar input[type="search"] { border: 1px solid var(--border-strong); padding: 9px 12px; font-size: .9rem; background: #fff; font-family: var(--font-body); }
.tienda-toolbar input[type="search"] { flex: 1 1 220px; min-width: 200px; }
.tienda-toolbar-check { display: flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--text-body); white-space: nowrap; cursor: pointer; }
.tienda-toolbar-check input { width: auto; }
.tienda-resultados { color: var(--text-muted); font-size: .85rem; margin-left: auto; }

/* ---- Grid de productos ---- */
.productos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.producto-card { background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.producto-card:hover { border-color: var(--green); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.producto-card-imagen { aspect-ratio: 1/1; background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.producto-card-imagen img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.producto-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.producto-card-marca { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.producto-card-titulo { font-size: .86rem; line-height: 1.3; flex: 1; color: var(--ink); }
.producto-card-precio { font-size: 1.02rem; font-weight: 700; color: var(--green-deep); }
.producto-card-agregar { margin-top: 6px; border: 1px solid var(--green); background: transparent; color: var(--green-deep); padding: 8px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; cursor: pointer; font-family: var(--font-body); }
.producto-card-agregar:hover { background: var(--green); color: #fff; }

.tienda-paginacion { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.tienda-paginacion button { border: 1px solid var(--border-strong); background: #fff; padding: 8px 14px; font-size: .85rem; cursor: pointer; }
.tienda-paginacion button.is-current { background: var(--green); color: #fff; border-color: var(--green); }
.tienda-paginacion button:disabled { opacity: .4; cursor: default; }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: var(--font-head); }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-deep); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn-outline:hover { border-color: var(--green); color: var(--green-deep); }
.btn:disabled { opacity: .55; cursor: default; }

/* ---- Barra fija de "agregar al carrito" -- aparece al hacer scroll más
   allá de la ficha principal del producto ---- */
.sticky-agregar-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 260; background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(0,0,0,.08); padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; transform: translateY(100%); transition: transform .25s ease; }
.sticky-agregar-bar.is-visible { transform: translateY(0); }
.sticky-agregar-bar-info { display: flex; flex-direction: column; min-width: 0; }
.sticky-agregar-bar-titulo { font-size: .82rem; color: var(--text-body); max-width: min(50vw, 420px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky-agregar-bar-precio { font-weight: 700; color: var(--green-deep); font-size: 1.05rem; }

/* ---- Página de producto ---- */
.producto-detalle-grid { display: grid; grid-template-columns: minmax(240px, 380px) 1fr; gap: 32px; margin-bottom: 32px; }
.producto-detalle-imagen { background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1; }
.producto-detalle-imagen img { width: 100%; height: 100%; object-fit: contain; padding: 24px; }
.producto-detalle-video { margin-top: 14px; }
.producto-detalle-video video { max-width: 100%; width: auto; height: auto; max-height: 480px; display: block; margin: 0 auto; background: #000; border: 1px solid var(--border); }
.producto-detalle-info { display: flex; flex-direction: column; gap: 8px; }
.producto-detalle-modelo { color: var(--text-muted); font-size: .85rem; margin: 0; }
.producto-detalle-precio { font-size: 1.9rem; color: var(--green-deep); font-family: var(--font-head); }
.producto-detalle-stock { font-size: .82rem; font-weight: 600; margin: 0; }
.producto-detalle-acciones { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.qty-selector { display: flex; align-items: center; border: 1px solid var(--border-strong); }
.qty-selector button { width: 36px; height: 42px; border: none; background: #fff; font-size: 1.1rem; cursor: pointer; }
.qty-selector span { width: 36px; text-align: center; font-weight: 600; }
.producto-detalle-descripcion { background: #fff; border: 1px solid var(--border); padding: 24px; font-size: .92rem; line-height: 1.7; color: var(--text-body); }
.producto-detalle-descripcion img { max-width: 100%; height: auto; }
@media (max-width: 700px) { .producto-detalle-grid { grid-template-columns: 1fr; } }

/* ---- Carrito -- botón con su propio espacio en el header, no una burbuja
   flotante sobre el contenido ---- */
.carrito-header-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: none; background: none; cursor: pointer; color: var(--text-body); border-radius: 50%; }
.carrito-header-btn:hover { background: var(--surface-2); color: var(--green-deep); }
.carrito-badge { position: absolute; top: 1px; right: 1px; background: var(--red); color: #fff; font-size: .64rem; font-weight: 700; width: 17px; height: 17px; border-radius: 50%; align-items: center; justify-content: center; border: 2px solid var(--surface); }
.carrito-drawer { position: fixed; inset: 0; z-index: 320; display: none; }
.carrito-drawer.is-open { display: block; }
.carrito-drawer-backdrop { position: absolute; inset: 0; background: rgba(6,10,8,.55); }
.carrito-drawer-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 92vw); background: #fff; display: flex; flex-direction: column; }
.carrito-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.carrito-drawer-close { border: 1px solid var(--border); background: #fff; width: 30px; height: 30px; cursor: pointer; }
.carrito-drawer-items { flex: 1; overflow-y: auto; padding: 12px 20px; }
.carrito-vacio { color: var(--text-muted); font-size: .88rem; }
.carrito-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--border); }
.carrito-item img { width: 52px; height: 52px; object-fit: contain; background: var(--surface-2); }
.carrito-item-titulo { font-size: .8rem; margin: 0 0 4px; }
.carrito-item-precio { font-size: .76rem; color: var(--text-muted); margin: 0 0 6px; }
.carrito-item-qty { display: flex; align-items: center; gap: 8px; }
.carrito-item-qty button { width: 22px; height: 22px; border: 1px solid var(--border-strong); background: #fff; cursor: pointer; }
.carrito-item-quitar { border: none; background: none; color: var(--text-faint); font-size: 1.05rem; cursor: pointer; }
.carrito-drawer-footer { padding: 16px 20px 20px; border-top: 1px solid var(--border); }
.carrito-total-row { display: flex; justify-content: space-between; font-size: 1rem; margin-bottom: 12px; }
.carrito-nota { font-size: .72rem; color: var(--text-faint); margin: 0 0 12px; }

/* ---- Checkout ---- */
.checkout-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 800px) { .checkout-grid { grid-template-columns: 1fr; } }
.checkout-card { background: #fff; border: 1px solid var(--border); padding: 22px; }
.checkout-resumen-item { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
.checkout-total { display: flex; justify-content: space-between; font-size: 1.15rem; font-weight: 700; padding-top: 14px; }
.form-field { margin-bottom: 14px; }
.form-field label { display: block; font-size: .82rem; color: var(--text-muted); margin-bottom: 5px; }
.form-field input, .form-field select { width: 100%; border: 1px solid var(--border-strong); padding: 10px 12px; font-size: .92rem; font-family: var(--font-body); background: #fff; }
.form-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 600px) { .form-fila { grid-template-columns: 1fr; } }
.form-seccion-titulo { font-family: var(--font-head); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 22px 0 12px; }
.form-seccion-titulo:first-child { margin-top: 0; }

/* ---- Campo de tarjeta de Stripe (Card Element) -- mismo look que un input
   normal del formulario, ya que Stripe monta un iframe adentro sin heredar
   nuestros estilos por su cuenta ---- */
.stripe-card-input { border: 1px solid var(--border-strong); padding: 12px; background: #fff; transition: border-color .15s; }
.stripe-card-input.StripeElement--focus { border-color: var(--green); }
.stripe-card-input.StripeElement--invalid { border-color: var(--red); }
.form-hint { font-size: .76rem; color: var(--text-faint); margin: 4px 0 0; }
.checkout-paso-titulo { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; margin: 28px 0 16px; }
.checkout-paso-titulo:first-child { margin-top: 0; }
.checkout-paso-numero { width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #fff; font-size: .76rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-head); }

/* ---- Teléfono normalizado: selector de país + dígitos ---- */
.telefono-grupo { display: flex; gap: 8px; }
.telefono-grupo select { flex: 0 0 100px; }
.telefono-grupo input { flex: 1; }

/* ---- Mapa de confirmación de dirección (Leaflet) ---- */
.mapa-direccion { width: 100%; height: 260px; border: 1px solid var(--border-strong); margin-top: 6px; background: var(--surface-2); }
.mapa-direccion .leaflet-container { font-family: var(--font-body); }

/* ---- Facturación (CFDI) ---- */
.factura-toggle { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--text-body); cursor: pointer; margin-bottom: 4px; }
.factura-toggle input { width: auto; }
.factura-campos { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }

/* ---- Método de pago -- tarjetas seleccionables con ícono, no botones planos ---- */
.metodo-pago-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 20px; }
.metodo-pago-opciones button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px; border: 1.5px solid var(--border-strong); background: #fff; cursor: pointer; font-size: .82rem; font-weight: 600; font-family: var(--font-body); color: var(--text-body); transition: border-color .15s, background .15s; }
.metodo-pago-opciones button svg { width: 22px; height: 22px; color: var(--text-muted); transition: color .15s; }
.metodo-pago-opciones button.activo { border-color: var(--green); background: var(--green-light); color: var(--green-deep); }
.metodo-pago-opciones button.activo svg { color: var(--green-deep); }
.metodo-pago-opciones button:disabled { opacity: .4; cursor: not-allowed; }
.pago-panel { border: 1px solid var(--border); padding: 20px; min-height: 120px; }
.pago-panel-cargando { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 0; color: var(--text-muted); font-size: .86rem; }
.pago-panel-spinner { width: 26px; height: 26px; border: 3px solid var(--border); border-top-color: var(--green); border-radius: 50%; animation: girar 0.8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.cuenta-transferencia { background: var(--surface-2); padding: 16px; border: 1px solid var(--border); font-size: .88rem; }
.cuenta-transferencia dt { color: var(--text-muted); font-size: .74rem; text-transform: uppercase; margin-top: 10px; }
.cuenta-transferencia dd { margin: 2px 0 0; font-weight: 600; }
.mensaje-error { color: var(--red); font-size: .85rem; margin-top: 10px; }
.mensaje-exito { color: var(--green-deep); font-size: .95rem; }
.checkout-confianza { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; font-size: .8rem; color: var(--text-muted); }
.checkout-confianza li { display: flex; align-items: center; gap: 8px; }
.checkout-confianza svg { color: var(--green-deep); flex-shrink: 0; }

/* ---- Toasts ---- */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 500; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { background: var(--black); color: #fff; padding: 12px 18px; border-radius: 8px; font-size: .84rem; box-shadow: 0 8px 24px rgba(0,0,0,.25); opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease; max-width: 320px; border-left: 3px solid var(--green); }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast-error { border-left-color: var(--red); }
@media (max-width: 480px) { .toast-container { left: 16px; right: 16px; bottom: 16px; } .toast { max-width: none; } }

/* ---- Recuadro de "producto agregado" -- imagen + título, no solo texto ---- */
.toast-producto { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; }
.toast-producto img { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 6px; flex-shrink: 0; }
.toast-producto-info { min-width: 0; }
.toast-producto-titulo { margin: 0; font-size: .82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-producto-detalle { margin: 2px 0 0; font-size: .74rem; color: #8FE3A8; }

/* ---- Feedback de "agregar al carrito" -- pulso breve en vez de solo texto ---- */
.producto-card-agregar.is-agregado, #btnAgregar.is-agregado { animation: agregar-pulso .5s ease; background: var(--green); color: #fff; }
@keyframes agregar-pulso { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* ---- Scroll-reveal -- SOLO mejora progresiva. El estado por default (sin
   la clase reveal-init) es visible; JS agrega reveal-init justo antes de
   observar el elemento. Así, si JS no corre (bloqueado, un crawler que no
   ejecuta JS, un error en otro script) el contenido nunca se queda
   invisible -- antes ".reveal" empezaba oculto por CSS y dependía por
   completo de que el IntersectionObserver disparara. ---- */
.reveal { transition: opacity .55s ease, transform .55s ease; }
.reveal.reveal-init { opacity: 0; transform: translateY(18px); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal.reveal-init { opacity: 1; transform: none; transition: none; } }

/* ---- Skeletons (loading) ---- */
.skeleton { position: relative; overflow: hidden; background: var(--surface-2); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: skeleton-shimmer 1.4s infinite; }
@keyframes skeleton-shimmer { 100% { transform: translateX(100%); } }
.skeleton-card { border: 1px solid var(--border); display: flex; flex-direction: column; }
.skeleton-card .skeleton-imagen { aspect-ratio: 1/1; }
.skeleton-card .skeleton-linea { height: 12px; margin: 12px 14px 0; border-radius: 4px; }
.skeleton-card .skeleton-linea.corta { width: 55%; margin-bottom: 14px; }

/* ---- Hero: dos carruseles lado a lado en vez de uno solo -- las imágenes
   de marketing que nos mandan son más angostas que el ancho real del hero,
   así que un solo carrusel a todo lo ancho las dejaba con franjas vacías.
   Con "cover" cada imagen llena su cuadro por completo (recorta lo que
   sobre), y entre los dos carruceles se cubre todo el ancho de la sección. */
.hero-doble { display: flex; gap: 12px; }
.hero-slider { position: relative; overflow: hidden; background: var(--surface-2); height: clamp(180px, 26vw, 340px); flex: 1 1 50%; min-width: 0; }
.hero-slider-track { display: flex; height: 100%; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.hero-slide { min-width: 100%; height: 100%; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(255,255,255,.9); color: var(--black); font-size: 1.1rem; cursor: pointer; z-index: 5; }
.hero-slider-arrow.prev { left: 14px; } .hero-slider-arrow.next { right: 14px; }
.hero-slider-dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.hero-slider-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(255,255,255,.6); cursor: pointer; padding: 0; }
.hero-slider-dots button.activo { background: #fff; }
@media (max-width: 760px) { .hero-doble { flex-direction: column; } .hero-slider { height: clamp(180px, 55vw, 280px); } }

/* ---- Historias (clips cortos de marca, estilo stories) ---- */
.historias-row { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.historia-item { flex: 0 0 auto; scroll-snap-align: start; width: 130px; border: none; background: none; cursor: pointer; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.historia-item img { width: 130px; height: 190px; object-fit: cover; border-radius: 14px; border: 2px solid var(--border); transition: border-color .15s, transform .15s; }
.historia-item:hover img { border-color: var(--green); transform: translateY(-2px); }
.historia-item-titulo { font-size: .76rem; line-height: 1.3; color: var(--text-body); }
.historia-modal { position: fixed; inset: 0; z-index: 400; display: none; }
.historia-modal.is-open { display: flex; align-items: center; justify-content: center; }
.historia-modal-backdrop { position: absolute; inset: 0; background: rgba(6,10,8,.85); }
.historia-modal-panel { position: relative; z-index: 1; max-width: 420px; width: 92%; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.historia-modal-titulo { color: #fff; font-size: .9rem; text-align: center; margin: 0; }
.historia-modal-close { position: absolute; top: -40px; right: 0; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255,255,255,.15); color: #fff; font-size: 1.2rem; cursor: pointer; z-index: 2; }

/* ---- Barras de progreso arriba, una por historia, se rellenan con la
   duración real (video) o un timer fijo (foto) -- lo que hace que esto se
   sienta como una historia real y no solo "abrir un video en un modal". ---- */
.historia-modal-barras { position: absolute; top: -18px; left: 0; right: 0; display: flex; gap: 4px; z-index: 2; }
.historia-barra { flex: 1; height: 3px; background: rgba(255,255,255,.3); border-radius: 2px; overflow: hidden; }
.historia-barra-relleno { display: block; height: 100%; width: 0; background: #fff; }

.historia-modal-media { position: relative; width: 100%; }
.historia-modal-media video, .historia-modal-media img { width: 100%; max-height: 78vh; border-radius: 10px; background: #000; display: block; object-fit: contain; }
.historia-modal-media video[hidden], .historia-modal-media img[hidden] { display: none; }
.historia-tap { position: absolute; top: 0; bottom: 0; width: 35%; border: none; background: transparent; cursor: pointer; padding: 0; }
.historia-tap-prev { left: 0; }
.historia-tap-next { right: 0; }

/* ---- Cuenta: pedidos con línea de tiempo ---- */
.pedido-card { border: 1px solid var(--border); padding: 16px; margin-bottom: 14px; }
.pedido-card-head { display: flex; justify-content: space-between; font-size: .88rem; margin-bottom: 14px; }
.pedido-timeline { display: flex; align-items: flex-start; }
.pedido-timeline-paso { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; color: var(--text-faint); }
.pedido-timeline-paso::before { content: ""; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px; background: var(--border); z-index: 0; }
.pedido-timeline-paso:first-child::before { display: none; }
.pedido-timeline-punto { width: 14px; height: 14px; border-radius: 50%; background: var(--border-strong); border: 2px solid #fff; z-index: 1; margin-bottom: 6px; }
.pedido-timeline-etiqueta { font-size: .68rem; }
.pedido-timeline-paso.is-alcanzado { color: var(--green-deep); }
.pedido-timeline-paso.is-alcanzado .pedido-timeline-punto { background: var(--green); }
.pedido-timeline-paso.is-alcanzado::before { background: var(--green); }
.pedido-timeline-guia { font-size: .78rem; color: var(--text-muted); margin: 10px 0 0; }

/* ---- Cuenta: direcciones guardadas ---- */
.direccion-card { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border); }
.direccion-card-etiqueta { font-weight: 700; font-size: .88rem; margin: 0 0 4px; }
.direccion-card-badge { font-size: .64rem; font-weight: 700; text-transform: uppercase; background: var(--green-light); color: var(--green-deep); padding: 2px 7px; border-radius: 3px; margin-left: 6px; }
.direccion-card-texto { font-size: .82rem; color: var(--text-muted); margin: 0; }
.direccion-card-acciones { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.direccion-card-acciones button { border: none; background: none; color: var(--green-deep); font-size: .76rem; cursor: pointer; text-decoration: underline; padding: 0; text-align: right; }

/* ---- Soporte ---- */
.soporte-canales { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.soporte-canal { background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--green); padding: 24px; text-align: center; transition: transform .15s, box-shadow .15s; }
.soporte-canal:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.soporte-canal svg { width: 30px; height: 30px; color: var(--green-deep); margin-bottom: 10px; }
.soporte-canal-titulo { font-weight: 700; font-family: var(--font-head); margin: 0 0 4px; }
.soporte-canal-texto { color: var(--text-muted); font-size: .85rem; margin: 0; }
.soporte-faq { max-width: 780px; }
.soporte-faq-item { background: #fff; border: 1px solid var(--border); padding: 16px 20px; margin-bottom: 10px; }
.soporte-faq-item summary { cursor: pointer; font-weight: 700; font-family: var(--font-head); font-size: .95rem; }
.soporte-faq-item p { color: var(--text-body); font-size: .9rem; margin: 12px 0 0; line-height: 1.6; }
.soporte-links { display: flex; flex-wrap: wrap; gap: 14px; }
.soporte-links a { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border); padding: 12px 18px; font-size: .88rem; color: var(--text-body); }
.soporte-links a:hover { border-color: var(--green); color: var(--green-deep); }
.soporte-links svg { width: 17px; height: 17px; }

.sucursales-intro { max-width: 760px; color: var(--text-body); line-height: 1.6; }
.sucursales-intro strong { color: var(--green-deep); }
.sucursales-leyenda { display: flex; flex-wrap: wrap; gap: 18px; margin: 14px 0 16px; font-size: .82rem; color: var(--text-muted); }
.sucursales-leyenda span { display: flex; align-items: center; gap: 7px; }
.sucursales-punto { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.sucursales-punto-radio { background: transparent; border: 1px solid var(--text-faint); }
.sucursales-mapa { width: 100%; height: 460px; border: 1px solid var(--border); background: var(--surface-2); }

/* ---- Destacados ---- */
.destacados-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }

/* ---- Footer -- pintado por completo desde tienda.js (renderFooterCompleto),
   ver ahí; aquí solo el layout ---- */
footer.site-footer { background: var(--black); color: #9fb0a7; padding: 44px 0 0; font-size: .85rem; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; padding-bottom: 32px; }
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col a { color: #c3d0c6; }
.footer-col a:hover { color: #fff; }
.footer-col p { margin: 0; color: #8fa295; line-height: 1.6; }
.footer-logo { width: 150px; height: auto; margin-bottom: 4px; filter: brightness(0) invert(1); }
.footer-social { display: flex; gap: 14px; margin-top: 8px; }
.footer-social a { display: inline-flex; color: #c3d0c6; transition: color .15s; }
.footer-social a:hover { color: #fff; }
.footer-social svg { width: 20px; height: 20px; }
.footer-titulo { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: .74rem; letter-spacing: .06em; color: #fff; margin: 0 0 4px; }
.footer-direccion { font-size: .78rem; margin-top: 6px !important; }

/* ---- Métodos de pago / paqueterías -- chips blancos detrás de cada logo
   porque casi todos vienen pensados para fondo claro (Visa, Mastercard,
   PayPal, etc.), no para el negro del footer. ---- */
.footer-metodos { display: flex; flex-wrap: wrap; gap: 24px 40px; padding: 22px 0; border-top: 1px solid #1c261f; }
.footer-metodos-grupo { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.footer-metodos-titulo { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: #6c8074; white-space: nowrap; }
.footer-metodos-logos { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-metodos-logos img { height: 26px; width: auto; max-width: 64px; object-fit: contain; background: #fff; padding: 5px 10px; border-radius: 4px; }

.footer-legal { border-top: 1px solid #1c261f; padding: 16px 0; font-size: .74rem; color: #6c8074; text-align: center; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }