/* =========================================================

   POKEODDS

   Atomic · Minimal · Ultra Responsive

========================================================= */





/* =========================================================

   VARIABLES

========================================================= */



:root {



    --red: #d71920;

    --red-dark: #b9151b;

    --red-soft: #fff3f3;



    --black: #111111;

    --gray-900: #222222;

    --gray-700: #555555;

    --gray-500: #777777;

    --gray-300: #dddddd;

    --gray-200: #eeeeee;

    --gray-100: #f7f7f7;



    --white: #ffffff;



    --radius-sm: 8px;

    --radius-md: 12px;

    --radius-lg: 18px;



    --shadow-sm:

        0 4px 15px rgba(0, 0, 0, 0.06);



    --shadow-md:

        0 10px 30px rgba(0, 0, 0, 0.08);



    --max-width: 1500px;



}





/* =========================================================

   RESET

========================================================= */



* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}





html {

    scroll-behavior: smooth;

}





body {



    font-family:

        Inter,

        Arial,

        Helvetica,

        sans-serif;



    color: var(--black);



    background:

        linear-gradient(

            rgba(255, 255, 255, 0.93),

            rgba(255, 255, 255, 0.96)

        ),

        url("img/landscape.jpg");



    background-size: cover;

    background-position: center;

    background-attachment: fixed;



    min-height: 100vh;



    -webkit-font-smoothing: antialiased;

}





button,

input {

    font: inherit;

}





button {

    border: 0;

}





a {

    color: inherit;

    text-decoration: none;

}





/* =========================================================

   HEADER

========================================================= */



.site-header {



    position: sticky;

    top: 0;



    z-index: 100;



    background:

        rgba(255, 255, 255, 0.96);



    backdrop-filter:

        blur(16px);



    border-bottom:

        1px solid var(--gray-200);



}





.header-inner {



    width: min(

        var(--max-width),

        calc(100% - 48px)

    );



    min-height: 86px;



    margin: auto;



    display: grid;



    grid-template-columns:

        1fr auto 1fr;



    align-items: center;



    gap: 30px;



}





/* =========================================================

   BRAND

========================================================= */



.brand {



    display: flex;



    align-items: center;



    gap: 13px;



    width: fit-content;

}





.brand img {



    width: 58px;

    height: 58px;



    object-fit: contain;



}





.brand-text {



    display: flex;



    flex-direction: column;



    gap: 2px;



}





.brand-text strong {



    font-size: 24px;



    font-weight: 900;



    letter-spacing: -0.8px;



    color: var(--red);



}





.brand-text span {



    font-size: 11px;



    color: var(--gray-500);



    font-weight: 600;



}





/* =========================================================

   SHIPPING

========================================================= */



.shipping-info {



    display: flex;



    align-items: center;



    justify-content: center;



    gap: 22px;



}





.shipping-item {



    display: flex;



    align-items: center;



    gap: 9px;



}





.shipping-icon {



    font-size: 20px;



}





.shipping-item div {



    display: flex;



    flex-direction: column;



    gap: 2px;



}





.shipping-item strong {



    font-size: 12px;



    font-weight: 800;



}





.shipping-item small {



    font-size: 10px;



    color: var(--gray-500);



}





.shipping-divider {



    width: 1px;



    height: 28px;



    background: var(--gray-300);



}





/* =========================================================

   CART BUTTON

========================================================= */



.cart-button {



    justify-self: end;



    display: flex;



    align-items: center;



    gap: 9px;



    padding: 11px 15px;



    background: var(--black);



    color: var(--white);



    border-radius: var(--radius-md);



    cursor: pointer;



    font-size: 13px;



    font-weight: 800;



    transition:

        transform 0.2s ease,

        background 0.2s ease;



}





.cart-button:hover {



    background: var(--red);



    transform: translateY(-1px);



}





.cart-icon {



    font-size: 17px;



}





.cart-count {



    min-width: 22px;



    height: 22px;



    display: inline-flex;



    justify-content: center;



    align-items: center;



    padding: 0 5px;



    background: var(--white);



    color: var(--black);



    border-radius: 50%;



    font-size: 11px;



    font-weight: 900;



}





/* =========================================================

   MAIN

========================================================= */



main {



    width: min(

        var(--max-width),

        calc(100% - 48px)

    );



    margin: auto;



}





/* =========================================================

   HERO

========================================================= */



.hero {



    padding:

        65px

        0

        35px;



}





.hero-content {



    text-align: center;



}





.eyebrow {



    display: inline-block;



    margin-bottom: 10px;



    color: var(--red);



    font-size: 11px;



    font-weight: 900;



    letter-spacing: 4px;



}





.hero h1 {



    font-size:

        clamp(32px, 4vw, 52px);



    line-height: 1.05;



    font-weight: 900;



    letter-spacing: -2px;



}





.hero h1 span {



    display: block;



    color: var(--red);



}





.hero p {



    margin-top: 15px;



    color: var(--gray-500);



    font-size: 16px;



}





/* =========================================================

   BENEFITS

========================================================= */



.benefits {



    display: grid;



    grid-template-columns:

        repeat(4, 1fr);



    gap: 10px;



    max-width: 1050px;



    margin:

        35px

        auto

        0;



}





.benefit {



    display: flex;



    align-items: center;



    gap: 11px;



    padding: 14px;



    background: var(--white);



    border:

        1px solid var(--gray-200);



    border-radius: var(--radius-md);



    transition:

        border-color 0.2s ease,

        transform 0.2s ease;



}





.benefit:hover {



    border-color: #cfcfcf;



    transform: translateY(-2px);



}





.benefit > span {



    width: 35px;



    height: 35px;



    display: flex;



    align-items: center;



    justify-content: center;



    background: var(--gray-100);



    border-radius: 9px;



    font-size: 17px;



}





.benefit div {



    display: flex;



    flex-direction: column;



    gap: 3px;



}





.benefit strong {



    font-size: 12px;



    font-weight: 800;



}





.benefit small {



    font-size: 10px;



    color: var(--gray-500);



}





/* =========================================================

   CONTROLES DEL CATALOGO

========================================================= */



.catalog-controls {



    margin:

        15px

        auto

        35px;



}





.search-box {



    width: 100%;



    height: 56px;



    display: flex;



    align-items: center;



    gap: 8px;



    background: var(--white);



    border:

        1px solid var(--gray-300);



    border-radius: var(--radius-md);



    padding:

        0

        18px;



    transition:

        border-color 0.2s ease,

        box-shadow 0.2s ease;



}





.search-box:focus-within {



    border-color: var(--red);



    box-shadow:

        0 0 0 3px

        rgba(215, 25, 32, 0.08);



}





.search-icon {



    color: var(--gray-500);



    font-size: 27px;



    line-height: 1;



}





#buscador {



    width: 100%;



    height: 100%;



    border: 0;



    outline: 0;



    background: transparent;



    color: var(--black);



    font-size: 14px;



}





#buscador::placeholder {



    color: #999;



}





/* =========================================================

   CATEGORIES

========================================================= */



