/* ==========================================================================
   SENSEBEN — Hoja de estilos del prototipo
   Paleta derivada del mockup de referencia (rose / nude / plum)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Montserrat:wght@400;500;600&display=swap');

:root{
    /* Paleta OFICIAL de marca Senseben (ficha del cliente) — reemplaza la
       paleta rose/nude/plum de placeholder que tenía el prototipo. */
    --color-marca:        #9298BA;   /* Marca — específico para títulos, ficha: "Marca / títulos" */
    --color-primary:      #6F759C;   /* Botones — acentos y CTAs */
    --color-primary-dark: color-mix(in srgb, #6F759C 80%, black);
    --color-rose:         #91ADBA;   /* Contenedor — acento secundario */
    --color-rose-soft:    color-mix(in srgb, #91ADBA 18%, white);
    --color-nude:         color-mix(in srgb, #91ADBA 10%, #F8F9FC);
    --color-plum:         #333333;   /* T. Principal — texto de énfasis */
    --color-sale:         #E0532E;   /* coral — badges de oferta: se deja igual, es un color funcional (urgencia/descuento), no de identidad de marca */

    --bg:                 #F8F9FC;   /* Fondo G. */
    --bg-muted:           color-mix(in srgb, #91ADBA 8%, #F8F9FC);
    --fg:                 #333333;   /* T. Principal */
    --fg-muted:           #8D8D8D;   /* T. Secundario */
    --border:             color-mix(in srgb, #91ADBA 25%, white);
    --white:              #FFFFFF;

    /* Marca: Título = Poppins, Subtítulo/cuerpo = Montserrat */
    --font-display: 'Poppins', sans-serif;
    --font-sans: 'Montserrat', sans-serif;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --shadow-card: 0 2px 14px rgba(51,51,51,0.08);
    --shadow-hover: 0 10px 30px rgba(111,117,156,0.16);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--fg);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }

h1,h2,h3,h4{
    font-family: var(--font-display);
    letter-spacing:-0.01em;
    color: var(--color-plum);
}

.container{
    max-width:1240px;
    margin:0 auto;
    padding:0 24px;
}

/* Accesibilidad: foco visible */
a:focus-visible, button:focus-visible, input:focus-visible{
    outline:2px solid var(--color-primary);
    outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
}

/* ============ TOPBAR ============ */
.topbar{
    background: var(--color-plum);
    color: #F8F9FC;
    font-size:13px;
    text-align:center;
    padding:8px 16px;
    letter-spacing:0.02em;
    overflow:hidden;
    transition:background-color .6s ease;
}
/* Tono de fondo sutil por mensaje (assets/js/topbar.js alterna estas
   clases junto con el texto) — variaciones muy leves de --color-plum
   mezcladas con la paleta de marca, igual criterio que aruma.pe. */
.topbar--1{ background:color-mix(in srgb, var(--color-plum) 78%, var(--color-marca) 22%); }
.topbar--2{ background:color-mix(in srgb, var(--color-plum) 72%, var(--color-primary) 28%); }
.topbar--3{ background:color-mix(in srgb, var(--color-plum) 82%, var(--color-rose) 18%); }
/* Carrusel de 4 mensajes (assets/js/topbar.js): un solo texto visible a
   la vez, que se desliza hacia arriba y se desvanece al cambiar — con
   tiempo prudencial entre cada uno para que se alcance a leer. */
.topbar-texto{
    display:inline-block;
    transition:opacity .35s ease, transform .35s ease;
}
.topbar-texto.topbar-saliendo{
    opacity:0;
    transform:translateX(-24px);
}
.topbar-texto.topbar-entrando{
    opacity:0;
    transform:translateX(24px);
}

/* ============ HEADER ============ */
.site-header{
    position:sticky; top:0; z-index:50;
    background: rgba(255,252,251,0.92);
    backdrop-filter: blur(8px);
    border-bottom:1px solid var(--border);
}
.header-main{
    display:flex; align-items:center; gap:28px;
    padding:16px 24px;
}
.logo{
    display:inline-flex; align-items:center;
    white-space:nowrap;
}
.logo img{ height:100px; width:auto; display:block; transition:height .25s ease; }
@media (min-width:769px){
    .site-header.scrolled .logo img{ height:70px; }
}

.search-bar{
    position:relative;
    flex:1;
    display:flex; align-items:center;
    background: var(--bg-muted);
    border:1px solid var(--border);
    border-radius: 999px;
    padding:10px 18px;
    max-width:560px;
    transition:border-color .2s, box-shadow .2s;
}
.search-bar:focus-within{
    border-color:var(--color-primary);
    box-shadow:0 0 0 3px rgba(194,41,92,0.15);
}
.search-bar input{
    border:none; background:none; flex:1;
    font-family:inherit; font-size:14px; color:var(--fg);
}
.search-bar input:focus-visible{ outline:none; } /* el resplandor de arriba ya cumple ese rol, sin romper la forma */
.search-bar input::placeholder{ color:var(--fg-muted); }
.search-bar svg{ flex-shrink:0; color:var(--fg-muted); }

/* ============ BUSCADOR EN VIVO (dropdown de dos columnas) ============ */
/* Mismo ancho/posición que el mega menú de categorías (.cat-nav-dropdown):
   se ancla contra .categories-nav (no contra .search-bar), debajo de
   toda la fila de categorías, para no tapar nada del menú al abrirse. */
.search-dropdown{
    position:absolute; top:100%; left:50%;
    width:100%; max-width:1240px;
    box-sizing:border-box;
    transform:translateX(-50%);
    background:#fff;
    border-radius:var(--radius-md);
    box-shadow:0 20px 50px rgba(36,27,33,0.18);
    display:none;
    overflow:hidden;
    z-index:80;
}
.search-dropdown.abierto{ display:flex; }

.search-col-resultados{
    width:680px; flex-shrink:0;
    max-height:552px; overflow-y:auto;
    padding:16px 0;
    border-right:1px solid var(--border);
}
.search-col-preview{
    flex:1;
    padding:20px;
    max-height:552px; overflow-y:auto;
}

.search-grupo-titulo{
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
    color:var(--fg-muted);
    padding:6px 20px;
}
.search-item{
    display:flex; align-items:center; gap:10px;
    padding:10px 20px;
    cursor:pointer;
    transition:background .15s;
}
.search-item:hover, .search-item.activo{ background:var(--bg-muted); }
.search-item-icono{ color:var(--fg-muted); flex-shrink:0; }
.search-item img{
    width:36px; height:36px; object-fit:cover;
    border-radius:6px; flex-shrink:0;
    background:var(--bg-muted);
}
.search-item-texto{ min-width:0; }
.search-item-nombre{ font-size:13.5px; font-weight:500; color:var(--fg); display:block; line-height:1.3; }
.search-item-sku{ font-size:11px; color:var(--fg-muted); }

.search-sin-resultados{ padding:30px 20px; text-align:center; color:var(--fg-muted); font-size:13.5px; }

/* Botón "Ver todos los resultados" al pie del listado de productos —
   mismo refuerzo de especificidad que el resto de los <a> de acá adentro
   (.categories-nav a le gana a una sola clase si no se anula explícito). */
.search-col-resultados .search-ver-todos-resultados,
.search-col-resultados .search-ver-todos-resultados:hover,
.search-col-resultados .search-ver-todos-resultados:visited{
    display:block; text-align:center;
    margin:8px 20px 4px;
    padding:11px; background:var(--bg-muted); color:var(--color-primary);
    border-radius:999px; font-size:13px; font-weight:600;
    white-space:normal; border-bottom:none;
}
.search-col-resultados .search-ver-todos-resultados:hover{ background:var(--color-primary); color:#fff; }

/* ---- Preview derecha: categoría ---- */
.search-preview-cat h4{ font-size:16px; margin-bottom:14px; }
.search-preview-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px; }
.search-preview-grid img{
    width:100%; aspect-ratio:1/1; object-fit:cover;
    border-radius:var(--radius-sm); margin-bottom:6px;
    background:var(--bg-muted);
}
.search-preview-grid span{ font-size:11.5px; color:var(--fg); display:block; line-height:1.3; }
/* Ahora cada card de la grilla es un link (antes era un <div> estático,
   sin precio ni destino) — mismo refuerzo de especificidad que el resto
   de los <a> de acá adentro, porque .categories-nav a (0,1,1) le gana a
   una sola clase (0,1,0). */
.search-preview-grid .search-preview-grid-item,
.search-preview-grid .search-preview-grid-item:visited{
    display:block;
    padding:8px; white-space:normal;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--fg); text-decoration:none;
    transition:border-color .2s ease;
}
.search-preview-grid .search-preview-grid-item:hover{ border-color:var(--color-primary); }
.search-preview-grid-item em{
    display:block; margin-top:2px;
    font-style:normal; font-size:12px; font-weight:700;
    color:var(--color-primary);
}
.search-preview-grid-item:hover span{ color:var(--color-primary); }
/* Especificidad reforzada (0,2,0) contra .categories-nav a (0,1,1) — el
   dropdown del buscador vive dentro de .categories-nav desde que se
   unificó ancho/posición con el mega menú, así que esa regla genérica
   del nav (color/padding/white-space/border-bottom) le gana a una sola
   clase si no se la anula acá explícitamente, propiedad por propiedad. */
.search-preview-cat .search-ver-categoria,
.search-preview-cat .search-ver-categoria:hover,
.search-preview-cat .search-ver-categoria:visited{
    display:block; text-align:center;
    padding:11px; background:var(--color-plum); color:#fff;
    border-radius:999px; font-size:13px; font-weight:600;
    white-space:normal; border-bottom:none;
}
.search-preview-cat .search-ver-categoria:hover{ background:var(--color-primary); }

/* ---- Preview derecha: producto ---- */
.search-preview-prod{
    max-width:70%;
    margin-inline:auto;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:16px;
    transition:border-color .2s ease;
}
.search-preview-prod:hover{ border-color:var(--color-primary); }
.search-preview-prod img{
    width:100%; aspect-ratio:4/3; object-fit:cover;
    border-radius:var(--radius-sm); margin-bottom:14px;
    background:var(--bg-muted);
}
.search-preview-prod h4{ font-size:16px; margin-bottom:8px; }
.search-preview-prod p{ font-size:13px; color:var(--fg-muted); line-height:1.6; margin-bottom:16px; }
.search-preview-prod .precio-preview{ font-size:16px; font-weight:700; color:var(--color-primary); margin-bottom:14px; display:block; }
.search-preview-prod .search-ver-producto,
.search-preview-prod .search-ver-producto:hover,
.search-preview-prod .search-ver-producto:visited{
    display:block; text-align:center;
    padding:11px; background:var(--color-primary); color:#fff;
    border-radius:999px; font-size:13px; font-weight:600;
    white-space:normal; border-bottom:none;
}
.search-preview-prod .search-ver-producto:hover{ background:var(--color-primary-dark); }

@media (max-width: 900px){
    .search-dropdown{ width:92vw; }
    .search-col-resultados{ width:220px; }
}
@media (max-width: 640px){
    .search-dropdown{ flex-direction:column; width:90vw; }
    .search-col-resultados{ width:100%; max-height:220px; border-right:none; border-bottom:1px solid var(--border); }
    .search-col-preview{ max-height:260px; }
}

.header-actions{
    display:flex; flex-direction:column; align-items:flex-end; gap:4px;
    margin-left:auto;
}
.header-actions-icons{
    display:flex; align-items:center; gap:20px;
}
.icon-btn{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px;
    border-radius:50%;
    color:var(--color-plum);
    transition: background .2s;
}
.icon-btn:hover{ background: var(--color-rose-soft); }
.icon{ display:block; flex-shrink:0; }
.cart-count{
    position:absolute; top:-2px; right:-2px;
    background:var(--color-primary); color:#fff;
    font-size:10px; font-weight:700;
    width:18px; height:18px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
}
.menu-toggle{ display:none; }
.mobile-search-btn{ display:none; }

/* ============ BARRA INFERIOR (mobile, <768px) ============
   Inicio/Mi cuenta/Favoritos/Tiendas/Carrito bajan acá; en escritorio
   .icon-btn-bottom-nav sigue arriba en .header-actions-icons como
   siempre. Layout (ícono arriba + etiqueta abajo, 5 columnas) guiado por
   una referencia visual — el resto es el mismo mecanismo ya existente. */
.mobile-bottom-nav{
    display:none;
    position:fixed; left:0; right:0; bottom:0; z-index:900;
    background:#fff;
    border-top:1px solid var(--border);
    box-shadow:0 -4px 16px rgba(0,0,0,.05);
    padding-bottom:env(safe-area-inset-bottom);
}
.mobile-bottom-nav-item{
    position:relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; flex:1;
    padding:8px 4px 10px;
    background:none; border:none; cursor:pointer;
    font-family:inherit; font-size:10.5px; font-weight:600;
    color:var(--fg-muted); text-decoration:none;
}
.mobile-bottom-nav-item svg{ width:22px; height:22px; }
.mobile-bottom-nav-item .cart-count{
    position:absolute; top:2px; left:50%; margin-left:6px;
    background:var(--color-primary); color:#fff;
    font-size:10px; font-weight:700;
    width:16px; height:16px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
}

/* ============ MENÚ MOBILE (acordeón, <768px) ============
   Adaptado de prototipo/mobile-menu-buscador-paquete.md. Independiente
   de .categories-nav (que en mobile permanece display:none). */
.mobile-menu{
    display:none;
    position:fixed; top:0; left:0; right:0; bottom:0; z-index:1000;
    background:#fff;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}
.mobile-menu.open{ display:block; }
.mobile-menu-bar{ display:flex; justify-content:flex-end; padding:14px 20px 0; }
.mobile-menu-close{ background:none; border:none; color:var(--fg); cursor:pointer; padding:6px; }
.mobile-menu-close svg{ width:22px; height:22px; display:block; }
.mobile-menu-inner{ padding:8px 24px 40px; }
.mobile-link{ display:block; padding:14px 0; font-size:15px; font-weight:600; color:var(--fg); text-decoration:none; border-bottom:1px solid var(--border); }
.mobile-cat{ border-bottom:1px solid var(--border); }
.mobile-cat-trigger{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    background:none; border:none; padding:14px 0; cursor:pointer;
    font-family:inherit; font-size:15px; font-weight:600; color:var(--fg);
}
.mobile-cat-trigger svg{ width:16px; height:16px; color:var(--color-primary); transition:transform .2s; flex-shrink:0; }
.mobile-cat-body{ display:none; padding:0 0 14px 12px; }
.mobile-cat.open .mobile-cat-body{ display:block; }
.mobile-cat.open .mobile-cat-trigger svg{ transform:rotate(180deg); }
.mobile-cat-all{ display:block; padding:8px 0; font-size:13px; font-weight:700; color:var(--color-primary); text-decoration:none; }
.mobile-cat-item{ display:block; padding:8px 0; font-size:13px; color:var(--fg-muted); text-decoration:none; }
.mobile-cat-item:hover{ color:var(--fg); }
body.mobile-menu-lock{ overflow:hidden; }

/* ============ MODAL DE BÚSQUEDA (pantalla completa, <768px) ============ */
.search-modal{
    position:fixed; top:0; left:0; right:0; bottom:0; z-index:1001; background:#fff;
    display:flex; flex-direction:column;
    transform:translateY(100%);
    transition:transform .3s ease;
    visibility:hidden;
}
.search-modal.open{ visibility:visible; transform:translateY(0); width:100%; height:100vh; }
body.search-modal-lock{ overflow:hidden; }

.search-modal__bar{ flex-shrink:0; display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border); }
.search-modal__input-wrap{ flex:1; display:flex; align-items:center; gap:10px; background:var(--bg-muted); border-radius:8px; padding:10px 14px; min-width:0; }
.search-modal__icon{ color:var(--fg-muted); flex-shrink:0; width:18px; height:18px; }
.search-modal__input{ flex:1; min-width:0; border:none; background:none; outline:none; font-size:15px; color:var(--fg); font-family:inherit; }
.search-modal__input:focus-visible{ outline:none; } /* el fondo .search-modal__input-wrap ya marca el foco, sin el recuadro morado global */
/* Apaga la "X" nativa de <input type="search"> (Chrome/Edge/Brave) — ya
   tenemos nuestro propio botón .search-modal__clear, no hace falta duplicarla. */
.search-modal__input::-webkit-search-cancel-button,
.search-modal__input::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; }
.search-modal__input::-ms-clear{ display:none; width:0; height:0; }
.search-modal__clear{ background:none; border:none; color:var(--fg-muted); opacity:.5; cursor:pointer; padding:2px; flex-shrink:0; transition:opacity .15s ease; }
.search-modal__clear:hover{ opacity:.8; }
.search-modal__clear svg{ width:16px; height:16px; display:block; }
.search-modal__close{ background:none; border:none; color:var(--fg); cursor:pointer; padding:4px; flex-shrink:0; }
.search-modal__close svg{ width:22px; height:22px; display:block; }
.search-modal__body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }

