/* =====================================================================
   Estilos de la tienda pública
   ===================================================================== */

:root {
    --tinta:        #111a24;
    --tinta-suave:  #5b6b7c;
    --borde:        #e6ebf1;
    --fondo:        #ffffff;
    --fondo-suave:  #f2f5fa;
    --pagina:       #f4f7fb;
    --acento:       #1763e0;
    --acento-fuerte:#0f4fbf;
    --acento-suave: #eaf1fe;
    --acento-grad:  linear-gradient(135deg, #2a7bff 0%, #1763e0 55%, #0f4fbf 100%);
    /* El fondo del carrusel de la portada y el brillo que lleva encima. Son
       sus propias variables y no `--acento-grad` porque es un azul mucho más
       oscuro: encima va texto blanco a 2.6rem. Un tema de temporada las
       redefine y el hero acompaña; sin ellas se quedaba azul en una portada
       navideña, que es donde más se nota. */
    --hero-grad:    radial-gradient(120% 140% at 100% 0%, #245a9e 0%, #10365f 55%, #0a2035 100%);
    --hero-brillo:  rgba(42, 123, 255, .35);
    --exito:        #0f9d6b;
    --alerta:       #b4530a;
    --error:        #c23934;
    --oferta:       #e0342b;
    --oferta-grad:  linear-gradient(135deg, #ff5a52 0%, #e0342b 100%);
    --estrella:     #f59e0b;
    --radio:        12px;
    --radio-lg:     18px;
    --sombra-sm:    0 1px 2px rgba(16, 32, 48, .05);
    --sombra:       0 1px 2px rgba(16, 32, 48, .05), 0 10px 26px rgba(16, 32, 48, .08);
    --sombra-lg:    0 8px 20px rgba(16, 32, 48, .10), 0 24px 50px rgba(16, 32, 48, .12);
    --anillo:       0 0 0 3px rgba(23, 99, 224, .18);
    --ancho:        1200px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--tinta);
    background: var(--pagina);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }

/* --- Encabezado ---------------------------------------------------- */

.barra-superior {
    background: var(--tinta);
    color: #cbd5e1;
    font-size: .82rem;
}
.barra-superior .contenedor { display: flex; justify-content: space-between; gap: 16px; padding-block: 7px; }
.barra-superior a { color: #fff; }

.cabecera { border-bottom: 1px solid var(--borde); background: var(--fondo); position: sticky; top: 0; z-index: 30; }
.cabecera .contenedor { display: flex; align-items: center; gap: 24px; padding-block: 14px; }

.logo { font-size: 1.3rem; font-weight: 700; color: var(--tinta); letter-spacing: -.02em; }
.logo:hover { text-decoration: none; }
.logo span { color: var(--acento); }
/* La imagen ocupa el sitio del cuadrito de color que había antes, con el
   nombre del sitio a su lado. Manda el alto y no el ancho —el logo es más alto
   que ancho— y `flex: none` lo protege de que el buscador lo encoja. */
.logo img { height: 34px; width: auto; display: block; flex: none; }

.buscador { flex: 1; display: flex; max-width: 520px; }
.buscador input {
    flex: 1; border: 1px solid var(--borde); border-right: 0;
    border-radius: var(--radio) 0 0 var(--radio); padding: 10px 14px; font-size: .92rem;
}
.buscador input:focus { outline: 2px solid var(--acento); outline-offset: -2px; }
.buscador button {
    border: 0; background: var(--acento); color: #fff; padding: 0 18px; cursor: pointer;
    border-radius: 0 var(--radio) var(--radio) 0; font-weight: 600;
}
.buscador button:hover { background: var(--acento-fuerte); }

.acciones-cabecera { display: flex; align-items: center; gap: 18px; margin-left: auto; font-size: .9rem; }
.acciones-cabecera a { color: var(--tinta); }

.chip-carrito { position: relative; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.chip-carrito .cuenta {
    background: var(--acento); color: #fff; border-radius: 999px;
    min-width: 20px; height: 20px; display: inline-grid; place-items: center;
    font-size: .72rem; padding: 0 6px;
}

/* --- Navegación de categorías -------------------------------------- */

.nav-categorias { border-bottom: 1px solid var(--borde); background: var(--fondo-suave); }
.nav-categorias ul { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-categorias > .contenedor > ul > li { position: relative; }
.nav-categorias a {
    display: block; padding: 11px 14px; color: var(--tinta);
    font-size: .9rem; font-weight: 500;
}
.nav-categorias a:hover { color: var(--acento); text-decoration: none; }
.submenu {
    display: none; position: absolute; top: 100%; left: 0; min-width: 200px;
    background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
    box-shadow: var(--sombra); padding: 6px; flex-direction: column; z-index: 40;
}
.nav-categorias li:hover > .submenu { display: flex; }
.submenu a { padding: 8px 12px; border-radius: 6px; }
.submenu a:hover { background: var(--fondo-suave); }

/* --- Avisos --------------------------------------------------------- */

.avisos { margin: 16px 0; display: grid; gap: 8px; }
.aviso { padding: 11px 14px; border-radius: var(--radio); font-size: .9rem; border: 1px solid; }
.aviso-ok    { background: #ecfdf5; border-color: #a7f3d0; color: var(--exito); }
.aviso-error { background: #fef2f2; border-color: #fecaca; color: var(--error); }
.aviso-info  { background: #eff6ff; border-color: #bfdbfe; color: var(--acento-fuerte); }

/* --- Botones -------------------------------------------------------- */

.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid transparent; border-radius: var(--radio);
    padding: 10px 18px; font-size: .92rem; font-weight: 600;
    background: var(--acento); color: #fff; cursor: pointer; text-decoration: none;
}
.boton:hover { background: var(--acento-fuerte); text-decoration: none; color: #fff; }
.boton:disabled { opacity: .5; cursor: not-allowed; }
.boton-secundario { background: #fff; color: var(--tinta); border-color: var(--borde); }
.boton-secundario:hover { background: var(--fondo-suave); color: var(--tinta); }
.boton-peligro { background: var(--error); }
.boton-peligro:hover { background: #a02824; }
.boton-bloque { width: 100%; }
.boton-chico { padding: 6px 12px; font-size: .84rem; }

/* --- Formularios ---------------------------------------------------- */

.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 5px; }
.campo input, .campo select, .campo textarea {
    width: 100%; border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 9px 12px; font-size: .92rem; font-family: inherit; background: #fff; color: var(--tinta);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: 2px solid var(--acento); outline-offset: -1px; border-color: var(--acento);
}
.campo .ayuda { font-size: .8rem; color: var(--tinta-suave); margin-top: 4px; }
.campo-inline { display: flex; align-items: center; gap: 8px; }
.campo-inline input { width: auto; }
.rejilla-campos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 16px; }

/* --- Portada -------------------------------------------------------- */

/* Carrusel de banners de la portada */

.carrusel { position: relative; margin: 24px 0; }
.carrusel-ventana { overflow: hidden; border-radius: 16px; }
.carrusel-pista {
    display: flex;
    transition: transform .32s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

.carrusel-slide {
    flex: 0 0 100%;
    min-width: 0;
    color: #fff;
    padding: 60px 44px;
    min-height: 300px;
    display: flex;
    align-items: center;
}
.carrusel-slide.tema-uno  { background: var(--hero-grad); }
.carrusel-slide.tema-dos  { background: linear-gradient(120deg, #7a1f3d, #c2410c); }
.carrusel-slide.tema-tres { background: linear-gradient(120deg, #0f3d33, #128b62); }

.carrusel-texto { max-width: 60ch; }
.carrusel-texto .gancho {
    display: inline-block; margin-bottom: 12px;
    background: rgba(255, 255, 255, .18); border-radius: 999px;
    padding: 4px 13px; font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
}
.carrusel-texto h1 { font-size: 2.4rem; max-width: 20ch; }
.carrusel-texto p { font-size: 1.05rem; opacity: .92; max-width: 52ch; margin-bottom: 24px; }
.carrusel-texto .boton { background: #fff; color: var(--tinta); }
.carrusel-texto .boton:hover { background: #e9eef5; color: var(--tinta); }

/* Diapositiva que muestra un producto destacado */
.carrusel-slide.slide-producto {
    gap: 40px; padding: 44px;
}
.carrusel-slide.slide-producto .carrusel-texto { flex: 1 1 50%; }

.carrusel-figura {
    flex: 0 0 40%; max-width: 380px; aspect-ratio: 4 / 3;
    border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .1);
    display: grid; place-items: center;
}
.carrusel-figura img { width: 100%; height: 100%; object-fit: cover; }
.carrusel-figura .sin-imagen { font-size: 4rem; font-weight: 700; color: rgba(255, 255, 255, .35); }

.carrusel-precios { margin-bottom: 20px; }
.carrusel-precios strong { font-size: 1.9rem; letter-spacing: -.02em; }
.carrusel-precios s { opacity: .7; margin-left: 10px; font-size: 1rem; }

.carrusel-acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.carrusel-acciones form { margin: 0; }
.boton-contorno {
    background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55);
}
.boton-contorno:hover { background: rgba(255, 255, 255, .15); color: #fff; }

.carrusel-flecha {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(16, 32, 48, .35); color: #fff;
    font-size: 1.5rem; line-height: 1; display: grid; place-items: center;
    transition: background .15s ease;
}
.carrusel-flecha:hover { background: rgba(16, 32, 48, .65); }
.carrusel-flecha:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.carrusel-flecha.anterior  { left: 14px; }
.carrusel-flecha.siguiente { right: 14px; }

.carrusel-puntos {
    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 8px;
}
.carrusel-puntos button {
    width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
    border: 0; background: rgba(255, 255, 255, .45); transition: width .2s ease, background .2s ease;
}
.carrusel-puntos button.activo { width: 26px; border-radius: 999px; background: #fff; }
.carrusel-puntos button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Sin animación para quien la haya desactivado en su sistema */
@media (prefers-reduced-motion: reduce) {
    .carrusel-pista { transition: none; }
}

.seccion { margin: 44px 0; }
.seccion-cabecera { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.seccion-cabecera h2 { margin: 0; }

.ventajas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 28px 0; }
.ventaja {
    border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 18px; background: var(--fondo-suave);
}
.ventaja strong { display: block; font-size: .95rem; }
.ventaja span { font-size: .85rem; color: var(--tinta-suave); }

/* --- Rejilla de productos ------------------------------------------ */

.rejilla-productos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.tarjeta-producto {
    border: 1px solid var(--borde); border-radius: var(--radio); background: #fff;
    overflow: hidden; display: flex; flex-direction: column; position: relative;
    transition: box-shadow .15s ease, transform .15s ease;
}
.tarjeta-producto:hover { box-shadow: var(--sombra); transform: translateY(-2px); }
.tarjeta-producto .figura {
    aspect-ratio: 4 / 3; background: var(--fondo-suave);
    display: grid; place-items: center; overflow: hidden;
}
.tarjeta-producto .figura img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-producto .sin-imagen { color: #b6c2ce; font-size: 2rem; font-weight: 700; }
.tarjeta-producto .cuerpo { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tarjeta-producto .marca { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); }
.tarjeta-producto .nombre { font-size: .95rem; font-weight: 600; color: var(--tinta); }
.tarjeta-producto .nombre:hover { color: var(--acento); text-decoration: none; }
.tarjeta-producto .precios { margin-top: auto; display: flex; align-items: baseline; gap: 8px; }
.tarjeta-producto .precio { font-size: 1.15rem; font-weight: 700; }
.tarjeta-producto .precio-antes { font-size: .85rem; color: var(--tinta-suave); text-decoration: line-through; }

.etiqueta {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    background: var(--oferta); color: #fff; font-size: .72rem; font-weight: 700;
    padding: 3px 8px; border-radius: 999px;
}
.etiqueta-agotado { background: var(--tinta-suave); }

/* --- Catálogo ------------------------------------------------------- */

.catalogo { display: grid; grid-template-columns: 250px 1fr; gap: 28px; margin: 24px 0 48px; }

.filtros {
    border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px;
    align-self: start; position: sticky; top: 90px;
}
.filtros h3 { font-size: .95rem; }
.filtros-grupo { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--borde); }
.filtros-grupo:last-of-type { border-bottom: 0; }
.filtros ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; }
.filtros ul ul { padding-left: 14px; margin-top: 6px; }
.filtros a { color: var(--tinta); }
.filtros a.activo { color: var(--acento); font-weight: 600; }
.rango { display: flex; gap: 8px; }

.barra-catalogo {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.barra-catalogo .conteo { font-size: .88rem; color: var(--tinta-suave); }

.vacio {
    border: 1px dashed var(--borde); border-radius: var(--radio);
    padding: 48px 24px; text-align: center; color: var(--tinta-suave);
}

/* --- Paginación ----------------------------------------------------- */

.paginacion { display: flex; gap: 6px; justify-content: center; margin: 32px 0; flex-wrap: wrap; }
.paginacion a, .paginacion span {
    border: 1px solid var(--borde); border-radius: 8px; padding: 7px 13px;
    font-size: .9rem; color: var(--tinta);
}
.paginacion .actual { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }
.paginacion .inhabilitado { opacity: .4; }

/* --- Ficha de producto ---------------------------------------------- */

.migas { font-size: .85rem; color: var(--tinta-suave); margin: 18px 0; }
.migas a { color: var(--tinta-suave); }

.ficha { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; margin-bottom: 48px; }
.galeria .principal {
    border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden;
    aspect-ratio: 1; background: var(--fondo-suave); display: grid; place-items: center;
}
.galeria .principal img { width: 100%; height: 100%; object-fit: cover; }
.galeria .miniaturas { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.galeria .miniaturas img {
    width: 68px; height: 68px; object-fit: cover; border-radius: 8px;
    border: 1px solid var(--borde); cursor: pointer;
}
.galeria .miniaturas img.activa { border-color: var(--acento); outline: 1px solid var(--acento); }

.ficha .precio-actual { font-size: 2rem; font-weight: 700; }
.ficha .precio-anterior { color: var(--tinta-suave); text-decoration: line-through; margin-left: 10px; }
.ficha .disponibilidad { font-size: .9rem; font-weight: 600; }
.disponible { color: var(--exito); }
.agotado { color: var(--error); }

.opciones-variantes { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones-variantes label {
    border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 8px 14px; cursor: pointer; font-size: .9rem;
}
.opciones-variantes input { position: absolute; opacity: 0; }
.opciones-variantes input:checked + span { font-weight: 700; }
.opciones-variantes label:has(input:checked) { border-color: var(--acento); background: #eff6ff; }

.selector-cantidad { display: inline-flex; align-items: center; border: 1px solid var(--borde); border-radius: var(--radio); }
.selector-cantidad button { border: 0; background: none; width: 38px; height: 38px; font-size: 1.1rem; cursor: pointer; }
.selector-cantidad input { width: 52px; border: 0; text-align: center; font-size: .95rem; }

.datos-producto { border-top: 1px solid var(--borde); margin-top: 20px; padding-top: 16px; font-size: .9rem; }
.datos-producto div { display: flex; justify-content: space-between; padding: 5px 0; }
.datos-producto span:first-child { color: var(--tinta-suave); }

.estrellas { color: #f59e0b; letter-spacing: 1px; }

.resena { border-bottom: 1px solid var(--borde); padding: 14px 0; }
.resena:last-child { border-bottom: 0; }
.resena .meta { font-size: .82rem; color: var(--tinta-suave); }

/* --- Carrito y checkout --------------------------------------------- */

.layout-carro { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; margin: 24px 0 48px; }

.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th {
    text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--tinta-suave); border-bottom: 1px solid var(--borde); padding: 10px 12px;
}
.tabla td { border-bottom: 1px solid var(--borde); padding: 12px; vertical-align: middle; }
.tabla .num { text-align: right; }

.linea-producto { display: flex; gap: 12px; align-items: center; }
.linea-producto img { width: 62px; height: 62px; object-fit: cover; border-radius: 8px; border: 1px solid var(--borde); }

.resumen {
    border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px;
    position: sticky; top: 90px; background: #fff;
}
.resumen h3 { margin-top: 0; }
.resumen dl { margin: 0 0 14px; font-size: .92rem; }
.resumen dl div { display: flex; justify-content: space-between; padding: 6px 0; }
.resumen .total {
    border-top: 1px solid var(--borde); margin-top: 8px; padding-top: 12px;
    font-size: 1.15rem; font-weight: 700;
}
.resumen .descuento { color: var(--exito); }

.metodo-envio {
    display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--borde);
    border-radius: var(--radio); padding: 12px; margin-bottom: 8px; cursor: pointer;
}
.metodo-envio:has(input:checked) { border-color: var(--acento); background: #eff6ff; }
.metodo-envio small { color: var(--tinta-suave); }

/* Un despacho que no llega se muestra igual, apagado y con el motivo: esconderlo
   deja al cliente preguntándose por qué desapareció la opción que vio antes. */
.metodo-envio.no-disponible { opacity: .55; cursor: not-allowed; background: var(--fondo-suave, #f8fafc); }
.metodo-envio.no-disponible em { font-style: normal; color: var(--tinta-suave); }

/* --- Resultado del pago ---------------------------------------------
   Las tres pantallas de vuelta de Mercado Pago comparten forma: un icono
   grande, el título, los datos del pago y las salidas. Cambia el color, que es
   lo que se lee antes de leer. */
.resultado-pago { text-align: center; max-width: 620px; margin: 0 auto; }
.resultado-pago h1 { margin: 10px 0 8px; font-size: 1.5rem; }
.resultado-pago > p { margin: 0 auto; max-width: 46ch; color: var(--tinta-suave); }
.resultado-icono { font-size: 2.6rem; line-height: 1; }
.resultado-ok     { border-color: var(--exito); background: #f0fdf4; }
.resultado-error  { border-color: var(--error); background: #fef2f2; }
.resultado-espera { border-color: #fcd34d; background: #fffbeb; }

.resultado-datos { margin: 20px 0 0; text-align: left; font-size: .88rem; }
.resultado-datos > div {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.resultado-datos span { color: var(--tinta-suave); }
.resultado-datos strong { text-align: right; word-break: break-all; }

.resultado-acciones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 20px; }
.resultado-nota { font-size: .82rem; color: var(--tinta-suave); margin: 16px auto 0; max-width: 52ch; }

/* --- Comprobante ------------------------------------------------------
   Se ve en pantalla como una hoja y se imprime como una hoja: sin menú, sin
   pie y sin botones, que es justo lo que sobra en el papel. */
.comprobante { max-width: 820px; margin: 0 auto; border: 1px solid var(--borde); border-radius: var(--radio); padding: 28px; background: #fff; }
.comprobante-cabecera { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 2px solid var(--borde); }
.comprobante-tienda { font-size: 1.15rem; }
.comprobante-folio { text-align: right; }
.comprobante-folio span { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); }
.comprobante-folio strong { font-size: 1.15rem; }
.comprobante-folio small { display: block; color: var(--tinta-suave); }
.comprobante-partes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; margin: 20px 0; }
.comprobante-partes h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); margin: 0 0 4px; }
.comprobante-partes p { margin: 0; font-size: .88rem; line-height: 1.5; }
.comprobante-totales { display: flex; justify-content: flex-end; margin-top: 14px; }
.comprobante-totales dl { min-width: 260px; margin: 0; }
.comprobante-nota { font-size: .76rem; color: var(--tinta-suave); margin-top: 18px; border-top: 1px dashed var(--borde); padding-top: 12px; }
.comprobante-acciones { display: flex; gap: 8px; margin-top: 18px; }

@media print {
    .cabecera, .pie, .avisos, .comprobante-acciones, .barra-mantencion { display: none !important; }
    body { background: #fff; }
    main { padding: 0 !important; max-width: none !important; }
    .comprobante { border: 0; padding: 0; max-width: none; }
    .tabla th, .tabla td { padding: 6px 4px; }
}

/* El aviso del despacho en el carrito: el emoji hace de viñeta y el peso queda
   en una segunda línea, más chica, porque es un dato de apoyo. */
.aviso-envio {
    display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline;
    font-size: .85rem; line-height: 1.45; color: var(--tinta-suave);
    background: #f8fafc; border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 10px 12px; margin: 0 0 16px;
}
.aviso-envio > span[aria-hidden] { font-size: 1.15rem; line-height: 1; }
.aviso-envio small { flex-basis: 100%; padding-left: 26px; font-size: .78rem; opacity: .85; }

.aviso-suave {
    font-size: .85rem; color: var(--tinta-suave); background: #fffbeb;
    border: 1px solid #fde68a; border-radius: var(--radio); padding: 10px 12px; margin: 0 0 10px;
}

.pasos { display: flex; gap: 10px; font-size: .85rem; color: var(--tinta-suave); margin: 20px 0; }
.pasos span.activo { color: var(--acento); font-weight: 700; }

.bloque {
    border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 20px; margin-bottom: 18px;
}
.bloque h3 { margin-top: 0; }

.estado {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: .78rem; font-weight: 600; border: 1px solid;
}
.estado-pendiente  { background: #fff7ed; border-color: #fed7aa; color: var(--alerta); }
.estado-pagado     { background: #ecfdf5; border-color: #a7f3d0; color: var(--exito); }
.estado-preparando { background: #eff6ff; border-color: #bfdbfe; color: var(--acento-fuerte); }
.estado-enviado    { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
.estado-entregado  { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.estado-anulado    { background: #fef2f2; border-color: #fecaca; color: var(--error); }

.linea-tiempo { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--borde); }
.linea-tiempo li { position: relative; padding: 0 0 18px 20px; font-size: .9rem; }
.linea-tiempo li::before {
    content: ''; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px;
    border-radius: 50%; background: var(--acento); border: 2px solid #fff;
}
.linea-tiempo .meta { font-size: .8rem; color: var(--tinta-suave); }

/* --- Cuenta --------------------------------------------------------- */

.layout-cuenta { display: grid; grid-template-columns: 220px 1fr; gap: 28px; margin: 24px 0 48px; }
.menu-cuenta { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.menu-cuenta a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--tinta); font-size: .92rem; }
.menu-cuenta a:hover { background: var(--fondo-suave); text-decoration: none; }
.menu-cuenta a.activo { background: var(--acento); color: #fff; font-weight: 600; }

.caja-acceso {
    max-width: 420px; margin: 48px auto; border: 1px solid var(--borde);
    border-radius: var(--radio); padding: 28px; box-shadow: var(--sombra);
}

/* --- Pie ------------------------------------------------------------ */

.pie { background: var(--tinta); color: #94a3b8; margin-top: 56px; padding: 44px 0 24px; font-size: .9rem; }
.pie a { color: #cbd5e1; }
.pie .columnas { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.pie h4 { color: #fff; font-size: .95rem; }
.pie-marca { display: flex; align-items: center; gap: 10px; }
.pie-marca img {
    height: 38px; width: auto; flex: none;
    /* La pastilla es por el fondo blanco del archivo: sin ella, el logo deja un
       rectángulo recortado sobre el azul del pie. */
    background: #fff; border-radius: 8px; padding: 3px;
}
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pie .legal {
    border-top: 1px solid #253243; margin-top: 32px; padding-top: 18px;
    display: flex; justify-content: space-between; gap: 16px; font-size: .84rem; flex-wrap: wrap;
}

/* --- Responsive ----------------------------------------------------- */

@media (max-width: 1000px) {
    .rejilla-productos { grid-template-columns: repeat(3, 1fr); }
    .ventajas { grid-template-columns: repeat(2, 1fr); }
    .catalogo, .layout-carro, .layout-cuenta { grid-template-columns: 1fr; }
    .filtros, .resumen { position: static; }
    .ficha { grid-template-columns: 1fr; gap: 24px; }
    .pie .columnas { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .rejilla-productos { grid-template-columns: repeat(2, 1fr); }
    .cabecera .contenedor { flex-wrap: wrap; gap: 12px; }
    .buscador { order: 3; max-width: none; flex-basis: 100%; }
    .carrusel-slide { padding: 36px 24px 46px; min-height: 250px; }
    .carrusel-slide.slide-producto { flex-direction: column; gap: 20px; padding: 32px 22px 48px; }
    .carrusel-figura { flex: none; width: 100%; max-width: none; aspect-ratio: 16 / 9; }
    .carrusel-precios strong { font-size: 1.5rem; }
    .carrusel-texto h1 { font-size: 1.7rem; }
    .carrusel-texto p { font-size: .95rem; }
    .carrusel-flecha { width: 34px; height: 34px; font-size: 1.2rem; }
    .carrusel-flecha.anterior { left: 8px; }
    .carrusel-flecha.siguiente { right: 8px; }
    .rejilla-campos { grid-template-columns: 1fr; }
    /* La tabla se vuelve una lista de fichas. Cada celda lleva su rótulo al
       lado —del `data-etiqueta` del HTML—: sin él quedaba una columna de
       números sueltos donde nadie sabe cuál es el precio y cuál el subtotal. */
    .tabla thead { display: none; }
    .tabla tbody tr { display: block; border-bottom: 1px solid var(--borde); padding: 12px 0; }
    .tabla td { display: flex; justify-content: space-between; gap: 14px; border: 0; padding: 3px 0; text-align: right; }
    .tabla td[data-etiqueta]::before {
        content: attr(data-etiqueta);
        color: var(--tinta-suave); font-size: .82rem; font-weight: 500; text-align: left;
    }
    .tabla td:first-child { display: block; text-align: left; margin-bottom: 4px; }
    .pie .columnas { grid-template-columns: 1fr; }
}

/* --- Cotizador público ------------------------------------------------- */
.campo-error { display: block; margin-top: 5px; font-size: .82rem; color: var(--error); }

.cotizar-ok { max-width: 60ch; }

.cotizar-entrega { display: grid; gap: 10px; }

.cotizar-selector { display: flex; gap: 10px; align-items: flex-end; }
.cotizar-selector .boton { flex: none; }
.cotizar-vista {
    flex: none; width: 46px; height: 46px; object-fit: cover;
    border: 1px solid var(--borde); border-radius: 8px; background: var(--fondo, #f4f6fa);
}

.cotizar-lineas { width: 100%; border-collapse: collapse; margin-top: 14px; }
.cotizar-lineas th {
    text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em;
    color: var(--tinta-suave); padding: 6px 8px; border-bottom: 1px solid var(--borde);
}
.cotizar-lineas th.num, .cotizar-lineas td.num { text-align: right; }
.cotizar-lineas td { padding: 8px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.cotizar-lineas input[type="number"] { width: 72px; text-align: right; }
.cotizar-item { display: flex; align-items: center; gap: 10px; }
.cotizar-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex: none; }
.cotizar-item small { color: var(--tinta-suave); }
.cotizar-quitar {
    border: 0; background: none; color: var(--error); font-size: 1.2rem; line-height: 1;
    cursor: pointer; padding: 2px 6px; border-radius: 6px;
}
.cotizar-quitar:hover { background: #fef2f2; }
.cotizar-vacio { color: var(--tinta-suave); font-size: .9rem; margin-top: 12px; }

/* Campo trampa: fuera de la vista pero accesible al bot que rellena todo. */
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.campo-captcha { margin: 14px 0; }

/* =====================================================================
   Refresco de interfaz — más profundidad, jerarquía y ganas de comprar
   (sólo estilos; no cambia clases ni comportamiento)
   ===================================================================== */

/* --- Tipografía y foco general ------------------------------------- */
h1 { font-size: 2.05rem; font-weight: 800; letter-spacing: -.022em; }
h2 { font-weight: 750; letter-spacing: -.015em; }
:where(a, button, input, select, textarea):focus-visible { outline: none; box-shadow: var(--anillo); border-radius: 8px; }

/* --- Botones con cuerpo -------------------------------------------- */
.boton {
    background: var(--acento-grad); border: 0; border-radius: 10px;
    padding: 11px 20px; font-weight: 650; letter-spacing: .01em;
    box-shadow: 0 2px 6px rgba(23, 99, 224, .28);
    transition: transform .12s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
}
.boton:hover { background: var(--acento-grad); box-shadow: 0 6px 16px rgba(23, 99, 224, .34); transform: translateY(-1px); color: #fff; }
.boton:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(23, 99, 224, .28); }
.boton:disabled { opacity: .45; box-shadow: none; transform: none; }
.boton-secundario {
    background: #fff; color: var(--tinta); border: 1px solid var(--borde); box-shadow: var(--sombra-sm);
}
.boton-secundario:hover { background: #fff; color: var(--acento-fuerte); border-color: #c7d6ef; box-shadow: var(--sombra); }
.boton-chico { padding: 9px 14px; }

/* --- Encabezado y navegación --------------------------------------- */
.cabecera { box-shadow: 0 1px 0 var(--borde), 0 6px 18px rgba(16, 32, 48, .04); }
.logo { display: inline-flex; align-items: center; gap: 9px; flex: none; }
/* El cuadradito degradado era el sustituto del logo mientras no había uno.
   Con la imagen puesta sobra: dos marcas juntas compiten y ninguna se lee. */
.buscador input { border-radius: 999px 0 0 999px; padding-left: 18px; }
.buscador button { border-radius: 0 999px 999px 0; background: var(--acento-grad); }
.buscador button:hover { filter: brightness(1.05); }
.chip-carrito { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--borde); background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.chip-carrito:hover { border-color: #c7d6ef; box-shadow: var(--sombra-sm); text-decoration: none; }
.chip-carrito .cuenta { background: var(--oferta-grad); }

.nav-categorias { background: #fff; box-shadow: inset 0 -1px 0 var(--borde); }
.nav-categorias a { position: relative; font-weight: 550; border-radius: 8px; margin: 4px 0; transition: color .12s ease, background .12s ease; }
.nav-categorias > .contenedor > ul > li > a::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px;
    background: var(--acento); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .18s ease;
}
.nav-categorias > .contenedor > ul > li:hover > a::after { transform: scaleX(1); }
.nav-categorias li:hover > a { color: var(--acento); }
.submenu { border-radius: 14px; box-shadow: var(--sombra-lg); }

/* --- Cabecera de sección con acento -------------------------------- */
.seccion-cabecera h2 { position: relative; padding-left: 14px; }
.seccion-cabecera h2::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 5px; height: 1.05em; border-radius: 3px; background: var(--acento-grad);
}
.seccion-cabecera > a {
    font-size: .86rem; font-weight: 650; color: var(--acento-fuerte);
    background: var(--acento-suave); padding: 7px 14px; border-radius: 999px; transition: background .15s ease;
}
.seccion-cabecera > a:hover { background: #dbe7fd; text-decoration: none; }

/* --- Carrusel / hero más rico -------------------------------------- */
.carrusel-ventana { border-radius: var(--radio-lg); box-shadow: var(--sombra-lg); }
.carrusel-slide.slide-producto {
    background: var(--hero-grad);
    position: relative;
}
.carrusel-slide.slide-producto::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(60% 80% at 85% 30%, var(--hero-brillo), transparent 70%);
}
.carrusel-texto { position: relative; z-index: 1; }
.carrusel-texto .gancho { background: rgba(255, 255, 255, .16); backdrop-filter: blur(2px); }
.carrusel-texto h1 { font-size: 2.6rem; text-shadow: 0 2px 20px rgba(0, 0, 0, .25); }
.carrusel-figura { position: relative; z-index: 1; border-radius: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.carrusel-precios strong { font-size: 2.1rem; }
.carrusel-texto .boton, .slide-producto .carrusel-acciones .boton:not(.boton-contorno) {
    background: #fff; color: var(--acento-fuerte); box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}
.carrusel-texto .boton:hover, .slide-producto .carrusel-acciones .boton:not(.boton-contorno):hover { background: #fff; color: var(--acento-fuerte); transform: translateY(-1px); }

/* --- Ventajas como fila de confianza ------------------------------- */
.ventajas { gap: 14px; margin: 30px 0; }
.ventaja {
    display: flex; align-items: center; gap: 13px; background: #fff;
    border: 1px solid var(--borde); border-radius: 14px; padding: 16px 18px;
    box-shadow: var(--sombra-sm); transition: transform .15s ease, box-shadow .15s ease;
}
.ventaja:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.ventaja::before {
    content: attr(data-icono); flex: none; width: 42px; height: 42px; border-radius: 12px;
    display: grid; place-items: center; font-size: 1.25rem;
    background: var(--acento-suave); box-shadow: inset 0 0 0 1px #dbe7fd;
}
.ventaja strong { font-size: .92rem; }

/* --- Tarjetas de producto con vida --------------------------------- */
.rejilla-productos { gap: 22px; }
.tarjeta-producto {
    border: 1px solid var(--borde); border-radius: 16px; box-shadow: var(--sombra-sm);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.tarjeta-producto:hover { box-shadow: var(--sombra-lg); transform: translateY(-4px); border-color: #d7e2f4; }
.tarjeta-producto .figura { aspect-ratio: 1 / 1; background: #fff; }
.tarjeta-producto .figura img { transition: transform .35s ease; }
.tarjeta-producto:hover .figura img { transform: scale(1.05); }
.tarjeta-producto .cuerpo { padding: 15px 16px 16px; gap: 7px; }
.tarjeta-producto .nombre {
    line-height: 1.35; min-height: 2.7em; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tarjeta-producto .precio { font-size: 1.3rem; letter-spacing: -.02em; }
.tarjeta-producto .precios:has(.precio-antes) .precio { color: var(--oferta); }
.tarjeta-producto form { margin-top: 12px; }
.tarjeta-producto .boton-bloque { border-radius: 10px; }
/* El CTA se insinúa y toma fuerza al pasar por la tarjeta */
.tarjeta-producto .boton:not(:disabled) { background: #fff; color: var(--acento-fuerte); border: 1px solid #cadaf5; box-shadow: none; }
.tarjeta-producto:hover .boton:not(:disabled) { background: var(--acento-grad); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(23, 99, 224, .3); }

.etiqueta { background: var(--oferta-grad); box-shadow: 0 4px 10px rgba(224, 52, 43, .35); padding: 4px 10px; font-size: .74rem; letter-spacing: .02em; }
.etiqueta-agotado { background: #64748b; box-shadow: none; }

/* --- Tarjeta de categoría (portada): imagen con rótulo encima ------- */
.seccion:has(> .seccion-cabecera h2) a.tarjeta-producto { text-decoration: none; }
a.tarjeta-producto { position: relative; }
a.tarjeta-producto .figura { aspect-ratio: 4 / 3; }
a.tarjeta-producto .cuerpo { gap: 4px; }
a.tarjeta-producto .nombre { min-height: 0; font-size: 1rem; }

/* --- Formularios: foco con anillo ---------------------------------- */
.campo input:focus, .campo select:focus, .campo textarea:focus,
.buscador input:focus { outline: none; border-color: var(--acento); box-shadow: var(--anillo); }
.metodo-envio { transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.metodo-envio:hover { border-color: #c7d6ef; box-shadow: var(--sombra-sm); }
.metodo-envio:has(input:checked) { box-shadow: var(--anillo); }

/* --- Ficha de producto: precio protagonista ------------------------ */
.ficha .precio-actual { font-size: 2.3rem; letter-spacing: -.025em; }
.galeria .principal { border-radius: var(--radio-lg); box-shadow: var(--sombra); }
.resumen, .filtros { border-radius: 16px; box-shadow: var(--sombra-sm); }

/* --- Cajas y avisos ------------------------------------------------- */
.bloque { border-radius: 16px; box-shadow: var(--sombra-sm); }
.aviso { border-radius: 12px; box-shadow: var(--sombra-sm); }

/* --- Pie de foco en móvil ------------------------------------------ */
@media (max-width: 720px) {
    h1 { font-size: 1.7rem; }
    .carrusel-texto h1 { font-size: 1.9rem; }
    .ventajas { grid-template-columns: 1fr 1fr; }
}
.ventaja-texto { display: flex; flex-direction: column; min-width: 0; }
.ventaja-texto strong { font-size: .92rem; }
.ventaja-texto span { font-size: .83rem; color: var(--tinta-suave); }

/* --- Aviso de consentimiento (Ley 21.719) -------------------------- */
.consentimiento {
    position: fixed; inset: auto 0 0 0; z-index: 9999; padding: 16px;
    display: flex; justify-content: center;
    background: linear-gradient(to top, rgba(15, 23, 42, .18), transparent);
}
.consentimiento[hidden] { display: none; }
.consentimiento-caja {
    width: 100%; max-width: var(--ancho); background: #fff;
    border: 1px solid var(--borde); border-radius: var(--radio-lg);
    box-shadow: var(--sombra-lg); padding: 22px 24px;
}
.consentimiento-titulo { margin: 0 0 8px; font-size: 1.15rem; font-weight: 750; }
.consentimiento-texto { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--tinta-suave); }
.consentimiento-texto a { color: var(--acento); text-decoration: underline; }
.consentimiento-categorias, .consentimiento-btn--guardar { display: none; }
.consentimiento--panel .consentimiento-categorias { display: grid; gap: 10px; margin: 16px 0 4px; }
.consentimiento--panel .consentimiento-btn--guardar { display: inline-block; }
.consentimiento--panel .consentimiento-btn--configurar { display: none; }
.consentimiento-categoria { border: 1px solid var(--borde); border-radius: 12px; padding: 11px 13px; background: var(--fondo-suave); }
.consentimiento-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: .85rem; line-height: 1.5; color: var(--tinta-suave); }
.consentimiento-check input { margin-top: 3px; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--acento); }
.consentimiento-check input:disabled { cursor: not-allowed; }
.consentimiento-check strong { display: block; color: var(--tinta); }
.consentimiento-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.consentimiento-btn {
    flex: 1 1 170px; padding: 11px 18px; border: 1px solid var(--borde);
    border-radius: 10px; background: #fff; color: var(--tinta);
    font-size: .9rem; font-weight: 650; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s;
}
.consentimiento-btn:hover { background: var(--fondo-suave); border-color: #c7d6ef; }
.consentimiento-btn--principal { background: var(--acento-grad); border-color: transparent; color: #fff; box-shadow: 0 2px 6px rgba(23,99,224,.28); }
.consentimiento-btn--principal:hover { color: #fff; transform: translateY(-1px); }
.consentimiento-enlace { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.consentimiento-enlace:hover { text-decoration: underline; }
@media (max-width: 640px) {
    .consentimiento { padding: 10px; }
    .consentimiento-caja { padding: 16px; }
    .consentimiento-btn { flex: 1 1 100%; }
}

/* --- Páginas legales ----------------------------------------------- */
.pagina-legal { max-width: 780px; margin: 24px auto 60px; }
.pagina-legal .entradilla { font-size: 1.05rem; color: var(--tinta-suave); margin-bottom: 28px; }
.pagina-legal h2 { margin-top: 32px; font-size: 1.2rem; }
.pagina-legal ul { padding-left: 20px; line-height: 1.7; }
.pagina-legal li { margin-bottom: 4px; }
.pagina-legal-fecha { margin-top: 32px; font-size: .85rem; color: var(--tinta-suave); }

/* =====================================================================
   El sitio en el teléfono
   =====================================================================
   Todo lo de aquí abajo corrige cosas que en escritorio funcionan y en un
   ancho de 400px no: menús que se despliegan enteros, galerías que apilan
   miniaturas, filtros que empujan los productos fuera de la pantalla.
   Va al final del archivo para ganarle a las reglas de arriba sin tener que
   subir la especificidad de cada una.
   ===================================================================== */

/* --- La hamburguesa y su cajón ---------------------------------------- */

.hamburguesa {
    display: none; /* sólo en móvil */
    flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 0 9px;
    border: 1px solid var(--borde); border-radius: 10px;
    background: var(--fondo); cursor: pointer; flex: none;
}
.hamburguesa span { display: block; height: 2px; background: var(--tinta); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* El velo apaga la página de atrás: sin él, el cajón parece flotar sobre un
   contenido que sigue invitando a tocarlo. */
.menu-fondo {
    position: fixed; inset: 0; z-index: 45;
    background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px);
    opacity: 0; transition: opacity .25s ease;
}
.menu-fondo.visible { opacity: 1; }

.menu-movil {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
    width: min(86vw, 340px); background: var(--fondo);
    display: flex; flex-direction: column;
    box-shadow: 0 0 40px rgba(15, 23, 42, .25);
    transform: translateX(-100%); transition: transform .25s ease;
    overscroll-behavior: contain;
}
.menu-movil.abierto { transform: none; }

.menu-movil-cabecera {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 18px; border-bottom: 1px solid var(--borde); flex: none;
}
.menu-movil-cabecera strong { font-size: 1.05rem; }
.menu-cerrar {
    border: 0; background: none; font-size: 1.7rem; line-height: 1;
    color: var(--tinta-suave); cursor: pointer; padding: 0 6px;
}

/* El cuerpo es lo único que hace scroll: la cabecera del cajón queda fija y
   el botón de cerrar siempre a mano, aunque la lista sea larga. */
.menu-movil-cuerpo { flex: 1; overflow-y: auto; padding: 10px 0 28px; -webkit-overflow-scrolling: touch; }

.menu-movil a { display: block; color: var(--tinta); }
.menu-movil a:hover { text-decoration: none; }

/* 46px de alto: es el mínimo que se acierta con el pulgar sin apuntar. */
.menu-enlace, .menu-destacado, .menu-grupo summary, .menu-grupo a {
    padding: 13px 18px; font-size: .95rem; line-height: 1.3;
}
.menu-destacado { font-weight: 700; color: var(--acento) !important; }
.menu-enlace:active, .menu-grupo a:active { background: var(--fondo-suave); }

.menu-grupo summary {
    display: flex; align-items: center; justify-content: space-between;
    font-weight: 600; cursor: pointer; list-style: none;
}
.menu-grupo summary::-webkit-details-marker { display: none; }
.menu-grupo summary::after {
    content: '›'; font-size: 1.3rem; color: var(--tinta-suave);
    transition: transform .2s ease; line-height: 1;
}
.menu-grupo[open] summary::after { transform: rotate(90deg); }
.menu-grupo[open] { background: var(--fondo-suave); }
.menu-grupo a { padding-left: 34px; font-size: .92rem; color: var(--tinta-suave); }

.menu-movil hr { border: 0; border-top: 1px solid var(--borde); margin: 10px 18px; }
.menu-telefono { padding: 13px 18px; font-weight: 600; }

/* --- La galería del producto, en carrusel ----------------------------- */

/* En escritorio se ve una foto a la vez: la que las miniaturas marcan. La
   primera vale como marcada mientras el JavaScript no diga otra cosa, para que
   sin él la ficha no aparezca sin imagen. */
.galeria-pista > .principal { display: none; }
.galeria-pista > .principal:first-child,
.galeria-pista > .principal.activa { display: grid; }
/* Cuando el JavaScript ya marcó una, la primera deja de mostrarse por serlo.
   `:has()` mira hacia dentro, que es lo que hace falta acá: sin él la primera
   foto quedaría visible al lado de la elegida. */
.galeria-pista:has(> .principal.activa) > .principal:first-child:not(.activa) { display: none; }
.galeria-puntos { display: none; }

/* --- El catálogo: categorías en píldoras ------------------------------ */

.categorias-chips { display: none; }

/* En escritorio el plegable de filtros no pliega: se muestra entero y su
   resumen se esconde, porque ahí la barra lateral cabe y esconderla sería
   pedir un clic para ver lo que ya estaba a la vista. */
.filtros-plegable > summary { display: none; }
.filtros-plegable > .filtros-cuerpo { display: block; }

/* --- Reglas de teléfono ----------------------------------------------- */

@media (max-width: 900px) {
    .hamburguesa { display: flex; }

    /* La barra de servicio y la de categorías desaparecen: sus enlaces están
       en el cajón, y apiladas se comían la pantalla antes del primer producto. */
    .barra-superior, .nav-categorias { display: none; }

    .cabecera .contenedor { flex-wrap: wrap; gap: 10px 12px; padding-block: 10px; }
    .logo { font-size: 1.15rem; margin-right: auto; }
    /* En el teléfono el logo comparte fila con la hamburguesa y el carrito:
       más alto que esto y no queda sitio para el resto. */
    .logo img { height: 28px; }
    .acciones-cabecera { gap: 10px; margin-left: 0; }
    .solo-escritorio { display: none; }
    .chip-carrito-texto { display: none; }
    .chip-carrito::before { content: '🛒'; font-size: 1.35rem; line-height: 1; }
    .chip-carrito .cuenta { position: absolute; top: -6px; right: -10px; }
    .buscador { order: 3; flex-basis: 100%; max-width: none; }
}

@media (max-width: 640px) {
    /* --- Galería: una sola imagen a la vez, arrastrable ---------------- */
    .galeria-pista {
        display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
        gap: 8px; scrollbar-width: none; border-radius: var(--radio-lg);
    }
    .galeria-pista::-webkit-scrollbar { display: none; }
    /* Acá se ven todas: es el carrusel. Se levanta el «una sola» de escritorio. */
    .galeria-pista > .principal,
    .galeria-pista:has(> .principal.activa) > .principal:first-child:not(.activa) { display: grid; }
    .galeria-pista > * { flex: 0 0 100%; scroll-snap-align: center; margin: 0; }
    .galeria .principal { border-radius: var(--radio-lg); box-shadow: none; }

    /* Las miniaturas se van: en el teléfono se pasa la foto con el dedo, y
       una fila de cuadraditos de 68px es un blanco difícil de acertar. */
    .galeria .miniaturas { display: none; }

    .galeria-puntos { display: flex; justify-content: center; gap: 7px; margin-top: 10px; }
    .galeria-puntos button {
        width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px;
        background: var(--borde); cursor: pointer; transition: width .2s ease, background .2s ease;
    }
    .galeria-puntos button[aria-current="true"] { width: 20px; background: var(--acento); }

    /* --- Catálogo: las categorías como píldoras que se deslizan -------- */
    .categorias-chips {
        display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px;
        /* Se salen hasta el borde de la pantalla y vuelven a entrar con su
           propio padding: así la última píldora no queda cortada contra el
           margen y se ve que la fila sigue. Los 20px son los del `.contenedor`. */
        margin-inline: -20px; padding-inline: 20px;
        scrollbar-width: none; scroll-snap-type: x proximity;
    }
    .categorias-chips::-webkit-scrollbar { display: none; }
    .categorias-chips a {
        flex: none; scroll-snap-align: start;
        padding: 8px 15px; border: 1px solid var(--borde); border-radius: 999px;
        background: var(--fondo); color: var(--tinta); font-size: .88rem; white-space: nowrap;
    }
    .categorias-chips a.activo { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }

    /* El resto de los filtros se pliega: en el teléfono lo primero que hay
       que ver son los productos, no seis campos que casi nadie toca. */
    .filtros { border: 0; padding: 0; box-shadow: none; background: none; }
    .filtros-grupo-categorias { display: none; }
    .filtros-plegable > summary {
        display: flex; align-items: center; justify-content: space-between;
        padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--radio);
        background: var(--fondo); font-weight: 600; cursor: pointer; list-style: none;
    }
    .filtros-plegable > summary::-webkit-details-marker { display: none; }
    .filtros-plegable > summary::after { content: '⌄'; font-size: 1.2rem; color: var(--tinta-suave); }
    .filtros-plegable[open] > summary::after { content: '⌃'; }
    .filtros-plegable[open] > summary { border-radius: var(--radio) var(--radio) 0 0; border-bottom: 0; }
    .filtros-plegable > .filtros-cuerpo {
        border: 1px solid var(--borde); border-top: 0; border-radius: 0 0 var(--radio) var(--radio);
        padding: 14px;
    }

    .barra-catalogo { flex-wrap: wrap; gap: 10px; }
    .barra-catalogo .conteo { font-size: .84rem; }

    /* --- Carrito: cada línea, una ficha -------------------------------- */
    .tabla-carrito tbody tr {
        display: grid; grid-template-columns: 68px 1fr; gap: 4px 12px;
        padding: 14px 0; align-items: start;
    }
    .tabla-carrito td { padding: 0; }
    /* La foto manda la primera columna y ocupa el alto de la ficha. */
    .tabla-carrito .celda-producto { grid-column: 1 / -1; display: grid; grid-template-columns: 68px 1fr; gap: 12px; text-align: left; }
    .tabla-carrito .celda-producto::before { content: none; }
    .tabla-carrito .linea-producto { display: contents; }
    .tabla-carrito .linea-producto img { width: 68px; height: 68px; object-fit: cover; border-radius: 10px; }
    .tabla-carrito .celda-precio,
    .tabla-carrito .celda-cantidad,
    .tabla-carrito .celda-subtotal { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
    .tabla-carrito .celda-cantidad input { width: 84px; }
    .tabla-carrito .celda-subtotal { font-size: 1.05rem; }
    .tabla-carrito .celda-quitar { grid-column: 1 / -1; justify-content: flex-end; }
    .tabla-carrito .celda-quitar::before { content: none; }

    /* El resumen del carrito deja de ser una barra lateral encajada. */
    .resumen { padding: 16px; }

    /* Botones a lo ancho: en el teléfono un botón angosto al centro se falla. */
    .ficha .boton, .resumen .boton { width: 100%; }
}

/* --- Fechas: lo relativo delante y lo exacto en su píldora ------------- */

/* Lo que se lee primero es «hace 2 meses»; la fecha exacta va detrás, en su
   píldora, como el dato de respaldo que es. En la tienda aparece en las
   reseñas y en el seguimiento del pedido, que es donde el cliente se pregunta
   cuándo pasó algo y no en qué fecha exacta. */
.fecha-relativa { white-space: nowrap; }
.pildora-fecha {
    display: inline-block; margin-left: 5px; padding: 1px 7px;
    border: 1px solid var(--borde); border-radius: 999px;
    /* `--fondo-suave` y no `--fondo`: en la tienda el fondo es blanco y la
       píldora desaparecería sobre las tarjetas. */
    background: var(--fondo-suave); color: var(--tinta-suave);
    font-size: .72rem; vertical-align: middle;
}


/* --- El tema de temporada: cintillo, guirnalda y ambiente -----------
   Las reglas de forma van acá, con el resto del sitio; cada hoja de tema
   pone sólo sus colores y su dibujo. Sin tema nada de esto se pinta,
   porque la plantilla no imprime ni el cintillo ni la guirnalda. */

.cintillo-tema {
    background: var(--tema-cintillo, var(--acento));
    color: var(--tema-cintillo-tinta, #fff);
    text-align: center;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.4;
    padding: 10px 20px;
    letter-spacing: .01em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

/* La guirnalda cuelga bajo el cintillo. El dibujo es una imagen SVG que
   la hoja del tema pone en `--tema-guirnalda`, y se repite a lo ancho:
   una sola regla sirve para banderines, luces o murciélagos. */
.guirnalda-tema {
    height: var(--tema-guirnalda-alto, 0);
    background-image: var(--tema-guirnalda, none);
    background-repeat: repeat-x;
    background-position: top center;
    position: relative;
    z-index: 3;
    margin-bottom: calc(0px - var(--tema-guirnalda-monta, 0px));
    pointer-events: none;
}

/* El ambiente: lo que cae o flota sobre toda la página (nieve, hojas).
   Va en un pseudo-elemento fijo y sin puntero, así que no se interpone
   con nada de la tienda y no necesita un solo nodo en el HTML. */
body[class*="tema-"]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: var(--tema-ambiente, none);
    background-size: var(--tema-ambiente-tam, auto);
    opacity: var(--tema-ambiente-opacidad, 1);
    animation: cae-ambiente var(--tema-ambiente-ritmo, 0s) linear infinite;
}

@keyframes cae-ambiente {
    from { background-position: 0 -650px; }
    to   { background-position: var(--tema-ambiente-deriva, 0) 650px; }
}

/* Quien pidió menos movimiento no quiere nieve cayendo: el adorno se
   queda quieto, no desaparece. */
@media (prefers-reduced-motion: reduce) {
    body[class*="tema-"]::before { animation: none; }
}

/* El motivo: el dibujo del tema en pequeño, repetido, detrás de la ficha
   del producto y del recuadro de la foto. La ficha es la pantalla donde
   se decide la compra y era la única que quedaba neutra mientras el resto
   del sitio estaba de temporada.

   Va tenue a propósito —el color lo trae el propio SVG con su alfa— y
   nunca encima de la foto: el fondo del recuadro se ve alrededor de la
   imagen, no debajo, porque la imagen es opaca. */
body[class*="tema-"] .ficha {
    background-image: var(--tema-motivo, none);
    background-size: var(--tema-motivo-tam, 120px);
}
body[class*="tema-"] .galeria .principal {
    background-image: var(--tema-motivo, none);
    background-size: var(--tema-motivo-tam, 120px);
}

/* --- Compartir la ficha del producto --------------------------------------
   Cada botón lleva el color de su red: es lo que hace que se reconozcan de un
   vistazo, antes de leer el nombre.

   Los tonos son los de cada marca **oscurecidos hasta pasar contraste AA sobre
   blanco** (5:1 o más). El verde de WhatsApp o el celeste de Telegram tal como
   los publican dan 2:1 y 3:1 con texto blanco encima: se ven bien en una pantalla
   buena y desaparecen al sol, que es donde se mira un teléfono. */
.compartir { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--borde, #e5e7eb); }
.compartir-titulo {
    display: block; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--tinta-suave, #6b7280); margin-bottom: 10px;
}
.compartir-botones { display: flex; flex-wrap: wrap; gap: 8px; }
/* La segunda fila va pegada a la primera, no separada como un bloque aparte:
   son lo mismo —formas de compartir— sólo que las de abajo no van a una red. */
.compartir-otros { margin-top: 8px; }

.compartir-boton {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 13px; border-radius: 999px; border: 0;
    background: var(--marca); color: #fff; cursor: pointer;
    font: inherit; font-size: .86rem; font-weight: 600; text-decoration: none;
    transition: filter .15s ease, transform .15s ease;
}
.compartir-boton svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.compartir-boton.copiar svg, .compartir-boton.nativo svg { fill: none; }

.compartir-boton.whatsapp { --marca: #157f3c; }
.compartir-boton.facebook { --marca: #1461c9; }
.compartir-boton.telegram { --marca: #176e99; }
/* Copiar y la hoja del sistema no son de nadie: gris de tinta, para que los
   tres colores de arriba sigan significando algo. */
.compartir-boton.copiar   { --marca: #374151; }
.compartir-boton.nativo   { --marca: #374151; }

/* El hover oscurece en vez de aclarar: aclarando, el texto blanco pierde el
   contraste justo mientras el cursor está encima. */
.compartir-boton:hover { filter: brightness(.9); transform: translateY(-1px); }
.compartir-boton:active { transform: none; }
.compartir-boton:focus-visible { outline: 2px solid #111827; outline-offset: 2px; }

/* El acuse de «copiado» va en el propio botón, que es donde está mirando quien
   acaba de pulsarlo. */
.compartir-boton.copiado { --marca: #0f7a56; }

@media (max-width: 560px) {
    /* En el teléfono el nombre de la red sobra: el icono y el color alcanzan, y
       así los cinco botones caben en una fila que no se parte. */
    .compartir-boton span { display: none; }
    .compartir-boton { padding: 11px; }
    .compartir-boton svg { width: 19px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    .compartir-boton { transition: none; }
    .compartir-boton:hover { transform: none; }
}