.categorias {



    display: flex;



    gap: 7px;



    margin-top: 14px;



    overflow-x: auto;



    scrollbar-width: none;



}





.categorias::-webkit-scrollbar {

    display: none;

}





.categorias button {



    flex: 0 0 auto;



    padding:

        9px

        16px;



    border:

        1px solid var(--gray-300);



    border-radius: 999px;



    background: var(--white);



    color: var(--gray-700);



    cursor: pointer;



    font-size: 12px;



    font-weight: 800;



    transition:

        background 0.2s ease,

        border-color 0.2s ease,

        color 0.2s ease;



}





.categorias button:hover {



    border-color: var(--red);



    color: var(--red);



}





.categorias button.activo {



    background: var(--black);



    border-color: var(--black);



    color: var(--white);



}





/* =========================================================

   CATALOG HEADER

========================================================= */



.catalog-section {



    padding-bottom: 70px;



}





.catalog-heading {



    display: flex;



    align-items: end;



    justify-content: space-between;



    margin-bottom: 18px;



}





.section-label {



    color: var(--red);



    font-size: 10px;



    font-weight: 900;



    letter-spacing: 2px;



}





.catalog-heading h2 {



    margin-top: 3px;



    font-size: 27px;



    font-weight: 900;



    letter-spacing: -0.7px;



}





.catalog-note {



    color: var(--gray-500);



    font-size: 11px;



}





/* =========================================================

   PRODUCT GRID

========================================================= */



.productos {



    display: grid;



    grid-template-columns:

        repeat(4, minmax(0, 1fr));



    gap: 18px;



}





/* =========================================================

   PRODUCT CARD

========================================================= */



.producto {



    position: relative;



    overflow: hidden;



    background: var(--white);



    border:

        1px solid var(--gray-200);



    border-radius: var(--radius-lg);



    box-shadow: var(--shadow-sm);



    transition:

        transform 0.22s ease,

        box-shadow 0.22s ease,

        border-color 0.22s ease;



}





.producto:hover {



    transform: translateY(-4px);



    border-color: #d0d0d0;



    box-shadow: var(--shadow-md);



}





/* =========================================================

   PRODUCT IMAGE

========================================================= */



.producto-imagen {



    position: relative;



    height: 245px;



    display: flex;



    align-items: center;



    justify-content: center;



    padding: 15px;



    background:

        linear-gradient(

            145deg,

            #fafafa,

            #f2f2f2

        );



    overflow: hidden;



}





.producto-imagen img {



    width: 100%;



    height: 100%;



    object-fit: contain;



    display: block;



    transition:

        transform 0.3s ease;



}





.producto:hover

.producto-imagen img {



    transform: scale(1.035);



}





/* =========================================================

   STATUS BADGES

========================================================= */



.sello-agotado,

.sello-preventa {



    position: absolute;



    top: 12px;



    right: 12px;



    z-index: 3;



    padding:

        6px

        9px;



    border-radius: 7px;



    font-size: 9px;



    font-weight: 900;



    letter-spacing: 0.8px;



}





.sello-agotado {



    background: var(--red);



    color: var(--white);



}





.sello-preventa {



    background: #fff7e5;



    color: #8a6500;



    border:

        1px solid #ead49a;



}





/* =========================================================

   PRODUCT INFO

========================================================= */



.producto-info {



    padding: 17px;



}





/* =========================================================

   TAGS

========================================================= */



.producto-etiquetas {



    display: flex;



    justify-content: space-between;



    align-items: center;



    gap: 6px;



    margin-bottom: 10px;



}





.categoria {



    display: inline-flex;



    align-items: center;



    max-width: 50%;



    overflow: hidden;



    text-overflow: ellipsis;



    white-space: nowrap;



    padding:

        5px

        8px;



    background: var(--gray-100);



    color: var(--gray-700);



    border-radius: 6px;



    font-size: 9px;



    font-weight: 800;



}





.presentacion {



    display: inline-flex;



    align-items: center;



    gap: 4px;



    max-width: 55%;



    overflow: hidden;



    text-overflow: ellipsis;



    white-space: nowrap;



    padding:

        5px

        8px;



    background: var(--red-soft);



    color: var(--red);



    border:

        1px solid #f3d1d1;



    border-radius: 6px;



    font-size: 9px;



    font-weight: 900;



}





.icono-presentacion {



    font-size: 12px;



}





/* =========================================================

   PRODUCT TITLE

========================================================= */



.producto h3 {



    min-height: 46px;



    margin-bottom: 10px;



    color: var(--black);



    font-size: 17px;



    line-height: 1.25;



    font-weight: 900;



    letter-spacing: -0.3px;



}





/* =========================================================

   PREVENTA ARRIVAL

========================================================= */



.llegada-estimada {



    margin-bottom: 10px;



    padding:

        8px

        9px;



    background: #fffaf0;



    border:

        1px solid #f0dfb4;



    border-radius: 8px;



    color: #755d1a;



    font-size: 9px;



    line-height: 1.4;



}





.llegada-estimada strong {



    font-weight: 900;



}





/* =========================================================

   PRESENTATION SELECTOR

========================================================= */



.selector-presentacion {



    display: flex;



    gap: 6px;



    flex-wrap: wrap;



    margin:

        8px

        0

        12px;



}





.btn-presentacion {



    flex: 1;



    min-width: 80px;



    padding:

        8px

        7px;



    background: var(--white);



    color: var(--gray-700);



    border:

        1px solid var(--gray-300);



    border-radius: 7px;



    cursor: pointer;



    font-size: 9px;



    font-weight: 800;



    transition:

        background 0.2s ease,

        border-color 0.2s ease,

        color 0.2s ease;



}





.btn-presentacion:hover,

.btn-presentacion.seleccionado {



    background: var(--red-soft);



    color: var(--red);



    border-color: #edbebe;



}





.btn-presentacion:disabled {



    cursor: not-allowed;



    opacity: 0.45;



}





/* =========================================================

   DETAILS

========================================================= */



.detalles-producto {



    display: grid;



    grid-template-columns:

        repeat(3, minmax(0, 1fr));



    gap: 5px;



    margin:

        10px

        0;



}





.detalles-producto > div {



    min-width: 0;



    padding:

        8px

        4px;



    background: var(--gray-100);



    border-radius: 7px;



    text-align: center;



}





.detalles-producto span {



    display: block;



    margin-bottom: 2px;



    font-size: 14px;



}





.detalles-producto small {



    display: block;



    color: var(--gray-500);



    font-size: 8px;



}





.detalles-producto strong {



    display: block;



    margin-top: 2px;



    font-size: 9px;



    line-height: 1.2;



}





/* =========================================================

   CONTENT

========================================================= */



.contenido-producto {



    margin:

        8px

        0;



    padding:

        9px;



    background: #fafafa;



    border-left:

        2px solid var(--gray-300);



    border-radius: 6px;



    font-size: 9px;



    line-height: 1.45;



}





.contenido-producto strong {



    display: block;



    margin-bottom: 2px;



    font-size: 9px;



}