.sm-list{ padding:6px 0; }
.sm-section-title{ font-weight:800; font-size:11px; letter-spacing:.08em; color:var(--fg-muted); padding:12px 20px 6px; text-transform:uppercase; }
.sm-cat-item, .sm-prod-item{ display:flex; align-items:center; gap:14px; width:100%; padding:13px 20px; border:none; border-bottom:1px solid var(--border); background:none; text-align:left; font-family:inherit; cursor:pointer; }
.sm-cat-item svg:first-child{ color:var(--color-primary); flex-shrink:0; }
.sm-cat-item span{ flex:1; font-size:14px; font-weight:600; color:var(--fg); }
.sm-chevron{ color:var(--fg-muted); flex-shrink:0; }
.sm-prod-item img{ width:48px; height:48px; object-fit:cover; border-radius:6px; background:var(--bg-muted); flex-shrink:0; }
.sm-prod-info{ display:flex; flex-direction:column; min-width:0; gap:2px; }
.sm-prod-name{ font-size:14px; font-weight:600; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sm-prod-code{ font-size:12px; color:var(--fg-muted); }
.sm-ver-todos{ display:block; text-align:center; padding:16px; font-size:13px; font-weight:700; color:var(--color-primary); text-decoration:none; }
.sm-back{ display:flex; align-items:center; gap:8px; width:100%; padding:16px 20px; border:none; border-bottom:1px solid var(--border); background:none; text-align:left; font-family:inherit; font-size:13px; font-weight:700; color:var(--fg); cursor:pointer; }
.sm-empty{ padding:48px 24px; text-align:center; }
.sm-empty p{ font-size:14px; color:var(--fg); margin:0 0 8px; }
.sm-empty-sub{ color:var(--fg-muted); font-size:13px; }

.sm-preview-card{ padding:20px; }
.sm-preview-img{ width:100%; max-width:280px; aspect-ratio:1/1; border-radius:8px; overflow:hidden; background:var(--bg-muted); margin:0 auto 16px; }
.sm-preview-img img{ width:100%; height:100%; object-fit:cover; }
.sm-preview-name{ font-weight:700; font-size:15px; color:var(--fg); line-height:1.3; margin-bottom:6px; }
.sm-preview-precio{ font-weight:700; font-size:16px; color:var(--color-primary); margin-bottom:10px; }
.sm-preview-desc{ font-size:13px; color:var(--fg-muted); line-height:1.5; margin-bottom:18px; }
.sm-preview-btn{ display:block; text-align:center; background:var(--color-primary); color:#fff; font-weight:700; font-size:13px; padding:12px 16px; border-radius:8px; text-decoration:none; }
.sm-preview-cat-label{ font-weight:800; font-size:11px; letter-spacing:.08em; color:var(--fg-muted); margin-bottom:6px; text-transform:uppercase; }
.sm-preview-cat-title{ font-weight:700; font-size:17px; color:var(--fg); line-height:1.3; margin-bottom:16px; }
.sm-cat-preview-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.sm-cat-preview-item{ display:flex; align-items:center; gap:10px; text-decoration:none; background:var(--bg-muted); border-radius:8px; padding:8px 10px; }
.sm-cat-preview-item img{ width:38px; height:38px; object-fit:cover; border-radius:6px; background:#fff; flex-shrink:0; }
.sm-cat-preview-item span{ font-size:13px; font-weight:600; color:var(--fg); line-height:1.3; }
.sm-ver-categoria-btn{ background:var(--color-plum); }
@media (min-width:769px){
    .mobile-menu, .search-modal{ display:none !important; }
}

/* Nav principal (Productos + Novedades/Destacados/Marcas/Testimonios/Blog/Ofertas) */
.categories-nav{
    position:relative;
    border-top:1px solid var(--border);
}
.categories-nav ul{
    display:flex; gap:8px; align-items:stretch;
    padding:0 24px;
    max-width:1240px; margin:0 auto;
    list-style:none;
}
.categories-nav a{
    display:inline-flex; align-items:center;
    padding:13px 16px;
    font-size:14px; font-weight:500;
    font-family:inherit;
    color: var(--fg);
    white-space:nowrap;
    border-bottom:2px solid transparent;
    transition: color .2s, border-color .2s;
}
.categories-nav a:hover, .categories-nav a.active{
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}
.categories-nav a.destacado{ color:var(--color-sale); font-weight:600; }

/* Anclas secundarias (Marcas/Testimonios), adentro de .header-actions,
   debajo de la fila de íconos. Ancho fijo = mismo ancho que esa fila
   (4 x 40px + 3 gaps de 20px = 220px), con space-between para que
   "Marcas"/"Testimonios" cubran ese span completo en vez de quedar
   apretados a la derecha con espacio de sobra a la izquierda. */
.header-quicklinks{
    width:220px;
    display:flex; justify-content:space-between; align-items:center;
    padding-bottom:6px;
}
.header-quicklinks a{
    font-size:14px; font-weight:600; color:var(--fg-muted);
    text-decoration:none; transition:color .2s ease, background-color .2s ease, border-color .2s ease;
    background:var(--bg-muted);
    border:1px solid var(--border);
    border-radius:100px;
    padding:6px 14px;
}
.header-quicklinks a:hover{ color:var(--color-primary); border-color:var(--color-primary); background:#fff; }

/* Dropdown por categoría (sin fetch/JS para el contenido — el hover es
   100% CSS; assets/js/cat-nav.js solo mide overflow para decidir el lado
   en el que abre). Reemplaza el mega menú "Productos" de un solo trigger
   por las 7 categorías padre puestas directamente en la fila del nav.
   Aprobado por el cliente como prototipo en prototipo/menu/ antes de
   pasarlo a producción acá. */
.cat-nav-item{ position:static; }
.cat-nav-link .chev{
    width:9px; height:9px; margin-left:6px; transition:transform .25s ease; color:var(--fg-muted);
}
.cat-nav-item:hover .cat-nav-link .chev{ transform:rotate(180deg); color:var(--color-primary); }

/* El panel siempre mide lo mismo sin importar qué categoría dispare el
   hover: el ancho completo de la fila de categorías, desde el arranque
   de "Bioestimuladores" hasta el final de "Peptonas" (mismo max-width +
   padding que .container, centrado contra .categories-nav en vez de
   contra el <li> individual que lo abrió). */
.cat-nav-dropdown{
    position:absolute; top:100%; left:50%;
    width:100%; max-width:1240px;
    box-sizing:border-box;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(50px); -webkit-backdrop-filter:blur(50px);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    box-shadow:0 30px 60px -22px rgba(51,51,51,.32);
    overflow:hidden;
    opacity:0; visibility:hidden;
    transform:translateX(-50%) translateY(10px) scale(.985);
    transform-origin:top center;
    transition:opacity .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.22,1,.36,1), visibility .25s;
    z-index:60;
    display:flex;
}
.cat-nav-item:hover .cat-nav-dropdown{
    opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) scale(1);
}

/* Franja lateral: ícono grande + nombre + tagline de la categoría padre */
.cat-nav-dropdown-rail{
    width:202px; flex-shrink:0;
    background:linear-gradient(165deg, var(--color-plum), var(--color-primary) 130%);
    color:#fff;
    padding:32px 24px;
    display:flex; flex-direction:column; justify-content:center;
}
.cat-nav-dropdown-rail-icon{
    width:41px; height:41px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.14);
    color:#fff;
    margin-bottom:17px;
}
.cat-nav-dropdown-rail-icon svg{ width:22px; height:22px; }
.cat-nav-dropdown-rail-title{
    font-family:var(--font-display); font-weight:400; font-size:20px;
    line-height:1.25; margin:0 0 7px; color:#fff;
}
.cat-nav-dropdown-rail-tag{
    font-size:12.5px; line-height:1.3; color:rgba(255,255,255,.7);
    margin:0;
}
.cat-nav-dropdown-rail .cat-nav-dropdown-rail-cta,
.cat-nav-dropdown-rail .cat-nav-dropdown-rail-cta:visited{
    display:inline-flex; align-items:center; gap:7px;
    font-size:14px; font-weight:700; color:#fff;
    text-decoration:none; margin-top:19px; padding:0;
    border-bottom:none;
}
.cat-nav-dropdown-rail-cta svg{ width:14px; height:14px; transition:transform .2s ease; }
.cat-nav-dropdown-rail-cta:hover svg{ transform:translate(3px,-3px); }

/* Grid de mini-cards con foto por subcategoría */
.cat-nav-dropdown-body{ padding:24px; }
.cat-nav-dropdown-eyebrow{
    display:block;
    font-family:var(--font-sans);
    font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
    color:var(--fg-muted);
    margin-bottom:17px;
}
.cat-nav-dropdown-grid{
    display:grid;
    grid-template-columns:repeat(var(--cols, 2), 228px);
    gap:14px;
}
.cat-nav-dropdown-grid .cat-nav-card{
    position:relative;
    display:block;
    border-radius:12px;
    overflow:hidden;
    text-decoration:none;
    height:253px;
    background:var(--bg-muted);
    padding:0;
    border-bottom:none;
    white-space:normal;
}
.cat-nav-card img{
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover;
    transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.cat-nav-card:hover img{ transform:scale(1.08); }
.cat-nav-card::after{
    content:'';
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(0deg, rgba(51,51,51,.82) 0%, rgba(51,51,51,.15) 55%, transparent 75%);
}
.cat-nav-card span{
    position:absolute; left:12px; right:12px; bottom:11px; z-index:2;
    font-size:14px; font-weight:600; color:#fff;
    line-height:1.25;
}

.cat-nav-dropdown-foot{
    margin-top:19px; padding-top:17px;
    border-top:1px solid var(--border);
}
.cat-nav-dropdown-foot a{
    display:inline-flex; align-items:center; gap:7px;
    font-size:15px; font-weight:700; color:var(--color-marca);
    text-decoration:none;
}
.cat-nav-dropdown-foot a svg{ width:16px; height:16px; transition:transform .2s ease; }
.cat-nav-dropdown-foot a:hover svg{ transform:translate(3px,-3px); }

/* ============ HERO (Editorial Product Gallery: dock + crossfade) ============
   Reemplaza el hero-track deslizante anterior. Slides en position:absolute
   con crossfade + zoom sutil de foto; navegación por dock de miniaturas
   (abajo-izquierda) en vez de dots. JS en assets/js/hero.js (separado de
   main.js). Usa las mismas 3 colecciones reales de las promo-cards. */
.hero{
    position:relative;
    height:560px;
    max-height:78vh;
    overflow:hidden;
    background:var(--color-plum);
}

.hero-slide{
    position:absolute; inset:0;
    display:grid; grid-template-columns:1.1fr 0.9fr;
    align-items:center;
    opacity:0; visibility:hidden;
    transition:opacity .7s ease;
    padding:0 40px;
    max-width:1240px; margin:0 auto; left:0; right:0;
}
.hero-slide.activa{ opacity:1; visibility:visible; z-index:2; }

.hero-foto{
    position:relative;
    height:78%;
    border-radius:var(--radius-md);
    overflow:hidden;
    transform:scale(1.04);
    transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.hero-slide.activa .hero-foto{ transform:scale(1); }
.hero-foto img{ width:100%; height:100%; object-fit:cover; }
.hero-foto .grad{ position:absolute; inset:0; }
.hero-foto .grad::after{
    content:'';
    position:absolute; inset:0;
    background-image:repeating-linear-gradient(120deg, rgba(255,255,255,.06) 0 2px, transparent 2px 26px);
}

.hero-copy{
    color:#fff;
    padding-left:48px;
    opacity:0;
    transform:translateY(16px);
    transition:opacity .6s ease .15s, transform .6s ease .15s;
}
.hero-slide.activa .hero-copy{ opacity:1; transform:translateY(0); }

.hero-copy .eyebrow{
    display:inline-block;
    font-size:11.5px; text-transform:uppercase; letter-spacing:.14em;
    color:var(--color-rose-soft);
    border:1px solid rgba(255,255,255,.3);
    border-radius:100px;
    padding:6px 14px;
    margin-bottom:20px;
}
.hero-copy h1{
    font-size:38px; line-height:1.15; margin-bottom:16px; color:#fff;
    font-style:italic; font-weight:500;
}
.hero-copy p{
    font-size:14.5px; color:rgba(255,255,255,.75); line-height:1.7;
    max-width:340px; margin-bottom:0;
}
.hero-meta{
    display:flex; gap:26px;
    margin:20px 0 26px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.18);
}
.hero-meta div{ display:flex; flex-direction:column; gap:4px; }
.hero-meta span.label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.55); }
.hero-meta span.valor{ font-size:13.5px; font-weight:500; color:#fff; }

/* Contador arriba a la derecha */
.hero-contador{
    position:absolute; top:24px; right:40px; z-index:3;
    color:rgba(255,255,255,.6); font-size:12.5px; letter-spacing:.05em;
}
.hero-contador strong{ color:#fff; font-weight:600; }

/* Dock de miniaturas (navegación) */
.hero-dock{
    position:absolute; left:40px; bottom:24px; z-index:3;
    display:flex; gap:10px;
}
.dock-item{
    position:relative;
    width:56px; height:56px;
    border-radius:8px;
    overflow:hidden;
    cursor:pointer;
    border:2px solid transparent;
    transition:border-color .25s ease, transform .25s ease;
    flex-shrink:0;
}
.dock-item .grad{ position:absolute; inset:0; }
.dock-item::before{
    content:'';
    position:absolute; inset:0;
    background:rgba(36,20,28,.35);
    transition:background .25s ease;
}
.dock-item:hover::before{ background:rgba(36,20,28,.1); }
.dock-item.activo{ border-color:#fff; transform:translateY(-4px); }
.dock-item.activo::before{ background:rgba(36,20,28,0); }
.dock-label{
    position:absolute; bottom:5px; left:5px; right:5px; z-index:2;
    font-size:8.5px; font-weight:600; color:#fff; text-transform:uppercase; letter-spacing:.02em;
    line-height:1.2;
}

.hero-arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:3;
    width:44px; height:44px; border-radius:50%;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.25);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:16px;
    transition:background .2s ease;
}
.hero-arrow:hover{ background:rgba(255,255,255,.25); }
.hero-arrow.prev{ left:20px; }
.hero-arrow.next{ right:20px; }

/* Default para .section en el resto del sitio (páginas fuera del home:
   quienes-somos, blog, etc.) — el home ya no depende de esto, cada
   sección suya tiene su propio padding por #id (ver más abajo), que
   gana por especificidad. */
.section{ padding:4rem 0; }

/* ============ SECTION HEADINGS ============ */
/* scroll-margin-top: compensa .site-header sticky (topbar + header-main +
   categories-nav) para que al saltar por ancla (#novedades, #marcas, etc.)
   el título de la sección no quede tapado detrás del header. */
#novedades{ padding:2.5rem 0rem 4rem 0rem; scroll-margin-top:165px; }
#categorias{ padding:4rem 0rem 3rem 0rem; scroll-margin-top:165px; }
#destacados{ padding:2.5rem 0rem 4rem 0rem; scroll-margin-top:165px; }
.benefits-section{ padding:3rem 0; }
#marcas{ padding:3rem 0rem 4rem 0rem; scroll-margin-top:165px; }
#testimonios{ padding:3rem 0; scroll-margin-top:165px; }
#home-blog{ padding:3rem 0rem 4.5rem 0rem; }
.section-head{
    display:flex; align-items:baseline; justify-content:space-between;
    margin-bottom:32px;
    gap:16px; flex-wrap:wrap;
}
@media (min-width:1199px){ .section-head{ padding-left:2rem; } }
/* Mismo tratamiento que .dest-heading__title/.dest-heading__eyebrow (tarjetas
   destacadas): peso liviano + color Marca en el título, eyebrow angosto y
   con mucho tracking — para que todos los títulos de sección del home se
   vean como una sola familia visual. */
.section-head h2{
    font-size:30px;
    font-weight:300;
    letter-spacing:-0.02em;
    color:var(--color-marca);
}
.section-head .eyebrow-sm{
    display:block; font-size:10px; font-weight:500; letter-spacing:0.28em;
    text-transform:uppercase; color:var(--fg-muted); margin-bottom:6px;
}
.section-link{
    font-size:14px; font-weight:600; color:var(--color-primary);
    border-bottom:1px solid var(--color-primary);
    padding-bottom:2px;
}

/* ============ CATEGORY GRID ============ */
.category-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
    gap:20px;
}
/* Mismo tratamiento premium que .dest-card (tarjetas destacadas del home):
   sombra + elevación 3D al hover, shine sweep diagonal, acento de color de
   marca y línea creciente bajo el texto — para que toda la sección se
   sienta parte del mismo sistema visual. */
