/* ==========================================================================
   Tienda VAE — hoja de estilos
   Tema oscuro con acento lima, misma identidad que las herramientas DTF.
   ========================================================================== */

:root {
    --bg: #000000;
    --bg-alt: #050505;
    --panel: #0a0a0a;
    --panel-alt: #111111;
    --borde: #1c1c1c;
    --borde-claro: #2a2a2a;
    --borde-neon: rgba(124, 181, 24, 0.38);
    --texto: #ffffff;
    --suave: #b5b5b5;
    --tenue: #6e6e6e;
    /* Verde bosque neón — prueba de acento tienda */
    --acento: #7cb518;
    --acento-brillo: #95d428;
    --acento-oscuro: #669612;
    --acento-rgb: 124, 181, 24;
    --resplandor-acento: 0 0 36px rgba(124, 181, 24, 0.42);
    --peligro: #ff6f61;
    --exito: #8fcc2e;
    --radio: 14px;
    --radio-chico: 9px;
    --sombra: 0 18px 45px rgba(0, 0, 0, 0.55);
    --fuente: 'Exo 2', 'Segoe UI', system-ui, sans-serif;
    --transicion: 0.18s ease;
}

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

html { scroll-behavior: smooth; }

body.tienda {
    min-height: 100vh;
    font-family: var(--fuente);
    font-size: 16px;
    line-height: 1.55;
    color: var(--texto);
    background:
        radial-gradient(ellipse 70% 50% at 82% -5%, rgba(var(--acento-rgb), 0.22) 0%, transparent 58%),
        radial-gradient(ellipse 45% 35% at 12% 100%, rgba(var(--acento-rgb), 0.1) 0%, transparent 55%),
        var(--bg);
    -webkit-font-smoothing: antialiased;
}

body.tienda.sin-scroll { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: var(--acento); color: #000; }

:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
    border-radius: 4px;
}

.contenedor {
    width: 100%;
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.mockup-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.visualmente-oculto {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.salto-contenido {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 200;
    padding: 0.75rem 1.1rem;
    background: var(--acento);
    color: #000;
    font-weight: 700;
}
.salto-contenido:focus { left: 0.5rem; top: 0.5rem; }

/* --------------------------------------------------------------------------
   Tipografía y utilidades
   -------------------------------------------------------------------------- */

h1, h2, h3 { line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
h3 { font-size: 1.05rem; }

.rebosa {
    display: inline-block;
    margin-bottom: 0.6rem;
    color: var(--acento);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.seccion { padding: 4rem 0; }
.seccion--alterna { background: var(--bg-alt); border-block: 1px solid var(--borde); }

.seccion__encabezado {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.2rem;
    flex-wrap: wrap;
}
.seccion__encabezado--centrado { justify-content: center; text-align: center; }

.cabecera-pagina {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1rem 0 2rem;
}
.cabecera-pagina p { max-width: 46ch; margin-top: 0.55rem; color: var(--suave); }
.cabecera-pagina__herramientas { display: flex; align-items: center; gap: 0.7rem; }

.migas {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.4rem 0 0.4rem;
    color: var(--tenue);
    font-size: 0.82rem;
    flex-wrap: wrap;
}
.migas a:hover { color: var(--acento); }

.enlace-flecha {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--acento);
    font-size: 0.86rem;
    font-weight: 600;
}
.enlace-flecha::after { content: '→'; transition: transform var(--transicion); }
.enlace-flecha:hover::after { transform: translateX(4px); }

.enlace-codigo {
    background: none;
    border: 0;
    padding: 0;
    color: var(--acento);
    font-size: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.enlace-peligro { color: var(--peligro) !important; }

.lista-puntos, .lista-numerada { display: grid; gap: 0.5rem; color: var(--suave); }
.lista-puntos li { position: relative; padding-left: 1.15rem; }
.lista-puntos li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.62em;
    width: 6px; height: 6px;
    background: var(--acento);
    border-radius: 50%;
}
.lista-numerada { counter-reset: paso; }
.lista-numerada li { position: relative; padding-left: 1.7rem; counter-increment: paso; }
.lista-numerada li::before {
    content: counter(paso);
    position: absolute; left: 0; top: 0;
    width: 1.15rem; height: 1.15rem;
    display: grid; place-items: center;
    background: var(--acento); color: #000;
    border-radius: 50%;
    font-size: 0.7rem; font-weight: 800;
}

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

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.78rem 1.35rem;
    border: 1px solid transparent;
    border-radius: var(--radio-chico);
    font-size: 0.83rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background var(--transicion), border-color var(--transicion), color var(--transicion), transform var(--transicion);
}
.boton:hover { transform: translateY(-1px); }
.boton:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.boton--primario { background: var(--acento); border-color: var(--acento); color: #050505; }
.boton--primario:hover {
    background: var(--acento-brillo);
    border-color: var(--acento-brillo);
    box-shadow: var(--resplandor-acento);
}

.boton--fantasma { background: var(--panel); border-color: var(--borde-claro); color: var(--texto); }
.boton--fantasma:hover { border-color: var(--acento); color: var(--acento); }

.boton--grande { padding: 1rem 1.7rem; font-size: 0.88rem; }
.boton--compacto { padding: 0.6rem 0.95rem; font-size: 0.76rem; }
.boton--bloque { width: 100%; }

.boton--filtros { display: none; }
.contador-filtros {
    display: grid; place-items: center;
    min-width: 1.25rem; height: 1.25rem;
    padding: 0 0.3rem;
    background: var(--acento); color: #000;
    border-radius: 999px;
    font-size: 0.7rem;
}

/* --------------------------------------------------------------------------
   Avisos y alertas
   -------------------------------------------------------------------------- */

.avisos {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 120;
    display: grid;
    gap: 0.6rem;
    width: min(24rem, calc(100vw - 2.5rem));
}

.aviso {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.9rem 1rem;
    background: var(--panel-alt);
    border: 1px solid var(--borde-claro);
    border-left: 3px solid var(--acento);
    border-radius: var(--radio-chico);
    box-shadow: var(--sombra);
    font-size: 0.9rem;
    animation: entrar 0.25s ease both;
}
.aviso--error { border-left-color: var(--peligro); }
.aviso__cerrar { margin-left: auto; background: none; border: 0; color: var(--tenue); font-size: 1.1rem; line-height: 1; }

@keyframes entrar {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.alerta {
    margin-bottom: 1.5rem;
    padding: 0.95rem 1.15rem;
    border: 1px solid var(--borde-claro);
    border-left: 3px solid var(--acento);
    border-radius: var(--radio-chico);
    background: var(--panel);
    font-size: 0.92rem;
}
.alerta--error { border-left-color: var(--peligro); }
.alerta--ok { border-left-color: var(--exito); }
.alerta ul { margin-top: 0.4rem; display: grid; gap: 0.25rem; color: var(--suave); }
.alerta li { padding-left: 1rem; position: relative; }
.alerta li::before { content: '·'; position: absolute; left: 0.25rem; }

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

.barra-aviso {
    background: var(--acento);
    color: #050505;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.barra-aviso__interior {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 0.5rem 1.5rem;
    flex-wrap: wrap;
}
.barra-aviso__separador { opacity: 0.5; }

.encabezado {
    position: sticky;
    top: 0;
    z-index: 90;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--borde-neon);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.encabezado__interior {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 4.6rem;
}

.logo { display: inline-flex; align-items: center; gap: 0.65rem; flex-shrink: 0; }
.logo__marca {
    width: 2.35rem; height: 2.35rem;
    display: grid; place-items: center;
    background: var(--acento); color: #000;
    border-radius: 9px;
    font-size: 1.15rem; font-weight: 800; font-style: italic;
    box-shadow: var(--resplandor-acento);
}
.logo__texto { display: flex; flex-direction: column; line-height: 1.1; }
.logo__texto strong { font-size: 1.25rem; font-style: italic; letter-spacing: 0.04em; }
.logo__texto small { color: rgba(var(--acento-rgb), 0.72); font-size: 0.66rem; letter-spacing: 0.06em; }

.menu { flex: 1; display: flex; align-items: center; }
.menu__lista { display: flex; align-items: center; gap: 0.3rem; }
.menu__enlace {
    display: block;
    padding: 0.55rem 0.8rem;
    border-radius: var(--radio-chico);
    color: var(--suave);
    font-size: 0.87rem;
    font-weight: 600;
    transition: color var(--transicion), background var(--transicion);
}
.menu__enlace:hover { color: var(--acento); background: rgba(var(--acento-rgb), 0.08); }
.menu__enlace--activo { color: var(--acento); background: rgba(var(--acento-rgb), 0.06); }

.encabezado__acciones { display: flex; align-items: center; gap: 0.55rem; margin-left: auto; }

.buscador { display: flex; align-items: center; }
.buscador input {
    width: 11rem;
    padding: 0.55rem 0.8rem;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico) 0 0 var(--radio-chico);
    color: var(--texto);
    font-family: inherit;
    font-size: 0.85rem;
    transition: width var(--transicion), border-color var(--transicion);
}
.buscador input:focus { width: 14rem; border-color: var(--borde-neon); outline: none; }
.buscador button {
    display: grid; place-items: center;
    padding: 0.55rem 0.7rem;
    height: 100%;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-left: 0;
    border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
    color: var(--suave);
}
.buscador button:hover { color: var(--acento); }
.buscador--movil { display: none; }

.boton-icono, .boton-carrito {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    color: var(--texto);
    font-size: 0.82rem;
    font-weight: 600;
    transition: border-color var(--transicion), color var(--transicion);
}
.boton-icono:hover, .boton-carrito:hover { border-color: var(--acento); color: var(--acento); }

.boton-carrito__cuenta {
    position: absolute;
    top: -0.4rem; right: -0.4rem;
    min-width: 1.25rem; height: 1.25rem;
    display: grid; place-items: center;
    padding: 0 0.28rem;
    background: var(--acento); color: #000;
    border-radius: 999px;
    font-size: 0.7rem; font-weight: 800;
}

.cuenta { position: relative; }
.cuenta__menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 95;
    min-width: 13rem;
    display: grid;
    padding: 0.5rem;
    background: var(--panel-alt);
    border: 1px solid var(--borde-claro);
    border-radius: var(--radio-chico);
    box-shadow: var(--sombra);
}
.cuenta__correo { padding: 0.5rem 0.6rem; color: var(--tenue); font-size: 0.75rem; word-break: break-all; }
.cuenta__menu a, .cuenta__menu button {
    padding: 0.55rem 0.6rem;
    background: none; border: 0;
    border-radius: var(--radio-chico);
    color: var(--texto);
    font-size: 0.87rem;
    text-align: left;
}
.cuenta__menu a:hover, .cuenta__menu button:hover { background: var(--panel); color: var(--acento); }
.cuenta__menu form { display: grid; }

.boton-menu {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 0.65rem 0.6rem;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
}
.boton-menu span { display: block; width: 18px; height: 2px; background: var(--texto); }

/* El fondo y el botón de cierre solo entran en juego con el menú en cajón. */
.menu-fondo { display: none; }
.menu__cerrar { display: none; }

/* --------------------------------------------------------------------------
   Mockup de prenda
   -------------------------------------------------------------------------- */

.mockup {
    width: 100%;
    display: grid;
    place-items: center;
}
.mockup svg { width: 100%; height: auto; }
.mockup text { font-family: var(--fuente); }

.mockup--tarjeta { max-width: 78%; transition: transform 0.35s ease; }
.mockup--portada { max-width: 30rem; filter: drop-shadow(0 30px 55px rgba(0, 0, 0, 0.55)); }
.portada__visual .mockup--diseno-vertical.mockup--portada {
    max-width: min(22rem, 100%);
    filter: none;
}
.mockup--ficha { max-width: 100%; }
.mockup--medio { max-width: 21rem; }
.mockup--categoria { max-width: 8.5rem; }
.mockup--galeria { max-width: 82%; }
.mockup--foto { display: grid; place-items: center; }
.mockup--diseno-vertical {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #0a0a0a;
}
.mockup--diseno-vertical.mockup--placeholder {
    display: grid;
    place-items: center;
    border: 1px dashed var(--borde-claro);
    color: var(--tenue);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.mockup--diseno-vertical .mockup__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.mockup__foto {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.35));
}
.mockup--diseno-vertical .mockup__foto {
    filter: none;
}
.mockup--mini {
    width: 3.6rem;
    flex-shrink: 0;
    padding: 0.15rem;
    background: radial-gradient(ellipse 75% 65% at 50% 45%, #333333 0%, #191919 78%);
    border-radius: 8px;
}
.mockup--linea { width: 5.6rem; flex-shrink: 0; }

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

.portada {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #141414;
    background: #000;
}
.portada__interior {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 3rem;
    padding: 4rem 1.5rem 4.5rem;
}
.portada__texto h1 { font-size: clamp(2.3rem, 5.5vw, 4.1rem); }
.portada__texto h1 em { font-style: italic; color: var(--acento); }
.portada__texto p { max-width: 44ch; margin-top: 1.1rem; color: var(--suave); font-size: 1.03rem; }
.portada__acciones { display: flex; gap: 0.8rem; margin-top: 2rem; flex-wrap: wrap; }

.portada__confianza {
    display: flex;
    gap: 2rem;
    margin-top: 2.6rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--borde);
    flex-wrap: wrap;
}
.portada__confianza li { display: flex; flex-direction: column; color: var(--tenue); font-size: 0.78rem; }
.portada__confianza strong { color: var(--acento); font-size: 1.25rem; }

.portada__visual { position: relative; display: grid; place-items: center; }
.portada__visual::before {
    content: '';
    position: absolute;
    width: 118%;
    aspect-ratio: 1;
    max-width: 34rem;
    background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.1) 0%, rgba(var(--acento-rgb), 0.12) 38%, transparent 66%);
}
.portada__visual .mockup { position: relative; }