.contenido-producto span {



    color: var(--gray-500);



}





/* =========================================================

   PRICE

========================================================= */



.precio {



    margin:

        14px

        0

        10px;



    color: var(--black);



    font-size: 23px;



    line-height: 1;



    font-weight: 900;



    letter-spacing: -0.5px;



}





/* =========================================================

   QUANTITY

========================================================= */



.cantidad-producto {



    display: flex;



    justify-content: center;



    align-items: center;



    gap: 13px;



    margin:

        10px

        0;



}





.cantidad-producto button {



    width: 32px;



    height: 32px;



    display: flex;



    align-items: center;



    justify-content: center;



    background: var(--white);



    border:

        1px solid var(--gray-300);



    border-radius: 8px;



    cursor: pointer;



    color: var(--black);



    font-size: 18px;



    transition:

        background 0.2s ease,

        border-color 0.2s ease;



}





.cantidad-producto button:hover {



    background: var(--gray-100);



    border-color: #aaa;



}





.cantidad-producto button:disabled {



    opacity: 0.4;



    cursor: not-allowed;



}





.cantidad-producto span {



    min-width: 22px;



    text-align: center;



    font-size: 15px;



    font-weight: 900;



}





/* =========================================================

   MINIMUM

========================================================= */



.minimo-producto {



    min-height: 15px;



    text-align: center;



    color: var(--red);



    font-size: 9px;



    font-weight: 800;



}





/* =========================================================

   ADD BUTTON

========================================================= */



.agregar {



    width: 100%;



    margin-top: 6px;



    padding:

        12px;



    background: var(--black);



    color: var(--white);



    border-radius: 9px;



    cursor: pointer;



    font-size: 11px;



    font-weight: 900;



    transition:

        background 0.2s ease,

        transform 0.2s ease;



}





.agregar:hover {



    background: var(--red);



    transform: translateY(-1px);



}





.agregar:disabled {



    background: #aaa;



    cursor: not-allowed;



    transform: none;



}





/* =========================================================

   OUT OF STOCK

========================================================= */



.producto.agotado {



    opacity: 0.72;



}





.producto.agotado:hover {



    transform: none;



}





.producto.agotado

.producto-imagen::after {



    content: "AGOTADO";



    position: absolute;



    inset: 0;



    display: flex;



    align-items: center;



    justify-content: center;



    background:

        rgba(0, 0, 0, 0.45);



    color: var(--white);



    font-size: 20px;



    font-weight: 900;



    letter-spacing: 2px;



}





/* =========================================================

   CART OVERLAY

========================================================= */



.fondo-carrito {



    position: fixed;



    inset: 0;



    z-index: 998;



    background:

        rgba(0, 0, 0, 0.45);



    opacity: 0;



    visibility: hidden;



    transition:

        opacity 0.25s ease,

        visibility 0.25s ease;



}





.fondo-carrito.activo {



    opacity: 1;



    visibility: visible;



}





/* =========================================================

   CART DRAWER

========================================================= */



.carrito-lateral {



    position: fixed;



    top: 0;

    right: 0;



    z-index: 999;



    width: min(

        440px,

        100%

    );



    height: 100dvh;



    display: flex;



    flex-direction: column;



    background: var(--white);



    box-shadow:

        -15px

        0

        40px

        rgba(0, 0, 0, 0.15);



    transform:

        translateX(100%);



    transition:

        transform 0.3s ease;



}





.carrito-lateral.abierto {



    transform:

        translateX(0);



}





/* =========================================================

   CART HEADER

========================================================= */



.carrito-header {



    display: flex;



    align-items: center;



    justify-content: space-between;



    padding:

        23px;



    border-bottom:

        1px solid var(--gray-200);



}





.cart-header-label {



    color: var(--red);



    font-size: 9px;



    font-weight: 900;



    letter-spacing: 2px;



}





.carrito-header h2 {



    margin:

        3px

        0;



    font-size: 24px;



    font-weight: 900;



}





#contadorLateral {



    color: var(--gray-500);



    font-size: 11px;



}





.cerrar-carrito {



    width: 38px;



    height: 38px;



    display: flex;



    align-items: center;



    justify-content: center;



    background: var(--gray-100);



    border-radius: 50%;



    cursor: pointer;



    font-size: 25px;



    color: var(--black);



    transition:

        background 0.2s ease;



}





.cerrar-carrito:hover {



    background: var(--gray-200);



}





/* =========================================================

   CART ITEMS

========================================================= */



.items-carrito {



    flex: 1;



    overflow-y: auto;



    padding:

        15px;



}





.item {



    display: flex;



    justify-content: space-between;



    align-items: center;



    gap: 15px;



    padding:

        15px

        0;



    border-bottom:

        1px solid var(--gray-200);



}





.item-info {



    min-width: 0;



    display: flex;



    flex-direction: column;



    gap: 4px;



}





.item-info strong {



    font-size: 12px;



    line-height: 1.3;



}





.item-info small {



    color: var(--gray-500);



    font-size: 10px;



}





.minimo-carrito {



    color: var(--red) !important;



}





.cantidad {



    flex-shrink: 0;



    display: flex;



    align-items: center;



    gap: 8px;



}





.cantidad button {



    width: 28px;



    height: 28px;



    background: var(--gray-100);



    border-radius: 7px;



    cursor: pointer;



    font-size: 16px;



}





.cantidad strong {



    min-width: 18px;



    text-align: center;



    font-size: 12px;



}





/* =========================================================

   EMPTY CART

========================================================= */



.empty-cart {



    min-height: 300px;



    display: flex;



    flex-direction: column;



    align-items: center;



    justify-content: center;



    text-align: center;



    color: var(--gray-500);



}





.empty-cart-icon {



    width: 65px;



    height: 65px;



    display: flex;



    align-items: center;



    justify-content: center;



    margin-bottom: 15px;



    background: var(--gray-100);



    border-radius: 50%;



    font-size: 26px;



}





.empty-cart strong {



    color: var(--black);



    font-size: 14px;



}





.empty-cart p {



    max-width: 220px;



    margin-top: 6px;



    font-size: 11px;



    line-height: 1.5;



}





/* =========================================================

   CART FOOTER

========================================================= */



.carrito-footer {



    padding:

        18px;



    border-top:

        1px solid var(--gray-200);



    background: var(--white);



}





.total {



    display: flex;



    justify-content: space-between;



    align-items: center;



    margin-bottom: 13px;



}





.total span {



    color: var(--gray-500);



    font-size: 12px;



}





.total strong {



    font-size: 23px;



    font-weight: 900;



}





/* =========================================================

   WHATSAPP

========================================================= */



.whatsapp {



    width: 100%;



    padding:

        13px;



    background: #1f9d55;



    color: white;



    border-radius: 9px;



    cursor: pointer;



    font-size: 12px;



    font-weight: 900;



    transition:

        background 0.2s ease,

        transform 0.2s ease;



}





.whatsapp:hover {



    background: #188449;



    transform: translateY(-1px);



}





