/* ==========================================================
   M&R Soluciones Automotrices · Hoja de estilos
   ========================================================== */
:root {
    --primario: #111214;
    --acento: #f5b700;
    --acento-osc: color-mix(in srgb, var(--acento) 82%, #000);
    --grafito: #1b1d21;
    --grafito-2: #25282d;
    --gris-700: #3d424a;
    --gris-600: #5d636d;
    --gris-500: #7b828c;
    --gris-300: #c9cdd3;
    --gris-200: #e3e6ea;
    --gris-100: #f1f2f4;
    --gris-50: #f7f8f9;
    --blanco: #fff;
    --rojo: #d7322f;
    --verde: #1f9d55;
    --wa: #25d366;
    --wa-osc: #1da851;
    --radio: 12px;
    --radio-sm: 8px;
    --sombra-sm: 0 1px 2px rgba(17, 18, 20, .06), 0 2px 8px rgba(17, 18, 20, .05);
    --sombra: 0 6px 24px rgba(17, 18, 20, .08);
    --sombra-lg: 0 18px 44px rgba(17, 18, 20, .14);
    --fuente: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fuente-tit: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
    --ancho: 1280px;
    --nav-app: 64px;
    --trans: .3s cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0; font-family: var(--fuente); font-size: 16px; line-height: 1.6; color: var(--gris-700);
    background: var(--blanco); -webkit-font-smoothing: antialiased; touch-action: manipulation; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; font-size: 16px; }
h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--primario); line-height: 1.15; }
p { margin: 0 0 1em; }
[hidden], .oculto { display: none !important; }
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
.contenedor--estrecho { max-width: 920px; }
.centrado { text-align: center; }
.mt-4 { margin-top: 40px; }
.trampa { position: absolute; left: -9999px; opacity: 0; }

.ico { width: 20px; height: 20px; flex-shrink: 0; }
.ico--sm { width: 16px; height: 16px; }