.portada__ficha {
    position: absolute;
    right: 0;
    bottom: 1.5rem;
    display: grid;
    gap: 0.3rem;
    padding: 1rem 1.2rem;
    background: rgba(22, 22, 22, 0.94);
    backdrop-filter: blur(8px);
    border: 1px solid var(--borde-claro);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    transition: transform var(--transicion), border-color var(--transicion);
}
.portada__ficha:hover { transform: translateY(-3px); border-color: var(--acento); }
.portada__ficha-nombre { font-weight: 700; font-size: 0.95rem; }
.portada__ficha-precio { color: var(--acento); font-size: 1.3rem; font-weight: 800; }
.portada__ficha-cta { color: var(--tenue); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; }

.portada--galeria {
    background:
        radial-gradient(ellipse 48% 58% at 74% 48%, rgba(18, 32, 4, 0.55) 0%, transparent 68%),
        #000;
}
.portada--galeria-vacia .portada__stack {
    display: none;
}
.portada--galeria .portada__interior {
    align-items: center;
    min-height: 38rem;
}
.portada__escena {
    position: relative;
    min-height: 34rem;
    display: grid;
    place-items: center;
    padding: 2.5rem 0 4.2rem;
}
.portada__escena-halo {
    position: absolute;
    width: 78%;
    aspect-ratio: 1;
    max-width: 28rem;
    background: radial-gradient(circle, rgba(var(--acento-rgb), 0.09) 0%, transparent 68%);
    pointer-events: none;
}
.portada__stack {
    position: relative;
    width: min(22rem, 72%);
    aspect-ratio: 2 / 3;
    perspective: 1600px;
    transform-style: preserve-3d;
}
.portada__poster {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
    background: #050505;
    box-shadow: 0 28px 55px rgba(0, 0, 0, 0.62);
    opacity: 0;
    pointer-events: none;
    transform: translateX(0) scale(0.86);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, filter 0.45s ease;
}
.portada__poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.portada__poster[data-pos="prev"],
.portada__poster[data-pos="next"],
.portada__poster[data-pos="current"] {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}
.portada__poster[data-pos="prev"] {
    z-index: 1;
    transform: translateX(-42%) rotateY(26deg) rotateZ(-2deg) scale(0.82);
    filter: brightness(0.42);
}
.portada__poster[data-pos="next"] {
    z-index: 1;
    transform: translateX(42%) rotateY(-26deg) rotateZ(2deg) scale(0.82);
    filter: brightness(0.42);
}
.portada__poster[data-pos="current"] {
    z-index: 3;
    pointer-events: auto;
    transform: translateX(0) rotateY(0) scale(1);
    filter: none;
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.72),
        0 0 42px rgba(var(--acento-rgb), 0.08);
}
.portada--galeria .portada__ficha {
    right: 6%;
    bottom: 5.4rem;
    z-index: 5;
    min-width: 11.5rem;
    padding: 0.85rem 1rem;
    background: rgba(8, 8, 8, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.portada__nav {
    position: absolute;
    left: 50%;
    bottom: 0.4rem;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    transform: translateX(-50%);
    color: var(--tenue);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
}
.portada__nav-cuenta {
    min-width: 4.2rem;
    text-align: center;
    color: #d8d8d8;
    font-weight: 600;
}
.portada__nav-btn {
    background: none;
    border: 0;
    color: #f2f2f2;
    font-size: 1rem;
    line-height: 1;
    padding: 0.2rem;
}
.portada__nav-btn:hover { color: var(--acento); }

/* --------------------------------------------------------------------------
   Beneficios
   -------------------------------------------------------------------------- */

.beneficios {
    background: linear-gradient(180deg, rgba(var(--acento-rgb), 0.05) 0%, var(--bg-alt) 100%);
    border-bottom: 1px solid var(--borde-neon);
}
.beneficios__interior {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    padding: 2.4rem 1.5rem;
}
.beneficios h2 { font-size: 0.95rem; color: var(--acento); }
.beneficios p { margin-top: 0.35rem; color: var(--tenue); font-size: 0.85rem; }

/* --------------------------------------------------------------------------
   Categorías
   -------------------------------------------------------------------------- */

.categorias { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.categoria {
    display: grid;
    gap: 0.8rem;
    padding: 1.5rem 1.4rem 1.7rem;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    transition: border-color var(--transicion), transform var(--transicion), background var(--transicion);
}
.categoria:hover { border-color: var(--acento); transform: translateY(-4px); background: var(--panel-alt); }
.categoria__escenario {
    display: grid;
    place-items: center;
    padding: 0.9rem;
    background-image: radial-gradient(ellipse 72% 62% at 50% 42%, #333333 0%, #1b1b1b 62%, #131313 100%);
    border-radius: var(--radio-chico);
}
.categoria h3 { font-size: 1.15rem; }
.categoria p { margin-top: 0.35rem; color: var(--tenue); font-size: 0.84rem; }
.categoria__datos > span {
    display: inline-block;
    margin-top: 0.7rem;
    color: var(--acento);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   Tarjetas de producto
   -------------------------------------------------------------------------- */

.rejilla-productos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem;
}
.rejilla-productos--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.tarjeta {
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
    transition: border-color var(--transicion), transform var(--transicion);
}
.tarjeta:hover { border-color: var(--borde-neon); transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4); }
.tarjeta:hover .mockup--tarjeta { transform: scale(1.04); }
.tarjeta--agotada .tarjeta__visual { opacity: 0.55; }

/*
   Escenario del mockup: un degradado tipo estudio fotográfico. Sin él, una playera
   negra sobre el fondo oscuro del sitio se pierde por completo.
*/
.tarjeta__visual,
.ficha__mockup,
.galeria__pieza,
.personaliza__visual {
    background-image: radial-gradient(ellipse 70% 60% at 50% 42%, #333333 0%, #1c1c1c 58%, #121212 100%);
}

.tarjeta__visual {
    position: relative;
    display: grid;
    place-items: center;
    padding: 1.6rem 1rem 0.6rem;
}

.etiquetas { position: absolute; top: 0.85rem; left: 0.85rem; display: grid; gap: 0.35rem; justify-items: start; }
.etiquetas--ficha { top: 1.2rem; left: 1.2rem; }
.etiqueta {
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.etiqueta--nuevo { background: var(--acento); color: #000; }
.etiqueta--oferta { background: var(--peligro); color: #14140f; }
.etiqueta--personalizable { background: var(--panel-alt); color: var(--acento); border: 1px solid var(--acento); }
.etiqueta--agotado { background: #2b2b2b; color: var(--suave); }

.tarjeta__cuerpo { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.1rem 1.2rem 1.3rem; flex: 1; }
.tarjeta__categoria { color: var(--tenue); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.tarjeta__nombre { font-size: 1.02rem; }
.tarjeta__nombre a:hover { color: var(--acento); }

.tarjeta__precios { display: flex; align-items: baseline; gap: 0.55rem; }
.tarjeta__precios strong { font-size: 1.3rem; font-weight: 800; }
.tarjeta__precios s { color: var(--tenue); font-size: 0.9rem; }

.tarjeta__opciones { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.tarjeta__acciones { display: grid; gap: 0.5rem; margin-top: auto; padding-top: 0.6rem; }

/*
   Variante /tienda2: la foto llena de borde a borde la sección visual.
   El cuerpo (nombre, precio, tallas, botones) se queda igual debajo.
*/
.aviso-variante {
    border-bottom: 1px solid #2a3300;
    background: var(--acento);
    color: #111;
}
.aviso-variante__interior {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    padding: 0.7rem 1.5rem;
    font-size: 0.86rem;
    font-weight: 700;
}
.aviso-variante a {
    padding: 0.22rem 0.7rem;
    background: #111;
    color: var(--acento);
    border-radius: 999px;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.aviso-variante a:hover { background: #222; }

.tienda--fotos-completas .tarjeta--con-foto .tarjeta__visual {
    padding: 0;
    overflow: hidden;
    place-items: stretch;
    background-image: none;
    background-color: #111;
}

.tienda--fotos-completas .tarjeta--con-foto .tarjeta__visual .mockup--tarjeta {
    max-width: none;
    width: 100%;
    height: auto;
}

.tienda--fotos-completas .tarjeta--con-foto .tarjeta__visual .mockup--foto {
    display: block;
    width: 100%;
}

.tienda--fotos-completas .tarjeta--con-foto .tarjeta__visual .mockup--diseno-vertical {
    aspect-ratio: 3 / 4;
    max-width: none;
}

.tienda--fotos-completas .tarjeta--con-foto .tarjeta__visual .mockup__foto {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center top;
    filter: none;
}

.tienda--fotos-completas .tarjeta:not(.tarjeta--con-foto) .tarjeta__visual .mockup--placeholder {
    min-height: 14rem;
}

.ficha__mockup .mockup--diseno-vertical {
    width: min(100%, 20rem);
    margin: 0 auto;
}

.ficha__mockup:has(.mockup--diseno-vertical) {
    padding: 0;
    overflow: hidden;
    background: #0a0a0a;
}

.mockup--mini.mockup--diseno-vertical,
.mockup--linea.mockup--diseno-vertical {
    aspect-ratio: 3 / 4;
    width: 3.6rem;
}

.tienda--fotos-completas .tarjeta:not(.tarjeta--con-foto) .tarjeta__visual {
    padding: 1.1rem 0.75rem 0.45rem;
}

.tienda--fotos-completas .tarjeta:not(.tarjeta--con-foto) .mockup--tarjeta {
    max-width: 88%;
}

.tienda--fotos-completas .tarjeta:hover .mockup--tarjeta {
    transform: scale(1.03);
}

/* Valoración */
.valoracion { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; }
.estrellas { position: relative; display: inline-block; line-height: 1; letter-spacing: 1px; }
.estrellas__base { color: #3a3a3a; }
.estrellas__relleno { position: absolute; inset: 0; overflow: hidden; white-space: nowrap; color: var(--acento); }
.valoracion__cifra { font-weight: 700; }
.valoracion__total { color: var(--tenue); }

/* Muestras de color */
.muestras { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.muestra {
    width: 1.15rem; height: 1.15rem;
    padding: 0;
    background: var(--muestra);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    box-shadow: 0 0 0 0 var(--acento);
    transition: box-shadow var(--transicion), transform var(--transicion);
}
.muestra:hover { transform: scale(1.15); }
.muestra--activa { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--acento); }
.muestras--grande { gap: 0.6rem; }
.muestra--grande { width: 2.1rem; height: 2.1rem; border-radius: 8px; }

.punto-color {
    display: inline-block;
    width: 0.7rem; height: 0.7rem;
    background: var(--muestra);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    vertical-align: -1px;
}

/* Tallas mini */
.tallas-mini { display: flex; gap: 0.25rem; }
.talla-mini {
    min-width: 1.55rem;
    padding: 0.12rem 0.28rem;
    border: 1px solid var(--borde-claro);
    border-radius: 5px;
    color: var(--suave);
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
}
.talla-mini--agotada { color: #4a4a4a; border-color: #262626; text-decoration: line-through; }

/* Disponibilidad */
.disponibilidad { display: flex; align-items: center; gap: 0.45rem; font-size: 0.79rem; color: var(--suave); }
.disponibilidad__punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.disponibilidad--ok { color: var(--exito); }
.disponibilidad--pocas { color: #ffce4f; }
.disponibilidad--agotado { color: var(--tenue); }

/* --------------------------------------------------------------------------
   Personaliza / pasos / reseñas / boletín
   -------------------------------------------------------------------------- */

.personaliza { padding: 4rem 0; border-block: 1px solid var(--borde); }
.personaliza--compacta { border: 0; padding: 3rem 0 4rem; }
.personaliza__interior {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 3rem;
}
.personaliza__texto p { margin-top: 0.8rem; color: var(--suave); max-width: 48ch; }
.personaliza__acciones { display: flex; gap: 0.8rem; margin-top: 1.8rem; flex-wrap: wrap; }
.personaliza__visual {
    display: grid;
    place-items: center;
    padding: 2rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}

.pasos { display: grid; gap: 1rem; margin-top: 1.6rem; counter-reset: n; }
.pasos li {
    position: relative;
    display: grid;
    gap: 0.2rem;
    padding-left: 3rem;
    counter-increment: n;
}
.pasos li::before {
    content: counter(n, decimal-leading-zero);
    position: absolute; left: 0; top: 0;
    color: var(--acento);
    font-size: 1.2rem; font-weight: 800; font-style: italic;
}
.pasos strong { font-size: 1rem; }
.pasos span { color: var(--tenue); font-size: 0.88rem; }

.resenas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.resena {
    display: grid;
    gap: 0.7rem;
    padding: 1.6rem;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}
.resena p { color: var(--texto); font-size: 0.96rem; }
.resena h3 { font-size: 0.98rem; }
.resena footer { display: grid; color: var(--tenue); font-size: 0.8rem; }
.resena footer strong { color: var(--texto); font-size: 0.88rem; }

.boletin { padding: 3.2rem 0 4rem; }
.boletin__interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2.4rem 2.6rem;
    background: linear-gradient(120deg, rgba(var(--acento-rgb), 0.12), rgba(var(--acento-rgb), 0.02)), var(--panel);
    border: 1px solid var(--borde-claro);
    border-radius: var(--radio);
    flex-wrap: wrap;
}
.boletin p { margin-top: 0.4rem; color: var(--suave); }
.boletin__form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.boletin__form input {
    min-width: 15rem;
    padding: 0.9rem 1rem;
    background: var(--bg);
    border: 1px solid var(--borde-claro);
    border-radius: var(--radio-chico);
    color: var(--texto);
    font-family: inherit;
}

/* --------------------------------------------------------------------------
   Catálogo y filtros
   -------------------------------------------------------------------------- */

.catalogo { display: grid; grid-template-columns: 16.5rem 1fr; gap: 2rem; padding-bottom: 4rem; align-items: start; }

.catalogo__filtros { position: sticky; top: 6rem; }
.catalogo__cerrar-filtros { display: none; }

.orden { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--suave); }
.orden select {
    padding: 0.6rem 0.75rem;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    color: var(--texto);
    font-family: inherit;
    font-size: 0.84rem;
}

.filtros {
    display: grid;
    gap: 1.4rem;
    padding: 1.35rem;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}
.filtros__encabezado { display: flex; align-items: center; justify-content: space-between; }
.filtros__encabezado h2 { font-size: 1.05rem; }
.filtros__limpiar { color: var(--tenue); font-size: 0.8rem; text-decoration: underline; text-underline-offset: 3px; }
.filtros__limpiar:hover { color: var(--acento); }

.filtros__grupo { border: 0; padding-top: 1.2rem; border-top: 1px solid var(--borde); display: grid; gap: 0.6rem; }
.filtros__grupo legend {
    padding: 0;
    margin-bottom: 0.2rem;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tenue);
}

/*
   Los controles nativos se dejan transparentes cubriendo su etiqueta en lugar de
   ocultarlos con width/height 0: así siguen anunciándose en lectores de pantalla
   y todo el bloque queda clicable.
*/
.casilla input, .ficha-talla input, .ficha-color input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.casilla { position: relative; display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: 0.9rem; }
.casilla__marca {
    width: 1.05rem; height: 1.05rem;
    flex-shrink: 0;
    border: 1.5px solid var(--borde-claro);
    border-radius: 5px;
    background: var(--bg);
    transition: background var(--transicion), border-color var(--transicion);
}
.casilla input:checked + .casilla__marca {
    background: var(--acento);
    border-color: var(--acento);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 100%;
}
.casilla input:focus-visible + .casilla__marca { outline: 2px solid var(--acento); outline-offset: 2px; }
.casilla__cuenta { margin-left: auto; color: var(--tenue); font-size: 0.78rem; }
.casilla--suelta { margin: 0.4rem 0 1.1rem; }

.fichas-talla { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.ficha-talla {
    position: relative;
    cursor: pointer;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: var(--texto);
}
.ficha-talla span {
    display: grid; place-items: center;
    min-width: 2.6rem;
    padding: 0.42rem 0.5rem;
    background: var(--bg);
    border: 1px solid var(--borde-claro);
    border-radius: var(--radio-chico);
    color: var(--texto);
    font-size: 0.82rem;
    font-weight: 700;
    transition: all var(--transicion);
}
.ficha-talla:hover span { border-color: var(--suave); }
.ficha-talla input:checked + span,
.ficha-talla--activa span { background: var(--acento); border-color: var(--acento); color: #000; }
.ficha-talla input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.fichas-talla--grande span { min-width: 3.4rem; padding: 0.6rem 0.7rem; font-size: 0.9rem; }
.ficha-talla--agotada span { color: #4a4a4a; border-color: #242424; cursor: not-allowed; text-decoration: line-through; }

.fichas-color { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.45rem; }
.ficha-color { position: relative; display: flex; align-items: center; gap: 0.45rem; cursor: pointer; font-size: 0.85rem; }
.ficha-color__muestra {
    width: 1.15rem; height: 1.15rem;
    flex-shrink: 0;
    background: var(--muestra);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: box-shadow var(--transicion);
}
.ficha-color input:checked + .ficha-color__muestra { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--acento); }
.ficha-color input:checked ~ .ficha-color__nombre { color: var(--acento); font-weight: 700; }
.ficha-color__nombre { color: var(--suave); }

.rango { position: relative; height: 2.2rem; display: grid; align-items: center; }
.rango__pistas {
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 4px;
    margin-top: -2px;
    background: var(--borde-claro);
    border-radius: 999px;
}
.rango__activa { position: absolute; height: 100%; background: var(--acento); border-radius: 999px; }
.rango input[type="range"] {
    position: absolute;
    left: 0; right: 0;
    width: 100%;
    height: 2.2rem;
    margin: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}
.rango input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1.05rem; height: 1.05rem;
    background: var(--acento);
    border: 2px solid var(--bg);
    border-radius: 50%;
    pointer-events: auto;
    cursor: grab;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.rango input[type="range"]::-moz-range-thumb {
    width: 1.05rem; height: 1.05rem;
    background: var(--acento);
    border: 2px solid var(--bg);
    border-radius: 50%;
    pointer-events: auto;
    cursor: grab;
}
.rango input[type="range"]::-moz-range-track { background: none; }
.rango__valores { display: flex; align-items: center; justify-content: space-between; color: var(--suave); font-size: 0.85rem; font-weight: 600; }

.chips { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.7rem;
    background: var(--panel);
    border: 1px solid var(--borde-claro);
    border-radius: 999px;
    font-size: 0.79rem;
}
.chip:hover { border-color: var(--peligro); color: var(--peligro); }
.chip--limpiar { border-style: dashed; color: var(--tenue); }
.chip--limpiar:hover { border-color: var(--acento); color: var(--acento); }

.sin-resultados {
    display: grid;
    gap: 0.8rem;
    justify-items: center;
    padding: 4rem 2rem;
    background: var(--panel);
    border: 1px dashed var(--borde-claro);
    border-radius: var(--radio);
    text-align: center;
}
.sin-resultados p { color: var(--suave); }

.paginador {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}
.paginador__paginas { display: flex; gap: 0.3rem; }
.paginador__enlace {
    display: grid; place-items: center;
    min-width: 2.4rem;
    padding: 0.55rem 0.8rem;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    font-size: 0.84rem;
    font-weight: 600;
}
.paginador__enlace:hover { border-color: var(--acento); color: var(--acento); }
.paginador__enlace--activo { background: var(--acento); border-color: var(--acento); color: #000; }
.paginador__enlace--inactivo { color: var(--tenue); opacity: 0.5; }
.paginador__puntos { padding: 0 0.4rem; color: var(--tenue); }

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

.ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding-bottom: 3rem; align-items: start; }

.ficha__visual { position: sticky; top: 6rem; display: grid; gap: 1.2rem; }
.ficha__mockup {
    position: relative;
    display: grid;
    place-items: center;
    padding: 2.5rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}

.ficha__detalles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
.ficha__detalles li {
    display: grid;
    gap: 0.15rem;
    padding: 0.8rem;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
}
.ficha__detalles strong { color: var(--tenue); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.ficha__detalles span { font-size: 0.85rem; }

.ficha__info { display: grid; gap: 1.1rem; }
.ficha__categoria { color: var(--acento); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.ficha__valoracion { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.ficha__valoracion a { color: var(--tenue); font-size: 0.82rem; text-decoration: underline; text-underline-offset: 3px; }

.ficha__precio { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.ficha__precio strong { font-size: 2.1rem; font-weight: 800; }
.ficha__precio s { color: var(--tenue); font-size: 1.05rem; }
.ficha__ahorro {
    padding: 0.2rem 0.55rem;
    background: rgba(255, 111, 97, 0.14);
    border: 1px solid var(--peligro);
    border-radius: 999px;
    color: var(--peligro);
    font-size: 0.74rem;
    font-weight: 700;
}
.ficha__resumen { color: var(--suave); }

.ficha__form {
    display: grid;
    gap: 1.3rem;
    padding: 1.4rem;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}
.selector { display: grid; gap: 0.65rem; }
.selector__titulo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.selector__titulo span { color: var(--tenue); font-size: 0.73rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.selector__titulo strong { font-size: 0.92rem; }
.selector__aviso:empty { display: none; }
.selector__aviso { color: #ffce4f; font-size: 0.82rem; }

.ficha__compra { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.ficha__compra .boton { flex: 1; min-width: 12rem; }

.contador {
    display: inline-flex;
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--borde-claro);
    border-radius: var(--radio-chico);
    overflow: hidden;
}
.contador button {
    width: 2.1rem; height: 2.1rem;
    display: grid; place-items: center;
    background: none; border: 0;
    color: var(--texto);
    font-size: 1.05rem;
    transition: background var(--transicion), color var(--transicion);
}
.contador button:hover { background: var(--panel-alt); color: var(--acento); }
.contador span, .contador input {
    width: 2.4rem;
    text-align: center;
    background: none;
    border: 0;
    color: var(--texto);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    -moz-appearance: textfield;
}
.contador input::-webkit-outer-spin-button,
.contador input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.contador--grande button { width: 2.7rem; height: 2.9rem; font-size: 1.2rem; }
.contador--grande input { width: 3rem; font-size: 1rem; }

.ficha__promesas { display: grid; gap: 0.45rem; color: var(--suave); font-size: 0.87rem; }
.ficha__promesas li { padding-left: 1.2rem; position: relative; }
.ficha__promesas li::before { content: '✓'; position: absolute; left: 0; color: var(--acento); font-weight: 800; }

.acordeon { border-top: 1px solid var(--borde); }
.acordeon summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.95rem 0;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    list-style: none;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: '+'; color: var(--acento); font-size: 1.2rem; }
.acordeon[open] summary::after { content: '−'; }
.acordeon > *:not(summary) { padding-bottom: 1.1rem; color: var(--suave); }
.acordeon__nota { margin-top: 0.6rem; color: var(--tenue); font-size: 0.84rem; }

.tabla-tallas { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tabla-tallas caption { padding-bottom: 0.7rem; color: var(--tenue); font-size: 0.8rem; text-align: left; }
.tabla-tallas th, .tabla-tallas td { padding: 0.6rem 0.7rem; border: 1px solid var(--borde); text-align: left; }
.tabla-tallas thead th { background: var(--panel-alt); color: var(--tenue); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; }
.tabla-tallas tbody th { color: var(--texto); font-weight: 700; }
.tabla-tallas--amplia { max-width: 46rem; }

/* Opiniones */
.opiniones { padding: 3.5rem 0; border-top: 1px solid var(--borde); }
.opiniones__cuerpo { display: grid; grid-template-columns: 17rem 1fr; gap: 2.5rem; align-items: start; }
.opiniones__resumen {
    display: grid;
    gap: 0.5rem;
    justify-items: start;
    padding: 1.5rem;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}
.opiniones__cifra { font-size: 3rem; font-weight: 800; line-height: 1; }
.opiniones__base { color: var(--tenue); font-size: 0.82rem; }
.barras-valoracion { width: 100%; display: grid; gap: 0.35rem; margin-top: 0.8rem; }
.barras-valoracion li { display: grid; grid-template-columns: 2rem 1fr 2.5rem; align-items: center; gap: 0.5rem; color: var(--tenue); font-size: 0.78rem; }
.barras-valoracion__pista { height: 6px; background: var(--borde); border-radius: 999px; overflow: hidden; }
.barras-valoracion__pista span { display: block; height: 100%; background: var(--acento); }
.opiniones__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }

/* --------------------------------------------------------------------------
   Carrito
   -------------------------------------------------------------------------- */

.carrito { padding-bottom: 4rem; }
.carrito__columnas { display: grid; grid-template-columns: 1fr 22rem; gap: 2rem; align-items: start; }

.carrito__lineas-encabezado {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}
.carrito__lineas-encabezado h2 { font-size: 1.15rem; }
.carrito__lineas-encabezado a { color: var(--acento); font-size: 0.85rem; font-weight: 600; }

.progreso-envio {
    display: grid;
    gap: 0.6rem;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.2rem;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-left: 3px solid var(--acento);
    border-radius: var(--radio-chico);
    font-size: 0.88rem;
}
.progreso-envio--logrado { border-left-color: var(--exito); }
.progreso-envio__barra { height: 6px; background: var(--borde); border-radius: 999px; overflow: hidden; }
.progreso-envio__barra span { display: block; height: 100%; background: var(--acento); transition: width 0.3s ease; }

.lineas { display: grid; gap: 0.9rem; }
.linea {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.1rem;
    padding: 1.1rem;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}
.linea--agotada { border-color: var(--peligro); }
.linea__visual {
    display: grid; place-items: center;
    padding: 0.4rem;
    background-image: radial-gradient(ellipse 72% 62% at 50% 42%, #333333 0%, #1b1b1b 62%, #131313 100%);
    border-radius: var(--radio-chico);
}
.linea__datos { display: grid; gap: 0.32rem; align-content: start; min-width: 0; }
.linea__datos h3 { font-size: 1rem; }
.linea__datos h3 a:hover { color: var(--acento); }
.linea__variante { display: flex; align-items: center; gap: 0.4rem; color: var(--suave); font-size: 0.86rem; }
.linea__unitario { color: var(--tenue); font-size: 0.8rem; }
.linea__aviso { color: var(--peligro); font-size: 0.82rem; font-weight: 600; }
.linea__aviso--suave { color: #ffce4f; }
.linea__controles { display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; flex-wrap: wrap; }
.linea__enlaces { display: flex; align-items: center; gap: 0.9rem; }
.linea__enlaces button {
    background: none; border: 0; padding: 0;
    color: var(--suave);
    font-size: 0.82rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.linea__enlaces button:hover { color: var(--acento); }
.linea__enlaces .enlace-peligro:hover { opacity: 0.75; color: var(--peligro) !important; }
.linea__importe { font-size: 1.2rem; font-weight: 800; white-space: nowrap; }

.guardados { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--borde); }
.guardados h2 { font-size: 1.05rem; margin-bottom: 1rem; }
.guardados ul { display: grid; gap: 0.6rem; }
.guardado {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    flex-wrap: wrap;
}
.guardado__datos { display: grid; flex: 1; min-width: 10rem; }
.guardado__datos a { font-weight: 700; font-size: 0.93rem; }
.guardado__datos a:hover { color: var(--acento); }
.guardado__datos span { color: var(--tenue); font-size: 0.8rem; }
.guardado__acciones { display: flex; align-items: center; gap: 0.9rem; }
.guardado__acciones button {
    background: none; border: 0; padding: 0;
    color: var(--acento);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.guardado__agotado { color: var(--tenue); font-size: 0.82rem; }

.carrito__vacio {
    display: grid;
    gap: 0.8rem;
    justify-items: center;
    padding: 4.5rem 2rem;
    background: var(--panel);
    border: 1px dashed var(--borde-claro);
    border-radius: var(--radio);
    text-align: center;
}
.carrito__vacio-icono { color: var(--acento); }
.carrito__vacio p { color: var(--suave); max-width: 40ch; }
.carrito__vacio-acciones { display: flex; gap: 0.7rem; margin-top: 0.7rem; flex-wrap: wrap; justify-content: center; }

/* Resumen */
.resumen {
    position: sticky;
    top: 6rem;
    display: grid;
    gap: 1.2rem;
    padding: 1.4rem;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}
.resumen h2 { font-size: 1.1rem; }
.resumen__bloque { display: grid; gap: 0.6rem; padding-top: 1.1rem; border-top: 1px solid var(--borde); }
.resumen__bloque h3 { color: var(--tenue); font-size: 0.73rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.resumen__ayuda { color: var(--tenue); font-size: 0.8rem; }

.cupon { display: flex; gap: 0.45rem; }
.cupon input {
    flex: 1;
    min-width: 0;
    padding: 0.65rem 0.75rem;
    background: var(--bg);
    border: 1px solid var(--borde-claro);
    border-radius: var(--radio-chico);
    color: var(--texto);
    font-family: inherit;
    font-size: 0.88rem;
    text-transform: uppercase;
}
.cupon .boton { padding: 0.65rem 0.9rem; font-size: 0.75rem; }

.cupon-aplicado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.7rem 0.85rem;
    background: rgba(var(--acento-rgb), 0.1);
    border: 1px solid var(--acento);
    border-radius: var(--radio-chico);
}
.cupon-aplicado div { display: grid; }
.cupon-aplicado strong { color: var(--acento); font-size: 0.9rem; }
.cupon-aplicado span { color: var(--suave); font-size: 0.76rem; }
.cupon-aplicado button {
    background: none; border: 0; padding: 0;
    color: var(--suave);
    font-size: 0.78rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cupon-aplicado button:hover { color: var(--peligro); }

.envios { display: grid; gap: 0.5rem; }
.envio {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    background: var(--bg);
    border: 1px solid var(--borde-claro);
    border-radius: var(--radio-chico);
    cursor: pointer;
    transition: border-color var(--transicion);
}
.envio:hover { border-color: var(--suave); }
.envio--activo { border-color: var(--acento); background: rgba(var(--acento-rgb), 0.08); }
.envio input { accent-color: var(--acento); }
.envio__datos { display: grid; flex: 1; }
.envio__datos strong { font-size: 0.87rem; }
.envio__datos small { color: var(--tenue); font-size: 0.76rem; }
.envio__costo { font-size: 0.87rem; font-weight: 700; white-space: nowrap; }

.totales { display: grid; gap: 0.5rem; padding-top: 1.1rem; border-top: 1px solid var(--borde); }
.totales > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.totales dt { color: var(--suave); font-size: 0.9rem; }
.totales dd { font-weight: 700; font-size: 0.95rem; }
.totales--descuento dt, .totales--descuento dd { color: var(--acento); }
.totales__gratis { color: var(--exito); }
.totales__total { margin-top: 0.4rem; padding-top: 0.8rem; border-top: 1px dashed var(--borde-claro); }
.totales__total dt { color: var(--texto); font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.totales__total dd { font-size: 1.6rem; font-weight: 800; }

.resumen__garantias { display: grid; gap: 0.35rem; color: var(--tenue); font-size: 0.79rem; }
.resumen__garantias li { padding-left: 1.1rem; position: relative; }
.resumen__garantias li::before { content: '✓'; position: absolute; left: 0; color: var(--acento); }

/* --------------------------------------------------------------------------
   Panel lateral del carrito
   -------------------------------------------------------------------------- */

.panel-carrito { position: fixed; inset: 0; z-index: 130; }
.panel-carrito[hidden] { display: none; }
.panel-carrito__fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(3px); animation: aparecer 0.2s ease both; }
.panel-carrito__caja {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(25rem, 100%);
    display: flex;
    flex-direction: column;
    background: var(--bg-alt);
    border-left: 1px solid var(--borde-claro);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.55);
    animation: deslizar 0.25s ease both;
}

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes deslizar { from { transform: translateX(100%); } to { transform: none; } }

.panel-carrito__encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.2rem;
    border-bottom: 1px solid var(--borde);
}
.panel-carrito__encabezado h2 { font-size: 1.05rem; }
.panel-carrito__encabezado span { color: var(--tenue); font-weight: 400; }
.panel-carrito__cerrar { background: none; border: 0; color: var(--suave); font-size: 1.6rem; line-height: 1; }
.panel-carrito__cerrar:hover { color: var(--acento); }

.panel-carrito__envio {
    padding: 0.65rem 1.2rem;
    background: rgba(var(--acento-rgb), 0.08);
    border-bottom: 1px solid var(--borde);
    font-size: 0.82rem;
}
.panel-carrito__envio--logrado { color: var(--exito); }

.panel-carrito__lista { flex: 1; overflow-y: auto; padding: 0.6rem 1.2rem; display: grid; gap: 0.4rem; align-content: start; }

.linea-mini {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 1.6rem 0.7rem 0;
    border-bottom: 1px solid var(--borde);
}
.linea-mini__datos { flex: 1; display: grid; gap: 0.2rem; min-width: 0; }
.linea-mini__datos > a { font-size: 0.88rem; font-weight: 700; }
.linea-mini__datos > a:hover { color: var(--acento); }
.linea-mini__datos > span { color: var(--tenue); font-size: 0.78rem; }
.linea-mini__pie { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.25rem; }
.linea-mini__pie .contador button { width: 1.7rem; height: 1.7rem; font-size: 0.92rem; }
.linea-mini__pie .contador span { width: 1.8rem; font-size: 0.84rem; }
.linea-mini__quitar {
    position: absolute;
    top: 0.7rem; right: 0;
    background: none; border: 0;
    color: var(--tenue);
    font-size: 1.1rem;
    line-height: 1;
}
.linea-mini__quitar:hover { color: var(--peligro); }

.panel-carrito__pie { padding: 1.1rem 1.2rem 1.3rem; border-top: 1px solid var(--borde); display: grid; gap: 0.55rem; }
.panel-carrito__totales { display: flex; align-items: baseline; justify-content: space-between; }
.panel-carrito__totales strong { font-size: 1.15rem; }
.panel-carrito__totales--descuento { color: var(--acento); font-size: 0.9rem; }
.panel-carrito__nota { color: var(--tenue); font-size: 0.76rem; margin-bottom: 0.3rem; }
.panel-carrito__vacio { flex: 1; display: grid; gap: 0.6rem; align-content: center; justify-items: center; padding: 2rem; text-align: center; }
.panel-carrito__vacio p { color: var(--suave); font-size: 0.9rem; }
.panel-carrito__vacio .boton { margin-top: 0.6rem; }

/* --------------------------------------------------------------------------
   Modal de alta rápida
   -------------------------------------------------------------------------- */

.modal-agregar { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 1.5rem; }
.modal-agregar[hidden] { display: none; }
.modal-agregar__fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.68); backdrop-filter: blur(3px); }
.modal-agregar__caja {
    position: relative;
    width: min(30rem, 100%);
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.6rem;
    background: var(--panel);
    border: 1px solid var(--borde-claro);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    animation: entrar 0.2s ease both;
}
.modal-agregar__cerrar {
    position: absolute;
    top: 0.8rem; right: 0.9rem;
    background: none; border: 0;
    color: var(--suave);
    font-size: 1.6rem;
    line-height: 1;
}
.modal-agregar__cerrar:hover { color: var(--peligro); }
.modal-agregar__cuerpo { display: grid; gap: 1.1rem; }
.modal-agregar__encabezado { display: flex; align-items: center; gap: 1rem; }
.modal-agregar__encabezado h2 { font-size: 1.1rem; }
.modal-agregar__encabezado p { color: var(--acento); font-size: 1.15rem; font-weight: 800; }
.modal-agregar .mockup { width: 4.5rem; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Checkout, confirmación y cuenta
   -------------------------------------------------------------------------- */

.pasos-compra { display: flex; align-items: center; gap: 0.8rem; padding: 1.2rem 0 2rem; flex-wrap: wrap; counter-reset: pc; }
.pasos-compra li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--tenue);
    font-size: 0.85rem;
    font-weight: 600;
    counter-increment: pc;
}
.pasos-compra li::before {
    content: counter(pc);
    display: grid; place-items: center;
    width: 1.5rem; height: 1.5rem;
    background: var(--panel);
    border: 1px solid var(--borde-claro);
    border-radius: 50%;
    font-size: 0.75rem;
}
.pasos-compra li:not(:last-child)::after { content: ''; width: 2rem; height: 1px; background: var(--borde-claro); }
/* Los estados llevan el `li` en el selector para superar a `.pasos-compra li::before`. */
.pasos-compra li.pasos-compra--activo { color: var(--texto); }
.pasos-compra li.pasos-compra--activo::before { background: var(--acento); border-color: var(--acento); color: #000; }
.pasos-compra li.pasos-compra--hecho { color: var(--suave); }
.pasos-compra li.pasos-compra--hecho::before { content: '✓'; background: transparent; border-color: var(--acento); color: var(--acento); }

.pago { display: grid; grid-template-columns: 1fr 21rem; gap: 2rem; align-items: start; padding-bottom: 4rem; }
.pago__form { display: grid; gap: 1.6rem; }
.pago__aviso {
    padding: 0.85rem 1rem;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-left: 3px solid var(--acento);
    border-radius: var(--radio-chico);
    font-size: 0.88rem;
}
.pago__aviso a { color: var(--acento); font-weight: 700; }

.campos {
    display: grid;
    gap: 0.9rem;
    padding: 1.4rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--panel);
}
.campos legend {
    padding: 0 0.5rem;
    margin-left: -0.5rem;
    color: var(--acento);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.campos__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }

.campo { display: grid; gap: 0.35rem; }
.campo label { color: var(--suave); font-size: 0.82rem; font-weight: 600; }
.campo__opcional { color: var(--tenue); font-weight: 400; }
.campo__ayuda { color: var(--tenue); font-size: 0.76rem; }
.campo input, .campo textarea, .campo select {
    width: 100%;
    padding: 0.72rem 0.85rem;
    background: var(--bg);
    border: 1px solid var(--borde-claro);
    border-radius: var(--radio-chico);
    color: var(--texto);
    font-family: inherit;
    font-size: 0.92rem;
    transition: border-color var(--transicion);
}
.campo input:focus, .campo textarea:focus { border-color: var(--acento); outline: none; }
.campo textarea { resize: vertical; }

.pagos { display: grid; gap: 0.5rem; }
.pago-opcion {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.72rem 0.85rem;
    background: var(--bg);
    border: 1px solid var(--borde-claro);
    border-radius: var(--radio-chico);
    cursor: pointer;
    font-size: 0.9rem;
}
.pago-opcion:hover { border-color: var(--suave); }
.pago-opcion input { accent-color: var(--acento); }
.pago__nota { color: var(--tenue); font-size: 0.8rem; }

.pago__resumen {
    position: sticky;
    top: 6rem;
    display: grid;
    gap: 1.1rem;
    padding: 1.4rem;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}
.pago__resumen h2 { font-size: 1.05rem; }
.pago__lineas { display: grid; gap: 0.7rem; }
.pago__lineas li { display: flex; align-items: center; gap: 0.7rem; }
.pago__lineas div { flex: 1; display: grid; min-width: 0; }
.pago__lineas strong { font-size: 0.86rem; }
.pago__lineas span { color: var(--tenue); font-size: 0.77rem; }
.pago__importe { font-weight: 700; font-size: 0.88rem; white-space: nowrap; }

.confirmacion { padding-bottom: 4rem; }
.confirmacion__cabecera {
    display: grid;
    gap: 0.7rem;
    justify-items: center;
    padding: 2.5rem 1.5rem;
    background: linear-gradient(150deg, rgba(var(--acento-rgb), 0.12), transparent), var(--panel);
    border: 1px solid var(--borde-claro);
    border-radius: var(--radio);
    text-align: center;
}
.confirmacion__sello {
    display: grid; place-items: center;
    width: 3.4rem; height: 3.4rem;
    background: var(--acento); color: #000;
    border-radius: 50%;
    font-size: 1.6rem; font-weight: 800;
}
.confirmacion__cabecera p { color: var(--suave); }
.confirmacion__cuerpo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem; }
.confirmacion__bloque {
    display: grid;
    gap: 1rem;
    align-content: start;
    padding: 1.5rem;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}
.confirmacion__bloque h2 { font-size: 0.95rem; }
.confirmacion__bloque p { color: var(--suave); font-size: 0.9rem; }
.confirmacion__direccion { line-height: 1.7; }
.confirmacion__acciones { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.4rem; }

.pedidos { display: grid; gap: 1.2rem; padding-bottom: 4rem; }
.pedido { display: grid; gap: 1rem; padding: 1.3rem; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); }
.pedido__encabezado { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-bottom: 0.9rem; border-bottom: 1px solid var(--borde); }
.pedido__encabezado > div { display: grid; flex: 1; }
.pedido__encabezado span { color: var(--tenue); font-size: 0.8rem; }
.pedido__total { font-size: 1.2rem; }
.pedido__items { display: grid; gap: 0.6rem; }
.pedido__items li { display: flex; align-items: center; gap: 0.7rem; }
.pedido__items div { flex: 1; display: grid; }
.pedido__items strong { font-size: 0.88rem; }
.pedido__items span { color: var(--tenue); font-size: 0.78rem; }

.estado {
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--panel-alt);
    border: 1px solid var(--borde-claro);
    color: var(--suave);
}
.estado--pendiente { border-color: #ffce4f; color: #ffce4f; }
.estado--enviado { border-color: var(--acento); color: var(--acento); }
.estado--entregado { border-color: var(--exito); color: var(--exito); }

/* --------------------------------------------------------------------------
   Páginas de contenido
   -------------------------------------------------------------------------- */

.texto-columnas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; padding-bottom: 1rem; }
.texto-columnas h2 { margin-bottom: 0.8rem; }
.texto-columnas h3 { margin-bottom: 0.7rem; font-size: 1.05rem; }
.texto-columnas p { color: var(--suave); margin-bottom: 0.9rem; }

.numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin: 2.5rem 0; }
.numeros div {
    display: grid; gap: 0.2rem;
    padding: 1.4rem;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    text-align: center;
}
.numeros strong { color: var(--acento); font-size: 1.7rem; font-weight: 800; }
.numeros span { color: var(--tenue); font-size: 0.82rem; }

.galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; padding-bottom: 2rem; }
.galeria__pieza {
    display: grid;
    gap: 0.6rem;
    padding: 1.3rem 1rem 1.4rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    transition: border-color var(--transicion), transform var(--transicion);
}
.galeria__pieza:hover { border-color: var(--acento); transform: translateY(-4px); }
.galeria__datos { display: grid; gap: 0.15rem; text-align: center; }
.galeria__datos strong { font-size: 1.05rem; font-style: italic; letter-spacing: 0.04em; }
.galeria__datos span { color: var(--tenue); font-size: 0.82rem; }
.galeria__precio { color: var(--acento) !important; font-weight: 700; }

.acceso { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; padding: 3rem 0 4rem; }
.acceso__caja {
    display: grid;
    gap: 0.9rem;
    padding: 2rem;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}
.acceso__intro { color: var(--suave); font-size: 0.92rem; margin-bottom: 0.4rem; }
.acceso__caja form { display: grid; gap: 0.9rem; }
.acceso__pie { color: var(--suave); font-size: 0.88rem; text-align: center; }
.acceso__pie a { color: var(--acento); font-weight: 700; }
.acceso__lateral { display: grid; gap: 1.5rem; justify-items: start; }
.acceso__lateral h2 { font-size: 1.15rem; }

.contacto { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 2.5rem; padding-bottom: 4rem; align-items: start; }
.contacto__form { display: grid; gap: 1rem; padding: 1.6rem; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); }
.contacto__datos { display: grid; gap: 0.8rem; }
.contacto__datos h2 { font-size: 1.05rem; margin-top: 0.5rem; }
.contacto__datos > ul { display: grid; gap: 0.7rem; }
.contacto__datos > ul li { display: grid; gap: 0.1rem; }
.contacto__datos strong { color: var(--tenue); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.contacto__datos a:hover { color: var(--acento); }

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

.pie { margin-top: auto; background: var(--bg-alt); border-top: 1px solid var(--borde-neon); }
.pie__interior {
    display: grid;
    grid-template-columns: 1.6fr repeat(4, 1fr);
    gap: 2rem;
    padding: 3rem 1.5rem 2.5rem;
}
.pie__marca p { margin-top: 0.9rem; color: var(--tenue); font-size: 0.86rem; max-width: 34ch; }
.pie__pagos { display: flex; gap: 0.4rem; margin-top: 1.1rem; flex-wrap: wrap; }
.pie__pagos span {
    padding: 0.22rem 0.5rem;
    border: 1px solid var(--borde-claro);
    border-radius: 5px;
    color: var(--tenue);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.pie__columna h3 { margin-bottom: 0.8rem; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acento); }
.pie__columna ul { display: grid; gap: 0.45rem; }
.pie__columna li, .pie__columna a { color: var(--tenue); font-size: 0.86rem; }
.pie__columna a:hover { color: var(--texto); }

.pie__legal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.5rem;
    border-top: 1px solid var(--borde);
    color: var(--tenue);
    font-size: 0.78rem;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Adaptable
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
    .rejilla-productos--cuatro { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .galeria { grid-template-columns: repeat(3, 1fr); }
    .pie__interior { grid-template-columns: 1.4fr repeat(2, 1fr); }
    .buscador--escritorio input { width: 8.5rem; }
    .menu__enlace { padding: 0.55rem 0.6rem; font-size: 0.83rem; }
}

@media (max-width: 1024px) {
    .catalogo { grid-template-columns: 1fr; }
    .catalogo__filtros {
        position: fixed;
        inset: 0;
        z-index: 135;
        overflow-y: auto;
        padding: 1.2rem;
        background: var(--bg);
        display: none;
    }
    .catalogo__filtros.abierto { display: block; }
    .catalogo__cerrar-filtros {
        display: grid;
        place-items: center;
        width: 2.4rem; height: 2.4rem;
        margin-left: auto;
        margin-bottom: 0.8rem;
        background: var(--panel);
        border: 1px solid var(--borde-claro);
        border-radius: var(--radio-chico);
        color: var(--texto);
        font-size: 1.4rem;
    }
    .boton--filtros { display: inline-flex; }

    .ficha { grid-template-columns: 1fr; gap: 2rem; }
    .ficha__visual { position: static; }
    .carrito__columnas { grid-template-columns: 1fr; }
    .resumen { position: static; }
    .pago { grid-template-columns: 1fr; }
    .pago__resumen { position: static; order: -1; }
    .opiniones__cuerpo { grid-template-columns: 1fr; }
    .opiniones__lista { grid-template-columns: repeat(2, 1fr); }
    .beneficios__interior { grid-template-columns: repeat(2, 1fr); }
    .categorias { grid-template-columns: repeat(2, 1fr); }
    .numeros { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    /*
       El backdrop-filter del encabezado lo convierte en bloque contenedor de sus
       hijos fijos: con él activo el cajón se dibuja dentro de la altura del header.
       Se desactiva mientras el menú está abierto y se sube por encima de los avisos.
    */
    body.menu-abierto .encabezado {
        z-index: 125;
        backdrop-filter: none;
        background: var(--bg);
    }

    .menu-fondo {
        position: fixed;
        inset: 0;
        z-index: 99;
        display: block;
        background: rgba(0, 0, 0, 0.62);
        backdrop-filter: blur(3px);
        animation: aparecer 0.2s ease both;
    }
    .menu {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        z-index: 100;
        width: min(20rem, 86vw);
        display: none;
        flex-direction: column;
        gap: 0.9rem;
        padding: 1rem 1.2rem calc(2rem + env(safe-area-inset-bottom));
        background: var(--bg-alt);
        border-left: 1px solid var(--borde-claro);
        box-shadow: -18px 0 50px rgba(0, 0, 0, 0.55);
        overflow-y: auto;
        overscroll-behavior: contain;
        animation: deslizar 0.25s ease both;
    }
    .menu.abierto { display: flex; }
    .menu__cerrar {
        display: grid;
        place-items: center;
        flex-shrink: 0;
        width: 2.4rem; height: 2.4rem;
        align-self: flex-end;
        background: var(--panel);
        border: 1px solid var(--borde-claro);
        border-radius: var(--radio-chico);
        color: var(--texto);
        font-size: 1.5rem;
        line-height: 1;
    }
    .menu__cerrar:hover { color: var(--acento); border-color: var(--acento); }
    .menu__lista { flex-direction: column; align-items: stretch; gap: 0.2rem; }
    .menu__enlace { padding: 0.8rem 0.7rem; font-size: 0.95rem; }
    .buscador--escritorio { display: none; }
    .buscador--movil { display: flex; }
    .buscador--movil input { flex: 1; width: auto; }
    .buscador--movil input:focus { width: auto; }
    .boton-menu { display: flex; }
    .boton-icono__texto { display: none; }
    .boton--fantasma.boton--compacto span { display: none; }

    .portada__interior { grid-template-columns: 1fr; padding-top: 2.5rem; }
    .portada__visual { order: -1; }
    .portada__escena { order: -1; min-height: 28rem; padding-bottom: 3.4rem; }
    .portada__stack { width: min(18rem, 68%); }
    .portada__poster[data-pos="prev"] { transform: translateX(-28%) rotateY(18deg) scale(0.78); }
    .portada__poster[data-pos="next"] { transform: translateX(28%) rotateY(-18deg) scale(0.78); }
    .mockup--portada { max-width: 20rem; }
    .portada__ficha,
    .portada--galeria .portada__ficha { position: static; margin: 1rem auto 0; justify-items: center; text-align: center; }

    .personaliza__interior { grid-template-columns: 1fr; }
    .personaliza__visual { order: -1; }
    .resenas { grid-template-columns: 1fr; }
    .texto-columnas { grid-template-columns: 1fr; gap: 1.5rem; }
    .acceso { grid-template-columns: 1fr; }
    .acceso__lateral { display: none; }
    .contacto { grid-template-columns: 1fr; }
    .confirmacion__cuerpo { grid-template-columns: 1fr; }
    .ficha__detalles { grid-template-columns: repeat(2, 1fr); }
    .pie__interior { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
    .contenedor { padding: 0 1.1rem; }

    .barra-aviso { font-size: 0.72rem; }
    .barra-aviso__interior { padding: 0.4rem 1.1rem; }
    .encabezado__interior { gap: 0.6rem; min-height: 4rem; }
    .encabezado__acciones { gap: 0.4rem; }
    .logo { min-width: 0; }
    .logo__marca { width: 2.1rem; height: 2.1rem; font-size: 1rem; }
    .logo__texto { min-width: 0; }
    .logo__texto strong { font-size: 1.08rem; }
    .logo__texto small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .boton-icono, .boton-carrito { padding: 0.5rem 0.6rem; }
    .boton--fantasma.boton--compacto { padding: 0.5rem 0.6rem; }
    .cuenta__menu { min-width: 11rem; max-width: calc(100vw - 2.2rem); }
    .rejilla-productos, .rejilla-productos--cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
    .tarjeta__cuerpo { padding: 0.9rem 0.9rem 1.1rem; gap: 0.45rem; }
    .tarjeta__nombre { font-size: 0.94rem; }
    .tarjeta__precios strong { font-size: 1.15rem; }
    .tarjeta__opciones { gap: 0.5rem; }
    .tallas-mini { display: none; }
    .boton { padding: 0.7rem 1rem; font-size: 0.78rem; }

    .galeria { grid-template-columns: repeat(2, 1fr); }
    .beneficios__interior, .categorias, .numeros { grid-template-columns: 1fr; }
    .opiniones__lista { grid-template-columns: 1fr; }
    .campos__fila { grid-template-columns: 1fr; }
    .pie__interior { grid-template-columns: 1fr; gap: 1.5rem; }
    .barra-aviso__interior span:nth-child(n+3) { display: none; }

    .linea { grid-template-columns: auto 1fr; }
    .linea__importe { grid-column: 2; text-align: right; }
    .linea__controles { justify-content: space-between; }

    .portada__confianza { gap: 1.2rem; }
    .portada__confianza strong { font-size: 1.05rem; }
    .avisos { right: 0.75rem; left: 0.75rem; bottom: 0.75rem; width: auto; }
}

/* --------------------------------------------------------------------------
   Cotización de playeras
   -------------------------------------------------------------------------- */

.cotizacion { padding-bottom: 4.5rem; }

.cotizacion__tabla-wrap {
    overflow-x: auto;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}

.cotizacion__tabla {
    width: 100%;
    min-width: 46rem;
    border-collapse: collapse;
}

.cotizacion__tabla th,
.cotizacion__tabla td {
    padding: 0.95rem 1rem;
    border-bottom: 1px solid var(--borde);
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
}

.cotizacion__tabla thead th {
    background: var(--panel-alt);
    color: var(--tenue);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cotizacion__tabla thead th:first-child { text-align: left; }

.cotizacion__tabla tbody th {
    text-align: left;
    font-size: 0.95rem;
    font-weight: 700;
    white-space: normal;
}

.cotizacion__tabla tbody tr:last-child th,
.cotizacion__tabla tbody tr:last-child td { border-bottom: 0; }

.cotizacion__modelo {
    display: block;
    margin-top: 0.2rem;
    color: var(--tenue);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.cotizacion__unitario,
.cotizacion__importe { color: var(--acento); font-weight: 800; }

.cotizacion__cantidad {
    width: 5.4rem;
    padding: 0.55rem 0.65rem;
    background: var(--bg);
    border: 1px solid var(--borde-claro);
    border-radius: var(--radio-chico);
    color: var(--texto);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
}

.cotizacion__cantidad::placeholder {
    color: var(--tenue);
    font-weight: 700;
    opacity: 1;
}

.cotizacion__cantidad:focus { border-color: var(--acento); outline: none; }

.cotizacion__resumen {
    max-width: 28rem;
    margin-top: 1.4rem;
    margin-left: auto;
    padding: 1.3rem 1.4rem 1.15rem;
    background: var(--panel);
    border: 1px solid var(--borde-neon);
    border-radius: var(--radio);
    box-shadow: var(--resplandor-acento);
}

.cotizacion__resumen h2 { margin-bottom: 0.9rem; font-size: 1.15rem; }

.cotizacion__resumen dl { display: grid; gap: 0.65rem; }
.cotizacion__resumen div { display: flex; justify-content: space-between; gap: 1rem; }
.cotizacion__resumen dt { color: var(--suave); }
.cotizacion__resumen dd { font-weight: 700; }

.cotizacion__gran-total {
    margin-top: 0.35rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--borde);
}

.cotizacion__gran-total dt,
.cotizacion__gran-total dd {
    color: var(--texto);
    font-size: 1.15rem;
    font-weight: 800;
}

.cotizacion__gran-total dd { color: var(--acento); font-size: 1.45rem; }

.cotizacion__resumen p {
    margin-top: 0.9rem;
    color: var(--tenue);
    font-size: 0.78rem;
}

@media (max-width: 680px) {
    .cotizacion__resumen { max-width: none; }
}