.category-card{
    position:relative;
    overflow:hidden;
    text-align:center;
    padding:28px 12px;
    background:var(--bg-muted);
    border-radius:2px;
    box-shadow:var(--shadow-card);
    transition: transform .3s ease-out, box-shadow .3s ease-out;
}
.category-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-hover); }

/* Shine sweep: franja de luz diagonal que cruza la tarjeta en hover (igual
   que .dest-card__media::after). */
.category-card::after{
    content:'';
    position:absolute; inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(115deg, transparent 40%, color-mix(in oklab, white 35%, transparent) 50%, transparent 60%);
    transform:translateX(-120%);
    transition:transform .7s ease-out;
}
.category-card:hover::after{ transform:translateX(120%); }

.category-icon{
    position:relative;
    width:72px; height:72px; margin:0 auto 14px;
    border-radius:50%;
    background:#fff;
    display:flex; align-items:center; justify-content:center;
    color:var(--color-primary);
    transition: transform .3s ease, box-shadow .3s ease;
}
.category-icon svg{
    width:34px; height:34px;
    transition: transform .3s ease;
}
.category-card:hover .category-icon{
    box-shadow: 0 8px 20px rgba(111,117,156,0.25);
}
.category-card:hover .category-icon svg{
    transform: scale(1.15) rotate(-8deg);
}
.category-card span{
    position:relative;
    display:inline-block;
    padding-bottom:6px;
    font-size:14px; font-weight:600; color:var(--color-plum);
    transition:color .3s ease-out;
}
.category-card span::after{
    content:'';
    position:absolute; left:0; bottom:0;
    height:1px; width:0;
    background:var(--color-primary);
    box-shadow:0 2px 10px color-mix(in oklab, var(--color-primary) 70%, transparent);
    transition:width .4s ease-out, box-shadow .4s ease-out;
}
.category-card:hover span{ color:var(--color-primary); }
.category-card:hover span::after{ width:100%; }

/* ============ PROMO BANNERS (colecciones destacadas del home) ============
   Prototipo 3 elegido: editorial hover-reveal. Por ahora usa fondo con
   degradado (placeholder) igual que las tarjetas del mega menú, en vez
   de foto real — cuando haya fotografía de producto, se agrega un <img>
   dentro de .promo-foto con object-fit:cover por encima del degradado. */
.promo-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}
.promo-card{
    position:relative;
    display:block;
    border-radius:var(--radius-lg);
    overflow:hidden;
    aspect-ratio:3/4;
    color:#fff;
}
.promo-foto{
    position:absolute; inset:0;
    background:linear-gradient(155deg, var(--color-rose), var(--color-primary) 60%);
}
.promo-card:nth-child(2) .promo-foto{ background:linear-gradient(155deg, var(--color-primary-dark), var(--color-plum) 65%); }
.promo-card:nth-child(3) .promo-foto{ background:linear-gradient(155deg, var(--color-primary), var(--color-plum) 70%); }
.promo-foto:not(.tiene-foto)::after{
    content:'';
    position:absolute; inset:0;
    background-image:repeating-linear-gradient(120deg, rgba(255,255,255,.06) 0 2px, transparent 2px 26px);
}

.promo-tag{
    position:absolute; top:20px; left:20px; z-index:2;
    font-size:10.5px; text-transform:uppercase; letter-spacing:.12em;
    color:#fff; opacity:.9;
}

.promo-titulo{
    position:absolute; left:20px; right:20px; bottom:24px; z-index:2;
    font-family:var(--font-display); font-style:italic; font-weight:500;
    font-size:24px; line-height:1.2; color:#fff;
    transition:opacity .25s ease;
}

.promo-reveal{
    position:absolute; inset:0; z-index:3;
    background:rgba(36,20,28,.62);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:24px;
    opacity:0;
    transform:translateY(10px);
    transition:opacity .3s ease, transform .3s ease;
}
.promo-card:hover .promo-reveal{ opacity:1; transform:translateY(0); }
.promo-card:hover .promo-titulo{ opacity:0; }

.promo-reveal p{ font-size:17px; opacity:.9; line-height:1.55; margin-bottom:16px; color:#fff; }
.promo-cta{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12.5px; font-weight:600; letter-spacing:.02em;
    color:var(--color-plum); background:#fff;
    padding:10px 18px; border-radius:100px;
    width:fit-content;
    transition:background .2s ease, color .2s ease;
}
.promo-cta:hover{ background:var(--color-primary); color:#fff; }
/* ============ PRODUCT GRID / CARD ============ */
.product-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}
.product-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    overflow:hidden;
    transition: transform .25s, box-shadow .25s;
    display:flex; flex-direction:column;
}
.product-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.product-media{ position:relative; aspect-ratio:1/1; background:var(--bg-muted); }
.product-media img{ width:100%; height:100%; object-fit:cover; }
.product-badge{
    position:absolute; top:12px; left:12px;
    background:var(--color-sale); color:#fff;
    font-size:11px; font-weight:700;
    padding:4px 10px; border-radius:999px;
}
.product-badge.nuevo{ background:var(--color-plum); }
.product-badge.bestseller{ background:var(--color-primary); }
.product-fav{
    position:absolute; top:10px; right:10px;
    width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,0.9);
    display:flex; align-items:center; justify-content:center;
    color:var(--color-plum);
    transition:background .2s, color .2s;
}
.product-fav:hover{ background:#fff; }
.product-fav.activo{ color:var(--color-primary); }
.product-fav.activo svg{ fill:var(--color-primary); }

/* ============ BOTÓN "ANTES / DESPUÉS" en la tarjeta (solo Skincare) ============ */
.product-antes-despues{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:12px;
    background:rgba(36,27,33,.72);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    color:#fff;
    font-size:12.5px; font-weight:600; letter-spacing:.02em;
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease, visibility .25s ease;
}
.product-card:hover .product-antes-despues{ opacity:1; visibility:visible; }
.product-antes-despues:hover{ background:rgba(194,41,92,.85); }

/* Versión permanente (siempre visible, sin hover) para la ficha de
   producto — ahí no hay "tarjeta" sobre la que hacer hover, así que el
   ícono debe verse fijo sobre la imagen principal. */
.pdp-antes-despues{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:12px;
    background:rgba(36,27,33,.72);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    color:#fff;
    font-size:13px; font-weight:600; letter-spacing:.02em;
    border:none; cursor:pointer;
    transition:background .2s ease;
}
.pdp-antes-despues:hover{ background:rgba(194,41,92,.85); }

/* ============ MODAL ANTES / DESPUÉS ============ */
.antes-despues-overlay{
    position:fixed; inset:0;
    background:rgba(36,27,33,.55);
    opacity:0; visibility:hidden;
    transition:opacity .3s;
    z-index:95;
}
.antes-despues-overlay.abierto{ opacity:1; visibility:visible; }

.antes-despues-modal{
    position:fixed; top:50%; left:50%;
    transform:translate(-50%,-50%) scale(.96);
    width:min(520px, 92vw);
    opacity:0; visibility:hidden;
    transition:opacity .3s ease, transform .3s ease;
    z-index:96;
}
.antes-despues-modal.abierto{
    opacity:1; visibility:visible;
    transform:translate(-50%,-50%) scale(1);
}

.antes-despues-panel{
    background:#fff;
    border-radius:var(--radius-md);
    padding:28px;
    box-shadow:0 30px 60px -18px rgba(74,42,58,.4);
    position:relative;
}
.antes-despues-cerrar{
    position:absolute; top:16px; right:16px; z-index:3;
    width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:var(--fg-muted); font-size:16px;
    transition:background .2s;
}
.antes-despues-cerrar:hover{ background:var(--bg-muted); }
.antes-despues-titulo{ font-size:20px; margin-bottom:4px; padding-right:32px; }
.antes-despues-nota{ font-size:12.5px; color:var(--fg-muted); margin-bottom:18px; }

.ad-slider{
    position:relative;
    width:100%; aspect-ratio:4/5;
    min-height:340px; /* respaldo: si aspect-ratio no calcula el alto por algún motivo, esto igual reserva espacio */
    background:var(--bg-muted);
    border-radius:var(--radius-sm);
    overflow:hidden;
    cursor:ew-resize;
    user-select:none;
}
.ad-img{
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover;
    pointer-events:none;
    -webkit-user-drag:none;
}
/* La foto "antes" ocupa EXACTAMENTE el mismo espacio que "después"
   (mismo width/height/object-fit) — la diferencia es solo un clip-path
   que revela la parte izquierda. Así ambas calzan pixel por pixel al
   arrastrar, en vez de desalinearse como con el truco de ancho%. */
.ad-antes{ clip-path: inset(0 50% 0 0); /* JS actualiza el inset derecho al arrastrar */ }

.ad-label{
    position:absolute; top:14px; z-index:2;
    font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
    color:#fff; background:rgba(36,27,33,.55);
    padding:5px 12px; border-radius:100px;
}
.ad-label-antes{ left:14px; }
.ad-label-despues{ right:14px; }

.ad-handle{
    position:absolute; top:0; bottom:0; left:50%; /* JS actualiza este left % */
    width:0; z-index:3;
    display:flex; align-items:center; justify-content:center;
    transform:translateX(-50%);
}
.ad-handle::before{
    content:'';
    position:absolute; top:0; bottom:0; left:50%;
    width:3px; background:#fff;
    transform:translateX(-50%);
    box-shadow:0 0 0 1px rgba(0,0,0,.06);
}
.ad-handle-flechas{
    position:relative; z-index:1;
    width:38px; height:38px; border-radius:50%;
    background:#fff; box-shadow:var(--shadow-hover);
    display:flex; align-items:center; justify-content:center;
    font-size:13px; color:var(--color-plum); font-weight:700;
    letter-spacing:-2px;
}

.product-body{ padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.product-cat{ font-size:12.5px; font-weight:700; color:var(--fg); text-transform:none; letter-spacing:0; }
.product-name{ font-size:13.5px; font-weight:400; color:var(--fg-muted); line-height:1.35; min-height:36px; }
.product-price-row{ display:flex; align-items:baseline; gap:8px; margin-top:auto; }
.price-now{ font-size:18px; font-weight:700; color:var(--color-primary); }
.price-before{ font-size:13px; color:var(--fg-muted); text-decoration:line-through; }
.btn-add{
    margin-top:10px;
    width:100%;
    padding:10px;
    background:#fff;
    color:var(--color-primary);
    border:1.5px solid var(--color-primary);
    border-radius:999px;
    font-size:13px; font-weight:600;
    text-align:center;
    display:flex; align-items:center; justify-content:center; gap:6px;
    transition: background .2s, color .2s;
}
.btn-add svg{ flex-shrink:0; }
.btn-add:hover{ background:var(--color-primary); color:#fff; }

/* ============ CARRUSEL INFINITO (productos destacados) ============
   Loop sin fin: el track trae el mismo set de productos pintado 2 veces
   (ver index.php) — como ambas mitades son idénticas, el salto de vuelta
   es invisible. A diferencia de la v1, el movimiento ahora lo controla
   JS (assets/js/destacados-carrusel.js) en vez de @keyframes, para poder
   mover manualmente con las flechas y marcar el dot activo. Respeta
   prefers-reduced-motion vía guard en el propio JS (no solo CSS). */
.destacados-carrusel{
    position:relative;
    overflow:hidden;
    padding:8px 0 20px;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.destacados-track{
    display:flex;
    width:max-content;
    gap:24px;
    /* SIN will-change:transform a propósito: esa propiedad crea un
       "containing block" para cualquier descendiente position:fixed
       (como el modal Antes/Después embebido en cada tarjeta), lo que
       atrapaba el modal dentro del carrusel en vez de centrarlo en
       toda la pantalla. El movimiento del carrusel (JS, cada frame)
       funciona igual de bien sin esta propiedad. */
}
.destacados-track .product-card{
    flex:0 0 270px;
    width:270px;
}

.destacados-arrow{
    position:absolute; top:calc(50% - 20px); transform:translateY(-50%); z-index:4;
    width:44px; height:44px; border-radius:50%;
    background:#fff; box-shadow:var(--shadow-card);
    border:1px solid var(--border);
    color:var(--color-plum);
    display:flex; align-items:center; justify-content:center;
    font-size:16px;
    transition:background .2s ease, color .2s ease;
}
.destacados-arrow:hover{ background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.destacados-arrow.prev{ left:4px; }
.destacados-arrow.next{ right:4px; }

.destacados-dots{
    display:flex; align-items:center; justify-content:center;
    gap:8px;
    margin-top:4px;
}
.destacados-dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--border);
    transition:all .3s ease;
    cursor:pointer;
}
.destacados-dot:hover{ background:var(--color-rose); }
.destacados-dot.activo{ background:var(--color-primary); width:22px; border-radius:4px; }

@media (max-width:640px){
    .destacados-arrow{ display:none; }
}

/* ============ BENEFITS ============ */
.benefits-section{
    background:linear-gradient(135deg, #9298ba, #acb3cd, #9298ba);
    background-size:200% 200%;
    color:#fff;
    animation:benefitsGradientMove 10s ease-in-out infinite alternate;
}
@keyframes benefitsGradientMove{
    0%{ background-position:0% 50%; }
    100%{ background-position:100% 50%; }
}
@media (prefers-reduced-motion: reduce){
    .benefits-section{ animation:none; background-position:0% 50%; }
}
.benefits-section h2, .benefits-section .eyebrow-sm{ color:#fff; }
.benefits-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}
.benefit-item{ text-align:center; padding:0 12px; }
.benefit-icon{
    width:68px; height:68px; margin:0 auto 16px;
    border-radius:50%;
    background:rgba(255,255,255,0.12);
    display:flex; align-items:center; justify-content:center;
    transition: transform .3s ease, background .3s ease;
}
.benefit-icon svg{
    width:32px; height:32px;
    transition: transform .3s ease;
}
.benefit-item:hover .benefit-icon{
    background:rgba(255,255,255,0.2);
}
.benefit-item:hover .benefit-icon svg{
    transform: scale(1.15) rotate(-8deg);
}
.benefit-item h4{ color:#fff; font-size:16px; margin-bottom:4px; }
.benefit-item p{ font-size:13px; color:color-mix(in srgb, white 85%, #91ADBA); }
.benefits-nota-legal{
    text-align:center;
    font-size:12px; color:rgba(255,255,255,.55);
    margin-top:36px;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.15);
}
.benefits-nota-legal a{
    color:rgba(255,255,255,.85);
    text-decoration:underline;
}
.benefits-nota-legal a:hover{ color:#fff; }

/* ============ MARCAS (tarjetas numeradas, estilo sección "Clientes" de grocva.com) ============
   Placeholder: sin logos reales todavía, así que el "logo" es un
   monograma con la inicial de la marca sobre degradado. Cuando lleguen
   los logos reales, se reemplaza .marca-logo-placeholder por un <img>. */
.marcas-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}
.marca-card{
    position:relative;
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:28px 24px 24px;
    display:flex; flex-direction:column; gap:16px;
    transition:transform .25s ease, box-shadow .25s ease;
}
.marca-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); }

.marca-num{
    font-family:var(--font-display); font-style:italic; font-weight:500;
    font-size:13px; color:var(--color-rose);
}

.marca-logo-placeholder{
    width:100%; height:96px;
    border-radius:var(--radius-sm);
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(155deg, var(--color-plum), var(--color-primary) 70%);
}
.marca-card:nth-child(3n+2) .marca-logo-placeholder{ background:linear-gradient(155deg, var(--color-primary-dark), var(--color-plum) 75%); }
.marca-card:nth-child(3n) .marca-logo-placeholder{ background:linear-gradient(155deg, var(--color-primary), var(--color-rose) 80%); }
.marca-logo-placeholder span{
    font-family:var(--font-display); font-style:italic; font-weight:600;
    font-size:34px; color:#fff;
}

.marca-logo-img{
    display:block;
    height:auto;
    margin:0 auto;
    transition: width 3s ease;
}
.marca-card:hover .marca-logo-img{ width:50% !important; }

/* Degradado placeholder (testimonios/blog sin foto real): Marca + su
   complementario en la paleta (Contenedor), en movimiento continuo en
   vez de un fondo estático. */
.placeholder-gradient{
    background:linear-gradient(120deg, var(--color-marca), var(--color-rose), var(--color-marca));
    background-size:200% 200%;
    animation:gradientMove 8s ease infinite;
}
@keyframes gradientMove{
    0%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
    100%{ background-position:0% 50%; }
}

.marca-nombre{ font-size:16px; font-weight:600; color:var(--color-plum); }

.marca-badge{
    display:inline-flex; align-items:center; gap:6px;
    font-size:11.5px; font-weight:600; color:var(--fg-muted);
    width:fit-content;
}
.marca-badge svg{ color:var(--color-primary); flex-shrink:0; }

/* ============ TESTIMONIOS (grid con lightbox) ============
   Prototipo 3 elegido: mosaico de fotos con tabs de filtro por
   categoría, clic abre un lightbox compartido (uno solo por página,
   no uno por tarjeta) con navegación prev/next en loop infinito.
   Hover con sombra neumórfica (negra + brillo blanco) en vez de
   inclinar/escalar la tarjeta — así no se deforma la foto.
   JS en assets/js/testimonios.js. */
.testi-filtros{ display:flex; gap:10px; justify-content:flex-start; flex-wrap:wrap; margin-bottom:32px; }
.testi-filtro{
    padding:9px 18px; border-radius:100px;
    border:1px solid var(--border); background:#fff; color:var(--fg-muted);
    font-size:13px; font-weight:600; cursor:pointer; transition:all .2s ease;
}
.testi-filtro:hover{ border-color:var(--color-primary); color:var(--color-primary); }
.testi-filtro.activo{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; }

.testi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:36px; }
.testi-tile{
    position:relative; aspect-ratio:1/1; border-radius:var(--radius-md);
    overflow:hidden; cursor:pointer;
    transition:transform .3s ease, box-shadow .3s ease;
}
.testi-tile:hover{
    transform:translateY(-6px);
    box-shadow: 18px 18px 35px rgba(0,0,0,.75), -14px -14px 30px rgba(255,255,255,.6);
}
.testi-tile.oculta{ display:none; }

/* ---- "Ver más fotos" / "Comprimir" — solo en mobile, limita a 4 fotos (2x2) ---- */
.testi-mostrar-mas-wrap{ text-align:center; margin-top:20px; display:none; }
.btn-testi-toggle{
    padding:11px 26px;
    border:1px solid var(--color-primary);
    border-radius:999px;
    background:#fff; color:var(--color-primary);
    font-size:13.5px; font-weight:600;
    transition:background .2s ease, color .2s ease;
}
.btn-testi-toggle:hover{ background:var(--color-primary); color:#fff; }
.testi-foto{ position:absolute; inset:0; transition:transform .4s ease; }
.testi-tile:hover .testi-foto{ transform:scale(1.08); }
.testi-tile::before{
    content:'';
    position:absolute; inset:0; z-index:1;
    background:rgba(36,20,28,0);
    transition:background .25s ease;
}
.testi-tile:hover::before{ background:rgba(36,20,28,.25); }
.testi-lupa{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.8);
    z-index:2; width:40px; height:40px; border-radius:50%;
    background:#fff; display:flex; align-items:center; justify-content:center;
    color:var(--color-plum); font-size:16px;
    opacity:0; transition:opacity .25s ease, transform .25s ease;
}
.testi-tile:hover .testi-lupa{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.testi-mini-cat{
    position:absolute; bottom:10px; left:10px; z-index:2;
    font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    color:#fff; background:rgba(36,20,28,.55); padding:4px 9px; border-radius:100px;
}

/* ---- Lightbox de testimonios ---- */
.lightbox-overlay{
    position:fixed; inset:0; background:rgba(36,20,28,.75);
    opacity:0; visibility:hidden; transition:opacity .3s; z-index:1210;
}
.lightbox-overlay.abierto{ opacity:1; visibility:visible; }
.lightbox{
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.96);
    width:min(720px, 92vw);
    opacity:0; visibility:hidden;
    transition:opacity .3s ease, transform .3s ease;
    z-index:1211;
}
.lightbox.abierto{ opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); }
.lightbox-caja{
    display:grid; grid-template-columns:1fr 1fr;
    background:#fff; border-radius:var(--radius-lg); overflow:hidden;
    box-shadow:0 30px 60px -18px rgba(74,42,58,.4);
}
.lightbox-foto{ position:relative; min-height:520px; }
.lightbox-foto:not(.tiene-foto)::after{
    content:'';
    position:absolute; inset:0;
    background-image:repeating-linear-gradient(120deg, rgba(255,255,255,.06) 0 2px, transparent 2px 26px);
}
.lightbox-info{ padding:32px; display:flex; flex-direction:column; gap:14px; position:relative; }
.lightbox-cerrar{
    position:absolute; top:14px; right:14px;
    width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:var(--fg-muted); font-size:16px; border:none; background:none; cursor:pointer;
}
.lightbox-cerrar:hover{ background:var(--bg-muted); }

.lightbox-arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:97;
    width:44px; height:44px; border-radius:50%;
    background:#fff; box-shadow:0 10px 30px rgba(74,42,58,.2);
    border:none; color:var(--color-plum); font-size:18px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:background .2s ease, color .2s ease;
}
.lightbox-arrow:hover{ background:var(--color-primary); color:#fff; }
.lightbox-arrow.prev{ left:-22px; }
.lightbox-arrow.next{ right:-22px; }

.lightbox-cat{
    display:inline-flex; width:fit-content;
    font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
    color:var(--color-primary); background:var(--color-rose-soft);
    padding:4px 10px; border-radius:100px;
}
.lightbox-estrellas{ color:var(--color-primary); font-size:14px; }
.lightbox-quote{
    font-family:var(--font-display); font-style:italic; font-weight:500;
    font-size:19px; line-height:1.5; color:var(--fg);
}
.lightbox-autor{ display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--border); margin-top:auto; }
.lightbox-avatar{
    width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-style:italic; font-weight:600; font-size:16px; color:#fff;
    background:linear-gradient(155deg, var(--color-plum), var(--color-primary) 70%);
}
.lightbox-autor-texto strong{ display:block; font-size:14px; color:var(--color-plum); }
.lightbox-autor-texto span{ font-size:12px; color:var(--fg-muted); }

@media (max-width:760px){
    .testi-grid{ grid-template-columns:repeat(2,1fr); }
    .testi-tile.oculta-por-limite{ display:none; }
    .testi-mostrar-mas-wrap{ display:block; }
    .lightbox-caja{ grid-template-columns:1fr; }
    /* min-height:520px es de escritorio (columna lateral) — en mobile la
       foto va arriba, angosta, y ese min-height ganaba por encima del
       aspect-ratio, dejando la foto casi el doble de alta de lo que le
       corresponde y descuadrando todo lo de abajo (flechas, texto). */
    .lightbox-foto{ aspect-ratio:4/3; min-height:0; }
    /* Las flechas quedan centradas sobre TODO el modal (foto + info)
       por defecto — en mobile la foto va arriba y la info abajo, así
       que ese centro cae justo sobre la ✕. Las recentramos solo sobre
       la foto: mismo cálculo que su aspect-ratio (4/3) y el ancho real
       del modal (92vw, tope 720px, que no se alcanza en este rango). */
    .lightbox-arrow{ top:34.5vw; transform:translateY(-50%); }
    .lightbox-arrow.prev{ left:8px; }
    .lightbox-arrow.next{ right:8px; }
    .lightbox-quote{ font-size:15px; line-height:1.45; }
    .lightbox-info{ padding:22px; gap:10px; }
}

/* ============ PUNTOS DE VENTA (directorio agrupado por departamento + modal con mapa real) ============
   Directorio de distribuidores/minoristas autorizados, agrupado por
   departamento (Lima > Arequipa > La Libertad > Piura > Cusco, según
   ranking de importancia acordado — solo 5 de 24 por ahora). Al elegir
   un departamento (selector o clic en su nombre) se abre un modal con
   el mapa SVG real del cliente (ese departamento resaltado) + sus
   puntos de venta. JS en assets/js/puntos-de-venta.js. */
.pv-hero{
    position:relative;
    background-image:url('../img/fondo-cobertura.webp');
    background-size:cover; background-position:center; background-repeat:no-repeat;
    padding:10rem 0;
    /* topbar + header + nav + breadcrumb + este hero = 100vh exacto.
       --pv-hero-top (distancia real hasta acá, medida en JS porque
       .site-header es sticky) se resta de 100vh. */
    min-height:calc(80vh - var(--pv-hero-top, 0px));
    display:flex; align-items:center;
    box-sizing:border-box;
}
.pv-hero::before{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.85) 35%, rgba(255,255,255,.15) 75%, rgba(255,255,255,0) 100%);
}
.pv-hero .container{ position:relative; z-index:1; }
.pv-hero-breadcrumb{
    position:absolute; top:20px; left:24px; z-index:2;
    margin:0;
}
.pv-hero-texto{ width:50%; margin-top:5rem; }