/* =========================================================

   EMPTY CART BUTTON

========================================================= */



.vaciar {



    width: 100%;



    margin-top: 8px;



    padding:

        9px;



    background: transparent;



    color: var(--gray-500);



    cursor: pointer;



    font-size: 10px;



    font-weight: 700;



}





.vaciar:hover {



    color: var(--red);



}





/* =========================================================

   POPUP

========================================================= */



.popup-overlay {



    position: fixed;



    inset: 0;



    z-index: 1100;



    display: flex;



    align-items: center;



    justify-content: center;



    padding: 20px;



    background:

        rgba(0, 0, 0, 0.5);



    opacity: 0;



    visibility: hidden;



    transition:

        opacity 0.2s ease,

        visibility 0.2s ease;



}





.popup-overlay.activo {



    opacity: 1;



    visibility: visible;



}





.popup-confirmacion {



    width: min(

        390px,

        100%

    );



    padding:

        28px;



    background: var(--white);



    border-radius: var(--radius-lg);



    text-align: center;



    box-shadow:

        0 20px 60px

        rgba(0, 0, 0, 0.2);



}





.popup-icono {



    width: 52px;



    height: 52px;



    margin:

        0

        auto

        12px;



    display: flex;



    align-items: center;



    justify-content: center;



    background: var(--red-soft);



    border-radius: 50%;



}





.popup-label {



    color: var(--red);



    font-size: 9px;



    font-weight: 900;



    letter-spacing: 2px;



}





.popup-confirmacion h3 {



    margin-top: 5px;



    font-size: 22px;



}





.popup-confirmacion p {



    margin-top: 8px;



    color: var(--gray-500);



    font-size: 11px;



    line-height: 1.5;



}





.popup-botones {



    display: grid;



    grid-template-columns:

        1fr 1fr;



    gap: 8px;



    margin-top: 20px;



}





.btn-cancelar,

.btn-confirmar {



    padding:

        11px;



    border-radius: 8px;



    cursor: pointer;



    font-size: 11px;



    font-weight: 800;



}





.btn-cancelar {



    background: var(--gray-100);



}





.btn-confirmar {



    background: var(--red);



    color: white;



}





/* =========================================================

   FOOTER

========================================================= */



footer {



    background:

        #111;



    color: white;



}





.footer-contenido {



    width: min(

        var(--max-width),

        calc(100% - 48px)

    );



    margin: auto;



    padding:

        42px

        0;



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 30px;



}





.footer-brand {



    display: flex;



    align-items: center;



    gap: 12px;



}





.footer-brand img {



    width: 52px;



    height: 52px;



    object-fit: contain;



}





.footer-brand div {



    display: flex;



    flex-direction: column;



    gap: 3px;



}





.footer-brand strong {



    color: white;



    font-size: 18px;



}





.footer-brand span {



    color: #999;



    font-size: 10px;



}





.footer-links {



    display: flex;



    gap: 8px;



}





.footer-social {



    min-width: 150px;



    display: flex;



    align-items: center;



    gap: 9px;



    padding:

        10px

        12px;



    border:

        1px solid #333;



    border-radius: 9px;



    transition:

        border-color 0.2s ease,

        background 0.2s ease;



}





.footer-social:hover {



    background: #1d1d1d;



    border-color: #555;



}





.footer-social-icon {



    width: 29px;



    height: 29px;



    display: flex;



    align-items: center;



    justify-content: center;



    background: #222;



    border-radius: 7px;



    font-weight: 900;



}





.footer-social div {



    display: flex;



    flex-direction: column;



    gap: 2px;



}





.footer-social strong {



    font-size: 10px;



}





.footer-social small {



    color: #999;



    font-size: 9px;



}





.footer-bottom {



    width: min(

        var(--max-width),

        calc(100% - 48px)

    );



    margin: auto;



    padding:

        15px

        0;



    display: flex;



    justify-content: space-between;



    border-top:

        1px solid #292929;



    color: #777;



    font-size: 9px;



}





/* =========================================================

   TABLET

========================================================= */



@media (max-width: 1150px) {



    .header-inner {



        grid-template-columns:

            auto 1fr auto;



    }





    .shipping-info {



        gap: 12px;



    }





    .shipping-item small {



        display: none;



    }





    .productos {



        grid-template-columns:

            repeat(3, minmax(0, 1fr));



    }



}





/* =========================================================

   TABLET SMALL

========================================================= */



@media (max-width: 850px) {



    .header-inner {



        width: min(

            100% - 30px,

            var(--max-width)

        );



        grid-template-columns:

            1fr auto;



        min-height: 72px;



    }





    .shipping-info {



        display: none;



    }





    .brand img {



        width: 48px;

        height: 48px;



    }





    .brand-text strong {



        font-size: 20px;



    }





    main {



        width:

            calc(100% - 30px);



    }





    .hero {



        padding-top: 45px;



    }





    .benefits {



        grid-template-columns:

            repeat(2, 1fr);



    }





    .productos {



        grid-template-columns:

            repeat(2, minmax(0, 1fr));



        gap: 14px;



    }





    .producto-imagen {



        height: 220px;



    }





    .footer-contenido {



        flex-direction: column;



        align-items: flex-start;



    }



}





/* =========================================================

   MOBILE

========================================================= */



