:root {
    --rojo-principal: #b5121b;
    --rojo-oscuro: #7f0d14;
    --rojo-profundo: #59080d;
    --rojo-suave: #fff1f1;
    --dorado: #d8a72e;
    --dorado-suave: #f6e7b6;
    --blanco: #ffffff;
    --fondo: #fffaf7;
    --fondo-secundario: #f8f3ef;
    --texto: #2d2926;
    --texto-secundario: #6d625c;
    --borde: #eadfd8;
    --sombra-suave: 0 6px 20px rgba(78, 31, 24, 0.08);
    --sombra-media: 0 12px 30px rgba(78, 31, 24, 0.13);
    --radio-pequeno: 10px;
    --radio-medio: 16px;
    --radio-grande: 24px;
    --ancho-maximo: 1280px;
    --transicion: 180ms ease;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--fondo);
    color: var(--texto);
    line-height: 1.5;
}

img {
    display: block;
    max-width: 100%;
}

button,
input {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

.oculto {
    display: none !important;
}

.contenedor {
    width: min(calc(100% - 32px), var(--ancho-maximo));
    margin-inline: auto;
}

.etiqueta-oculta {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================
   PORTADA PRINCIPAL
   LEGUMBRERÍA & DIETÉTICA R&A
========================================================= */

.portada {
    position: relative;

    width: 100%;

    /*
       Mantiene la misma proporción
       de la portada móvil.
    */
    aspect-ratio: 9 / 16;

    overflow: hidden;

    background-image:
        url("assets/portada/portada-mobile.png");

    background-repeat:
        no-repeat;

    background-position:
        center center;

    background-size:
        cover;
}


/* =========================================================
   BOTÓN VER CATÁLOGO
========================================================= */

.boton-portada {
    position: absolute;

    /*
       Posición reservada dentro
       de la composición móvil.
    */
    top: 55%;
    left: 50%;

    transform:
        translate(-50%, -50%);

    z-index: 2;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 54px;

    padding:
        14px 34px;

    border:
        1px solid rgba(255, 255, 255, 0.55);

    border-radius:
        999px;

    background:
        linear-gradient(135deg,
            var(--rojo-principal),
            var(--rojo-oscuro));

    color:
        var(--blanco);

    font-family:
        inherit;

    font-size:
        1rem;

    font-weight:
        900;

    white-space:
        nowrap;

    cursor:
        pointer;

    box-shadow:
        0 12px 28px rgba(73, 10, 10, 0.30);

    transition:
        transform var(--transicion),
        box-shadow var(--transicion);
}


.boton-portada:active {
    transform:
        translate(-50%, -50%) scale(0.96);
}

.seccion-etiqueta {
    margin: 0 0 8px;
    color: var(--rojo-principal);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.encabezado-seccion {
    max-width: 680px;
    margin: 0 auto 28px;
    text-align: center;
}

.encabezado-seccion h2 {
    margin: 0 0 8px;
    color: var(--rojo-profundo);
    font-size: clamp(1.55rem, 7vw, 2.25rem);
    line-height: 1.15;
}

.encabezado-seccion>p:last-child {
    margin: 0;
    color: var(--texto-secundario);
}

.seccion-buscador {
    padding: 48px 0 30px;
}

.buscador-contenedor {
    position: relative;
    width: min(100%, 720px);
    margin-inline: auto;
}

.buscador {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 0 12px 0 16px;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 999px;
    box-shadow: var(--sombra-suave);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}

.buscador:focus-within {
    border-color: rgba(181, 18, 27, 0.5);
    box-shadow: 0 0 0 4px rgba(181, 18, 27, 0.08), var(--sombra-suave);
}

.buscador-icono {
    flex-shrink: 0;
    margin-right: 10px;
    font-size: 1rem;
}

.buscador-input {
    flex: 1;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--texto);
    font-size: 1rem;
}

.buscador-input::placeholder {
    color: #9a8e88;
}

.buscador-limpiar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--fondo-secundario);
    color: var(--texto-secundario);
    font-size: 1.35rem;
}

.sugerencias-buscador {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 80;
    overflow: hidden;
    max-height: 330px;
    overflow-y: auto;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio-medio);
    box-shadow: var(--sombra-media);
}

/* =========================================================
   SUGERENCIAS DEL BUSCADOR
========================================================= */