.pv-directorio-head{
    justify-content:center;
    text-align:center;
    padding-top:2rem;
}
.pv-titulo{ font-size:34px; margin:10px 0 14px; line-height:1.2; }
.pv-titulo em{ font-style:italic; color:var(--color-primary); }
.pv-subtexto{ color:var(--fg-muted); font-size:14.5px; line-height:1.6; max-width:560px; }

/* ---- Selector "Ver mapa de" ---- */
.pv-filtro-row{
    display:flex; align-items:center; gap:12px;
    margin-top:22px; margin-bottom:0;
}
.pv-filtro-row label{ font-size:13.5px; font-weight:600; color:var(--fg-muted); }
.pv-filtro-row select{
    font-family:inherit; font-size:13.5px; font-weight:600;
    padding:10px 36px 10px 16px;
    border:1px solid var(--border); border-radius:999px;
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234A2A3A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    color:var(--fg); appearance:none; -webkit-appearance:none; cursor:pointer;
}
.pv-filtro-row select:hover{ border-color:var(--color-primary); }

/* ---- Grupo por departamento ---- */
.pv-grupo-depto{ margin-bottom:36px; max-width:620px; margin-left:auto; margin-right:auto; }
.pv-grupo-depto:last-child{ margin-bottom:0; }
/* Sin puntos de venta físicos cargados (solo cobertura de envíos) — no
   hay .pv-lista que separar del siguiente departamento. */
.pv-grupo-depto-vacio .pv-depto-nombre{ margin-bottom:0; }
.pv-grupo-depto-vacio{ margin-bottom:14px; }
.pv-depto-nombre{
    display:flex; align-items:center; gap:10px;
    width:100%;
    background:none; border:none; text-align:left; cursor:pointer;
    padding:10px 0 14px; margin-bottom:18px;
    border-bottom:1px solid var(--border);
    border-radius:var(--radius-sm);
    font-family:var(--font-display); font-style:italic; font-weight:600;
    font-size:20px; color:var(--color-plum);
    transition:background-color .2s ease, padding-left .2s ease, padding-right .2s ease;
}
.pv-depto-nombre:hover{ background:var(--bg-muted); padding-left:14px; padding-right:14px; }
.pv-depto-dot{
    width:9px; height:9px; border-radius:50%;
    background:var(--color-primary); flex-shrink:0;
}
.pv-depto-ver-mapa{
    margin-left:auto;
    font-family:var(--font-sans); font-style:normal; font-weight:600;
    font-size:12.5px; color:var(--color-primary);
}
.pv-depto-nombre:hover .pv-depto-ver-mapa{ color:var(--color-primary-dark); }

.pv-lista{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.pv-card{
    display:flex; align-items:flex-start; gap:14px;
    background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
    padding:20px; position:relative;
    transition:transform .2s ease, box-shadow .2s ease;
}
.pv-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.pv-card-icono{
    width:42px; height:42px; border-radius:50%; flex-shrink:0;
    background:var(--color-rose-soft);
    display:flex; align-items:center; justify-content:center; font-size:19px;
}
.pv-card-texto{ display:flex; flex-direction:column; gap:2px; }
.pv-card-texto strong{ font-size:14.5px; color:var(--color-plum); }
.pv-card-ciudad{ font-size:12.5px; color:var(--fg-muted); }
.pv-card-linea{ font-size:11.5px; color:var(--color-rose); font-weight:600; margin-top:4px; }
.pv-card-badge{
    position:absolute; top:14px; right:14px;
    font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    color:var(--color-primary); background:var(--color-rose-soft);
    padding:4px 9px; border-radius:100px;
}

/* ---- Modal: mapa real del departamento + su listado ---- */
.pv-modal-overlay{
    position:fixed; inset:0; background:rgba(36,27,33,.6);
    opacity:0; visibility:hidden; transition:opacity .3s; z-index:95;
}
.pv-modal-overlay.abierto{ opacity:1; visibility:visible; }
.pv-modal{
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.96);
    width:min(940px, 94vw);
    max-height:90vh;
    opacity:0; visibility:hidden;
    transition:opacity .3s ease, transform .3s ease;
    z-index:96;
}
.pv-modal.abierto{ opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); }
.pv-modal-panel{
    display:grid; grid-template-columns:1fr 1.1fr;
    background:#fff; border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:0 30px 60px -18px rgba(74,42,58,.4);
    max-height:90vh;
}
.pv-modal-mapa{
    background:var(--bg-muted);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:24px;
}
.pv-modal-mapa img{ width:100%; height:auto; max-height:56vh; object-fit:contain; }
.pv-modal-whatsapp{
    display:inline-flex; align-items:center; gap:8px;
    margin-top:28px;
    padding:12px 22px;
    background:#25D366; color:#fff;
    border-radius:100px;
    font-size:14px; font-weight:600;
    text-decoration:none;
    box-shadow:0 12px 24px -10px rgba(37,211,102,.55);
    transition:transform .2s ease, box-shadow .2s ease;
}
.pv-modal-whatsapp:hover{ transform:translateY(-2px); box-shadow:0 16px 28px -10px rgba(37,211,102,.65); }
.pv-modal-whatsapp svg{ flex-shrink:0; }
.pv-modal-info{
    padding:28px; position:relative;
    overflow-y:auto; max-height:90vh;
}
.pv-modal-info h3{
    font-size:24px; margin:6px 0 20px;
}
.pv-modal-cerrar{
    position:absolute; top:14px; right:14px; z-index:3;
    width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:var(--fg-muted); font-size:16px; border:none; background:none; cursor:pointer;
}
.pv-modal-cerrar:hover{ background:var(--bg-muted); }
.pv-modal-lista{ display:flex; flex-direction:column; gap:12px; }
.pv-modal-lista .pv-card{ padding:16px; }

/* ---- Cobertura de envíos por agencia (dentro del modal del mapa) ---- */
.pv-modal-envios{ margin-top:24px; padding-top:20px; border-top:1px solid var(--border); }
.pv-modal-envios .eyebrow-sm{ display:block; margin-bottom:12px; }
.pv-envio-lista{ display:flex; flex-direction:column; gap:16px; }
.pv-envio-provincia{ padding-bottom:16px; border-bottom:1px solid var(--border); }
.pv-envio-provincia:last-child{ padding-bottom:0; border-bottom:none; }
.pv-envio-provincia strong{ display:block; font-size:14.5px; color:var(--color-plum); margin-bottom:8px; }
.pv-envio-agencias{ display:flex; flex-wrap:wrap; gap:8px; }
.pv-agencia-pill{
    display:inline-flex; align-items:center;
    background:var(--bg-muted); border-radius:100px;
    padding:5px 14px; font-size:12px; font-weight:600; color:var(--color-primary);
}

@media (max-width:760px){
    .pv-lista{ grid-template-columns:1fr; }
    .pv-modal-panel{ grid-template-columns:1fr; overflow-y:auto; }
    .pv-modal-mapa{ padding:16px; }
    .pv-modal-info{ max-height:none; overflow-y:visible; }

    /* Hero pensado para desktop (texto al 50% junto a la imagen de fondo,
       10rem de padding, 80vh de alto) — en mobile eso partía el título en
       muchas líneas y dejaba enormes espacios vacíos arriba/abajo. */
    .pv-hero{ padding:2.5rem 0; min-height:0; display:block; background-image:url('../img/fondo-cobertura-movil.jpg'); }
    /* Blur alto sobre la imagen de fondo, solo mobile — el ::before (gradiente)
       queda debajo, así que lo que se difumina es la foto, no el texto. */
    .pv-hero::after{
        content:'';
        position:absolute; inset:0;
        backdrop-filter:blur(5px);
        -webkit-backdrop-filter:blur(5px);
    }
    .pv-hero-breadcrumb{ position:static; margin-bottom:16px; }
    .pv-hero-texto{ width:100%; margin-top:0; }
    .pv-hero-texto .eyebrow-sm{ font-size:11px; line-height:1.2; }
    .pv-titulo{ font-size:22px; margin:6px 0 8px; line-height:1.2; }
    .pv-subtexto{ font-size:13px; line-height:1.4; }
    .pv-filtro-row{ flex-direction:column; align-items:flex-start; gap:8px; }
    .pv-directorio-head h2{ line-height:1.15; }
    .pv-depto-nombre{ font-size:16px; }
}