/* ---------- Botones ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 26px;
    border-radius: var(--radio-sm); border: 2px solid transparent; font-weight: 700; font-size: 15px;
    letter-spacing: .02em; text-transform: uppercase; transition: var(--trans); white-space: nowrap; line-height: 1.2;
}
.btn .ico { width: 18px; height: 18px; transition: transform var(--trans); }
.btn:hover .ico:last-child:not(:first-child) { transform: translateX(3px); }
.btn--acento { background: var(--acento); color: var(--primario); }
.btn--acento:hover { background: var(--acento-osc); transform: translateY(-2px); box-shadow: 0 10px 22px color-mix(in srgb, var(--acento) 35%, transparent); }
.btn--oscuro { background: var(--primario); color: #fff; }
.btn--oscuro:hover { background: var(--grafito-2); transform: translateY(-2px); box-shadow: var(--sombra); }
.btn--borde { border-color: var(--gris-300); color: var(--primario); background: #fff; }
.btn--borde:hover { border-color: var(--primario); }
.btn--texto { background: none; color: var(--gris-600); text-transform: none; padding-inline: 8px; }
.btn--texto:hover { color: var(--rojo); }
.btn--whatsapp { background: var(--wa); color: #fff; }
.btn--whatsapp:hover { background: var(--wa-osc); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(37, 211, 102, .32); }
.btn--whatsapp .ico { width: 20px; height: 20px; }
.btn--sm { padding: 9px 16px; font-size: 13px; }
.btn--lg { padding: 16px 30px; font-size: 16px; }
.btn--bloque { width: 100%; }
.btn-icono {
    width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radio-sm); border: 1px solid var(--gris-200); background: #fff; color: var(--primario); transition: var(--trans);
}
.btn-icono:hover { background: var(--acento); border-color: var(--acento); }
.btn-icono.agregado { background: var(--verde); border-color: var(--verde); color: #fff; }

/* ---------- Barra superior ---------- */
.topbar { background: var(--primario); color: #d6d8dc; font-size: 13px; }
.topbar__in { display: flex; align-items: center; justify-content: space-between; min-height: 36px; gap: 16px; }
.topbar__texto { display: flex; align-items: center; gap: 8px; margin: 0; }
.topbar__texto .ico { width: 16px; height: 16px; color: var(--acento); }
.topbar__redes { display: flex; gap: 14px; }
.topbar__redes a { color: #d6d8dc; transition: color var(--trans); }
.topbar__redes a:hover { color: var(--acento); }
.topbar__redes .ico { width: 16px; height: 16px; }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 60; background: #fff; transition: box-shadow var(--trans); }
.cabecera.fija { box-shadow: 0 6px 24px rgba(0, 0, 0, .1); }
.cabecera__principal { border-bottom: 1px solid var(--gris-200); }
.cabecera__fila { display: flex; align-items: center; gap: 32px; min-height: 84px; transition: min-height var(--trans); }
.cabecera.fija .cabecera__fila { min-height: 70px; }
.cabecera__logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.cabecera__logo img { width: 68px; height: 68px; object-fit: contain; transition: var(--trans); }
.cabecera.fija .cabecera__logo img { width: 52px; height: 52px; }

.buscador { position: relative; flex: 1; display: flex; max-width: 620px; margin-left: auto; }
.buscador input {
    flex: 1; min-width: 0; height: 48px; padding: 0 18px; border: 2px solid var(--gris-200); border-right: 0;
    border-radius: var(--radio-sm) 0 0 var(--radio-sm); background: var(--gris-50); outline: none; transition: var(--trans);
}
.buscador input:focus { border-color: var(--primario); background: #fff; }
.buscador input::-webkit-search-cancel-button { display: none; }
.buscador button {
    width: 56px; height: 48px; border: 0; border-radius: 0 var(--radio-sm) var(--radio-sm) 0; background: var(--primario); color: #fff;
    display: flex; align-items: center; justify-content: center; transition: background var(--trans);
}
.buscador button:hover { background: var(--acento); color: var(--primario); }
.buscador__resultados {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border: 1px solid var(--gris-200);
    border-radius: var(--radio); box-shadow: var(--sombra-lg); overflow: hidden; display: none; z-index: 80;
}
.buscador__resultados.visible { display: block; }
.sugerencia { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--gris-100); transition: background var(--trans); }
.sugerencia:hover, .sugerencia.activa { background: var(--gris-50); }
.sugerencia img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--gris-200); }
.sugerencia span { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sugerencia small { color: var(--gris-500); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.sugerencia strong { color: var(--primario); font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sugerencia b { font-size: 14px; color: var(--primario); white-space: nowrap; }
.buscador__todos { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; font-weight: 600; font-size: 14px; color: var(--primario); background: var(--gris-50); }
.buscador__todos:hover { background: var(--acento); }
.buscador__vacio { padding: 18px; text-align: center; color: var(--gris-500); margin: 0; font-size: 14px; }

.cabecera__carrito { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.cabecera__carrito-ico {
    position: relative; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--gris-200); border-radius: 50%; color: var(--primario); transition: var(--trans);
}
.cabecera__carrito:hover .cabecera__carrito-ico { background: var(--acento); border-color: var(--acento); }
.cabecera__carrito-ico .ico { width: 22px; height: 22px; }
.cabecera__carrito-ico b {
    position: absolute; top: -4px; right: -4px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 11px;
    background: var(--acento); color: var(--primario); font-size: 12px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff;
}
.cabecera__carrito-ico b.pulso { animation: pulso .6s ease; }
@keyframes pulso { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.35); } }
.cabecera__carrito-txt { display: flex; flex-direction: column; line-height: 1.2; }
.cabecera__carrito-txt small { color: var(--gris-500); font-size: 13px; }
.cabecera__carrito-txt strong { color: var(--primario); font-size: 15px; }

/* Barra de navegación */
.navbar { background: var(--grafito); }
.navbar__fila { display: flex; align-items: stretch; gap: 8px; min-height: 52px; }
.navbar__cats { position: relative; }
.navbar__cats-btn {
    height: 100%; display: flex; align-items: center; gap: 10px; padding: 0 22px; border: 0; background: var(--acento);
    color: var(--primario); font-weight: 700; text-transform: uppercase; font-size: 15px; letter-spacing: .03em;
}
.navbar__cats-btn .ico--sm { transition: transform var(--trans); }
.navbar__cats.abierto .navbar__cats-btn .ico--sm { transform: rotate(180deg); }
.megamenu {
    position: absolute; top: 100%; left: 0; min-width: 760px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 32px;
    padding: 28px 30px; background: #fff; border: 1px solid var(--gris-200); border-radius: 0 0 var(--radio) var(--radio);
    box-shadow: var(--sombra-lg); opacity: 0; visibility: hidden; transform: translateY(8px); transition: var(--trans); z-index: 70;
}
.navbar__cats.abierto .megamenu, .navbar__cats:hover .megamenu { opacity: 1; visibility: visible; transform: none; }
.megamenu__col { display: flex; flex-direction: column; gap: 6px; }
.megamenu__col a { color: var(--gris-600); font-size: 15px; transition: color var(--trans), padding var(--trans); }
.megamenu__col a:hover { color: var(--primario); padding-left: 4px; }
.megamenu__col .megamenu__titulo {
    font-family: var(--fuente-tit); font-size: 18px; font-weight: 700; color: var(--primario); text-transform: uppercase;
    padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--gris-200);
}
.navbar__links { display: flex; list-style: none; margin: 0 0 0 12px; padding: 0; }
.navbar__links a {
    position: relative; height: 100%; display: flex; align-items: center; padding: 0 20px; color: #e6e7ea;
    font-weight: 600; text-transform: uppercase; font-size: 15px; letter-spacing: .04em; transition: color var(--trans);
}
.navbar__links a::after {
    content: ''; position: absolute; left: 20px; right: 20px; bottom: 0; height: 3px; background: var(--acento);
    transform: scaleX(0); transition: transform var(--trans);
}
.navbar__links a:hover, .navbar__links a.activo { color: #fff; }
.navbar__links a:hover::after, .navbar__links a.activo::after { transform: scaleX(1); }
.navbar__ofertas { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--acento); font-weight: 700; text-transform: uppercase; font-size: 15px; letter-spacing: .04em; }
.navbar__ofertas:hover { color: #fff; }

/* ---------- Slider ---------- */
.slider { position: relative; overflow: hidden; background: var(--primario); transition: height .45s ease; }
.slider__pista { display: flex; transition: transform .8s cubic-bezier(.65, 0, .25, 1); }
.slider__slide { position: relative; flex-shrink: 0; }
.slider__slide img { width: 100%; height: auto; display: block; }
.slider__texto { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; background: linear-gradient(90deg, rgba(10, 11, 13, .85) 0%, rgba(10, 11, 13, .6) 40%, rgba(10, 11, 13, .15) 75%, rgba(10, 11, 13, 0) 100%); }
.slider__caja { max-width: 620px; pointer-events: auto; color: #fff; }
.slider__caja h2 {
    font-family: var(--fuente-tit); font-style: italic; font-weight: 700; font-size: clamp(30px, 4.6vw, 64px); line-height: 1.02;
    color: #fff; text-transform: uppercase; margin-bottom: 16px; opacity: 0; transform: translateY(24px); transition: .8s .2s;
}
.slider__caja p { font-size: clamp(15px, 1.5vw, 20px); color: #d9dbdf; max-width: 520px; margin-bottom: 28px; opacity: 0; transform: translateY(24px); transition: .8s .35s; }
.slider__caja .btn { opacity: 0; transform: translateY(24px); transition: opacity .8s .5s, transform .8s .5s, background .3s; }
.slider__slide.activo .slider__caja h2, .slider__slide.activo .slider__caja p, .slider__slide.activo .slider__caja .btn { opacity: 1; transform: none; }
.slider__flecha {
    position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .35); background: rgba(17, 18, 20, .35); color: #fff; display: flex;
    align-items: center; justify-content: center; backdrop-filter: blur(4px); transition: var(--trans); z-index: 3;
}
.slider__flecha:hover { background: var(--acento); border-color: var(--acento); color: var(--primario); }
.slider__flecha--prev { left: 24px; }
.slider__flecha--next { right: 24px; }
.slider__puntos { position: absolute; bottom: 22px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; z-index: 3; }
.slider__puntos button { width: 10px; height: 10px; border-radius: 6px; border: 0; padding: 0; background: rgba(255, 255, 255, .45); transition: var(--trans); }
.slider__puntos button.activo { width: 34px; background: var(--acento); }

/* ---------- Beneficios ---------- */
.beneficios { background: #fff; border-bottom: 1px solid var(--gris-200); }
.beneficios__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.beneficio { text-align: center; padding: 32px 22px; border-right: 1px solid var(--gris-200); transition: background var(--trans); }
.beneficio:last-child { border-right: 0; }
.beneficio:hover { background: var(--gris-50); }
.beneficio__ico { display: inline-flex; color: var(--primario); margin-bottom: 12px; }
.beneficio__ico .ico { width: 38px; height: 38px; stroke-width: 1.5; transition: transform var(--trans), color var(--trans); }
.beneficio:hover .beneficio__ico .ico { transform: translateY(-4px); color: var(--acento-osc); }
.beneficio h3 { font-family: var(--fuente-tit); font-size: 20px; text-transform: uppercase; margin-bottom: 4px; }
.beneficio p { margin: 0; font-size: 15px; color: var(--gris-600); }

/* ---------- Secciones ---------- */
.seccion { padding: 88px 0; }
.seccion--compacta { padding: 48px 0 72px; }
.seccion--gris { background: var(--gris-50); }
.seccion--oscura { background: var(--primario); color: #c8cbd0; }
.titulo-seccion { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.titulo-seccion h2 { font-family: var(--fuente-tit); font-size: clamp(30px, 3.4vw, 44px); text-transform: uppercase; margin-bottom: 14px; letter-spacing: .01em; }
.titulo-seccion p { color: var(--gris-600); font-size: 17px; margin: 16px 0 0; }
.titulo-seccion__linea { display: block; width: 64px; height: 4px; margin: 0 auto; background: var(--acento); border-radius: 2px; }
.titulo-seccion__linea--izq { margin: 0 0 24px; }
.titulo-seccion--claro h2 { color: #fff; }
.titulo-seccion--claro p { color: #b6bac1; }
.titulo-bloque { font-family: var(--fuente-tit); font-size: clamp(30px, 3.2vw, 42px); text-transform: uppercase; margin-bottom: 14px; }
.titulo-pagina { font-family: var(--fuente-tit); font-size: clamp(30px, 3.4vw, 42px); text-transform: uppercase; margin-bottom: 28px; }
.texto-rico p { color: var(--gris-600); font-size: 17px; }

/* Dos columnas: texto a la izquierda, imagen a la derecha */
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.dos-col__texto .btn { margin-top: 12px; }
.dos-col__imagen { position: relative; }
.dos-col__imagen img { width: 100%; border-radius: var(--radio); box-shadow: var(--sombra-lg); position: relative; z-index: 1; }
.dos-col__imagen::before {
    content: ''; position: absolute; inset: 22px -22px -22px 22px; border: 3px solid var(--acento); border-radius: var(--radio); z-index: 0;
}

/* ---------- Categorías ---------- */
.categorias-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.categoria-card {
    display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio);
    overflow: hidden; transition: var(--trans);
}
.categoria-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-lg); border-color: var(--gris-300); }
.categoria-card__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--gris-100); }
.categoria-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.categoria-card:hover .categoria-card__img img { transform: scale(1.07); }
.categoria-card__cuerpo { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px 22px; flex: 1; }
.categoria-card__cuerpo strong { font-family: var(--fuente-tit); font-size: 22px; text-transform: uppercase; color: var(--primario); line-height: 1.15; }
.categoria-card__cuerpo small { color: var(--gris-600); font-size: 15px; }
.categoria-card__link { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; text-transform: uppercase; color: var(--primario); letter-spacing: .03em; }
.categoria-card__link .ico { width: 16px; height: 16px; color: var(--acento-osc); transition: transform var(--trans); }
.categoria-card:hover .categoria-card__link .ico, .marca-card:hover .categoria-card__link .ico { transform: translateX(4px); }

/* ---------- Tarjeta de producto ---------- */
.productos-grid { display: grid; gap: 24px; }
.productos-grid--4 { grid-template-columns: repeat(4, 1fr); }
.productos-grid--3 { grid-template-columns: repeat(3, 1fr); }
.productos-grid > div { display: flex; }
.producto-card {
    position: relative; width: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gris-200);
    border-radius: var(--radio); overflow: hidden; transition: var(--trans);
}
.producto-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-lg); border-color: var(--gris-300); }
.producto-card__img { position: relative; aspect-ratio: 1; background: var(--gris-50); overflow: hidden; display: block; }
.producto-card__img img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s ease; }
.producto-card:hover .producto-card__img img { transform: scale(1.06); }
.producto-card__badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.badge { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.4; }
.badge--oferta { background: var(--rojo); color: #fff; }
.badge--nuevo { background: var(--primario); color: var(--acento); }
.badge--agotado { background: var(--gris-600); color: #fff; }
.producto-card__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.producto-card__marca { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gris-500); }
.producto-card__nombre { font-family: var(--fuente); font-size: 17px; font-weight: 600; line-height: 1.3; margin: 4px 0 10px; }
.producto-card__nombre a:hover { color: var(--gris-600); }
.producto-card__etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.producto-card__etiquetas span { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 20px; background: var(--gris-100); color: var(--gris-700); }
.producto-card__pie { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--gris-100); }
.producto-card__precio { display: flex; flex-direction: column; line-height: 1.2; }
.producto-card__precio small { font-size: 12px; color: var(--gris-500); }
.producto-card__precio strong { font-size: 21px; font-weight: 700; color: var(--primario); }
.producto-card__precio del { font-size: 14px; color: var(--gris-500); }
.consultar { font-size: 15px !important; }