.sugerencia-producto {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    width: 100%;
    min-height: 58px;

    padding: 11px 14px;

    background:
        linear-gradient(145deg,
            #ffffff 0%,
            #fffdfc 100%);

    border: 0;
    border-bottom:
        1px solid rgba(181, 18, 27, 0.12);

    color: var(--texto);

    text-align: left;

    transition:
        background var(--transicion),
        color var(--transicion);
}


/* Último resultado */

.sugerencia-producto:last-child {
    border-bottom: 0;
}


/* NOMBRE DEL PRODUCTO */

.sugerencia-producto-nombre {
    min-width: 0;

    color: var(--texto);

    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;

    overflow-wrap: anywhere;
}


/* PAÍS DE ORIGEN */

.sugerencia-producto-detalle {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;

    padding: 5px 9px;

    color: var(--rojo-profundo);

    background:
        rgba(181, 18, 27, 0.07);

    border:
        1px solid rgba(181, 18, 27, 0.18);

    border-radius: 999px;

    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
}


/* PRESIÓN EN MÓVIL */

.sugerencia-producto:active {
    background:
        rgba(181, 18, 27, 0.07);
}

.seccion-categorias {
    padding: 22px 0 28px;
}

.grilla-categorias {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.tarjeta-categoria {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 135px;
    padding: 12px;
    background: linear-gradient(145deg, #ffffff 0%, #fffaf8 65%, #fff3f1 100%);
    border: 1.5px solid rgba(181, 18, 27, 0.22);
    border-radius: var(--radio-medio);
    box-shadow: 0 5px 14px rgba(89, 8, 13, 0.08), 0 2px 5px rgba(89, 8, 13, 0.05);
    cursor: pointer;
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
}

.tarjeta-categoria::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 100%, rgba(181, 18, 27, 0.07), transparent 65%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.tarjeta-categoria img {
    width: 100%;
    height: 115px;
    object-fit: contain;
    transition: transform 220ms ease;
}

.tarjeta-categoria:active {
    transform: translateY(-4px) scale(1.025);

    border-color: rgba(181, 18, 27, 0.55);

    background:
        linear-gradient(145deg,
            #ffffff 0%,
            #fff8f5 65%,
            #ffefed 100%);

    box-shadow:
        0 14px 26px rgba(89, 8, 13, 0.18),
        0 4px 10px rgba(89, 8, 13, 0.08);
}

.tarjeta-categoria:active::before {
    opacity: 1;
}

.tarjeta-categoria:active img {
    transform: translateY(-2px) scale(1.045);

    filter:
        drop-shadow(0 6px 7px rgba(89, 8, 13, 0.12));
}

/* =========================================================
   SELECTOR DE VARIANTE
========================================================= */

.tarjeta-producto-selector {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: 5px;

    margin: 2px 0 10px;
}

.tarjeta-producto-selector label {
    color: var(--texto-secundario);

    font-size: 0.68rem;
    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


/* CONTENEDOR VISUAL DEL SELECT */

.tarjeta-producto-selector select {
    width: 100%;
    min-width: 0;
    height: 38px;

    padding: 0 34px 0 10px;

    color: var(--texto);

    background-color: #ffffff;

    border:
        1.5px solid rgba(181, 18, 27, 0.28);

    border-radius: 9px;

    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;

    cursor: pointer;

    outline: none;

    box-shadow:
        0 2px 6px rgba(89, 8, 13, 0.035);

    transition:
        border-color var(--transicion),
        box-shadow var(--transicion),
        background-color var(--transicion);

    /*
     * Conservamos el selector nativo.
     * Es más seguro y accesible en móvil.
     */
}


/* FOCO */

.tarjeta-producto-selector select:focus {
    border-color: var(--rojo-principal);

    background-color: #fffdfc;

    box-shadow:
        0 0 0 3px rgba(181, 18, 27, 0.09),
        0 3px 8px rgba(89, 8, 13, 0.06);
}


/* ESTADO AL TOCAR */

.tarjeta-producto-selector select:active {
    border-color:
        rgba(181, 18, 27, 0.65);
}

.vista-categorias {
    min-height: 70vh;
    padding: 0;
}

.navegacion-vista {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.boton-navegacion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 8px 16px;
    border: 1px solid rgba(181, 18, 27, 0.18);
    border-radius: 999px;
    background: var(--blanco);
    color: var(--rojo-principal);
    font-weight: 800;
    box-shadow: var(--sombra-suave);
    transition: transform var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}

.boton-navegacion:active {
    transform: scale(0.96);
}

/* =========================================================
   CABECERA VISUAL DEL CATÁLOGO
   MÓVIL
========================================================= */

.cabecera-catalogo {
    position: relative;

    width: 100vw;
    height: auto;

    margin-left: calc(50% - 50vw);
    margin-bottom: 0;

    /*
     * La imagen ocupa únicamente la zona superior.
     * Dejamos espacio blanco debajo para integrar
     * el encabezado de categorías.
     */
    padding-top: 100vw;
    padding-bottom: 22px;

    background-image:
        url("assets/portada/catalogo-mobile.png");

    background-repeat: no-repeat;

    background-position:
        top center;

    background-size:
        100% auto;

    overflow: visible;
}


/* =========================================================
   BOTÓN INICIO SUPERPUESTO
========================================================= */

.navegacion-catalogo {
    position: absolute;

    top: 18px;
    left: 16px;

    z-index: 30;
}


.navegacion-catalogo .boton-navegacion {
    min-height: 40px;

    padding: 7px 15px;

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

    border:
        1px solid rgba(181, 18, 27, 0.20);

    box-shadow:
        0 7px 18px rgba(50, 15, 10, 0.16);

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


/* =========================================================
   BUSCADOR SUPERPUESTO SOBRE LA IMAGEN
========================================================= */

.buscador-catalogo-superpuesto {
    position: absolute;

    top: 58%;
    left: 50%;

    z-index: 40;

    width: min(calc(100% - 32px), 720px);

    transform: translate(-50%, -50%);
}


.buscador-catalogo-superpuesto .buscador-contenedor {
    width: 100%;
}


.buscador-catalogo-superpuesto .buscador {
    min-height: 54px;

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

    border:
        1.5px solid rgba(181, 18, 27, 0.20);

    box-shadow:
        0 10px 28px rgba(60, 18, 10, 0.22);

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


.buscador-catalogo-superpuesto .sugerencias-buscador {
    z-index: 100;
}

/* =========================================================
   VISTA DE PRODUCTOS
========================================================= */

.vista-catalogo {
    min-height: 70vh;
    padding: 0 0 64px;
}


/* =========================================================
   CABECERA VISUAL DE PRODUCTOS
   MÓVIL
========================================================= */

.cabecera-visual-productos {
    position: relative;

    width: 100vw;
    height: 330px;

    margin-left: calc(50% - 50vw);
    margin-bottom: 26px;

    background-image:
        url("assets/portada/productos-mobile.png");

    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    overflow: visible;
}


/* =========================================================
   BOTÓN VOLVER A CATEGORÍAS
========================================================= */

.navegacion-productos {
    position: absolute;

    top: 18px;
    left: 16px;

    z-index: 30;
}

.navegacion-productos .boton-navegacion {
    min-height: 40px;

    padding: 7px 15px;

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

    border:
        1px solid rgba(181, 18, 27, 0.20);

    box-shadow:
        0 7px 18px rgba(50, 15, 10, 0.14);

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


/* =========================================================
   TÍTULO DINÁMICO
========================================================= */

.cabecera-visual-productos .cabecera-productos {
    position: absolute;

    top: 84px;
    left: 50%;

    width: calc(100% - 40px);
    max-width: 680px;

    margin: 0;

    transform: translateX(-50%);

    text-align: center;

    z-index: 20;
}


.cabecera-visual-productos .seccion-etiqueta {
    margin: 0 0 6px;

    color: var(--rojo-principal);

    font-size: 0.72rem;
    font-weight: 900;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.cabecera-visual-productos .cabecera-productos h1 {
    margin: 0 0 7px;

    color: var(--rojo-profundo);

    font-size: clamp(2rem, 9vw, 2.7rem);
    font-weight: 800;

    line-height: 1.05;

    text-shadow:
        0 2px 12px rgba(255, 255, 255, 0.72);
}


.cabecera-visual-productos .cabecera-productos>p:last-child {
    margin: 0;

    color: var(--texto-secundario);

    font-size: 0.88rem;
    font-weight: 500;
}


/* =========================================================
   BUSCADOR DENTRO DE LA CABECERA
========================================================= */

.cabecera-visual-productos .seccion-buscador-productos {
    position: absolute;

    left: 50%;
    bottom: 24px;

    z-index: 40;

    width: min(calc(100% - 32px), 720px);

    transform: translateX(-50%);
}


.cabecera-visual-productos .buscador-productos-categoria {
    width: 100%;
}


.cabecera-visual-productos .buscador {
    min-height: 54px;

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

    border:
        1.5px solid rgba(181, 18, 27, 0.20);

    box-shadow:
        0 10px 28px rgba(60, 18, 10, 0.16);

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

/* =========================================================
   FILTROS DE PRODUCTOS
   ORIGEN + CARACTERÍSTICAS
========================================================= */

.seccion-filtro {
    position: relative;

    margin: 0 0 18px;
    padding: 0;

    background: transparent;
}


/* =========================================================
   ENCABEZADO VISUAL DEL FILTRO
========================================================= */

.filtro-encabezado {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 12px;
}


/* ICONO */

.filtro-icono {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background:
        linear-gradient(145deg,
            var(--rojo-principal),
            var(--rojo-oscuro));

    color: var(--blanco);

    font-size: 0.92rem;
    line-height: 1;

    box-shadow:
        0 5px 12px rgba(181, 18, 27, 0.18);
}


/* TÍTULO */

.filtro-titulo {
    flex: 0 0 auto;

    margin: 0;

    color: var(--rojo-profundo);

    font-size: 0.88rem;
    font-weight: 900;

    line-height: 1;

    letter-spacing: 0.075em;

    text-transform: uppercase;
}


/* LÍNEA DECORATIVA */

.filtro-linea {
    flex: 1;

    height: 1px;

    margin-left: 2px;

    background:
        linear-gradient(90deg,
            rgba(216, 167, 46, 0.75),
            rgba(216, 167, 46, 0.22),
            transparent);
}


/* =========================================================
   CONTENEDORES DE OPCIONES
========================================================= */

#filtros-origen,
#filtros-caracteristicas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 8px;

    padding-left: 2px;
}


/* =========================================================
   BOTONES DE FILTRO
========================================================= */

.filtro-origen,
.filtro-caracteristica {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 36px;

    padding: 7px 14px;

    border:
        1px solid rgba(181, 18, 27, 0.22);

    border-radius: 999px;

    background:
        linear-gradient(145deg,
            #ffffff 0%,
            #fffdfc 100%);

    color: var(--rojo-profundo);

    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 3px 8px rgba(89, 8, 13, 0.055);

    transition:
        background var(--transicion),
        color var(--transicion),
        border-color var(--transicion),
        box-shadow var(--transicion),
        transform var(--transicion);
}


/* =========================================================
   FILTRO SELECCIONADO
========================================================= */

.filtro-origen.activo,
.filtro-caracteristica.activo {
    color: var(--blanco);

    background:
        linear-gradient(135deg,
            var(--rojo-principal),
            var(--rojo-oscuro));

    border-color:
        var(--rojo-principal);

    box-shadow:
        0 5px 12px rgba(181, 18, 27, 0.18);
}


/* =========================================================
   RESPUESTA AL TOQUE - MÓVIL
========================================================= */

.filtro-origen:active,
.filtro-caracteristica:active {
    transform: scale(0.96);
}


/* =========================================================
   CARACTERÍSTICAS
========================================================= */

.seccion-filtro-caracteristicas {
    margin-top: 4px;
    margin-bottom: 16px;
}

/* =========================================================
   LIMPIAR FILTROS DE LA CATEGORÍA
========================================================= */

.contenedor-limpiar-filtros {
    display: flex;
    justify-content: flex-start;

    margin-top: 4px;
    margin-bottom: 18px;
}

.boton-limpiar-filtros-categoria {
    padding: 7px 13px;

    border:
        1px solid rgba(181, 18, 27, 0.24);

    border-radius: 999px;

    background: transparent;

    color: var(--rojo-principal);

    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        background var(--transicion),
        color var(--transicion),
        border-color var(--transicion),
        transform var(--transicion);
}

.boton-limpiar-filtros-categoria:active {
    transform: scale(0.96);
}

/* =========================================================
   GRILLA DE PRODUCTOS
========================================================= */

.grilla-productos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
    margin-top: 20px;
}

/* =========================================================
   TARJETA DE PRODUCTO
========================================================= */

.tarjeta-producto {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    padding: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #fffdfc 100%);
    border: 1.5px solid rgba(181, 18, 27, 0.24);
    border-radius: 16px;
    box-shadow: 0 7px 18px rgba(89, 8, 13, 0.08), 0 2px 5px rgba(89, 8, 13, 0.04);
    overflow: hidden;
    transition: transform var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}

/* =========================================================
   PRODUCTO LOCALIZADO DESDE EL BUSCADOR
========================================================= */

.tarjeta-producto-destacada {
    border-color: var(--rojo-principal);

    box-shadow:
        0 0 0 4px rgba(181, 18, 27, 0.18),
        0 10px 28px rgba(181, 18, 27, 0.20);

    transform: translateY(-3px);
}


.tarjeta-producto::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent, rgba(181, 18, 27, 0.55), transparent);
    pointer-events: none;
}

/* ORIGEN */

.tarjeta-producto-origen {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    margin-bottom: 3px;
    padding: 5px 9px;
    color: var(--rojo-profundo);
    background: rgba(181, 18, 27, 0.07);
    border: 1px solid rgba(181, 18, 27, 0.18);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
}

/* =========================================================
   BANDERA DEL PAÍS DE ORIGEN
========================================================= */

.tarjeta-producto-bandera {
    width: 18px;
    height: 12px;

    display: block;

    object-fit: cover;

    flex-shrink: 0;

    border-radius: 2px;
}

/* IMAGEN */

.tarjeta-producto-imagen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 180px;
    margin: 4px 0 12px;
    overflow: hidden;
    background: #ffffff;
    border-radius: 12px;
}

.tarjeta-producto-imagen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
}

/* NOMBRE */

.tarjeta-producto h2 {
    margin: 0 0 8px;
    color: var(--texto);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* INFORMACIÓN */

.tarjeta-producto-informacion {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    padding-bottom: 12px;
}

/* SABOR */

.tarjeta-producto-dato {
    margin: 0;
    color: var(--texto);
    font-size: 0.82rem;
    line-height: 1.4;
}

.tarjeta-producto-dato strong {
    display: block;
    margin-bottom: 2px;
    color: var(--texto-secundario);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tarjeta-producto-dato span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    max-width: 100%;
    min-height: 27px;

    padding: 4px 9px;

    color: var(--rojo-profundo);

    background:
        rgba(181, 18, 27, 0.055);

    border:
        1px solid rgba(181, 18, 27, 0.16);

    border-radius: 999px;

    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;

    overflow-wrap: anywhere;
}

/* PRESENTACIONES */

.tarjeta-producto-presentaciones {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tarjeta-producto-presentaciones-titulo {
    color: var(--texto-secundario);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tarjeta-producto-presentaciones-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tarjeta-producto-presentacion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 4px 9px;
    color: var(--rojo-profundo);
    background: rgba(181, 18, 27, 0.055);
    border: 1px solid rgba(181, 18, 27, 0.16);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
}

/* =========================================================
   CARACTERÍSTICAS DEL PRODUCTO
========================================================= */

.tarjeta-producto-caracteristicas {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 8px;
    margin-bottom: 12px;
}

.tarjeta-producto-caracteristicas-titulo {
    color: var(--texto-secundario);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tarjeta-producto-caracteristicas-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tarjeta-producto-caracteristica {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 25px;
    padding: 4px 8px;
    color: var(--rojo-profundo);
    background: rgba(181, 18, 27, 0.075);
    border: 1px solid rgba(181, 18, 27, 0.18);
    border-radius: 999px;
    font-size: 0.70rem;
    font-weight: 650;
    line-height: 1.15;
    text-align: center;
    overflow-wrap: anywhere;
}

/* =========================================================
   BOTÓN CONSULTAR
========================================================= */

.tarjeta-producto-consultar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 40px;

    margin-top: auto;
    padding: 9px 12px;

    color: #ffffff;

    background:
        linear-gradient(135deg,
            var(--rojo-principal) 0%,
            var(--rojo-oscuro) 100%);

    border:
        1px solid rgba(89, 8, 13, 0.16);

    border-radius: 10px;

    box-shadow:
        0 5px 12px rgba(181, 18, 27, 0.16);

    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;

    text-align: center;

    transition:
        transform var(--transicion),
        box-shadow var(--transicion),
        background var(--transicion);
}


/* PRESIÓN EN MÓVIL */

.tarjeta-producto-consultar:active {
    transform: scale(0.97);

    box-shadow:
        0 3px 8px rgba(181, 18, 27, 0.16);
}

/* ESTADO DE PRODUCTOS */

.estado-productos {
    margin: 30px auto;
    padding: 18px;
    max-width: 600px;
    background: var(--blanco);
    border: 1px solid rgba(181, 18, 27, 0.15);
    border-radius: var(--radio-medio);
    color: var(--texto-secundario);
    text-align: center;
    box-shadow: var(--sombra-suave);
}

/* =========================================================
   FONDO VISUAL
   CATEGORÍAS + PRODUCTOS
   MÓVIL
========================================================= */

.vista-categorias,
.vista-catalogo {
    background-color: var(--fondo);

    background-image:
        url("assets/portada/body-mobile.png");

    background-repeat:
        repeat-y;

    background-position:
        top center;

    background-size:
        100% auto;
}

/* =========================================================
   PIE DE PÁGINA
========================================================= */

.pie-pagina {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 100% 0%, rgba(216, 167, 46, 0.12), transparent 30%), linear-gradient(145deg, var(--rojo-profundo), #780c13);
    color: var(--blanco);
}

.pie-pagina::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--dorado), #f3d783, var(--dorado), transparent);
}

.pie-contenido {
    display: block;
    padding-top: 26px;
    padding-bottom: 34px;
}

.pie-presentacion {
    max-width: 520px;
    margin: 0 auto 12px;
    text-align: center;
}

.pie-logo {
    width: min(88%, 310px);
    margin: 0 auto 2px;

    filter:
        drop-shadow(0 8px 16px rgba(0, 0, 0, 0.30));
}

.pie-descripcion {
    max-width: 360px;
    margin: 0 auto 12px;

    color: rgba(255, 255, 255, 0.88);

    font-size: 0.9rem;
    line-height: 1.45;
}

.pie-informacion {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 920px;
    margin-inline: auto;
}

.pie-tarjeta {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 18px;
    background: linear-gradient(145deg, #ffffff 0%, #fff9f7 70%, #fff1ee 100%);
    color: var(--texto);
    border: 2px solid rgba(216, 167, 46, 0.55);
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(40, 0, 0, 0.28), 0 4px 10px rgba(181, 18, 27, 0.18), inset 0 0 0 1px rgba(181, 18, 27, 0.08);
}

.pie-tarjeta::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: -5px;
    height: 5px;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(90deg, transparent, rgba(216, 167, 46, 0.75), transparent);
    opacity: 0.75;
}

.pie-icono {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--rojo-principal), var(--rojo-oscuro));
    color: var(--blanco);
    font-size: 1.25rem;
    box-shadow: 0 6px 14px rgba(181, 18, 27, 0.2);
}

.pie-tarjeta-contenido {
    min-width: 0;
}

.pie-tarjeta h2 {
    margin: 1px 0 6px;
    color: var(--rojo-profundo);
    font-size: 1rem;
}

.pie-tarjeta p {
    margin: 0 0 8px;
    color: var(--texto-secundario);
    font-size: 0.88rem;
}

.pie-enlace {
    display: inline-block;
    color: var(--rojo-principal);
    font-size: 0.94rem;
    font-weight: 800;
}

.horario-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 12px;
    padding: 7px 0;
    color: var(--texto-secundario);
    font-size: 0.86rem;
}

.horario-fila strong {
    width: 100%;
    color: var(--texto);
    font-size: 0.88rem;
}

.horario-feriado {
    margin-top: 3px;
    border-top: 1px solid var(--borde);
}

.pie-direccion {
    margin: 0 0 14px;
    color: var(--texto-secundario);
    font-size: 0.88rem;
    font-style: normal;
    line-height: 1.55;
}

.boton-como-llegar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 9px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--rojo-principal), var(--rojo-oscuro));
    color: var(--blanco);
    font-size: 0.88rem;
    font-weight: 800;
    box-shadow: 0 7px 16px rgba(181, 18, 27, 0.2);
    transition: transform var(--transicion), box-shadow var(--transicion);
}