/* ============ LIBRO DE RECLAMACIONES ============
   Obligatorio por ley (Ley 29571 + D.S. 011-2011-PCM). Reutiliza look
   de tarjeta/formulario ya establecido en el sitio (mismos radios,
   bordes, colores) en vez de inventar un sistema visual aparte.
   JS en assets/js/libro-reclamaciones.js. */
.lr-wrap{ max-width:820px; }

.lr-header{
    background:linear-gradient(155deg, var(--color-rose-soft), #fff 70%);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:32px 36px;
    margin-bottom:28px;
    border-bottom:4px solid var(--color-primary);
}
.lr-header-logo{
    font-family:var(--font-display); font-size:24px; font-style:italic; font-weight:600;
    color:var(--color-primary);
}
.lr-header-divider{ height:1px; background:var(--border); margin:16px 0 20px; }
.lr-header h1{ font-size:24px; color:var(--color-plum); margin-bottom:14px; }
.lr-header p{ font-size:13.5px; color:var(--fg-muted); line-height:1.6; }

.lr-card{
    background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
    padding:28px; margin-bottom:20px;
}
.lr-card-titulo{
    font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
    color:var(--fg); margin-bottom:20px;
    padding-left:14px; border-left:3px solid var(--color-primary);
}

.lr-row{ display:flex; gap:16px; }
.lr-row .lr-field{ flex:1; }

.lr-field{ margin-bottom:18px; }
.lr-field:last-child{ margin-bottom:0; }
.lr-field-sm{ max-width:160px; }
.lr-field label{
    display:block; font-size:12.5px; font-weight:600; color:var(--fg-muted); margin-bottom:6px;
}
.lr-field input, .lr-field select, .lr-field textarea{
    width:100%; padding:11px 14px;
    border:1px solid var(--border); border-radius:var(--radius-sm);
    font-family:inherit; font-size:14px; color:var(--fg);
    background:var(--bg-muted);
}
.lr-field input:focus, .lr-field select:focus, .lr-field textarea:focus{
    border-color:var(--color-primary); outline:none; background:#fff;
}
.lr-field textarea{ resize:vertical; }
.lr-nota{ display:block; font-size:11.5px; color:var(--fg-muted); margin-top:6px; }

.lr-definiciones{ font-size:13px; color:var(--fg-muted); line-height:1.7; margin-bottom:22px; }

.lr-observaciones-nota{
    background:var(--bg-muted); border-radius:var(--radius-sm);
    padding:16px; font-size:13px; color:var(--fg-muted); font-style:italic;
}

/* ---- Zona de evidencia (drag & drop visual) ---- */
.lr-dropzone{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    border:1.5px dashed var(--color-rose);
    border-radius:var(--radius-md);
    padding:36px 20px;
    cursor:pointer;
    text-align:center;
    transition:border-color .2s ease, background .2s ease;
}
.lr-dropzone:hover, .lr-dropzone.arrastrando{
    border-color:var(--color-primary); background:var(--color-rose-soft);
}
.lr-dropzone-icono{
    width:48px; height:48px; border-radius:50%;
    background:var(--color-rose-soft);
    display:flex; align-items:center; justify-content:center; font-size:20px;
}
.lr-dropzone-texto{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--color-primary); }
.lr-archivos-lista{ list-style:none; margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.lr-archivos-lista li{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    font-size:13px; color:var(--fg); background:var(--bg-muted);
    padding:8px 14px; border-radius:var(--radius-sm);
}
.lr-archivos-lista button{
    color:var(--color-sale); font-size:16px; line-height:1; background:none; border:none; cursor:pointer;
}

/* ---- Importante (texto legal) ---- */
.lr-legal{ font-size:12.5px; color:var(--fg-muted); line-height:1.7; margin-bottom:16px; }
.lr-legal:last-of-type{ margin-bottom:20px; }
.lr-check{
    display:flex; align-items:flex-start; gap:10px;
    font-size:13px; color:var(--fg); cursor:pointer; line-height:1.5;
}
.lr-check input{ width:16px; height:16px; margin-top:2px; accent-color:var(--color-primary); flex-shrink:0; }

/* ---- Acciones ---- */
.lr-error{
    background:#FDECEA; border:1px solid #F5A9A0;
    color:#B3261E; font-size:13px;
    padding:12px 16px; border-radius:var(--radius-sm);
    margin-bottom:20px;
}

.lr-acciones{
    display:flex; align-items:center; gap:20px;
    margin-top:8px;
}
.lr-btn-enviar{
    padding:14px 36px;
    background:var(--color-primary); color:#fff;
    border:none; border-radius:999px;
    font-size:14px; font-weight:700; cursor:pointer;
    transition:background .2s ease;
}
.lr-btn-enviar:hover{ background:var(--color-primary-dark); }
.lr-btn-borrar{
    background:none; border:none; cursor:pointer;
    font-size:13px; font-weight:600; color:var(--color-sale);
}
.lr-btn-borrar:hover{ text-decoration:underline; }

/* ---- Confirmación tras enviar ---- */
.lr-confirmacion{
    text-align:center; padding:60px 24px;
    background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
}
.lr-confirmacion-icono{
    display:inline-flex; align-items:center; justify-content:center;
    width:56px; height:56px; border-radius:50%;
    background:var(--color-rose-soft); color:var(--color-primary);
    font-size:26px; font-weight:700; margin-bottom:20px;
}
.lr-confirmacion h2{ font-size:22px; color:var(--color-plum); margin-bottom:14px; }
.lr-confirmacion p{ font-size:14px; color:var(--fg-muted); line-height:1.7; max-width:420px; margin:0 auto 6px; }
.lr-confirmacion strong{ color:var(--color-primary); }
.lr-confirmacion-nota{ font-size:11.5px; color:var(--fg-muted); margin-top:16px; }

@media (max-width:640px){
    .lr-row{ flex-direction:column; gap:0; }
    .lr-header{ padding:24px; }
    .lr-card{ padding:20px; }
}

/* ============ BLOG ============
   Listado (blog.php) + entrada individual (blog-post.php), estilo
   WordPress: tabs de categoría, grid de tarjetas, página de post con
   contenido + relacionados. Reusa .plp-vacio, .plp-paginacion,
   .pagina-link ya existentes en el sitio. */
.blog-titulo-pagina{ font-size:30px; }

.blog-buscador{
    position:relative;
    display:flex; align-items:center; gap:10px;
    max-width:420px;
    background:var(--bg-muted);
    border:1px solid var(--border);
    border-radius:999px;
    padding:11px 18px;
    margin-bottom:20px;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.blog-buscador:focus-within{
    border-color:var(--color-primary);
    box-shadow:0 0 0 3px rgba(194,41,92,.15);
}
.blog-buscador svg{ flex-shrink:0; color:var(--fg-muted); }
.blog-buscador input{
    border:none; background:none; flex:1;
    font-family:inherit; font-size:14px; color:var(--fg);
}
.blog-buscador input:focus{ outline:none; }
.blog-buscador input::placeholder{ color:var(--fg-muted); }
.blog-buscador-limpiar{
    flex-shrink:0; width:22px; height:22px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:var(--fg-muted); font-size:12px;
    transition:background .2s ease, color .2s ease;
}
.blog-buscador-limpiar:hover{ background:var(--border); color:var(--color-sale); }

.blog-resultados-nota{ font-size:13.5px; color:var(--fg-muted); margin-bottom:24px; }
.blog-resultados-nota strong{ color:var(--color-plum); }

.blog-filtros{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px; }
.blog-filtro{
    padding:9px 18px; border-radius:100px;
    border:1px solid var(--border); background:#fff; color:var(--fg-muted);
    font-size:13px; font-weight:600; transition:all .2s ease;
}
.blog-filtro:hover{ border-color:var(--color-primary); color:var(--color-primary); }
.blog-filtro.activo{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; }

.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blog-card{
    display:block;
    background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
    overflow:hidden; transition:transform .25s ease, box-shadow .25s ease;
}
.blog-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); }

.blog-card-foto{
    position:relative; aspect-ratio:4/3; overflow:hidden;
}
.blog-card-foto img{ width:100%; height:100%; object-fit:cover; }
.blog-card-cat{
    position:absolute; top:14px; left:14px; z-index:2;
    font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    color:#fff; background:rgba(36,20,28,.55); padding:5px 12px; border-radius:100px;
}

.blog-card-body{ padding:20px 22px; display:flex; flex-direction:column; gap:8px; }
.blog-card-fecha{ font-size:11.5px; color:var(--fg-muted); text-transform:uppercase; letter-spacing:.03em; }
.blog-card-body h3{
    font-family:var(--font-display); font-size:18px; color:var(--color-plum); line-height:1.3;
}
.blog-card-body p{ font-size:13.5px; color:var(--fg-muted); line-height:1.55; }
.blog-card-leer{ font-size:13px; font-weight:600; color:var(--color-primary); margin-top:4px; }

/* ---- Página de entrada individual ---- */
.blog-post-layout{ padding-top:1.5rem; }
.blog-post-grid{
    display:grid;
    grid-template-columns:1fr 300px;
    gap:48px;
    align-items:start;
}
.blog-post-col-principal{ max-width:none; }

/* ---- Sidebar: asistencia WhatsApp + recientes + categorías ---- */
.blog-sidebar{
    display:flex; flex-direction:column; gap:20px;
    position:sticky; top:150px; /* antes 90px — el header sticky (header-main + categories-nav) mide ~123px, quedaba muy justo y la tarjeta de WhatsApp se cortaba a medias */
}
.blog-sidebar-card{
    background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
    padding:22px;
}
.blog-sidebar-titulo{
    display:block; font-size:14px; font-weight:700; color:var(--color-plum);
    margin-bottom:16px;
}
.blog-sidebar-whatsapp{
    transition:transform .3s ease, box-shadow .3s ease;
}
.blog-sidebar-whatsapp:hover{
    transform:translateY(-6px);
    box-shadow: 10px 10px 20px rgba(0,0,0,.35), -8px -8px 16px rgba(255,255,255,.5);
}
.blog-whatsapp-btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:13px;
    background:#25D366; color:#fff;
    border-radius:999px;
    font-size:13.5px; font-weight:700;
    transition:background .2s ease;
}
.blog-whatsapp-btn:hover{ background:#1ebd5a; }

.blog-sidebar-lista{ display:flex; flex-direction:column; gap:12px; }
.blog-sidebar-lista li{ padding-bottom:12px; border-bottom:1px solid var(--border); }
.blog-sidebar-lista li:last-child{ padding-bottom:0; border-bottom:none; }
.blog-sidebar-lista a{
    font-size:13.5px; color:var(--fg-muted); line-height:1.4;
    transition:color .2s ease;
}
.blog-sidebar-lista a:hover{ color:var(--color-primary); }

/* Miniatura en "Entradas recientes" — solo escritorio/tablet (oculta por
   defecto, mismo criterio que .blog-sidebar en mobile pasa a static). */
.blog-sidebar-reciente{ display:flex; align-items:center; gap:0; }
.blog-sidebar-reciente-foto{ display:none; }
@media (min-width:769px){
    .blog-sidebar-reciente{ gap:12px; }
    .blog-sidebar-reciente-foto{
        display:block; flex-shrink:0;
        width:56px; height:56px; border-radius:var(--radius-sm);
        overflow:hidden; background:var(--bg-muted);
    }
    .blog-sidebar-reciente-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
    .blog-sidebar-reciente span{
        display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    }
}

/* ---- Carrusel infinito de blog (home) — mismo mecanismo que
   .destacados-carrusel, con clases propias para no acoplarse a él.
   JS en assets/js/blog-carrusel.js. ---- */
.blog-carrusel{
    position:relative;
    overflow:hidden;
    padding:8px 0 20px;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.blog-track{
    display:flex;
    width:max-content;
    gap:24px;
}
.blog-track .blog-track-card{
    flex:0 0 300px;
    width:300px;
}
.blog-carrusel-arrow{
    position:absolute; top:calc(50% - 20px); transform:translateY(-50%); z-index:4;
    width:44px; height:44px; border-radius:50%;
    background:#fff; box-shadow:var(--shadow-card);
    border:1px solid var(--border);
    color:var(--color-plum);
    display:flex; align-items:center; justify-content:center;
    font-size:16px;
    transition:background .2s ease, color .2s ease;
}
.blog-carrusel-arrow:hover{ background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.blog-carrusel-arrow.prev{ left:4px; }
.blog-carrusel-arrow.next{ right:4px; }

.blog-carrusel-dots{
    display:flex; align-items:center; justify-content:center;
    gap:8px;
    margin-top:4px;
}
.blog-carrusel-dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--border);
    transition:all .3s ease;
    cursor:pointer;
}
.blog-carrusel-dot:hover{ background:var(--color-rose); }
.blog-carrusel-dot.activo{ background:var(--color-primary); width:22px; border-radius:4px; }

@media (max-width:640px){
    .blog-carrusel-arrow{ display:none; }
}

@media (max-width:900px){
    .blog-post-grid{ grid-template-columns:1fr; }
    .blog-post-col-principal{ max-width:none; }
    .blog-sidebar{ position:static; }
}
.blog-post-cabecera{ text-align:center; margin-bottom:28px; }
.blog-post-cat{
    display:inline-flex; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    color:var(--color-primary); background:var(--color-rose-soft);
    padding:5px 14px; border-radius:100px; margin-bottom:16px;
}
.blog-post-cabecera h1{ font-size:32px; line-height:1.25; margin-bottom:14px; }
.blog-post-meta{ font-size:13px; color:var(--fg-muted); }
.blog-post-meta-sep{ margin:0 6px; }

.blog-post-foto{
    position:relative; aspect-ratio:4/3; border-radius:var(--radius-lg);
    overflow:hidden; margin-bottom:32px;
}
.blog-post-foto img{ width:100%; height:100%; object-fit:cover; }

.blog-post-contenido{ font-size:15.5px; color:var(--fg); line-height:1.8; }
.blog-post-contenido p{ margin-bottom:20px; }
.blog-post-contenido p:last-child{ margin-bottom:0; }

.blog-post-volver{
    display:inline-block; margin-top:32px;
    font-size:13.5px; font-weight:600; color:var(--color-primary);
}
.blog-post-volver:hover{ color:var(--color-primary-dark); }

@media (max-width:900px){
    .blog-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
    .blog-grid{ grid-template-columns:1fr; }
    .blog-post-cabecera h1{ font-size:24px; }
}

/* ============ PREGUNTAS FRECUENTES ============
   Lista única en acordeón, reusando .filtro-grupo/.filtro-opciones
   (mismo componente que los filtros de categoría y los acordeones de
   PDP) — solo se agrega el layout propio de esta página. */
.faq-wrap{ max-width:800px; }
.faq-cabecera{ text-align:center; margin-bottom:36px; }
.faq-titulo{ font-size:32px; margin:10px 0 14px; }
.faq-subtexto{ color:var(--fg-muted); font-size:14.5px; line-height:1.6; max-width:520px; margin:0 auto; }

.faq-lista .faq-item{ padding:20px 0; }
.faq-lista .faq-item summary{ font-size:15.5px; font-weight:600; padding-right:20px; }
.faq-respuesta p{ font-size:14px; color:var(--fg-muted); line-height:1.7; }

/* ---- Bloque "Cómo Comprar" (fuera del acordeón, al final de preguntas-frecuentes.php) ---- */
.como-comprar-bloque{
    margin-top:48px;
    padding-top:40px;
    border-top:1px solid var(--border);
}
.como-comprar-bloque-primero{
    margin-top:0;
    padding-top:0;
    border-top:none;
}
.como-comprar-bloque h2{ font-size:24px; margin-bottom:10px; }
.como-comprar-bloque h3{ font-size:16px; color:var(--color-plum); margin-bottom:16px; }
.como-comprar-lista{
    list-style:decimal;
    padding-left:20px;
}
.como-comprar-lista li{
    font-size:14.5px; line-height:1.75; color:var(--fg-muted);
    margin-bottom:8px;
}
.como-comprar-lista li a{
    color:var(--color-primary);
    font-weight:600;
    text-decoration:underline;
}

/* ---- Bloque "Medios de Pago" (mismo tratamiento que Cómo Comprar) ---- */
.medios-pago-intro{
    font-size:14.5px; line-height:1.75; color:var(--fg-muted);
    margin-bottom:16px;
}
.medios-pago-lista{
    list-style:none;
    display:flex; flex-direction:column; gap:10px;
    margin-bottom:16px;
}
.medios-pago-lista li{
    font-size:14.5px; color:var(--fg);
    display:flex; align-items:center; gap:10px;
}
.medios-pago-icono{ font-size:18px; flex-shrink:0; }
.medios-pago-nota{
    font-size:13px; color:var(--fg-muted); font-style:italic;
}

/* ---- "Quiénes Somos" — hero, Visión/Misión, features ---- */
.nosotros-hero{
    position:relative;
    background:linear-gradient(155deg, var(--color-plum), var(--color-primary) 70%);
    padding:80px 0 100px;
    overflow:hidden;
}
.nosotros-hero::after{
    content:'';
    position:absolute; inset:0;
    background-image:repeating-linear-gradient(120deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px);
    pointer-events:none;
}
.nosotros-hero .container{ position:relative; z-index:1; }
.breadcrumb-claro,
.breadcrumb-claro a{ color:rgba(255,255,255,.7); }
.breadcrumb-claro a:hover{ color:#fff; }
.nosotros-hero-eyebrow{
    display:block; font-size:13px; font-weight:600; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--color-rose-soft);
    margin-top:20px; margin-bottom:8px;
}
.nosotros-hero-titulo{ font-size:38px; color:#fff; margin-bottom:14px; }
.nosotros-hero-sub{
    font-size:15px; color:rgba(255,255,255,.8); line-height:1.7;
    max-width:560px;
}

.nosotros-intro{ max-width:800px; margin-bottom:48px; }
.nosotros-intro p{
    font-size:15px; line-height:1.8; color:var(--fg-muted);
    margin-bottom:16px;
}
.nosotros-intro p:last-child{ margin-bottom:0; }

.nosotros-vm-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
    margin-bottom:56px;
}
.nosotros-vm-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:32px;
    box-shadow:var(--shadow-card);
}
.nosotros-vm-icono{
    width:52px; height:52px; margin-bottom:18px;
    border-radius:50%;
    background:var(--color-rose-soft);
    color:var(--color-primary);
    display:flex; align-items:center; justify-content:center;
}
.nosotros-vm-card h2{ font-size:21px; margin-bottom:12px; }
.nosotros-vm-card p{ font-size:14.5px; line-height:1.75; color:var(--fg-muted); }