/* ---------- Carrusel en movimiento ---------- */
.carrusel { --por-vista: 4; position: relative; padding: 0 4px; }
.carrusel__ventana { overflow: hidden; margin: -16px -12px; padding: 16px 0; }
.carrusel__pista { display: flex; will-change: transform; }
.carrusel__item { flex: 0 0 calc(100% / var(--por-vista)); padding: 0 12px; display: flex; }
.carrusel__item > * { width: 100%; }
.carrusel__flecha {
    position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
    background: #fff; border: 1px solid var(--gris-200); color: var(--primario); display: flex; align-items: center; justify-content: center;
    box-shadow: var(--sombra); z-index: 5; transition: var(--trans);
}
.carrusel__flecha:hover { background: var(--acento); border-color: var(--acento); }
.carrusel__flecha--prev { left: -22px; }
.carrusel__flecha--next { right: -22px; }

/* ---------- Recuadros con ícono (centrados, sin fondo en el ícono) ---------- */
.recuadros { display: grid; gap: 24px; }
.recuadros--1 { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
.recuadros--2 { grid-template-columns: repeat(2, 1fr); }
.recuadros--3 { grid-template-columns: repeat(3, 1fr); }
.recuadros--4 { grid-template-columns: repeat(4, 1fr); }
.recuadro {
    text-align: center; padding: 40px 28px; background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio);
    transition: var(--trans); display: flex; flex-direction: column; align-items: center;
}
.recuadro:hover { transform: translateY(-6px); box-shadow: var(--sombra-lg); border-color: var(--acento); }
.recuadro__ico { display: inline-flex; justify-content: center; color: var(--primario); margin-bottom: 18px; }
.recuadro__ico .ico { width: 46px; height: 46px; stroke-width: 1.4; transition: transform var(--trans); }
.recuadro:hover .recuadro__ico .ico { transform: scale(1.1); }
.recuadro__ico--wa { color: var(--wa); }
.recuadro h3 { font-family: var(--fuente-tit); font-size: 24px; text-transform: uppercase; margin-bottom: 10px; }
.recuadro p { margin: 0; color: var(--gris-600); }
.recuadro p a:hover { color: var(--primario); text-decoration: underline; }
.recuadro--oscuro { background: var(--grafito); border-color: var(--grafito-2); }
.recuadro--oscuro h3 { color: #fff; }
.recuadro--oscuro p { color: #aeb2b9; }
.recuadro--oscuro .recuadro__ico { color: var(--acento); }

/* ---------- Marcas ---------- */
.marcas-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.marca-card {
    flex: 0 1 380px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 34px 30px;
    background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio); transition: var(--trans);
}
.marca-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-lg); }
.marca-card__logo { height: 120px; width: 100%; display: flex; align-items: center; justify-content: center; }
.marca-card__logo img { height: 110px; width: auto; max-width: 230px; object-fit: contain; }