@media (max-width: 560px) {



    body {



        background:

            #f8f8f8;



    }





    .site-header {



        position: relative;



    }





    .header-inner {



        width:

            calc(100% - 24px);



        min-height: 65px;



    }





    .brand {



        gap: 8px;



    }





    .brand img {



        width: 42px;

        height: 42px;



    }





    .brand-text strong {



        font-size: 18px;



    }





    .brand-text span {



        font-size: 9px;



    }





    .cart-button {



        padding:

            9px

            11px;



    }





    .cart-label {



        display: none;



    }





    .cart-count {



        width: 20px;

        height: 20px;



        min-width: 20px;



        font-size: 10px;



    }





    main {



        width:

            calc(100% - 20px);



    }





    .hero {



        padding:

            38px

            0

            25px;



    }





    .eyebrow {



        font-size: 9px;



        letter-spacing: 3px;



    }





    .hero h1 {



        font-size: 34px;



        letter-spacing: -1.5px;



    }





    .hero p {



        font-size: 13px;



    }





    .benefits {



        grid-template-columns:

            1fr 1fr;



        gap: 7px;



        margin-top: 25px;



    }





    .benefit {



        padding:

            10px;



        gap: 7px;



    }





    .benefit > span {



        width: 28px;



        height: 28px;



        font-size: 13px;



    }





    .benefit strong {



        font-size: 9px;



    }





    .benefit small {



        font-size: 8px;



    }





    .search-box {



        height: 50px;



        padding:

            0

            13px;



    }





    #buscador {



        font-size: 12px;



    }





    .catalog-heading h2 {



        font-size: 23px;



    }





    .catalog-note {



        font-size: 9px;



    }





    .productos {



        grid-template-columns:

            repeat(2, minmax(0, 1fr));



        gap: 9px;



    }





    .producto {



        border-radius: 12px;



    }





    .producto-imagen {



        height: 155px;



        padding: 9px;



    }





    .producto-info {



        padding: 11px;



    }





    .producto h3 {



        min-height: 40px;



        font-size: 13px;



    }





    .producto-etiquetas {



        align-items: flex-start;



        flex-direction: column;



        gap: 4px;



    }





    .categoria,

    .presentacion {



        max-width: 100%;



        font-size: 7px;



        padding:

            4px

            6px;



    }





    .selector-presentacion {



        gap: 4px;



    }





    .btn-presentacion {



        min-width: 0;



        padding:

            7px

            4px;



        font-size: 7px;



    }





    .detalles-producto {



        grid-template-columns:

            repeat(2, 1fr);



    }





    .detalles-producto > div {



        padding: 6px 3px;



    }





    .detalles-producto span {



        font-size: 12px;



    }





    .detalles-producto small {



        font-size: 7px;



    }





    .detalles-producto strong {



        font-size: 7px;



    }





    .contenido-producto {



        font-size: 7px;



    }





    .contenido-producto strong {



        font-size: 8px;



    }





    .precio {



        font-size: 17px;



        margin:

            10px

            0

            7px;



    }





    .cantidad-producto {



        gap: 9px;



    }





    .cantidad-producto button {



        width: 27px;



        height: 27px;



        font-size: 15px;



    }





    .cantidad-producto span {



        font-size: 12px;



    }





    .minimo-producto {



        font-size: 7px;



    }





    .agregar {



        padding:

            10px

            5px;



        font-size: 9px;



    }





    .sello-agotado,

    .sello-preventa {



        top: 7px;



        right: 7px;



        padding:

            5px

            6px;



        font-size: 7px;



    }





    .footer-contenido {



        width:

            calc(100% - 24px);



        padding:

            32px

            0;



    }





    .footer-links {



        width: 100%;



        display: grid;



        grid-template-columns:

            1fr;



    }





    .footer-social {



        width: 100%;



    }





    .footer-bottom {



        width:

            calc(100% - 24px);



        flex-direction: column;



        gap: 5px;



    }



}





/* =========================================================

   VERY SMALL MOBILE

========================================================= */



@media (max-width: 380px) {



    .productos {



        grid-template-columns:

            1fr;



    }





    .producto-imagen {



        height: 220px;



    }





    .producto h3 {



        font-size: 15px;



    }





    .benefits {



        grid-template-columns:

            1fr;



    }



}





/* =========================================================

   ACCESSIBILITY

========================================================= */



button:focus-visible,

input:focus-visible,

a:focus-visible {



    outline:

        2px solid var(--red);



    outline-offset: 3px;



}/* =========================================================

   SELLO IMPORTACIÓN

   ========================================================= */



.producto.importacion .producto-imagen {

    position: relative;

    overflow: hidden;

}



.sello-importacion {

    position: absolute;

    top: 12px;

    right: 12px;



    z-index: 10;



    padding: 7px 11px;



    background: #eeeeee;

    color: #333333;



    border: 1px solid #d5d5d5;

    border-radius: 7px;



    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.5px;



    white-space: nowrap;



    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);

}

/* =========================================================

   VISOR / ZOOM DE IMÁGENES DE PRODUCTOS

   ========================================================= */



.imagen-producto-click {

    cursor: zoom-in;

}





/* Fondo oscuro que cubre toda la pantalla */



.visor-imagen {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    bottom: 0 !important;



    width: 100vw !important;

    height: 100vh !important;



    z-index: 99999 !important;



    display: flex !important;

    align-items: center !important;

    justify-content: center !important;



    padding: 30px !important;



    box-sizing: border-box !important;



    background: rgba(0, 0, 0, 0.88) !important;



    overflow: auto !important;

}





/* Contenedor de la imagen */



.visor-contenido {

    position: relative !important;



    display: flex !important;

    flex-direction: column !important;



    align-items: center !important;

    justify-content: center !important;



    max-width: 95vw !important;

    max-height: 95vh !important;



    margin: auto !important;

}





/* Imagen ampliada */



.visor-contenido .imagen-ampliada {

    display: block !important;



    width: auto !important;

    height: auto !important;



    max-width: 90vw !important;

    max-height: 82vh !important;



    object-fit: contain !important;



    background: #ffffff !important;



    border-radius: 8px !important;



    box-shadow:

        0 20px 60px rgba(0, 0, 0, 0.55) !important;

}





/* Botón X */



.cerrar-visor {

    position: absolute !important;



    top: -18px !important;

    right: -18px !important;



    width: 42px !important;

    height: 42px !important;



    padding: 0 !important;



    display: flex !important;

    align-items: center !important;

    justify-content: center !important;



    border: none !important;

    border-radius: 50% !important;



    background: #ffffff !important;

    color: #111111 !important;



    font-size: 28px !important;

    font-weight: 400 !important;



    line-height: 1 !important;



    cursor: pointer !important;



    z-index: 100000 !important;



    box-shadow:

        0 4px 15px rgba(0, 0, 0, 0.35) !important;

}



.cerrar-visor:hover {

    transform: scale(1.05);

}





/* Nombre debajo de la imagen */



.nombre-imagen {

    margin-top: 12px !important;



    padding: 7px 14px !important;



    background: rgba(255, 255, 255, 0.95) !important;



    color: #111111 !important;



    border-radius: 6px !important;



    font-size: 13px !important;

    font-weight: 700 !important;



    text-align: center !important;

}





/* =========================================================

   MÓVIL

   ========================================================= */



@media (max-width: 600px) {



    .visor-imagen {

        padding: 15px !important;

    }



    .visor-contenido .imagen-ampliada {

        max-width: 94vw !important;

        max-height: 80vh !important;



        border-radius: 6px !important;

    }



    .cerrar-visor {

        top: -12px !important;

        right: -8px !important;



        width: 36px !important;

        height: 36px !important;



        font-size: 24px !important;

    }



    .nombre-imagen {

        max-width: 90vw !important;



        font-size: 12px !important;

    }

}

/* =========================================================

   GALERÍA DE PRODUCTOS

   ========================================================= */



.imagen-producto-click {

    cursor: zoom-in;

}





/* =========================

   VISOR

   ========================= */



.visor-imagen {

    position: fixed;



    inset: 0;



    z-index: 99999;



    display: flex;



    align-items: center;



    justify-content: center;



    padding: 25px;



    box-sizing: border-box;



    background: rgba(255, 255, 255, 0.72);



    backdrop-filter: blur(7px);



    -webkit-backdrop-filter: blur(7px);



    opacity: 0;



    visibility: hidden;



    transition:

        opacity 0.22s ease,

        visibility 0.22s ease;

}





.visor-imagen.visible {

    opacity: 1;



    visibility: visible;

}





.visor-imagen.cerrando {

    opacity: 0;

}





/* =========================

   CONTENIDO

   ========================= */