.boton-como-llegar:active {
    transform: scale(0.97);
}

.pie-inferior {
    padding: 18px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
}

.pie-inferior p {
    margin: 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.78rem;
}

/* =========================================================
   ACCESIBILIDAD
========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 3px solid rgba(216, 167, 46, 0.75);
    outline-offset: 3px;
}

/* =========================================================
   TABLETA
   3 PRODUCTOS POR FILA
========================================================= */

@media (min-width:700px) {

    /* =====================================================
       FONDO VISUAL
       TABLETA + ESCRITORIO
    ===================================================== */

    .vista-categorias,
    .vista-catalogo {
        background-image:
            url("assets/portada/body-desktop.png");
    }

    /* =====================================================
       PORTADA - TABLETA Y ESCRITORIO
    ===================================================== */

    .portada {
        aspect-ratio: 16 / 9;

        background-image:
            url("assets/portada/portada-desktop.png");

        background-position:
            center center;

        background-size:
            cover;
    }


    .boton-portada {
        top: 70%;

        min-height: 58px;

        padding:
            15px 40px;

        font-size:
            1.05rem;
    }

    /* =====================================================
       CABECERA DEL CATÁLOGO
       TABLETA / ESCRITORIO
    ===================================================== */

    .cabecera-catalogo {
        width: 100vw;
        height: auto;

        margin-left:
            calc(50% - 50vw);

        margin-bottom: 0;

        /*
         * 37.5vw equivale a la proporción
         * visual 16:6 de la imagen.
         */
        padding-top: 37.5vw;
        padding-bottom: 26px;

        background-image:
            url("assets/portada/catalogo-desktop.png");

        background-position:
            top center;

        background-size:
            100% auto;

        background-repeat:
            no-repeat;
    }

    /* =====================================================
   CABECERA DE PRODUCTOS
   TABLETA / ESCRITORIO
===================================================== */

    .cabecera-visual-productos {
        width: 100vw;
        height: 300px;

        margin-left: calc(50% - 50vw);
        margin-bottom: 34px;

        background-image:
            url("assets/portada/productos-desktop.png");

        background-repeat: no-repeat;

        /*
     * Volvemos a una cabecera panorámica compacta.
     */
        background-size: cover;

        /*
     * Desplazamos ligeramente el encuadre hacia abajo
     * para conservar mejor montañas, valle y paisaje.
     */
        background-position: center 58%;

        overflow: visible;
    }


    .navegacion-productos {
        top: 24px;

        left:
            max(24px,
                calc((100vw - var(--ancho-maximo)) / 2 + 24px));
    }


    .cabecera-visual-productos .cabecera-productos {
        top: 62px;

        width: min(calc(100% - 80px), 720px);
    }


    .cabecera-visual-productos .seccion-etiqueta {
        font-size: 0.76rem;
    }


    .cabecera-visual-productos .cabecera-productos h1 {
        font-size: clamp(2.4rem, 4vw, 3.4rem);
    }


    .cabecera-visual-productos .cabecera-productos>p:last-child {
        font-size: 0.92rem;
    }


    .cabecera-visual-productos .seccion-buscador-productos {
        bottom: 28px;

        width: min(calc(100% - 80px), 760px);
    }


    .cabecera-visual-productos .buscador {
        min-height: 58px;
    }

    .navegacion-catalogo {
        top: 24px;

        left:
            max(24px,
                calc((100vw - var(--ancho-maximo)) / 2 + 24px));
    }


    .buscador-catalogo-superpuesto {
        top: 55%;
        bottom: auto;

        width: min(calc(100% - 80px),
                720px);

        transform:
            translate(-50%, -50%);
    }


    .buscador-catalogo-superpuesto .buscador {
        min-height: 58px;
    }

    .contenedor {
        width: min(calc(100% - 48px), var(--ancho-maximo));
    }

    /* Separación entre la cabecera visual y las categorías */
    .seccion-categorias {
        padding-top: 10px;
    }

    .grilla-categorias {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    .tarjeta-categoria {
        min-height: 170px;
    }

    .tarjeta-categoria img {
        height: 145px;
    }

    .grilla-productos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    .tarjeta-producto {
        padding: 12px;
    }

    .tarjeta-producto-imagen {
        height: 230px;
    }

    .pie-informacion {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .pie-tarjeta-ubicacion {
        grid-column: 1/-1;
    }

    /* =====================================================
   FILTROS - TABLETA / ESCRITORIO
===================================================== */

    .seccion-filtro {
        padding: 16px 18px 17px;

        border:
            1px solid rgba(181, 18, 27, 0.055);

        border-radius: 18px;

        background:
            linear-gradient(90deg,
                rgba(181, 18, 27, 0.035) 0%,
                rgba(216, 167, 46, 0.025) 55%,
                transparent 100%);
    }

    .seccion-filtro-caracteristicas {
        margin-top: 12px;
    }

    .filtro-encabezado {
        margin-bottom: 11px;
    }

    .filtro-linea {
        max-width: none;
    }

}



/* =========================================================
   ESCRITORIO
   4 PRODUCTOS POR FILA
========================================================= */

@media (min-width:1050px) {

    .boton-portada:hover {
        transform:
            translate(-50%, calc(-50% - 2px));

        box-shadow:
            0 14px 30px rgba(181, 18, 27, 0.32);
    }

    .boton-navegacion:hover {
        transform: translateY(-2px);
        border-color: rgba(181, 18, 27, 0.4);
        box-shadow: var(--sombra-media);
    }

    .grilla-categorias {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 22px;
    }

    .tarjeta-categoria {
        min-height: 190px;
    }

    .tarjeta-categoria img {
        height: 165px;
    }

    .tarjeta-categoria:hover {
        transform: translateY(-7px);
        border-color: rgba(181, 18, 27, 0.48);
        background: linear-gradient(145deg, #ffffff 0%, #fff8f5 65%, #ffefed 100%);
        box-shadow: 0 16px 30px rgba(89, 8, 13, 0.16), 0 5px 12px rgba(89, 8, 13, 0.08);
    }

    .tarjeta-categoria:hover::before {
        opacity: 1;
    }

    .tarjeta-categoria:hover img {
        transform: translateY(-2px) scale(1.055);
        filter: drop-shadow(0 6px 7px rgba(89, 8, 13, 0.12));
    }

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

    .tarjeta-producto {
        padding: 14px;
    }

    .tarjeta-producto-imagen {
        height: 270px;
    }

    .tarjeta-producto:hover {
        transform: translateY(-4px);
        border-color: rgba(181, 18, 27, 0.48);
        box-shadow: 0 15px 30px rgba(89, 8, 13, 0.13), 0 4px 10px rgba(89, 8, 13, 0.07);
    }

    .tarjeta-producto-consultar:hover {
        transform: translateY(-2px);

        background:
            linear-gradient(135deg,
                #c91520 0%,
                var(--rojo-principal) 100%);

        box-shadow:
            0 9px 18px rgba(181, 18, 27, 0.24);
    }

    .sugerencia-producto:hover {
        background:
            linear-gradient(145deg,
                #fffafa 0%,
                #fff1f1 100%);
    }

    .sugerencia-producto:hover .sugerencia-producto-nombre {
        color: var(--rojo-profundo);
    }

    .pie-informacion {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
        gap: 20px;
    }

    .pie-tarjeta-ubicacion {
        grid-column: auto;
    }

    .pie-tarjeta {
        transition: transform var(--transicion), box-shadow var(--transicion);
    }

    .pie-tarjeta:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
    }

    .boton-como-llegar:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(181, 18, 27, 0.28);
    }

    /* =====================================================
   FOOTER - COMPACTAR ESPACIO SUPERIOR EN ESCRITORIO
===================================================== */

    .pie-pagina {
        padding-top: 28px;
    }

    /* =====================================================
   FOOTER - IDENTIDAD EN ESCRITORIO
===================================================== */

    .pie-presentacion {
        width: 100%;
        max-width: 920px;

        margin:
            0 auto 20px;
    }

    .pie-logo {
        width: min(100%, 820px);
        height: auto;

        margin: 0 auto 6px;

        object-fit: contain;

        filter:
            drop-shadow(0 10px 20px rgba(0, 0, 0, 0.32));
    }

    .pie-descripcion {
        max-width: 520px;

        margin:
            0 auto 18px;

        font-size: 0.94rem;
    }

    /* =====================================================
   FILTROS - INTERACCIÓN EN ESCRITORIO
===================================================== */

    .filtro-origen:hover,
    .filtro-caracteristica:hover {
        transform: translateY(-2px);

        border-color:
            rgba(181, 18, 27, 0.48);

        background:
            linear-gradient(145deg,
                #ffffff 0%,
                #fff5f3 100%);

        box-shadow:
            0 7px 14px rgba(89, 8, 13, 0.10);
    }


    /* No perder el rojo cuando el filtro activo recibe hover */

    .filtro-origen.activo:hover,
    .filtro-caracteristica.activo:hover {
        color: var(--blanco);

        background:
            linear-gradient(135deg,
                var(--rojo-principal),
                var(--rojo-oscuro));

        border-color:
            var(--rojo-principal);

        box-shadow:
            0 8px 16px rgba(181, 18, 27, 0.24);
    }

}

/* =========================================================
   PANTALLAS MUY PEQUEÑAS
========================================================= */

@media (max-width:370px) {

    .contenedor {
        width: min(calc(100% - 20px), var(--ancho-maximo));
    }

    .grilla-categorias {
        gap: 9px;
    }

    .tarjeta-categoria {
        min-height: 120px;
        padding: 8px;
    }

    .tarjeta-categoria img {
        height: 102px;
    }

    .grilla-productos {
        gap: 8px;
    }

    .tarjeta-producto {
        padding: 8px;
    }

    .tarjeta-producto-imagen {
        height: 155px;
    }
}

/* =========================================================
   ANIMACIONES REDUCIDAS
========================================================= */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}