/* Sello de distribuidor autorizado */
.sello {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px 6px 11px; border: 1px solid color-mix(in srgb, var(--acento) 70%, #000);
    border-radius: 30px; background: color-mix(in srgb, var(--acento) 14%, #fff); color: var(--primario);
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; line-height: 1.2; white-space: nowrap;
}
.sello .ico { width: 16px; height: 16px; color: color-mix(in srgb, var(--acento) 55%, #000); stroke-width: 2; }

/* Banner de la marca en el catálogo */
.marca-banner { display: flex; align-items: center; gap: 28px; padding: 24px 28px; margin-bottom: 22px; background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio); }
.marca-banner__logo { height: 92px; width: auto; max-width: 200px; object-fit: contain; flex-shrink: 0; }
.marca-banner__texto { flex: 1; min-width: 0; }
.marca-banner__texto h2 { font-family: var(--fuente-tit); font-size: 28px; text-transform: uppercase; margin: 10px 0 4px; }
.marca-banner__texto p { margin: 0; color: var(--gris-600); font-size: 15px; }
.marca-card p { color: var(--gris-600); font-size: 15px; margin: 0; }

/* ---------- Llamada a la acción (imagen de fondo a todo el ancho) ---------- */
.cta { background-size: cover; background-position: center; padding: 110px 0; color: #fff; text-align: center; }
.cta__in { max-width: 780px; }
.cta h2 { font-family: var(--fuente-tit); font-style: italic; font-size: clamp(30px, 4vw, 52px); color: #fff; text-transform: uppercase; margin-bottom: 16px; }
.cta p { color: #d7d9dd; font-size: 18px; margin-bottom: 32px; }
.cta__botones { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- Portadas de páginas internas ---------- */
.portada { background-size: cover; background-position: center; padding: 96px 0 84px; color: #fff; }
.portada__titulo { font-family: var(--fuente-tit); font-style: italic; font-size: clamp(36px, 5vw, 64px); color: #fff; text-transform: uppercase; margin-bottom: 10px; }
.portada__sub { font-size: 19px; color: #d4d6da; max-width: 640px; margin-bottom: 22px; }
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: #c5c8cd; }
.migas a:hover { color: var(--acento); }
.migas .ico { width: 14px; height: 14px; opacity: .7; }
.migas span { color: var(--acento); }
.migas-barra { background: var(--gris-50); border-bottom: 1px solid var(--gris-200); padding: 14px 0; }
.migas--oscuras { color: var(--gris-500); }
.migas--oscuras a:hover { color: var(--primario); }
.migas--oscuras span { color: var(--primario); font-weight: 600; }

/* ---------- Catálogo ---------- */
.catalogo { display: grid; grid-template-columns: 280px 1fr; gap: 36px; align-items: start; }
.filtros { position: sticky; top: 150px; background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio); padding: 6px 22px; }
.filtros__cabecera { display: none; }
.filtros__fondo { display: none; }
.filtro { padding: 20px 0; border-bottom: 1px solid var(--gris-200); }
.filtro:last-child { border-bottom: 0; }
.filtro h3 { font-family: var(--fuente-tit); font-size: 19px; text-transform: uppercase; margin-bottom: 12px; }
.filtro__lista, .filtro__lista ul { list-style: none; margin: 0; padding: 0; }
.filtro__lista ul { padding-left: 14px; border-left: 1px solid var(--gris-200); margin: 4px 0 6px 4px; }
.filtro__lista a { display: block; padding: 5px 0; color: var(--gris-600); font-size: 15px; transition: color var(--trans); }
.filtro__lista a:hover { color: var(--primario); }
.filtro__lista a.activo { color: var(--primario); font-weight: 700; }
.filtro__opciones { display: flex; flex-direction: column; gap: 4px; }
.opcion { display: flex; align-items: center; gap: 10px; padding: 5px 0; color: var(--gris-600); font-size: 15px; }
.opcion__check { width: 20px; height: 20px; border: 2px solid var(--gris-300); border-radius: 5px; display: flex; align-items: center; justify-content: center; transition: var(--trans); }
.opcion__check .ico { width: 14px; height: 14px; stroke-width: 3; opacity: 0; color: var(--primario); }
.opcion:hover .opcion__check { border-color: var(--primario); }
.opcion.activo { color: var(--primario); font-weight: 600; }
.opcion.activo .opcion__check { background: var(--acento); border-color: var(--acento); }
.opcion.activo .opcion__check .ico { opacity: 1; }
.catalogo__barra { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding: 12px 16px; border: 1px solid var(--gris-200); border-radius: var(--radio); background: #fff; }
.catalogo__btn-filtros { display: none; }
.catalogo__total { margin: 0; color: var(--gris-600); }
.catalogo__total strong { color: var(--primario); }
.catalogo__orden { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--gris-600); }
.catalogo__orden select { height: 40px; padding: 0 12px; border: 1px solid var(--gris-300); border-radius: var(--radio-sm); background: #fff; color: var(--primario); font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; background: var(--primario); color: #fff; font-size: 14px; font-weight: 500; }
.chip .ico { width: 14px; height: 14px; }
.chip:hover { background: var(--rojo); }
.chips__limpiar { font-size: 14px; color: var(--gris-600); text-decoration: underline; margin-left: 6px; }
.paginacion { display: flex; justify-content: center; gap: 8px; margin-top: 44px; }
.paginacion a { min-width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gris-200); border-radius: var(--radio-sm); font-weight: 600; color: var(--primario); transition: var(--trans); }
.paginacion a:hover { border-color: var(--primario); }
.paginacion a.activo { background: var(--primario); border-color: var(--primario); color: #fff; }
.vacio { text-align: center; padding: 60px 20px; border: 1px solid var(--gris-200); border-radius: var(--radio); background: #fff; }
.vacio__ico { display: inline-flex; color: var(--gris-500); margin-bottom: 12px; }
.vacio__ico .ico { width: 54px; height: 54px; stroke-width: 1.3; }
.vacio h2 { font-family: var(--fuente-tit); font-size: 30px; text-transform: uppercase; }
.vacio p { color: var(--gris-600); max-width: 480px; margin: 0 auto 24px; }
.vacio__botones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- Ficha de producto ---------- */
.ficha { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; margin-bottom: 56px; }
.ficha__galeria { position: sticky; top: 150px; }
.ficha__imagen { position: relative; aspect-ratio: 1; border: 1px solid var(--gris-200); border-radius: var(--radio); background: var(--gris-50); overflow: hidden; }
.ficha__imagen img { width: 100%; height: 100%; object-fit: contain; transition: opacity .3s; }
.ficha__miniaturas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; }
.ficha__miniaturas button { aspect-ratio: 1; padding: 0; border: 2px solid var(--gris-200); border-radius: var(--radio-sm); background: var(--gris-50); overflow: hidden; transition: border-color var(--trans); }
.ficha__miniaturas button img { width: 100%; height: 100%; object-fit: cover; }
.ficha__miniaturas button.activo, .ficha__miniaturas button:hover { border-color: var(--primario); }
.ficha__marca-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 16px; }
.ficha__marca { display: inline-flex; align-items: center; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gris-500); }
.ficha__marca img { height: 54px; width: auto; max-width: 120px; object-fit: contain; }
.ficha__titulo { font-family: var(--fuente-tit); font-size: clamp(30px, 3vw, 42px); text-transform: uppercase; margin-bottom: 6px; }
.ficha__sku { color: var(--gris-500); font-size: 14px; margin-bottom: 16px; }
.ficha__etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.etiqueta { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--gris-200); border-radius: 20px; font-size: 14px; font-weight: 600; color: var(--primario); }
.etiqueta .ico { width: 16px; height: 16px; color: var(--acento-osc); }
.ficha__resumen { font-size: 17px; color: var(--gris-600); }
.ficha__compra { border: 1px solid var(--gris-200); border-radius: var(--radio); padding: 24px; margin: 22px 0; background: #fff; }
.ficha__precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.ficha__precio strong { font-size: 36px; font-weight: 700; color: var(--primario); line-height: 1; }
.ficha__precio del { font-size: 18px; color: var(--gris-500); }
.ficha__ahorro { font-size: 14px; font-weight: 700; color: var(--rojo); background: color-mix(in srgb, var(--rojo) 10%, #fff); padding: 4px 10px; border-radius: 6px; }
.ficha__bloque { margin-bottom: 20px; }
.ficha__label { display: block; font-weight: 700; color: var(--primario); font-size: 14px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.presentaciones { display: flex; flex-wrap: wrap; gap: 10px; }
.presentacion input { position: absolute; opacity: 0; pointer-events: none; }
.presentacion span {
    display: flex; flex-direction: column; padding: 10px 16px; border: 2px solid var(--gris-200); border-radius: var(--radio-sm);
    font-weight: 600; color: var(--primario); cursor: pointer; transition: var(--trans); line-height: 1.3;
}
.presentacion small { font-weight: 500; color: var(--gris-500); font-size: 13px; }
.presentacion span:hover { border-color: var(--gris-500); }
.presentacion input:checked + span { border-color: var(--primario); background: var(--primario); color: #fff; }
.presentacion input:checked + span small { color: var(--acento); }
.presentacion--agotada span { opacity: .55; }
.ficha__acciones { display: flex; gap: 12px; margin-bottom: 12px; }
.ficha__wa { margin-top: 0; }
.cantidad { display: inline-flex; align-items: center; border: 2px solid var(--gris-200); border-radius: var(--radio-sm); background: #fff; flex-shrink: 0; }
.cantidad button { width: 44px; height: 48px; border: 0; background: none; color: var(--primario); display: flex; align-items: center; justify-content: center; }
.cantidad button:hover { color: var(--acento-osc); }
.cantidad input { width: 46px; height: 48px; border: 0; text-align: center; font-weight: 700; color: var(--primario); outline: none; -moz-appearance: textfield; appearance: textfield; }
.cantidad input::-webkit-outer-spin-button, .cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cantidad--sm button { width: 34px; height: 38px; }
.cantidad--sm input { width: 36px; height: 38px; }
.ficha__garantias { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ficha__garantias li { display: flex; align-items: center; gap: 12px; color: var(--gris-600); font-size: 15px; }
.ficha__garantias .ico { width: 22px; height: 22px; color: var(--primario); }

.pestanas { border: 1px solid var(--gris-200); border-radius: var(--radio); overflow: hidden; }
.pestanas__botones { display: flex; overflow-x: auto; background: var(--gris-50); border-bottom: 1px solid var(--gris-200); }
.pestanas__botones button {
    position: relative; padding: 18px 28px; border: 0; background: none; font-weight: 700; text-transform: uppercase; font-size: 15px;
    color: var(--gris-500); letter-spacing: .03em; white-space: nowrap; transition: color var(--trans);
}
.pestanas__botones button::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--acento); transform: scaleX(0); transition: transform var(--trans); }
.pestanas__botones button.activo { color: var(--primario); background: #fff; }
.pestanas__botones button.activo::after { transform: scaleX(1); }
.pestanas__panel { display: none; padding: 32px; }
.pestanas__panel.activo { display: block; animation: aparecer .4s ease; }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tabla-specs { width: 100%; border-collapse: collapse; max-width: 760px; }
.tabla-specs th, .tabla-specs td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--gris-200); }
.tabla-specs th { width: 34%; color: var(--primario); font-weight: 600; background: var(--gris-50); }
.tabla-specs td { color: var(--gris-700); }
.vehiculos-uso { display: flex; flex-wrap: wrap; gap: 14px; }
.vehiculo-uso { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 26px; border: 1px solid var(--gris-200); border-radius: var(--radio); min-width: 160px; font-weight: 600; color: var(--primario); transition: var(--trans); }
.vehiculo-uso .ico { width: 38px; height: 38px; stroke-width: 1.4; }
.vehiculo-uso:hover { border-color: var(--acento); transform: translateY(-4px); }
.nota { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--gris-600); background: var(--gris-50); border: 1px solid var(--gris-200); border-radius: var(--radio-sm); padding: 12px 14px; margin: 16px 0 0; }
.nota .ico { width: 18px; height: 18px; color: var(--acento-osc); margin-top: 2px; }

/* ---------- Formularios ---------- */
.caja { background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio); padding: 30px; margin: 0 0 24px; }
fieldset.caja { min-width: 0; }
.caja legend, .caja__titulo { font-family: var(--fuente-tit); font-weight: 700; font-size: 24px; text-transform: uppercase; color: var(--primario); display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 20px; float: left; width: 100%; }
.caja legend + * { clear: both; }
.caja__titulo { float: none; }
.caja__num { width: 32px; height: 32px; border-radius: 50%; background: var(--primario); color: var(--acento); font-family: var(--fuente); font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.caja__sub { color: var(--gris-600); }
.campos { display: grid; gap: 16px 18px; margin-bottom: 18px; }
.campos--2 { grid-template-columns: 1fr 1fr; }
.campo--completo { grid-column: 1 / -1; }
.campo label { display: block; font-weight: 600; font-size: 14px; color: var(--primario); margin-bottom: 6px; }
.campo label small { font-weight: 400; color: var(--gris-500); }
.campo input, .campo select, .campo textarea, .campo-grupo select {
    width: 100%; padding: 12px 14px; border: 1px solid var(--gris-300); border-radius: var(--radio-sm); background: #fff;
    color: var(--primario); outline: none; transition: border-color var(--trans), box-shadow var(--trans);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 30%, transparent); }
.campo textarea { resize: vertical; }
.campo-grupo { display: flex; }
.campo-grupo select { width: 96px; flex-shrink: 0; border-radius: var(--radio-sm) 0 0 var(--radio-sm); border-right: 0; background: var(--gris-50); }
.campo-grupo input { border-radius: 0 var(--radio-sm) var(--radio-sm) 0; }
.opciones-linea { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.radio, .check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; color: var(--primario); }
.radio input, .check input { width: 20px; height: 20px; accent-color: var(--primario); flex-shrink: 0; }
.radio span { padding: 2px 0; }
.check--legal { align-items: flex-start; font-size: 14px; color: var(--gris-600); margin: 8px 0 24px; }
.check--legal input { margin-top: 2px; }
.tarjetas-opcion { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tarjetas-opcion--col { grid-template-columns: 1fr; }
.tarjeta-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.tarjeta-opcion__in { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 2px solid var(--gris-200); border-radius: var(--radio); cursor: pointer; transition: var(--trans); }
.tarjeta-opcion__in > .ico { width: 28px; height: 28px; color: var(--primario); }
.tarjeta-opcion__in > span:last-child { display: flex; flex-direction: column; line-height: 1.35; }
.tarjeta-opcion__in strong { color: var(--primario); }
.tarjeta-opcion__in small { color: var(--gris-600); font-size: 14px; }
.tarjeta-opcion input:checked + .tarjeta-opcion__in { border-color: var(--primario); background: var(--gris-50); box-shadow: inset 0 0 0 1px var(--primario); }
.tarjeta-opcion__in:hover { border-color: var(--gris-500); }
.logo-pago { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; height: 34px; padding: 0 10px; border-radius: 8px; font-weight: 800; font-size: 17px; font-style: italic; letter-spacing: -.02em; }
.logo-pago--yape { background: #742284; color: #fff; }
.nota-envio { display: flex; align-items: center; gap: 8px; color: var(--gris-600); font-size: 14px; margin: 0; }
.nota-envio .ico { width: 18px; height: 18px; color: var(--verde); }
.subir-archivo { display: block; cursor: pointer; }
.subir-archivo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.subir-archivo > span { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 2px dashed var(--gris-300); border-radius: var(--radio-sm); color: var(--gris-600); font-size: 14px; transition: var(--trans); }
.subir-archivo:hover > span { border-color: var(--primario); color: var(--primario); }
.subir-archivo.cargado > span { border-style: solid; border-color: var(--verde); color: var(--verde); }

.alerta { display: flex; gap: 12px; padding: 14px 18px; border-radius: var(--radio-sm); margin-bottom: 22px; border: 1px solid; }
.alerta p { margin: 0 0 4px; }
.alerta p:last-child { margin: 0; }
.alerta > .ico { margin-top: 2px; }
.alerta--error { background: #fdf0ef; border-color: #f2c4c2; color: #9b2320; }
.alerta--ok { background: #eef8f2; border-color: #bfe3cd; color: #17683b; }
.alerta--info { background: var(--gris-50); border-color: var(--gris-200); color: var(--gris-700); }

/* ---------- Carrito ---------- */
.carrito { display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start; }
.carrito__lista { border: 1px solid var(--gris-200); border-radius: var(--radio); background: #fff; overflow: hidden; }
.carrito__cabecera, .carrito__item { display: grid; grid-template-columns: 76px 1fr 100px 120px 110px 40px; gap: 16px; align-items: center; padding: 16px 22px; }
.carrito__cabecera { background: var(--gris-50); font-size: 13px; text-transform: uppercase; font-weight: 700; letter-spacing: .05em; color: var(--gris-600); border-bottom: 1px solid var(--gris-200); }
.carrito__cabecera span:first-child { grid-column: span 2; }
.carrito__item { border-bottom: 1px solid var(--gris-100); }
.carrito__img img { width: 76px; height: 76px; object-fit: cover; border-radius: var(--radio-sm); border: 1px solid var(--gris-200); }
.carrito__datos { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.carrito__datos small { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris-500); font-weight: 700; }
.carrito__datos a { font-weight: 600; color: var(--primario); }
.carrito__datos span { font-size: 14px; color: var(--gris-600); }
.carrito__precio { color: var(--gris-700); }
.carrito__total strong { color: var(--primario); }
.carrito__etq { display: none; }
.carrito__quitar { width: 40px; height: 40px; border: 1px solid var(--gris-200); border-radius: var(--radio-sm); background: #fff; color: var(--gris-500); display: flex; align-items: center; justify-content: center; transition: var(--trans); }
.carrito__quitar:hover { color: #fff; background: var(--rojo); border-color: var(--rojo); }
.carrito__pie { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; }
.resumen { position: sticky; top: 150px; background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio); padding: 26px; }
.resumen h2 { font-family: var(--fuente-tit); font-size: 26px; text-transform: uppercase; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--gris-200); }
.resumen__fila { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; color: var(--gris-600); }
.resumen__fila strong { color: var(--primario); }
.resumen__fila span:last-child { text-align: right; }
.resumen__fila--total { margin: 12px 0 20px; padding-top: 16px; border-top: 1px solid var(--gris-200); font-size: 20px; }
.resumen__fila--total span { color: var(--primario); font-weight: 700; }
.resumen__fila--total strong { font-size: 26px; }
.resumen__envio { margin: 8px 0; padding: 14px; border-radius: var(--radio-sm); background: var(--gris-50); border: 1px solid var(--gris-200); font-size: 14px; }
.resumen__envio p { margin: 0 0 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.resumen__envio .ico { width: 18px; height: 18px; color: var(--verde); }
.resumen__barra { display: block; height: 6px; background: var(--gris-200); border-radius: 4px; overflow: hidden; }
.resumen__barra span { display: block; height: 100%; background: var(--acento); border-radius: 4px; transition: width .6s; }
.resumen__seguro { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--gris-600); }
.resumen__seguro li { display: flex; align-items: center; gap: 8px; }
.resumen__seguro .ico { width: 18px; height: 18px; color: var(--primario); }
.resumen__items { list-style: none; margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid var(--gris-200); display: grid; gap: 14px; max-height: 340px; overflow: auto; }
.resumen__items li { display: flex; align-items: center; gap: 12px; }
.resumen__img { position: relative; flex-shrink: 0; }
.resumen__img img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radio-sm); border: 1px solid var(--gris-200); }
.resumen__img b { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; border-radius: 11px; background: var(--primario); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.resumen__nombre { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; font-weight: 600; color: var(--primario); line-height: 1.3; }
.resumen__nombre small { font-weight: 400; color: var(--gris-500); }
.resumen__items strong { font-size: 14px; color: var(--primario); white-space: nowrap; }
.resumen__nota { font-size: 14px; color: var(--gris-600); margin: 14px 0 6px; }
.resumen__legal { font-size: 13px; color: var(--gris-500); margin: 0; }
.resumen__legal a { text-decoration: underline; }
.checkout { display: grid; grid-template-columns: 1fr 400px; gap: 32px; align-items: start; }
.yape { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 20px; border: 1px solid var(--gris-200); border-radius: var(--radio); background: var(--gris-50); margin-bottom: 18px; }
.yape__qr { background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio-sm); display: flex; align-items: center; justify-content: center; padding: 10px; aspect-ratio: 1; }
.yape__qr img { width: 100%; height: 100%; object-fit: contain; }
.yape__sin-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--gris-600); font-size: 14px; }
.yape__sin-qr .ico { width: 34px; height: 34px; color: #742284; }
.yape__datos h2 { font-family: var(--fuente-tit); font-size: 26px; text-transform: uppercase; }
.yape__datos p { font-size: 15px; color: var(--gris-600); }
.yape__datos dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 16px; }
.yape__datos dt { color: var(--gris-500); font-size: 14px; }
.yape__datos dd { margin: 0; font-weight: 700; color: var(--primario); }
.yape__form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.yape--pedido { background: #fff; }

/* Confirmación de pedido */
.confirmacion { text-align: center; padding: 40px 20px 32px; }
.confirmacion__ico { width: 84px; height: 84px; border-radius: 50%; border: 3px solid var(--verde); color: var(--verde); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.confirmacion__ico .ico { width: 44px; height: 44px; stroke-width: 2.4; }
.confirmacion h1 { font-family: var(--fuente-tit); font-size: clamp(30px, 3.6vw, 44px); text-transform: uppercase; }
.confirmacion p { color: var(--gris-600); font-size: 17px; max-width: 640px; margin: 0 auto 16px; }
.confirmacion__estado { display: inline-flex; align-items: center; gap: 10px; color: var(--gris-600); }
.estado { padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.estado--ok { background: #e3f4ea; color: var(--verde); }
.estado--pendiente { background: #fff4d6; color: #8a6400; }
.confirmacion__botones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
.tabla-pedido { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.tabla-pedido th, .tabla-pedido td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--gris-200); }
.tabla-pedido th { font-size: 13px; text-transform: uppercase; color: var(--gris-500); letter-spacing: .05em; }
.tabla-pedido th:last-child, .tabla-pedido td:last-child { text-align: right; white-space: nowrap; }
.tabla-pedido td small { display: block; color: var(--gris-500); font-size: 13px; }
.tabla-pedido td:first-child { color: var(--primario); font-weight: 600; }
.tabla-pedido tfoot td { border-bottom: 0; padding: 6px 10px; color: var(--gris-600); font-weight: 400; }
.tabla-pedido tfoot td:first-child { text-align: right; }
.tabla-pedido__total td { font-size: 19px; font-weight: 700 !important; color: var(--primario) !important; padding-top: 12px !important; }
.datos-pedido { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding-top: 18px; border-top: 1px solid var(--gris-200); }
.datos-pedido div { display: flex; flex-direction: column; }
.datos-pedido span { font-size: 13px; color: var(--gris-500); }
.datos-pedido strong { color: var(--primario); }

/* Contacto */
.contacto-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: stretch; }
.caja--form { margin: 0; padding: 38px; }
.mapa { border-radius: var(--radio); overflow: hidden; border: 1px solid var(--gris-200); min-height: 420px; background: var(--gris-100); }
.mapa iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }

/* Libro de reclamaciones */
.hoja-reclamo__cabecera { display: flex; align-items: center; gap: 24px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--gris-200); }
.hoja-reclamo__cabecera img { width: 150px; flex-shrink: 0; }
.hoja-reclamo__cabecera h2 { font-family: var(--fuente-tit); font-size: 28px; text-transform: uppercase; margin-bottom: 6px; }
.hoja-reclamo__cabecera p { margin: 0; color: var(--gris-600); font-size: 15px; }
.form-reclamo__titulo { display: flex; align-items: center; gap: 12px; font-family: var(--fuente-tit); font-size: 21px; text-transform: uppercase; margin: 28px 0 16px; }
.hoja-reclamo__datos { display: grid; grid-template-columns: 180px 1fr; gap: 10px 20px; margin: 0 0 24px; }
.hoja-reclamo__datos dt { color: var(--gris-500); font-size: 14px; }
.hoja-reclamo__datos dd { margin: 0; color: var(--primario); }

/* ---------- Pie de página ---------- */
.pie { background: var(--primario); color: #a9adb4; padding-top: 72px; }
.pie__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 44px; padding-bottom: 56px; }
.pie__logo img { width: 110px; height: 110px; object-fit: contain; margin-bottom: 18px; }
.pie__col p { font-size: 15px; }
.pie__col h3 { font-family: var(--fuente-tit); color: #fff; font-size: 21px; text-transform: uppercase; margin-bottom: 20px; position: relative; padding-bottom: 12px; }
.pie__col h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; background: var(--acento); border-radius: 2px; }
.pie__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pie__col ul a { font-size: 15px; transition: color var(--trans), padding var(--trans); }
.pie__col ul a:hover { color: var(--acento); padding-left: 4px; }
.pie__contacto li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.pie__contacto .ico { width: 18px; height: 18px; color: var(--acento); margin-top: 3px; }
.pie__contacto a:hover { padding-left: 0 !important; }
.pie__redes { display: flex; gap: 10px; margin-top: 4px; }
.pie__redes a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #383b41; display: flex; align-items: center; justify-content: center; color: #d0d3d8; transition: var(--trans); }
.pie__redes a:hover { background: var(--acento); border-color: var(--acento); color: var(--primario); }
.pie__redes .ico { width: 18px; height: 18px; }
.pie__marcas { margin: 4px 0 22px; }
.pie__marcas > span { display: block; color: #fff; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px; }
.pie__marcas-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pie__marcas-logos a { display: inline-flex; transition: transform .3s; }
.pie__marcas-logos a:hover { transform: translateY(-3px); }
.pie__marcas-logos img { height: 46px; width: auto; max-width: 100px; object-fit: contain; }
.pie__libro { display: inline-flex; margin-top: 22px; padding: 10px 14px; background: #fff; border-radius: var(--radio-sm); border: 1px solid #fff; transition: var(--trans); }
.pie__libro img { width: 128px; }
.pie__libro:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .3); }
.pie__final { background: #0a0b0c; padding: 18px 0; font-size: 14px; }
.pie__final-in { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pie__final p { margin: 0; }
.pie__final a:hover { color: var(--acento); }

/* ---------- WhatsApp flotante ---------- */
.wa-flotante {
    position: fixed; right: 24px; bottom: 24px; z-index: 90; display: flex; align-items: center; gap: 0; height: 60px; padding: 0 16px;
    border-radius: 30px; background: var(--wa); color: #fff; box-shadow: 0 10px 28px rgba(37, 211, 102, .4); transition: var(--trans);
}
.wa-flotante .ico { width: 28px; height: 28px; }
.wa-flotante__txt { max-width: 0; overflow: hidden; white-space: nowrap; font-weight: 700; transition: max-width .4s ease, margin .4s ease; }
.wa-flotante:hover { background: var(--wa-osc); }
.wa-flotante:hover .wa-flotante__txt { max-width: 200px; margin-left: 10px; }
.wa-flotante::before { content: ''; position: absolute; inset: 0; border-radius: 30px; border: 2px solid var(--wa); animation: onda 2.2s infinite; }
@keyframes onda { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.35); opacity: 0; } }

/* ---------- Barra inferior del carrito ---------- */
.barra-carrito {
    position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 160%); z-index: 85; width: min(560px, calc(100% - 32px));
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s, visibility .3s; opacity: 0; visibility: hidden;
}
.barra-carrito.visible { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.barra-carrito__in { display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 18px; background: var(--primario); color: #fff; border-radius: var(--radio); box-shadow: 0 16px 40px rgba(0, 0, 0, .3); border: 1px solid var(--grafito-2); }
.barra-carrito__info { flex: 1; display: flex; align-items: center; gap: 12px; font-size: 15px; }
.barra-carrito__ico { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gris-700); display: flex; align-items: center; justify-content: center; color: var(--acento); }
.barra-carrito__info b { color: var(--acento); font-size: 17px; }
.barra-carrito__cerrar { width: 32px; height: 32px; border: 0; background: none; color: #9a9ea6; display: flex; align-items: center; justify-content: center; }
.barra-carrito__cerrar:hover { color: #fff; }
.barra-carrito__cerrar .ico { width: 18px; height: 18px; }

/* Aviso */
.aviso { position: fixed; top: 24px; left: 50%; transform: translate(-50%, -150%); z-index: 120; padding: 12px 20px; border-radius: var(--radio-sm); background: var(--primario); color: #fff; font-weight: 600; box-shadow: var(--sombra-lg); transition: transform .4s ease, opacity .3s, visibility .3s; display: flex; align-items: center; gap: 10px; opacity: 0; visibility: hidden; }
.aviso.visible { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.aviso.error { background: var(--rojo); }
.aviso .ico { color: var(--acento); }


/* ---------- Menú lateral (celulares) ---------- */
.cabecera__menu { display: none; width: 44px; height: 44px; border: 1px solid var(--gris-200); border-radius: 50%; background: #fff; color: var(--primario); align-items: center; justify-content: center; flex-shrink: 0; transition: var(--trans); }
.cabecera__menu:hover { background: var(--acento); border-color: var(--acento); }
.cabecera__menu .ico { width: 22px; height: 22px; }
.menu-movil { position: fixed; inset: 0; z-index: 140; visibility: hidden; pointer-events: none; }
.menu-movil.abierto { visibility: visible; pointer-events: auto; }
.menu-movil__fondo { position: absolute; inset: 0; background: rgba(10, 11, 13, .55); opacity: 0; transition: opacity .35s ease; }
.menu-movil.abierto .menu-movil__fondo { opacity: 1; }
.menu-movil__panel {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 2; width: min(340px, 86%); display: flex; flex-direction: column;
    background: #fff; box-shadow: -18px 0 40px rgba(0, 0, 0, .18); transform: translateX(104%); transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.menu-movil.abierto .menu-movil__panel { transform: none; }
.menu-movil__cab { display: flex; align-items: center; justify-content: space-between; padding: calc(16px + env(safe-area-inset-top)) 18px 14px; border-bottom: 1px solid var(--gris-200); }
.menu-movil__cab img { width: 52px; height: 52px; object-fit: contain; }
.menu-movil__cerrar { width: 42px; height: 42px; border: 1px solid var(--gris-200); border-radius: 50%; background: #fff; color: var(--primario); display: flex; align-items: center; justify-content: center; }
.menu-movil__cuerpo { flex: 1; overflow-y: auto; padding: 18px 18px 10px; }
.menu-movil__titulo { font-family: var(--fuente-tit); font-size: 20px; font-weight: 700; text-transform: uppercase; color: var(--primario); margin: 0 0 8px; }
.menu-movil__cats { list-style: none; margin: 0; padding: 0; }
.menu-movil__cats > li { border-bottom: 1px solid var(--gris-100); }
.menu-movil__fila { display: flex; align-items: center; }
.menu-movil__fila a { flex: 1; padding: 13px 0; font-weight: 600; color: var(--primario); font-size: 16px; }
.menu-movil__fila button { width: 40px; height: 40px; border: 0; background: none; color: var(--gris-500); display: flex; align-items: center; justify-content: center; }
.menu-movil__fila button .ico { transition: transform var(--trans); }
.menu-movil__cats li.abierto > .menu-movil__fila button .ico { transform: rotate(180deg); color: var(--primario); }
.menu-movil__sub { list-style: none; margin: 0; padding: 0 0 0 14px; max-height: 0; overflow: hidden; transition: max-height .35s ease; border-left: 2px solid var(--acento); }
.menu-movil__cats li.abierto > .menu-movil__sub { max-height: 600px; margin-bottom: 10px; }
.menu-movil__sub a { display: block; padding: 8px 0; color: var(--gris-600); font-size: 15px; }
.menu-movil__ofertas { display: inline-flex; align-items: center; gap: 8px; color: var(--rojo) !important; }
.menu-movil__pie { padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--gris-200); }
.menu-movil__pie .btn { padding: 15px 20px; }
body.menu-abierto { overflow: hidden; }

/* ---------- Bolsa de trabajo ---------- */
.empleos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 600px)); justify-content: center; gap: 24px; }
.empleo-card { display: flex; flex-direction: column; gap: 14px; padding: 28px; background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio); transition: var(--trans); }
.empleo-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-lg); border-color: var(--acento); }
.empleo-card__cab { display: flex; align-items: center; gap: 16px; }
.empleo-card__ico { display: inline-flex; color: var(--primario); flex-shrink: 0; }
.empleo-card__ico .ico { width: 40px; height: 40px; stroke-width: 1.4; }
.empleo-card h3 { font-family: var(--fuente-tit); font-size: 25px; text-transform: uppercase; margin: 0; }
.empleo-card__cab small { color: var(--gris-500); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.empleo-card p { margin: 0; color: var(--gris-600); }
.empleo-datos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.empleo-datos li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--gris-200); border-radius: 20px; font-size: 14px; font-weight: 600; color: var(--primario); }
.empleo-datos .ico { width: 16px; height: 16px; color: var(--acento-osc); }
.empleo-card__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--gris-100); font-size: 14px; color: var(--gris-600); }
.empleo-card__pie > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.empleo-card__pie .ico { width: 16px; height: 16px; }
.empleo-card:hover .categoria-card__link .ico { transform: translateX(4px); }
.empleo { display: grid; grid-template-columns: 1fr 400px; gap: 32px; align-items: start; }
.empleo__lateral { position: sticky; top: 150px; }
.empleo__lateral .caja { margin: 0; padding: 28px; }
.empleo__lateral .campos { margin: 0; }
.empleo-datos--grande { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.empleo-datos--grande li { border: 0; padding: 0; border-radius: 0; align-items: flex-start; gap: 12px; font-size: 16px; }
.empleo-datos--grande .ico { width: 24px; height: 24px; margin-top: 2px; }
.empleo-datos--grande span { display: flex; flex-direction: column; line-height: 1.35; }
.empleo-datos--grande small { font-size: 13px; font-weight: 500; color: var(--gris-500); }
.lista-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lista-check li { display: flex; align-items: flex-start; gap: 12px; color: var(--gris-700); }
.lista-check .ico { width: 20px; height: 20px; color: var(--verde); stroke-width: 2.4; margin-top: 2px; }

/* Menú inferior tipo app */
.nav-app { display: none; }

/* ---------- Animaciones al hacer scroll ---------- */
.js [data-anim] { opacity: 0; transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js [data-anim="arriba"] { transform: translateY(36px); }
.js [data-anim="izquierda"] { transform: translateX(-44px); }
.js [data-anim="derecha"] { transform: translateX(44px); }
.js [data-anim="zoom"] { transform: scale(.92); }
.js [data-anim].visible { opacity: 1; transform: none; }
.js [data-delay="1"] { transition-delay: .1s; }
.js [data-delay="2"] { transition-delay: .2s; }
.js [data-delay="3"] { transition-delay: .3s; }
.js [data-anim].visible:hover { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
    .js [data-anim] { opacity: 1; transform: none; transition: none; }
    * { scroll-behavior: auto !important; }
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1200px) {
    .carrusel__flecha--prev { left: -6px; }
    .carrusel__flecha--next { right: -6px; }
}
@media (max-width: 1100px) {
    .carrusel { --por-vista: 3; }
    .productos-grid--4 { grid-template-columns: repeat(3, 1fr); }
    .categorias-grid { grid-template-columns: repeat(2, 1fr); }
    .recuadros--4 { grid-template-columns: repeat(2, 1fr); }
    .pie__grid { grid-template-columns: 1fr 1fr; }
    .catalogo { grid-template-columns: 240px 1fr; gap: 24px; }
    .productos-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .checkout, .carrito { grid-template-columns: 1fr; }
    .resumen { position: static; }
    .navbar__links a { padding: 0 14px; }
    .megamenu { min-width: 620px; }
}
@media (max-width: 900px) {
    :root { --nav-app: 66px; }
    body { padding-bottom: calc(var(--nav-app) + env(safe-area-inset-bottom)); }
    .topbar { display: none; }
    .navbar { display: none; }
    .cabecera .cabecera__fila { flex-wrap: wrap; gap: 12px 16px; min-height: 0; padding-top: calc(18px + env(safe-area-inset-top)); padding-bottom: 14px; }
    .cabecera.fija .cabecera__fila { padding-top: 10px; padding-bottom: 10px; }
    .cabecera.fija .cabecera__fila { min-height: 0; }
    .cabecera__logo img { width: 56px; height: 56px; }
    .cabecera.fija .cabecera__logo img { width: 48px; height: 48px; }
    .cabecera__carrito { margin-left: auto; }
    .cabecera__carrito-txt { display: none; }
    .cabecera__carrito-ico { width: 44px; height: 44px; }
    .buscador { order: 3; flex: 1 0 100%; max-width: none; }
    .buscador input, .buscador button { height: 46px; }
    .cabecera.fija .buscador { display: none; }
    .cabecera.fija.buscando .buscador { display: flex; }

    .nav-app {
        display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
        height: calc(var(--nav-app) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
        background: #fff; border-top: 1px solid var(--gris-200); box-shadow: 0 -6px 24px rgba(0, 0, 0, .08);
    }
    .nav-app a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--gris-500); transition: color var(--trans); }
    .nav-app a .ico { width: 23px; height: 23px; }
    .nav-app a::before { content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--acento); transform: scaleX(0); transition: transform var(--trans); }
    .nav-app a.activo { color: var(--primario); }
    .nav-app a.activo::before { transform: scaleX(1); }

    .cabecera__menu { display: inline-flex; }
    .cabecera__carrito { margin-left: auto; }
    .empleo { grid-template-columns: 1fr; }
    .empleo__lateral { position: static; }
    .wa-flotante { right: 16px; bottom: calc(var(--nav-app) + 16px + env(safe-area-inset-bottom)); height: 54px; padding: 0 13px; }
    .wa-flotante .ico { width: 28px; height: 28px; }
    .wa-flotante:hover .wa-flotante__txt { max-width: 0; margin: 0; }
    .barra-carrito { bottom: calc(var(--nav-app) + 12px + env(safe-area-inset-bottom)); width: calc(100% - 100px); left: 16px; transform: translate(0, 220%); }
    .barra-carrito.visible { transform: translate(0, 0); }
    .barra-carrito__in { padding: 8px 8px 8px 12px; gap: 8px; }
    .barra-carrito__ico { display: none; }
    .barra-carrito__info { font-size: 14px; }
    .barra-carrito__cerrar { display: none; }

    .seccion { padding: 64px 0; }
    .slider__flecha { display: none; }
    .slider__caja { max-width: 100%; }
    .beneficios__grid { grid-template-columns: repeat(2, 1fr); }
    .beneficio:nth-child(2) { border-right: 0; }
    .beneficio:nth-child(-n+2) { border-bottom: 1px solid var(--gris-200); }
    .dos-col { grid-template-columns: 1fr; gap: 44px; }
    .dos-col__imagen::before { inset: 14px -10px -14px 10px; }
    .catalogo { grid-template-columns: 1fr; }
    .filtros {
        position: fixed; top: 0; left: 0; bottom: 0; width: min(340px, 88%); z-index: 130; border-radius: 0; overflow-y: auto;
        transform: translateX(-105%); transition: transform .4s ease; padding: 0 22px 30px; border: 0;
    }
    .filtros.abierto { transform: none; }
    .filtros__cabecera { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: #fff; padding: 18px 0; border-bottom: 1px solid var(--gris-200); z-index: 2; }
    .filtros__cabecera strong { display: flex; align-items: center; gap: 8px; color: var(--primario); font-size: 18px; }
    .filtros__cerrar { width: 40px; height: 40px; border: 1px solid var(--gris-200); border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
    .filtros__fondo { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 125; opacity: 0; visibility: hidden; transition: .3s; }
    .filtros.abierto + .filtros__fondo { opacity: 1; visibility: visible; }
    .catalogo__btn-filtros { display: inline-flex; }
    .catalogo__barra { flex-wrap: wrap; }
    .catalogo__total { order: 3; width: 100%; font-size: 14px; }
    .catalogo__orden label { display: none; }
    .ficha { grid-template-columns: 1fr; gap: 30px; }
    .ficha__galeria { position: static; }
    .contacto-grid { grid-template-columns: 1fr; }
    .portada { padding: 64px 0 56px; }
    .megamenu { display: none; }
}
@media (max-width: 700px) {
    .contenedor { padding: 0 16px; }
    .empleos { gap: 16px; }
    .empleo-card { padding: 22px 18px; }
    .empleo-card h3 { font-size: 22px; }
    .empleo-datos--grande { grid-template-columns: 1fr 1fr; }
    .empleo__lateral .caja { padding: 22px 18px; }
    .marca-card__logo img { height: 92px; max-width: 200px; }
    .marca-banner { flex-direction: column; text-align: center; gap: 14px; padding: 22px 18px; }
    .marca-banner__logo { height: 76px; }
    .marca-banner__texto h2 { font-size: 24px; }
    .ficha__marca img { height: 46px; }
    .carrusel { --por-vista: 2; }
    .carrusel__ventana { margin: -12px -6px; }
    .carrusel__item { padding: 0 6px; }
    .carrusel__flecha { width: 38px; height: 38px; }
    .productos-grid--4, .productos-grid--3 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .categorias-grid { gap: 12px; }
    .categoria-card__cuerpo { padding: 14px; }
    .categoria-card__cuerpo strong { font-size: 18px; }
    .categoria-card__cuerpo small { display: none; }
    .categoria-card__link { font-size: 12px; }
    .producto-card__cuerpo { padding: 12px; }
    .producto-card__nombre { font-size: 15px; }
    .producto-card__precio strong { font-size: 18px; }
    .producto-card__etiquetas { display: none; }
    .btn-icono { width: 38px; height: 38px; }
    .recuadros--2, .recuadros--3, .recuadros--4 { grid-template-columns: 1fr; }
    .recuadro { padding: 32px 22px; }
    .beneficio { padding: 22px 12px; }
    .beneficio__ico .ico { width: 32px; height: 32px; }
    .beneficio h3 { font-size: 17px; }
    .beneficio p { font-size: 13px; }
    .slider__caja h2 { font-size: 30px; margin-bottom: 10px; }
    .slider__caja p { font-size: 15px; margin-bottom: 18px; }
    .slider__puntos { bottom: 14px; }
    .slider__texto { align-items: flex-end; padding-bottom: 54px; background: linear-gradient(0deg, rgba(10, 11, 13, .9) 0%, rgba(10, 11, 13, .7) 40%, rgba(10, 11, 13, .5) 70%, rgba(10, 11, 13, .45) 100%); }
    .titulo-seccion { margin-bottom: 32px; }
    .cta { padding: 80px 0; }
    .cta .btn { white-space: normal; }
    .pie { padding-top: 56px; }
    .pie__grid { grid-template-columns: 1fr; gap: 34px; }
    .pie__final-in { justify-content: center; text-align: center; }
    .caja { padding: 22px 18px; }
    .caja--form { padding: 26px 18px; }
    .campos--2 { grid-template-columns: 1fr; }
    .yape { grid-template-columns: 1fr; }
    .yape__qr { max-width: 220px; width: 100%; margin: 0 auto; }
    .carrito__cabecera { display: none; }
    .carrito__item { grid-template-columns: 70px 1fr 40px; grid-template-areas: "img datos quitar" "img precio precio" "cant cant total"; gap: 8px 14px; padding: 16px; }
    .carrito__img { grid-area: img; align-self: start; }
    .carrito__img img { width: 70px; height: 70px; }
    .carrito__datos { grid-area: datos; }
    .carrito__precio { grid-area: precio; font-size: 14px; }
    .carrito__cant { grid-area: cant; }
    .carrito__total { grid-area: total; text-align: right; }
    .carrito__quitar { grid-area: quitar; }
    .carrito__etq { display: inline; color: var(--gris-500); margin-right: 6px; font-size: 13px; }
    .carrito__pie { padding: 14px 16px; }
    .ficha__compra { padding: 18px; }
    .ficha__precio strong { font-size: 30px; }
    .ficha__acciones { flex-direction: column; }
    .cantidad { align-self: flex-start; }
    .pestanas__panel { padding: 22px 18px; }
    .pestanas__botones button { padding: 15px 18px; font-size: 14px; }
    .tabla-specs th { width: 42%; }
    .datos-pedido { grid-template-columns: 1fr; }
    .hoja-reclamo__cabecera { flex-direction: column; align-items: flex-start; gap: 14px; }
    .hoja-reclamo__datos { grid-template-columns: 1fr; gap: 2px; }
    .hoja-reclamo__datos dd { margin-bottom: 10px; }
    .confirmacion__botones .btn { width: 100%; }
    .vacio__botones .btn { width: 100%; }
    .btn--lg { padding: 15px 22px; font-size: 15px; }
}

@media print {
    .topbar, .cabecera, .pie, .wa-flotante, .barra-carrito, .nav-app, .portada, .confirmacion__botones { display: none !important; }
    body { padding: 0; }
    .caja { border: 0; }
}