.visor-contenido {



    position: relative;



    display: flex;



    flex-direction: column;



    align-items: center;



    justify-content: center;



    max-width: 92vw;



    max-height: 92vh;



    transform: scale(0.92);



    opacity: 0;



    transition:

        transform 0.25s ease,

        opacity 0.25s ease;

}





.visor-imagen.visible

.visor-contenido {



    transform: scale(1);



    opacity: 1;

}





/* =========================

   IMAGEN GRANDE

   ========================= */



.imagen-ampliada {



    display: block;



    width: auto;



    height: auto;



    max-width: 82vw;



    max-height: 70vh;



    object-fit: contain;



    background: white;



    border-radius: 10px;



    box-shadow:

        0 12px 40px

        rgba(0, 0, 0, 0.18);



    transition:

        opacity 0.15s ease;

}





/* =========================

   CERRAR

   ========================= */



.cerrar-visor {



    position: absolute;



    top: -18px;



    right: -18px;



    width: 40px;



    height: 40px;



    padding: 0;



    border: 1px solid #ddd;



    border-radius: 50%;



    background: white;



    color: #222;



    font-size: 26px;



    line-height: 1;



    cursor: pointer;



    z-index: 10;



    box-shadow:

        0 4px 15px

        rgba(0, 0, 0, 0.15);



    transition:

        transform 0.15s ease,

        box-shadow 0.15s ease;

}





.cerrar-visor:hover {



    transform: scale(1.08);



    box-shadow:

        0 5px 18px

        rgba(0, 0, 0, 0.22);

}





/* =========================

   FLECHAS

   ========================= */



.flecha-galeria {



    position: absolute;



    top: 50%;



    transform: translateY(-50%);



    width: 44px;



    height: 44px;



    border: none;



    border-radius: 50%;



    background: white;



    color: #222;



    font-size: 34px;



    line-height: 1;



    cursor: pointer;



    z-index: 5;



    box-shadow:

        0 4px 15px

        rgba(0, 0, 0, 0.15);



    transition:

        transform 0.15s ease,

        background 0.15s ease;

}





.flecha-galeria:hover {



    background: #f5f5f5;



}





.flecha-anterior {



    left: -65px;

}





.flecha-siguiente {



    right: -65px;

}





/* =========================

   NOMBRE

   ========================= */



.nombre-imagen {



    margin-top: 10px;



    padding: 6px 12px;



    background: rgba(

        255,

        255,

        255,

        0.94

    );



    color: #111;



    border-radius: 6px;



    font-size: 12px;



    font-weight: 700;



    text-align: center;



    box-shadow:

        0 3px 10px

        rgba(0, 0, 0, 0.08);

}





/* =========================

   MINIATURAS

   ========================= */



.miniaturas-galeria {



    display: flex;



    gap: 8px;



    margin-top: 12px;



    max-width: 82vw;



    overflow-x: auto;



    padding: 3px 2px;

}





.miniatura-galeria {



    flex: 0 0 auto;



    width: 62px;



    height: 62px;



    padding: 3px;



    border: 1px solid #ddd;



    border-radius: 6px;



    background: white;



    cursor: pointer;



    transition:

        border-color 0.15s ease,

        transform 0.15s ease;

}





.miniatura-galeria:hover {



    transform: translateY(-2px);



}





.miniatura-galeria.activa {



    border-color: #e00000;



}





.miniatura-galeria img {



    width: 100%;



    height: 100%;



    object-fit: contain;



    border-radius: 4px;

}





/* =========================

   MÓVIL

   ========================= */



@media (max-width: 600px) {



    .visor-imagen {



        padding: 15px;

    }





    .imagen-ampliada {



        max-width: 88vw;



        max-height: 65vh;

    }





    .cerrar-visor {



        top: -12px;



        right: -8px;



        width: 36px;



        height: 36px;



        font-size: 23px;

    }





    .flecha-galeria {



        width: 38px;



        height: 38px;



        font-size: 28px;

    }





    .flecha-anterior {



        left: -8px;

    }





    .flecha-siguiente {



        right: -8px;

    }





    .miniaturas-galeria {



        max-width: 88vw;

    }





    .miniatura-galeria {



        width: 54px;



        height: 54px;

    }



}

/* Estilos para precios con descuento de PokeOdds */

.precio-oferta {

    display: flex;

    flex-direction: column;

    gap: 4px;

    margin-top: 8px;

}



.precio-anterior {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    color: #999;

    font-size: 13px;

}



.precio-tachado {

    text-decoration: line-through;

}



.etiqueta-descuento {

    display: inline-block;

    background: #d62828;

    color: #fff;

    padding: 3px 6px;

    border-radius: 4px;

    font-size: 10px;

    font-weight: 800;

    text-decoration: none;

}



.precio-actual {

    color: #e63946;

    font-size: 23px;

    font-weight: 800;

    line-height: 1.2;

}



.precio-ahorro {

    color: #16803c;

    font-size: 12px;

    font-weight: 600;

}



.precio-normal {

    font-weight: 800;

}



/* =========================================

   POKEODDS - CARRUSEL DESTACADOS

   Paleta: negro, rojo, blanco y gris

\========================================= */



.poke-carousel {

    --poke-red: #e51b2b;

    --poke-black: #151515;

    --poke-gray: #777;



    width: calc(100% - 54px);

    max-width: 1500px;

    margin: 22px auto 26px;

    padding: 25px;

    box-sizing: border-box;

    border: 1px solid #e8e8e8;

    border-radius: 22px;

    background:

        radial-gradient(ellipse at 0% 0%, #fff0f1 0, transparent 45%),

        radial-gradient(ellipse at 100% 100%, #f0f1f3 0, transparent 45%),

        #fff;

    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.06);

    overflow: hidden;

}



.poke-carousel-header {

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;

}



.poke-eyebrow {

    color: var(--poke-red);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 3px;

}



.poke-carousel-header h2 {

    margin: 7px 0;

    color: var(--poke-black);

    font-size: clamp(23px, 3vw, 32px);

    font-weight: 900;

    letter-spacing: -1px;

}



.poke-carousel-header h2 span {

    color: var(--poke-red);

}



.poke-carousel-header p {

    margin: 0;

    color: var(--poke-gray);

    font-size: 14px;

}





/* Carrusel como referencia para posicionar las flechas */

.poke-carousel {

    position: relative;

}



/* Flechas flotantes a ambos lados */

.poke-carousel-controls {

    position: absolute;

    inset: 50% -18px auto;

    transform: translateY(-50%);

    z-index: 10;

    display: flex;

    justify-content: space-between;

    width: calc(100% + 36px);

    pointer-events: none;

}



/* Botones grandes, rojos y visibles */

.poke-carousel-controls button {

    pointer-events: auto;

    width: 54px;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(255, 255, 255, 0.9);

    border-radius: 50%;

    background: linear-gradient(145deg, #ff303f, #c90018);

    color: #fff;

    font-size: 38px;

    font-weight: 700;

    line-height: 1;

    cursor: pointer;

    box-shadow: 0 5px 18px rgba(229, 27, 43, 0.4);

    transition: transform .2s, box-shadow .2s;

}



.poke-carousel-controls button:hover {

    transform: scale(1.12);

    box-shadow: 0 7px 24px rgba(229, 27, 43, 0.55);

}



/* Mantener las flechas dentro de la pantalla en móviles */

@media (max-width: 650px) {

    .poke-carousel-controls {

        inset: 50% 5px auto;

        width: calc(100% - 10px);

    }



    .poke-carousel-controls button {

        width: 42px;

        height: 42px;

        font-size: 30px;

    }

}





.poke-carousel-controls button:hover {

    background: var(--poke-red);

    color: #fff;

    border-color: var(--poke-red);

}




.poke-carousel-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 60px) / 4);
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 3px 2px 12px;
    overscroll-behavior-x: contain;
}