.nosotros-features-head{ text-align:center; margin-bottom:32px; }
.nosotros-features-head h2{ font-size:28px; margin-top:6px; }
.nosotros-features-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}
.nosotros-feature{
    background:var(--bg-muted);
    border-radius:var(--radius-md);
    padding:26px 22px;
    text-align:center;
    transition:transform .25s ease, box-shadow .25s ease;
}
.nosotros-feature:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.nosotros-feature-icono{
    width:48px; height:48px; margin:0 auto 16px;
    border-radius:50%;
    background:#fff;
    color:var(--color-primary);
    display:flex; align-items:center; justify-content:center;
}
.nosotros-feature p{ font-size:13.5px; line-height:1.6; color:var(--fg); }

@media (max-width:900px){
    .nosotros-vm-grid{ grid-template-columns:1fr; }
    .nosotros-features-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
    .nosotros-hero-titulo{ font-size:28px; }
    .nosotros-features-grid{ grid-template-columns:1fr; }
}

/* ============ FOOTER ============ */
.site-footer{
    background:var(--bg-muted);
    border-top:1px solid var(--border);
    padding:56px 0 24px;
    font-size:14px;
}
.footer-grid{
    display:grid;
    grid-template-columns:1.4fr repeat(3,1fr);
    gap:32px;
    margin-bottom:40px;
}
.footer-col h5{
    font-family:var(--font-sans);
    font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
    color:var(--color-plum); margin-bottom:16px;
}
.footer-col li{ margin-bottom:10px; }
.footer-col a{ color:var(--fg-muted); transition:color .2s; }
.footer-libro-reclamaciones{ display:inline-flex; align-items:center; gap:6px; }
.footer-col a:hover{ color:var(--color-primary); }
.footer-brand p{ color:var(--fg-muted); margin:14px 0 18px; max-width:280px; }
@media (min-width:769px){
    /* Columna de marca del footer centrada (logo, texto, redes) — solo
       escritorio/tablet, el mobile sigue alineado a la izquierda. */
    .footer-brand{ text-align:center; }
    .footer-brand p{ margin-left:auto; margin-right:auto; }
}
@media (min-width:1025px){
    /* Solo escritorio (no tablet) — aire a la derecha de la columna Legal. */
    .footer-col-legal{ padding-right:1.5rem; }
}
.footer-social{ display:flex; justify-content:center; gap:12px; }
.footer-social a{
    width:36px; height:36px; border-radius:50%;
    background:#fff; border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    color:var(--color-plum);
}
.footer-social a:hover{ background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.footer-bottom{
    border-top:1px solid var(--border);
    padding-top:20px;
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:12px;
    color:var(--fg-muted); font-size:13px;
}
.payment-icons{ display:flex; gap:8px; }
.payment-icons span{
    padding:4px 10px; border:1px solid var(--border); border-radius:6px;
    font-size:11px; font-weight:600; color:var(--fg-muted);
}

/* ============ BREADCRUMB ============ */
.breadcrumb{
    font-size:13px; color:var(--fg-muted);
    margin-bottom:8px;
}
.breadcrumb a{ color:var(--fg-muted); }
.breadcrumb a:hover{ color:var(--color-primary); }
.breadcrumb span{ margin:0 6px; }

/* ============ PLP (página de categoría) ============ */
.plp-layout{
    display:grid;
    grid-template-columns:250px 1fr;
    gap:36px;
    padding-bottom:64px;
}
.plp-sidebar-title{
    display:block;
    font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
    margin-bottom:10px;
    color:var(--fg);
    font-family:var(--font-sans);
}
.filtro-grupo{
    border-bottom:1px solid var(--border);
    padding:16px 0;
}
.filtro-grupo:first-of-type{ border-top:1px solid var(--border); }
.filtro-grupo summary{
    cursor:pointer;
    font-size:14px; font-weight:500;
    color:var(--fg);
    list-style:none;
    display:flex; align-items:flex-start; justify-content:space-between;
    transition:color .2s;
}
.filtro-grupo summary:hover{ color:var(--color-primary); }
.filtro-grupo summary::-webkit-details-marker{ display:none; }
.filtro-grupo summary::after{
    content:'';
    width:8px; height:8px;
    border-right:1.5px solid var(--fg-muted);
    border-bottom:1.5px solid var(--fg-muted);
    transform:rotate(45deg);
    transition: transform .25s;
    flex-shrink:0;
    margin-left:8px;
}
.filtro-grupo[open] summary::after{ transform:rotate(-135deg); }
.filtro-opciones{
    display:flex; flex-direction:column; gap:12px;
    margin-top:14px;
}
.filtro-check{
    display:flex; align-items:center; gap:9px;
    font-size:13.5px; color:var(--fg);
    cursor:pointer;
}
.filtro-check input{
    accent-color:var(--color-primary);
    width:16px; height:16px;
    border-radius:3px;
}
/* Árbol de categorías del catálogo completo (padre → hijas anidadas,
   cada padre es su propio <details> dentro del <details> "Categoría"). */
.filtro-cat-arbol{ margin-top:10px; display:flex; flex-direction:column; }
.filtro-cat-padre{ border-top:1px solid var(--border); padding:10px 0; }
.filtro-cat-padre:first-child{ border-top:none; padding-top:0; }
.filtro-cat-padre summary{
    cursor:pointer;
    font-size:13px; font-weight:600;
    color:var(--fg);
    list-style:none;
    display:flex; align-items:flex-start; justify-content:space-between;
}
.filtro-cat-padre summary:hover{ color:var(--color-primary); }
.filtro-cat-padre summary::-webkit-details-marker{ display:none; }
.filtro-cat-nombre{ display:flex; align-items:center; gap:8px; }
.filtro-cat-padre summary::after{
    content:'';
    width:7px; height:7px;
    border-right:1.5px solid var(--fg-muted);
    border-bottom:1.5px solid var(--fg-muted);
    transform:rotate(45deg);
    transition:transform .25s;
    flex-shrink:0;
    margin-left:8px;
    margin-top:3px;
}
.filtro-cat-padre[open] summary::after{ transform:rotate(-135deg); }
.filtro-cat-badge{
    background:var(--bg-muted); color:var(--color-primary);
    font-size:11px; font-weight:700;
    min-width:18px; height:18px; padding:0 5px;
    border-radius:100px;
    display:inline-flex; align-items:center; justify-content:center;
}
.filtro-cat-hijas{ margin-top:10px; margin-left:15px; }
.filtro-cat-hijas .filtro-check{ font-size:13px; }

/* Versión "link" del árbol (categoria.php) — navega a otra subcategoría
   en vez de tildar un checkbox, porque esa página siempre muestra una
   sola categoría a la vez. */
.filtro-cat-link{
    font-size:13px; color:var(--fg);
    text-decoration:none;
    padding:2px 0;
    transition:color .2s ease;
}
.filtro-cat-link:hover{ color:var(--color-primary); }
.filtro-cat-link.activo{ color:var(--color-primary); font-weight:700; }

.filtro-limpiar{
    display:inline-flex; align-items:center; gap:4px;
    margin-top:18px;
    font-size:13px; font-weight:600;
    color:var(--color-sale);
}

/* Botón "Limpiar filtros" en la cabecera del catálogo/categoría/ofertas,
   al lado de "Filtros" — solo aparece con filtros activos, solo mobile
   (ver .btn-filtros-toggle, misma visibilidad). */
.plp-limpiar-cabecera{
    display:none;
    align-items:center; gap:4px;
    font-size:12.5px; font-weight:600;
    color:var(--color-sale);
}

.plp-head{
    display:flex; align-items:flex-start; justify-content:space-between;
    flex-wrap:wrap; gap:16px;
    margin-bottom:28px;
    padding-bottom:0;
    border-bottom:none;
}
.plp-title{
    font-size:26px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.01em;
    font-family:var(--font-sans);
    color:var(--fg);
    margin-bottom:6px;
}
.plp-count{ font-size:13px; color:var(--fg-muted); }
.plp-orden{ display:flex; align-items:center; gap:10px; margin-top:4px; }
.plp-orden label{ font-size:13px; color:var(--fg-muted); white-space:nowrap; font-weight:500; }
.plp-orden select{
    font-family:inherit; font-size:13px; font-weight:600;
    padding:10px 36px 10px 16px;
    border:1px solid var(--border);
    border-radius:999px;
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234A2A3A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    color:var(--fg);
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
}
.plp-orden select:hover{ border-color:var(--color-primary); }
.plp-vacio{
    text-align:center;
    padding:60px 20px;
    color:var(--fg-muted);
}
.plp-grid{ grid-template-columns:repeat(3,1fr); }

.plp-mostrando{
    font-size:13px; color:var(--fg-muted);
    margin-bottom:18px;
}

/* ---- Botón "Filtrar" (solo visible en mobile/tablet, abre el modal) ---- */
.btn-filtros-toggle{
    display:none;
    align-items:center; gap:8px;
    padding:10px 18px;
    border:none; border-radius:999px;
    background:none; color:#9298ba;
    font-size:13.5px; font-weight:600;
    transition:color .2s ease;
}
.btn-filtros-toggle:hover{ color:#9298ba; }
.filtro-icono-anim{ width:26px; height:26px; flex-shrink:0; }
.filtro-icono-anim circle{
    animation:filtroIconoSlide 1.8s ease-in-out infinite;
    transform-box:fill-box;
    transform-origin:center;
}
.filtro-icono-anim circle:nth-of-type(1){ animation-delay:0s; }
.filtro-icono-anim circle:nth-of-type(2){ animation-delay:0.25s; }
.filtro-icono-anim circle:nth-of-type(3){ animation-delay:0.5s; }
@keyframes filtroIconoSlide{
    0%, 100%{ transform:translateX(3px); }
    50%{ transform:translateX(-3px); }
}

/* ---- Overlay + botones de cierre/aplicar del modal de filtros (ocultos en desktop) ---- */
.plp-filtros-overlay{
    position:fixed; inset:0;
    background:rgba(36,27,33,.5);
    opacity:0; visibility:hidden;
    transition:opacity .3s;
    z-index:95;
}
.plp-sidebar-cerrar-mobile{ display:none; }
.plp-sidebar-footer-mobile{ display:none; }

/* Paginación (catalogo.php) */
.plp-paginacion{
    display:flex; align-items:center; justify-content:center;
    gap:8px; flex-wrap:wrap;
    padding:40px 0 64px;
}
.pagina-link{
    display:flex; align-items:center; justify-content:center;
    min-width:40px; height:40px;
    padding:0 12px;
    border:1px solid var(--border);
    border-radius:999px;
    font-size:13.5px; font-weight:600; color:var(--fg-muted);
    transition:all .2s ease;
}
.pagina-link:hover{ border-color:var(--color-primary); color:var(--color-primary); }
.pagina-link.activa{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.pagina-link.pagina-flecha{ min-width:40px; width:40px; padding:0; font-size:16px; }
.pagina-puntos{
    display:flex; align-items:center; justify-content:center;
    min-width:24px; height:40px;
    color:var(--fg-muted); font-size:13.5px;
}

/* ============ PDP (ficha de producto) ============ */
.pdp-layout{
    display:grid;
    grid-template-columns:100px 1fr 420px;
    gap:28px;
    padding:24px 24px 48px;
}
.pdp-gallery{ display:contents; }
.pdp-thumbs{
    display:flex; flex-direction:column; gap:12px;
}
.pdp-thumb{
    width:100px; height:100px;
    border:1.5px solid var(--border);
    border-radius:var(--radius-sm);
    overflow:hidden;
    padding:0;
    transition:border-color .2s;
}
.pdp-thumb img{ width:100%; height:100%; object-fit:cover; }
.pdp-thumb.active,
.pdp-thumb:hover{ border-color:var(--color-primary); }
.pdp-main-image{
    position:relative;
    aspect-ratio:1/1;
    background:var(--bg-muted);
    border-radius:var(--radius-md);
    overflow:hidden;
}
.pdp-main-image img{ width:100%; height:100%; object-fit:cover; }

.pdp-info{ display:flex; flex-direction:column; }
.pdp-cat{ font-size:12.5px; font-weight:700; color:var(--color-rose); text-transform:uppercase; letter-spacing:0.05em; }
.pdp-title{ font-size:1.30rem; margin:8px 0 4px; line-height:1.2; }
.pdp-sku{ font-size:12px; color:var(--fg-muted); }
.pdp-marca{ font-size:12px; color:var(--fg-muted); text-decoration:none; }
.pdp-marca strong{ color:var(--color-primary); font-weight:600; }
.pdp-marca:hover strong{ color:var(--color-primary-dark); }
.pdp-price-row{ display:flex; align-items:baseline; gap:10px; margin:18px 0; }

/* ============ Selector Por caja / Por vial (ficha de producto) ============ */
.pdp-tipo-selector{ display:flex; gap:10px; margin-top:18px; }
.pdp-tipo-btn{
    flex:1; padding:12px 14px; border-radius:12px; border:1.5px solid var(--border, #dde5e9);
    background:#fff; color:var(--fg-muted, #8D8D8D); font-family:inherit; font-size:13px; font-weight:600;
    cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.pdp-tipo-btn .pdp-tipo-detalle{ display:block; font-size:10.5px; font-weight:500; opacity:.75; margin-top:2px; }
.pdp-tipo-btn.activo{ border-color:var(--color-primary); color:var(--color-primary); background:var(--bg-muted, #f2f5f7); }

.pdp-tipo-selector-fijo{ margin-top:18px; }
.pdp-tipo-fijo{ cursor:default; flex:0 0 auto; display:inline-block; padding:8px 16px; font-size:12px; }

.pdp-qty-row{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.qty-selector{
    display:flex; align-items:center;
    border:1px solid var(--border);
    border-radius:999px;
    overflow:hidden;
}
.qty-selector button{
    width:36px; height:40px;
    font-size:16px; color:var(--color-plum);
    transition:background .2s;
}
.qty-selector button:hover{ background:var(--bg-muted); }
.qty-selector input{
    width:44px; text-align:center;
    border:none; font-family:inherit; font-size:14px;
    -moz-appearance:textfield;
}
.qty-selector input::-webkit-outer-spin-button,
.qty-selector input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.btn-comprar{
    flex:1;
    padding:12px 20px;
    background:var(--color-primary);
    color:#fff;
    border-radius:999px;
    font-size:14px; font-weight:700;
    text-align:center;
    transition:background .2s;
}
.btn-comprar:hover{ background:var(--color-primary-dark); }

.pdp-trust{
    margin-top:24px;
    display:flex; flex-direction:column; gap:14px;
    padding-top:24px;
    border-top:1px solid var(--border);
}
.pdp-trust-item{ display:flex; align-items:center; gap:14px; color:var(--color-plum); }
.pdp-trust-icon{
    flex-shrink:0;
    width:48px; height:48px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:var(--color-rose-soft);
    color:var(--color-primary);
}
.pdp-trust-item div{ display:flex; flex-direction:column; gap:2px; }
.pdp-trust-item strong{ font-size:13.5px; color:var(--color-marca); }
.pdp-trust-item span{ font-size:12.5px; color:var(--fg-muted); }

/* Animación de "dibujo" del ícono — mismo patrón que .cat-card__icon en
   category-explorer.css: en reposo el ícono está completo (dashoffset:0),
   y al hacer hover en toda la fila (ícono + título + texto) se dispara
   un ciclo único que lo redibuja desde oculto hasta completo (largo real
   medido en JS, ver assets/js/pdp-trust-icons.js). */
.pdp-trust-icon svg path,
.pdp-trust-icon svg circle,
.pdp-trust-icon svg ellipse,
.pdp-trust-icon svg rect,
.pdp-trust-icon svg line,
.pdp-trust-icon svg polyline,
.pdp-trust-icon svg polygon{
    stroke-dasharray:var(--icon-len, 0);
    stroke-dashoffset:0;
}
@keyframes pdp-trust-icon-draw{
    from{ stroke-dashoffset:var(--icon-len, 0); }
    to{ stroke-dashoffset:0; }
}
.pdp-trust-item:hover .pdp-trust-icon svg path,
.pdp-trust-item:hover .pdp-trust-icon svg circle,
.pdp-trust-item:hover .pdp-trust-icon svg ellipse,
.pdp-trust-item:hover .pdp-trust-icon svg rect,
.pdp-trust-item:hover .pdp-trust-icon svg line,
.pdp-trust-item:hover .pdp-trust-icon svg polyline,
.pdp-trust-item:hover .pdp-trust-icon svg polygon{
    animation:pdp-trust-icon-draw 1600ms cubic-bezier(.22,.61,.36,1);
}

/* ---- Acordeones de detalle (reutiliza .filtro-grupo pero a ancho completo) ---- */
.pdp-accordions{ max-width:900px; padding-bottom:48px; }
.pdp-detalle summary{ font-size:15px; font-weight:700; color:var(--color-plum); }
.pdp-detalle summary::after{ border-color:var(--color-plum); }
.pdp-detalle-texto{
    margin-top:14px;
    font-size:14px; line-height:1.7;
    color:var(--fg-muted);
}

/* ============ CARRITO (drawer lateral) ============ */
.cart-overlay{
    position:fixed; inset:0;
    background:rgba(36,27,33,0.45);
    opacity:0; visibility:hidden;
    transition:opacity .3s;
    z-index:1200;
}
.cart-overlay.abierto{ opacity:1; visibility:visible; }

/* ---- Contenedor único: envuelve sugerencias + carrito, un solo movimiento y un solo cierre ---- */
.cart-unidad{
    position:fixed; top:0; right:0; bottom:0;
    display:flex;
    z-index:1201;
    transform:translateX(100%);
    transition:transform .35s cubic-bezier(.65,0,.35,1);
    box-shadow:-8px 0 30px rgba(0,0,0,0.12);
}
.cart-unidad.abierto{ transform:translateX(0); }

/* ---- Sección interna: Carrito (aquí vive la única X que cierra todo) ---- */
.cart-seccion{
    width:380px; max-width:100vw;
    flex-shrink:0;
    background:#fff;
    display:flex; flex-direction:column;
}

.cart-drawer-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 24px;
    border-bottom:1px solid var(--border);
}
.cart-drawer-head h3{ font-size:20px; }
.cart-drawer-close{
    width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:var(--fg-muted); font-size:16px;
    transition:background .2s;
}
.cart-drawer-close:hover{ background:var(--bg-muted); }

.cart-drawer-body{
    flex:1; overflow-y:auto;
    padding:16px 24px;
}
.cart-item{
    display:flex; gap:14px;
    padding:16px 0;
    border-bottom:1px solid var(--border);
}
.cart-item img{
    width:64px; height:64px; object-fit:cover;
    border-radius:var(--radius-sm);
    flex-shrink:0;
    background:var(--bg-muted);
}
.cart-item-info{ flex:1; min-width:0; }
.cart-item-info a{
    font-size:13.5px; font-weight:600; color:var(--fg);
    display:block; line-height:1.3; margin-bottom:6px;
}
.cart-item-precio{ font-size:13.5px; color:var(--color-primary); font-weight:700; }
.cart-item-qty{
    display:flex; align-items:center; gap:10px;
    margin-top:8px;
}
.cart-item-qty button{
    width:24px; height:24px; border-radius:50%;
    border:1px solid var(--border);
    font-size:13px; color:var(--color-plum);
    display:flex; align-items:center; justify-content:center;
}
.cart-item-qty button:hover{ border-color:var(--color-primary); color:var(--color-primary); }
.cart-item-qty span{ font-size:13px; min-width:16px; text-align:center; }
.cart-item-eliminar{
    color:var(--fg-muted);
    align-self:flex-start;
    font-size:16px;
    line-height:1;
    padding:4px;
}
.cart-item-eliminar:hover{ color:var(--color-sale); }

.cart-vacio{
    text-align:center;
    padding:60px 20px;
    color:var(--fg-muted);
    font-size:14px;
}

.cart-drawer-foot{
    padding:20px 24px 24px;
    border-top:1px solid var(--border);
}
.cart-envio-texto{ font-size:12.5px; color:var(--fg-muted); margin-bottom:10px; text-align:center; }
.cart-envio-texto strong{ color:var(--color-primary); }
.cart-envio-barra{
    position:relative;
    height:5px; border-radius:999px;
    background:var(--border);
    margin-bottom:22px;
}
.cart-envio-barra-fill{
    height:100%; background:var(--color-primary);
    border-radius:999px;
    transition:width .4s;
}
.cart-envio-estrella{
    position:absolute; top:50%; 
    transform:translate(-50%,-50%);
    width:18px; height:18px; border-radius:50%;
    background:var(--color-primary); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:10px;
    box-shadow:0 0 0 3px #fff;
    transition:left .4s;
}
.cart-resumen-row{
    display:flex; justify-content:space-between;
    font-size:13.5px; color:var(--fg-muted);
    margin-bottom:8px;
}
.cart-resumen-row.total{
    font-size:16px; font-weight:700; color:var(--fg);
    margin-top:12px; padding-top:12px;
    border-top:1px solid var(--border);
}
.cart-checkout-btn{
    display:block; width:100%;
    margin-top:16px;
    padding:14px;
    background:var(--color-primary);
    color:#fff; text-align:center;
    border-radius:999px;
    font-weight:700; font-size:14px;
    transition:background .2s;
}
.cart-checkout-btn:hover{ background:var(--color-primary-dark); }
.cart-checkout-btn.deshabilitado{
    background:var(--border); color:var(--fg-muted);
    pointer-events:none;
}

/* ============ CHECKOUT (Paso 4b) ============ */
.checkout-page{ background:var(--bg-muted); }
.checkout-topbar{ background:#fff; border-bottom:1px solid var(--border); }
.checkout-topbar-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 24px;
}
.checkout-seguro{
    display:flex; align-items:center; gap:6px;
    font-size:11.5px; font-weight:700; letter-spacing:0.05em;
    color:var(--fg-muted);
}

.checkout-stepper{
    display:flex; align-items:center; justify-content:center;
    gap:0; max-width:360px; margin:36px auto 32px;
}
.stepper-item{
    width:36px; height:36px; border-radius:50%;
    background:#fff; border:2px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    color:var(--fg-muted);
    transition:all .3s;
    flex-shrink:0;
}
.stepper-item.activo{ border-color:var(--color-primary); color:var(--color-primary); }
.stepper-item.completado{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.stepper-line{ flex:1; height:2px; background:var(--border); margin:0 4px; min-width:30px; }

.checkout-body{
    display:grid;
    grid-template-columns:1fr 380px;
    gap:32px;
    padding-bottom:64px;
}
.checkout-main{ background:#fff; border-radius:var(--radius-md); padding:32px; box-shadow:var(--shadow-card); }

.checkout-step.oculto{ display:none; }
.checkout-step-header{
    display:flex; align-items:center; gap:12px;
    margin-bottom:8px;
}
.step-num{
    width:26px; height:26px; border-radius:50%;
    background:var(--color-primary); color:#fff;
    font-size:13px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.checkout-step-header h3{ font-size:17px; flex:1; }
.step-editar{ font-size:12.5px; font-weight:600; color:var(--color-primary); white-space:nowrap; }
.checkout-step-resumen{
    font-size:13px; color:var(--fg-muted); line-height:1.6;
    padding:12px 0 20px 38px;
    border-bottom:1px solid var(--border);
    margin-bottom:8px;
}
.checkout-step + .checkout-step{ margin-top:24px; padding-top:24px; border-top:1px solid var(--border); }

.checkout-subtexto{ font-size:13px; color:var(--fg-muted); margin-bottom:20px; }

.checkout-tabla{ width:100%; border-collapse:collapse; }
.checkout-tabla th{
    text-align:left; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
    color:var(--fg-muted);
    padding-bottom:14px; border-bottom:1px solid var(--border);
}
.checkout-tabla td{ padding:16px 8px; border-bottom:1px solid var(--border); vertical-align:middle; }
.ck-prod{ display:flex; align-items:center; gap:12px; font-size:14px; font-weight:600; }
.ck-prod img{ width:52px; height:52px; border-radius:var(--radius-sm); object-fit:cover; background:var(--bg-muted); }
.ck-precio{ font-weight:700; color:var(--fg); white-space:nowrap; }
.qty-selector-sm{ transform:scale(0.9); transform-origin:left center; }

.ck-field{ margin-bottom:16px; flex:1; }
.ck-field label{ display:block; font-size:12.5px; font-weight:600; color:var(--fg-muted); margin-bottom:6px; }
.ck-field input, .ck-field select{
    width:100%; padding:11px 14px;
    border:1px solid var(--border); border-radius:var(--radius-sm);
    font-family:inherit; font-size:14px; color:var(--fg);
}
.ck-field input:focus, .ck-field select:focus{ border-color:var(--color-primary); outline:none; }
.ck-row{ display:flex; gap:16px; }

.ck-toggle-row{ display:flex; gap:12px; margin-bottom:18px; }
.ck-toggle{
    flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
    padding:12px; border:1.5px solid var(--border); border-radius:var(--radius-sm);
    font-size:13.5px; font-weight:600; color:var(--fg-muted);
    cursor:pointer; transition:all .2s;
}
.ck-toggle input{ accent-color:var(--color-primary); }
.ck-toggle.activo{ border-color:var(--color-primary); color:var(--color-primary); background:var(--color-rose-soft); }

.ck-check{
    display:flex; align-items:center; gap:10px;
    font-size:13px; color:var(--fg-muted);
    margin-bottom:20px; cursor:pointer;
}
.ck-check input{ width:16px; height:16px; accent-color:var(--color-primary); }

.ck-metodo-pago{ display:flex; flex-direction:column; gap:12px; }
.ck-radio-card{
    display:flex; align-items:center; gap:10px;
    padding:14px 16px; border:1.5px solid var(--border); border-radius:var(--radius-sm);
    font-size:13.5px; font-weight:600; color:var(--fg);
    cursor:pointer; transition:all .2s;
}
.ck-radio-card em{ font-weight:400; font-style:normal; color:var(--fg-muted); }
.ck-radio-card.activo{ border-color:var(--color-primary); background:var(--color-rose-soft); }
.ck-radio-card input{ accent-color:var(--color-primary); width:16px; height:16px; }
.ck-tarjeta-form{ padding:16px; background:var(--bg-muted); border-radius:var(--radius-sm); margin-top:-4px; }

.ck-yape-form, .ck-efectivo-form{
    padding:16px; background:var(--bg-muted); border-radius:var(--radius-sm); margin-top:-4px;
}
.ck-yape-form.oculto, .ck-efectivo-form.oculto{ display:none; }
.ck-yape-codigo{ display:flex; gap:8px; }
.ck-yape-digito{
    width:40px; height:44px; text-align:center;
    font-size:16px; font-weight:700;
    border:1.5px solid var(--border); border-radius:var(--radius-sm);
}
.ck-yape-digito:focus{ border-color:var(--color-primary); outline:none; }
.ck-yape-nota{ display:block; font-size:11.5px; color:var(--fg-muted); margin-top:6px; }

.checkout-nota-prototipo{
    margin-top:14px; padding:12px 14px;
    background:#FFF7ED; border:1px solid #FDBA74;
    border-radius:var(--radius-sm);
    font-size:12.5px; color:#9A5B0F;
}

/* ---- Sidebar del checkout ---- */
.checkout-sidebar{ display:flex; flex-direction:column; gap:16px; align-self:start; position:sticky; top:20px; }
.checkout-sidebar-card{
    background:#fff; border-radius:var(--radius-md);
    padding:20px; box-shadow:var(--shadow-card);
}
.checkout-sidebar-card h4{ font-size:15px; margin-bottom:14px; }
.checkout-sidebar-cupon-label{ display:block; font-size:12.5px; font-weight:600; color:var(--fg-muted); margin-bottom:8px; }
.checkout-sidebar-cupon-row{ display:flex; gap:8px; }
.checkout-sidebar-cupon-row input{
    flex:1; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm);
    font-family:inherit; font-size:13px;
}
.checkout-sidebar-item{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.checkout-sidebar-item:last-child{ border-bottom:none; }
.checkout-sidebar-item img{ width:44px; height:44px; border-radius:var(--radius-sm); object-fit:cover; background:var(--bg-muted); }
.checkout-sidebar-item div{ display:flex; flex-direction:column; font-size:12.5px; }
.checkout-sidebar-item strong{ color:var(--color-primary); font-size:13px; }
.checkout-legal-nota{ font-size:11px; color:var(--fg-muted); margin-top:8px; text-align:right; }
.ck-cuotas-nota{ font-size:12.5px; font-weight:600; color:var(--fg); margin-bottom:10px; }
.ck-cuotas-nota span{ font-weight:400; color:var(--fg-muted); font-size:11px; }
.ck-bancos{ display:flex; gap:8px; flex-wrap:wrap; }
.ck-bancos span{ font-size:11px; font-weight:600; color:var(--fg-muted); border:1px solid var(--border); border-radius:6px; padding:4px 8px; }
.checkout-seguir{ text-align:center; font-size:13px; color:var(--fg-muted); font-weight:600; }
.checkout-seguir:hover{ color:var(--color-primary); }

/* ============ SECCIÓN: SUGERENCIAS PARA TI (vive dentro de .cart-unidad, sin cierre propio) ============ */
.sug-seccion{
    width:300px; max-width:80vw;
    background:#fff;
    padding:24px;
    overflow-y:auto;
    border-right:1px solid var(--border);
    display:none; /* se muestra solo cuando hay sugerencias que pintar, vía JS */
    flex-direction:column;
}
.sug-seccion.visible{ display:flex; }

.sug-panel-head{ margin-bottom:18px; }
.sug-panel-head h4{ font-size:16px; }

.sug-grid{ display:flex; flex-direction:column; gap:18px; }
.sug-card{ text-align:left; }
.sug-card img{
    width:100%; aspect-ratio:1/1; object-fit:cover;
    border-radius:var(--radius-sm); margin-bottom:10px;
    background:var(--bg-muted);
}
.sug-card-nombre{ font-size:13px; font-weight:600; color:var(--fg); line-height:1.3; display:block; margin-bottom:6px; }
.sug-card-precio{ font-size:14px; font-weight:700; color:var(--color-primary); display:block; margin-bottom:10px; }

/* En pantallas angostas no hay espacio para mostrar carrito + sugerencias lado a lado */
@media (max-width: 900px){
    .sug-seccion{ display:none !important; }
    .cart-seccion{ width:100vw; }
}

/* ============ PÁGINA LEGAL (terminos.php) ============
   Contenido legal real proporcionado por Senseben by OMC S.A.C.
   (RUC 20611712520). */
.legal-titulo{ font-size:32px; margin-bottom:18px; }
@media (min-width:769px){
    .legal-page{ padding-top:1.5rem; }
}
.legal-layout{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:40px;
    align-items:start; /* revertido temporalmente: con "stretch" el nav desapareció por completo en pruebas de Roger — volvemos al estado que sí se veía mientras diagnosticamos el sticky con datos reales del navegador */
}
.legal-index{
    display:flex; flex-direction:column; gap:22px;
    position:sticky; top:150px; /* antes: 125px — el header sticky (topbar no cuenta, no es sticky) mide header-main + categories-nav ≈ 123px; se dejaba muy justo y el primer link quedaba tapado */
}
.legal-index-titulo{
    font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
    color:var(--fg-muted); margin-bottom:4px;
}
.legal-index a{
    font-size:13.5px; color:var(--fg-muted);
    padding-bottom:2px; border-bottom:1px solid transparent;
    transition:color .2s, border-color .2s;
}
.legal-index a:hover{ color:var(--color-primary); border-color:var(--color-primary); }
.legal-index a.activo{
    color: var(--color-primary);
    font-weight:600;
    border-color: var(--color-primary);
}

.legal-contenido{ max-width:720px; }
.legal-seccion{
    padding-bottom:32px; margin-bottom:32px;
    border-bottom:1px solid var(--border);
    scroll-margin-top: 195px; /* compensa .site-header sticky (header-main + categories-nav) + aire visible arriba del <h2> al saltar por ancla — antes 165px, quedaba pegado al header sin aire */
}
.legal-seccion:last-child{ border-bottom:none; margin-bottom:0; }
.legal-seccion h2{ font-size:21px; margin-bottom:14px; }
.legal-seccion h3{ font-size:16px; margin:20px 0 8px; color:var(--color-plum); }
.legal-seccion p{
    font-size:14.5px; line-height:1.75; color:var(--fg-muted);
    margin-bottom:12px;
}
.legal-seccion p:last-child{ margin-bottom:0; }
.legal-seccion ul{
    list-style:disc;
    padding-left:20px;
    margin-bottom:12px;
}
.legal-seccion ul li{
    font-size:14.5px; line-height:1.75; color:var(--fg-muted);
    margin-bottom:6px;
}

@media (max-width:900px){
    .legal-layout{ grid-template-columns:1fr; }
    .legal-index{ position:static; flex-direction:row; flex-wrap:wrap; gap:14px 20px; }
}
@media (max-width:768px){
    /* Anclas "En esta página" como botones/pills — solo mobile,
       aprovechando espacio con poco padding. */
    .legal-titulo{ font-size:22px; }
    .legal-index{ gap:8px; align-items:center; }
    .legal-index-titulo{ margin-bottom:0; }
    .legal-index a{
        padding:6px 12px; border:1px solid var(--border); border-radius:999px;
        background:var(--bg-muted); color:var(--fg);
    }
    .legal-index a:hover{ background:var(--bg-muted); }
    .legal-index a.activo{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
}

/* ============ AUTENTICACIÓN (login / registro / cuenta) ============ */
.auth-wrap{
    display:flex; justify-content:center;
    padding:48px 24px 64px;
}
.auth-card{
    width:100%; max-width:440px;
    background:#fff;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-card);
    padding:36px;
}
.auth-title{ font-size:26px; margin-bottom:6px; }
.auth-subtexto{ font-size:13.5px; color:var(--fg-muted); margin-bottom:24px; }
.auth-error{
    background:#FDECEA; border:1px solid #F5A9A0;
    color:#B3261E; font-size:13px;
    padding:12px 14px; border-radius:var(--radius-sm);
    margin-bottom:18px;
}
.auth-switch{
    text-align:center; font-size:13.5px; color:var(--fg-muted);
    margin-top:20px;
}
.auth-switch a{ color:var(--color-primary); font-weight:600; }

.cuenta-datos{
    display:flex; flex-direction:column; gap:14px;
    margin:20px 0 24px;
}
.cuenta-dato{
    display:flex; justify-content:space-between; align-items:center;
    padding-bottom:14px; border-bottom:1px solid var(--border);
    font-size:13.5px;
}
.cuenta-dato span{ color:var(--fg-muted); }
.cuenta-dato strong{ color:var(--fg); font-weight:600; }
.cuenta-proximamente{
    background:var(--bg-muted);
    border-radius:var(--radius-sm);
    padding:14px 16px;
    font-size:13px; color:var(--fg-muted);
    margin-bottom:8px;
}

.cuenta-accesos{
    display:flex; flex-direction:column; gap:12px;
    margin-bottom:20px;
}
.cuenta-acceso-card{
    display:flex; align-items:center; gap:14px;
    padding:16px; border:1px solid var(--border); border-radius:var(--radius-sm);
    transition:border-color .2s, background .2s;
}
a.cuenta-acceso-card:hover{ border-color:var(--color-primary); background:var(--color-rose-soft); }
.cuenta-acceso-card.deshabilitado{ opacity:0.55; cursor:not-allowed; }
.cuenta-acceso-icono{
    width:40px; height:40px; border-radius:50%; flex-shrink:0;
    background:var(--bg-muted);
    display:flex; align-items:center; justify-content:center;
    color:var(--color-primary);
}
.cuenta-acceso-texto{ display:flex; flex-direction:column; flex:1; }
.cuenta-acceso-texto strong{ font-size:14px; color:var(--fg); }
.cuenta-acceso-texto span{ font-size:12.5px; color:var(--fg-muted); }
.cuenta-acceso-flecha{ color:var(--fg-muted); font-size:16px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px){
    .plp-layout{ grid-template-columns:1fr; }
    .plp-sidebar{ order:2; }
    .plp-resultados{ order:1; }
    .plp-grid{ grid-template-columns:repeat(3,1fr); }
    .category-grid{ grid-template-columns:repeat(3,1fr); }
    .product-grid{ grid-template-columns:repeat(3,1fr); }
    .promo-grid{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:1fr 1fr; }
    .pdp-layout{ grid-template-columns:80px 1fr; }
    .pdp-info{ grid-column:1 / -1; margin-top:20px; }
    .checkout-body{ grid-template-columns:1fr; }
    .checkout-sidebar{ position:static; }

    /* ---- Modal de filtros (Filtrar → pantalla completa con Aplicar/Limpiar) ---- */
    .btn-filtros-toggle{ display:inline-flex; }
    .plp-limpiar-cabecera{ display:inline-flex; }
    .plp-filtros-overlay.abierto{ opacity:1; visibility:visible; }
    .plp-sidebar{
        position:fixed; inset:0;
        background:#fff;
        z-index:1100;
        transform:translateY(100%);
        transition:transform .3s ease;
        overflow-y:auto;
        padding:24px 24px 110px;
    }
    .plp-sidebar.abierto{ transform:translateY(0); }
    .plp-sidebar-title{ margin-top:8px; margin-bottom:20px; }
    .plp-sidebar-cerrar-mobile{
        display:flex; align-items:center; justify-content:center;
        position:absolute; top:16px; right:16px;
        width:36px; height:36px; border-radius:50%;
        background:var(--bg-muted); color:var(--fg-muted);
        font-size:18px; border:none; cursor:pointer;
    }
    .plp-sidebar-footer-mobile{
        display:none;
        position:fixed; left:0; right:0; bottom:0;
        background:#fff; padding:12px 24px;
        border-top:1px solid var(--border);
        z-index:1101;
    }
    .plp-sidebar-footer-mobile.abierto{ display:block; }
    .plp-sidebar-aplicar{
        width:100%; padding:10px;
        border:none; border-radius:999px;
        background:var(--color-primary); color:#fff;
        font-weight:700; font-size:13px; cursor:pointer;
    }
}
@media (max-width: 768px){
    .search-bar{ display:none; }
    .header-main{ gap:10px; padding:12px 16px; }
    .logo img{ height:64px; }
    .header-actions-icons{ gap:6px; }
    .icon-btn{ width:34px; height:34px; }
    .icon-btn svg{ width:19px; height:19px; }
    .icon-btn .icon{ width:19px; height:19px; }
    .categories-nav{ display:none; }
    .menu-toggle{ display:flex; }
    .mobile-search-btn{ display:flex; }
    .icon-btn-bottom-nav{ display:none; }
    .mobile-bottom-nav{ display:flex; }
    body{ padding-bottom:60px; }

    /* Precio actual + tachado en columna (no en fila) para que no se
       aprieten en el ancho angosto de la card y el precio tachado no
       termine solapado con el botón "Añadir". */
    .product-price-row{ flex-direction:column; align-items:flex-start; gap:2px; margin-bottom:14px; }
    .btn-add{ padding:8px; }

    /* En mobile .categories-nav queda oculto, así que el header sticky
       real es mucho más bajo que en escritorio (165px estaba calculado
       con header-main + categories-nav visibles) — si no se recalcula,
       saltar a un ancla deja un hueco enorme arriba de la sección. */
    #novedades, #categorias, #destacados, #marcas, #testimonios, .legal-seccion{
        scroll-margin-top: 72px;
    }
    .plp-catalogo-head{ padding-top:16px; }
    .legal-page{ padding-top:16px; }
    .hero{ height:auto; max-height:none; }
    .hero-slide{ position:relative; grid-template-columns:1fr; text-align:center; padding:40px 24px 100px; opacity:1; visibility:visible; display:none; }
    .hero-slide.activa{ display:grid; }
    .hero-foto{ display:none; }
    .hero-copy{ padding-left:0; opacity:1; transform:none; }
    .hero-copy p{ margin-inline:auto; }
    .hero-copy h1{ font-size:30px; }
    .hero-meta{ justify-content:center; }
    .hero-contador{ top:16px; right:24px; }
    .hero-dock{ left:50%; transform:translateX(-50%); bottom:16px; }
    .category-grid{ grid-template-columns:repeat(2,1fr); }
    .promo-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
    .promo-titulo{ font-size:16px; left:14px; right:14px; bottom:16px; }
    .promo-tag{ font-size:9px; top:14px; left:14px; }
    /* El "reveal" es un efecto de :hover pensado para mouse; en touch a
       veces se activa igual al tocar, y el texto largo no cabe en la
       tarjeta angosta de 2 columnas — se oculta directo en mobile. */
    .promo-reveal{ display:none; }
    .product-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
    .plp-grid{ grid-template-columns:repeat(2,1fr); }
    .benefits-grid{ grid-template-columns:1fr 1fr; }
    .marcas-grid{ grid-template-columns:repeat(2,1fr); }
    /* El 45% de ancho (inline en el <img>) se ve chico en las tarjetas
       angostas de mobile — se sube a 80% solo acá. !important porque el
       inline style pesa más que esta clase. */
    .marca-logo-img{ width:80% !important; }
    /* .marca-card es flex-direction:column — text-align no alinea a los
       hijos flex, hace falta align-items para centrarlos de verdad. */
    .marca-card{ padding:10px; align-items:center; text-align:center; }
    /* Si la cantidad de marcas es impar, la última queda sola en su fila
       (grid de 2 columnas) — se centra en vez de quedar pegada a la
       izquierda. :nth-child(odd):last-child solo matchea cuando de
       verdad queda sola (cantidad total impar). */
    .marcas-grid > .marca-card:nth-child(odd):last-child{
        grid-column:1 / -1;
        justify-self:center;
        width:calc(50% - 10px);
    }
    .footer-grid{ grid-template-columns:1fr; }
    .site-footer{ padding-top:28px; }

    /* Columna de marca centrada también en mobile (logo, texto), igual
       que ya pasa en escritorio/tablet. */
    .footer-brand{ text-align:center; }
    .footer-brand p{ margin-left:auto; margin-right:auto; }

    /* ---- Footer en acordeón (solo mobile) — JS en footer-accordion.js ---- */
    .footer-col:not(.footer-brand){ border-top:1px solid var(--border); padding-top:14px; }
    .footer-col-title{
        display:flex; align-items:center; justify-content:space-between;
        cursor:pointer; margin-bottom:0;
    }
    .footer-col-icono{
        position:relative; width:14px; height:14px; flex-shrink:0;
    }
    .footer-col-icono::before, .footer-col-icono::after{
        content:''; position:absolute; top:50%; left:50%;
        background:var(--color-plum); transform:translate(-50%,-50%);
    }
    .footer-col-icono::before{ width:14px; height:2px; }
    .footer-col-icono::after{ width:2px; height:14px; transition:transform .2s ease; }
    .footer-col.abierto .footer-col-icono::after{ transform:translate(-50%,-50%) rotate(90deg); }
    .footer-links{
        max-height:0; overflow:hidden;
        transition:max-height .25s ease;
    }
    .footer-col.abierto .footer-links{ max-height:400px; margin-top:14px; }

    .pdp-layout{ grid-template-columns:1fr; }
    .pdp-thumb{ width:64px; height:64px; flex-shrink:0; }
    /* .pdp-info pasa a display:contents (solo mobile) para poder
       intercalar sus hijos con la imagen/miniaturas en vez de que todo
       el bloque de info vaya siempre después de la galería entera. */
    .pdp-info{ display:contents; }
    .pdp-info > *{ order:6; } /* todo lo que sigue después de la categoría, sin tocar su orden relativo entre sí */
    /* Aprovechar espacio: breadcrumb/marca-sku más compactos y título
       más chico — solo mobile. */
    .breadcrumb{ font-size:11px; margin-bottom:4px; }
    /* Achica solo el espacio ANTES de la marca (migas de pan → marca) —
       .pdp-layout usa padding:24px arriba por defecto; acá se pisa nada
       más el top, sin tocar el gap general del grid (afecta a otras
       parejas de elementos que no se pidió tocar). */
    .pdp-layout{ padding-top:8px; }
    .pdp-marca-sku-row{ order:1; gap:6px; }
    .pdp-marca, .pdp-sku{ font-size:11px; }
    /* Achica solo el espacio ENTRE marca-row y título: el gap:28px del
       grid ya se aplica ahí (por el display:contents de arriba), así que
       se compensa con un margen negativo puntual en el título — el
       resto de los pares (título→imagen, etc.) conservan el gap normal. */
    .pdp-title{ order:2; font-size:1rem; margin:-20px 0 2px; }
    .pdp-main-image{ order:3; }
    .pdp-thumbs{ order:4; flex-direction:row; overflow-x:auto; }
    .pdp-cat{ order:5; }
    /* Mismo enfoque: todos estos pasaron a ser ítems sueltos del grid
       (por el display:contents de .pdp-info), así que el gap:28px se
       suma a su propio margen — se compensa con margin-top negativo en
       cada uno, puntual, sin tocar el gap general. */
    .pdp-tipo-selector{ margin-top:-20px; }
    .pdp-price-row{ margin:-20px 0 0; }
    .btn-add{ margin-top:-20px; }
    .pdp-trust{ margin-top:-20px; padding-top:8px; }

    /* Barra fija de compra (cantidad + Comprar ahora), pegada arriba del
       bottom-nav — igual al patrón de aruma.pe. Reemplaza al bloque de
       cantidad/comprar del flujo normal (se saca del flujo con fixed). */
    .pdp-qty-row{
        position:fixed;
        left:0; right:0;
        bottom:60px;
        z-index:910;
        margin:0;
        background:#fff;
        padding:10px 16px;
        border-top:1px solid var(--border);
        box-shadow:0 -4px 16px rgba(0,0,0,.06);
    }
    /* Espacio para que la franja de confianza no quede tapada por la
       barra fija de arriba (altura aprox. de esa barra). */
    body.pdp-body{ padding-bottom:130px; }
    .checkout-main{ padding:20px; }
    .ck-row{ flex-direction:column; gap:0; }
    .checkout-stepper{ max-width:280px; }

    /* ---- Menú de categorías en mobile: lista vertical, no fila horizontal ---- */
    .categories-nav ul{
        flex-direction:column;
        gap:0;
        padding:0;
        max-width:none;
    }
    .categories-nav li{
        width:100%;
        border-bottom:1px solid var(--border);
    }
    .categories-nav a{
        display:block;
        width:100%;
        padding:14px 24px;
        text-align:left;
    }
    /* El dropdown de subcategorías depende de :hover, que no existe en
       touch — en mobile cada categoría queda como link plano directo. */
    .cat-nav-dropdown{ display:none !important; }
    /* Marcas/Testimonios ya están dentro del menú acordeón mobile
       (#mobileMenu) — acá quedarían duplicados, se ocultan. */
    .header-quicklinks{ display:none; }
}