.poke-carousel-track::-webkit-scrollbar {
    display: none;
}




.poke-slide {

    min-width: 0;

    overflow: hidden;

    scroll-snap-align: start;

    border: 1px solid #292929;

    border-radius: 15px;

    background:

        radial-gradient(ellipse at 50% 0%, #3a2023 0, transparent 65%),

        linear-gradient(145deg, #202020, #101010 75%);

    box-shadow: 0 7px 18px rgba(0, 0, 0, .10);

    transition: transform .25s, box-shadow .25s;

}



.poke-slide:hover {

    transform: translateY(-4px);

    box-shadow: 0 12px 26px rgba(229, 27, 43, .16);

}



.poke-slide-image {

    height: 220px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 18px;

    box-sizing: border-box;

    background:

        radial-gradient(ellipse at center, rgba(229, 27, 43, .13), transparent 70%);

}



.poke-slide-image::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 12%;

    width: 76%;

    height: 1px;

    background: linear-gradient(90deg, transparent, #e51b2b, transparent);

}



.poke-slide-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .28));

}



.poke-slide-tag {

    position: absolute;

    z-index: 2;

    top: 12px;

    left: 12px;

    padding: 6px 10px;

    border-radius: 5px;

    background: var(--poke-red);

    color: #fff;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .5px;

}



.poke-slide-info {

    padding: 16px 17px 20px;

    color: #fff;

}



.poke-slide-category {

    color: #ff858d;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.3px;

}



.poke-slide-info h3 {

    margin: 7px 0 5px;

    color: #fff;

    font-size: 17px;

    font-weight: 850;

    line-height: 1.3;

}



.poke-slide-info p {

    margin: 0;

    color: #c7c7c7;

    font-size: 12px;

    line-height: 1.5;

}



.poke-grading-slogan {

    display: inline-block;

    margin-top: 12px;

    padding: 7px 10px;

    border: 1px solid rgba(229, 27, 43, .5);

    border-radius: 6px;

    color: #fff;

    font-size: 11px;

    font-weight: 800;

}



.poke-carousel-footer {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    flex-wrap: wrap;

    padding-top: 14px;

    color: #888;

    font-size: 11px;

}



.poke-carousel-dots {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

}



.poke-carousel-dots button {

    width: 8px;

    height: 8px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: #d0d0d0;

    cursor: pointer;

    transition: background .2s, transform .2s;

}



.poke-carousel-dots button.activo {

    background: var(--poke-red);

    transform: scale(1.25);

}



/* TABLETS */

@media (max-width: 1000px) {

    .poke-carousel-track {

        grid-auto-columns: calc((100% - 40px) / 3);

    }



    .poke-slide-image {

        height: 190px;

    }

}



/* CELULARES */

@media (max-width: 650px) {

    .poke-carousel {

        width: calc(100% - 24px);

        margin: 16px auto 20px;

        padding: 15px;

        border-radius: 15px;

    }



    .poke-carousel-header {

        align-items: center;

    }



    .poke-carousel-header h2 {

        font-size: 23px;

    }



    .poke-carousel-header p {

        max-width: 230px;

        font-size: 12px;

        line-height: 1.5;

    }



    .poke-carousel-controls button {

        width: 35px;

        height: 35px;

        font-size: 24px;

    }



    .poke-carousel-track {

        grid-auto-columns: 78%;

        gap: 12px;

    }



    .poke-slide-image {

        height: 205px;

    }



    .poke-slide-info {

        padding: 13px;

    }



    .poke-slide-info h3 {

        font-size: 16px;

    }



    .poke-carousel-footer {

        font-size: 10px;

    }

}



@media (prefers-reduced-motion: reduce) {

    .poke-carousel-track {

        scroll-behavior: auto;

    }



    .poke-slide {

        transition: none;

    }

}


/* =========================================================
   POKEODDS - FILTROS AVANZADOS DEL CATÁLOGO
   ========================================================= */
.filtros-avanzados {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 12px;
    align-items: end;
    margin-top: 16px;
    padding: 16px;
    background: rgba(255,255,255,.96);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.filtro-campo {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}
.filtro-campo label {
    font-size: 11px;
    font-weight: 800;
    color: var(--gray-700);
}
.filtro-campo select {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 10px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: var(--white);
    color: var(--black);
    font-size: 12px;
    outline: none;
}
.filtro-campo select:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(215,25,32,.08);
}
.limpiar-filtros {
    height: 42px;
    padding: 0 13px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: var(--white);
    color: var(--gray-700);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}
.limpiar-filtros:hover {
    color: var(--red);
    border-color: var(--red);
}
.resultado-filtros {
    margin-top: -22px;
    margin-bottom: 18px;
    color: var(--gray-500);
    font-size: 11px;
}
@media (max-width: 1000px) {
    .filtros-avanzados {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .limpiar-filtros {
        width: 100%;
    }
}
@media (max-width: 560px) {
    .filtros-avanzados {
        grid-template-columns: 1fr 1fr;
        gap: 9px;
        padding: 11px;
        border-radius: 12px;
    }
    .filtro-campo label {
        font-size: 10px;
    }
    .filtro-campo select {
        height: 40px;
        padding: 0 7px;
        font-size: 10px;
    }
    .limpiar-filtros {
        grid-column: 1 / -1;
    }
    .resultado-filtros {
        margin-top: -22px;
        font-size: 10px;
    }
}


/* =========================================================
   POKEODDS — HEADER Y BENEFICIOS ACTUALIZADOS
========================================================= */

/* Más presencia para la marca */
.brand-prominent {
    gap: 16px;
    transform: translateX(-4px);
}

.brand-prominent img {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
}

.brand-prominent .brand-text strong {
    font-size: 31px;
    line-height: 1;
    letter-spacing: -1px;
}

.brand-prominent .brand-text span {
    font-size: 12px;
    margin-top: 5px;
}

/* Mensaje principal más comercial y limpio */
.hero-content > p {
    max-width: 700px;
    margin-inline: auto;
    font-size: 17px;
}

/* Tres beneficios reales, sin repetir los envíos del encabezado */
.benefits-updated {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 980px;
    gap: 14px;
}

.benefits-updated .benefit {
    min-height: 78px;
    padding: 16px 19px;
    gap: 13px;
}

.benefits-updated .benefit > span {
    width: 43px;
    height: 43px;
    min-width: 43px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #f7f7f7;
    font-size: 21px;
}

.benefits-updated .benefit strong {
    font-size: 13px;
    line-height: 1.3;
}

.benefits-updated .benefit small {
    font-size: 11px;
    line-height: 1.4;
}

@media (max-width: 900px) {
    .brand-prominent img {
        width: 68px;
        height: 68px;
        flex-basis: 68px;
    }

    .brand-prominent .brand-text strong {
        font-size: 28px;
    }

    .benefits-updated {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .brand-prominent {
        gap: 10px;
        transform: none;
    }

    .brand-prominent img {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
    }

    .brand-prominent .brand-text strong {
        font-size: 24px;
    }

    .brand-prominent .brand-text span {
        font-size: 10px;
    }

    .benefits-updated {
        grid-template-columns: 1fr;
        max-width: 420px;
    }

    .benefits-updated .benefit {
        min-height: 70px;
    }
}


/* =========================================================
   SELECTOR DE MONEDA — DEBAJO DE LAS OPCIONES DE FILTRO
========================================================= */
.currency-selector-wrap {
    width: min(100%, 360px);
    margin: 18px 0 0 auto;
    padding: 13px 15px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.currency-selector-wrap label {
    color: var(--gray-700);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}

.currency-selector-wrap select {
    width: 100%;
    min-height: 43px;
    padding: 9px 12px;
    border: 1px solid var(--gray-300);
    border-radius: 9px;
    background: #fff;
    color: var(--black);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    outline: none;
}

.currency-selector-wrap select:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(215, 25, 32, .08);
}

@media (max-width: 600px) {
    .currency-selector-wrap {
        width: 100%;
        margin: 14px 0 0;
    }
}

/* SIDEBAR VERTICAL POKEODDS */
.catalog-layout{width:min(1540px,calc(100% - 48px));margin:26px auto 70px;display:grid;grid-template-columns:320px minmax(0,1fr);align-items:start;gap:30px}
.catalog-sidebar{position:sticky;top:18px;align-self:start;min-width:0}
.catalog-sidebar .catalog-controls{margin:0;padding:24px 22px;background:#fff;border:1px solid var(--gray-200);border-radius:16px;box-shadow:0 8px 28px rgba(0,0,0,.07)}
.catalog-sidebar .search-box{height:54px;margin-bottom:20px}
.catalog-sidebar .categorias{display:flex;flex-direction:column;align-items:stretch;gap:7px;margin:0;overflow:visible}
.catalog-sidebar .categorias button{width:100%;min-height:48px;flex:0 0 auto;padding:12px 16px;border-radius:9px;text-align:left;font-size:16px;font-weight:800}
.catalog-sidebar .price-filter-panel{margin-top:24px;padding-top:21px;border-top:1px solid var(--gray-200)}
.price-filter-panel h3{margin:0 0 16px;color:var(--gray-800);font-size:17px;font-weight:900;letter-spacing:.4px}
.price-filter-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.price-filter-fields label{display:flex;flex-direction:column;gap:7px;color:var(--gray-600);font-size:13px;font-weight:750}
.price-filter-fields input{width:100%;min-width:0;height:46px;padding:9px 10px;border:1px solid var(--gray-300);border-radius:9px;color:var(--gray-900);font:inherit;font-size:14px;box-sizing:border-box}
.price-filter-fields input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(215,25,32,.08)}
.price-range-caption{min-height:18px;margin:11px 0 14px;color:var(--gray-600);font-size:12px}
.price-filter-actions{display:flex;gap:9px}
.price-filter-actions button{min-height:44px;padding:10px 15px;border:0;border-radius:9px;background:var(--red);color:#fff;font-size:12px;font-weight:900;cursor:pointer}
.price-filter-actions button:last-child{background:#f0f0f0;color:var(--gray-800)}
.catalog-sidebar .currency-selector-wrap{width:100%;max-width:none;margin:18px 0 0;padding:18px 20px;box-sizing:border-box}
.catalog-sidebar .currency-selector-wrap label{font-size:12px}
.catalog-sidebar .currency-selector-wrap select{min-height:48px;font-size:14px}
.catalog-main{min-width:0}
.catalog-main .catalog-section{margin:0;padding:0 0 70px}
.catalog-main .productos{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1100px){.catalog-layout{grid-template-columns:280px minmax(0,1fr);gap:20px}.catalog-main .productos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.catalog-layout{width:min(100% - 28px,620px);grid-template-columns:1fr;gap:22px}.catalog-sidebar{position:static}.catalog-sidebar .categorias{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-main .productos{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(max-width:420px){.catalog-sidebar .categorias{grid-template-columns:1fr}.catalog-main .productos{grid-template-columns:1fr}}


/* FILTRO DE DISPONIBILIDAD */
.catalog-sidebar .status-filter-panel {
    margin-top: 23px;
    padding-top: 20px;
    border-top: 1px solid var(--gray-200);
}
.status-filter-panel h3 {
    margin: 0 0 13px;
    color: var(--gray-800);
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .4px;
}
.status-filter-options {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.status-filter-options .status-filter-btn {
    width: 100%;
    min-height: 43px;
    padding: 10px 13px;
    border: 1px solid var(--gray-200);
    border-radius: 9px;
    background: #fff;
    color: var(--gray-700);
    text-align: left;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.status-filter-options .status-filter-btn:hover {
    border-color: var(--red);
}
.status-filter-options .status-filter-btn.activo {
    border-color: var(--red);
    background: #fff1f2;
    color: var(--red);
}


/* =========================================================
   POKEODDS — BARRA LATERAL DE FILTROS CON SCROLL PROPIO
   Permite recorrer todos los filtros independientemente
   del desplazamiento del catálogo de productos.
========================================================= */
.catalog-sidebar {
    position: sticky;
    top: 16px;
    height: calc(100vh - 32px);
    max-height: calc(100vh - 32px);
    min-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: auto;
    scrollbar-color: #d71920 #eeeeee;
    padding-right: 7px;
    box-sizing: border-box;
}

/* Barra visible y fácil de arrastrar en Chrome, Edge y Safari */
.catalog-sidebar::-webkit-scrollbar {
    width: 11px;
}
.catalog-sidebar::-webkit-scrollbar-track {
    background: #eeeeee;
    border-radius: 10px;
}
.catalog-sidebar::-webkit-scrollbar-thumb {
    background: #d71920;
    border: 2px solid #eeeeee;
    border-radius: 10px;
}
.catalog-sidebar::-webkit-scrollbar-thumb:hover {
    background: #a90f18;
}

/* El contenido interior no debe imponer una altura que oculte controles */
.catalog-sidebar .catalog-controls {
    min-height: 0;
}

/* En móvil se deja el desplazamiento normal de la página */
@media (max-width: 760px) {
    .catalog-sidebar {
        position: static;
        height: auto;
        max-height: none;
        min-height: 0;
        overflow: visible;
        padding-right: 0;
    }
}