/* ==========================================================================
   OfertaDelDia — sistema de diseño
   Capa propia sobre Bootstrap 5.3. Todo el color y el espaciado sale de las
   variables de :root, para no repetir el `!important` disperso del sitio viejo.
   ========================================================================== */

:root {
    /* Marca */
    --odd-navy: #0a2a5e;
    --odd-navy-claro: #123a7a;
    --odd-navy-topbar: #0d2b5c;
    --odd-naranja: #f4621f;
    --odd-naranja-oscuro: #d94f11;
    --odd-naranja-suave: #fff1ea;
    --odd-azul-accion: #23408e;
    --odd-azul-accion-oscuro: #1b3273;
    --odd-verde: #17a05a;
    --odd-verde-suave: #e9f7f0;

    /* Neutros */
    --odd-fondo: #f4f6f9;
    --odd-superficie: #ffffff;
    --odd-borde: #e6eaf0;
    --odd-borde-fuerte: #d6dce6;
    --odd-texto: #1b2330;
    --odd-texto-suave: #6b7684;
    --odd-texto-tenue: #98a1ae;

    /* Formas */
    --odd-radio: .5rem;
    --odd-radio-lg: .75rem;
    --odd-sombra: 0 1px 2px rgba(16, 24, 40, .05);
    --odd-sombra-hover: 0 .5rem 1.25rem rgba(16, 24, 40, .1);
}

/* --- Base ---------------------------------------------------------------- */

body {
    background-color: var(--odd-fondo);
    color: var(--odd-texto);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: .9375rem;
    -webkit-font-smoothing: antialiased;
}

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

a:hover {
    color: var(--odd-naranja);
}

.contenedor {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 1rem;
}

.texto-suave { color: var(--odd-texto-suave); }
.texto-tenue { color: var(--odd-texto-tenue); }
.texto-naranja { color: var(--odd-naranja); }
.texto-verde { color: var(--odd-verde); }

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

.btn-odd {
    --bs-btn-padding-y: .5rem;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--odd-radio);
    --bs-btn-font-size: .875rem;
}

.btn-naranja {
    background-color: var(--odd-naranja);
    border-color: var(--odd-naranja);
    color: #fff;
}

.btn-naranja:hover,
.btn-naranja:focus {
    background-color: var(--odd-naranja-oscuro);
    border-color: var(--odd-naranja-oscuro);
    color: #fff;
}

.btn-accion {
    background-color: var(--odd-azul-accion);
    border-color: var(--odd-azul-accion);
    color: #fff;
}

.btn-accion:hover,
.btn-accion:focus {
    background-color: var(--odd-azul-accion-oscuro);
    border-color: var(--odd-azul-accion-oscuro);
    color: #fff;
}

.btn-contorno-claro {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, .55);
    color: #fff;
}

.btn-contorno-claro:hover {
    background-color: rgba(255, 255, 255, .12);
    border-color: #fff;
    color: #fff;
}

.btn-contorno {
    background-color: #fff;
    border: 1px solid var(--odd-borde-fuerte);
    color: var(--odd-texto);
}

.btn-contorno:hover {
    border-color: var(--odd-naranja);
    color: var(--odd-naranja);
}

/* --- Barra superior de beneficios ---------------------------------------- */

.topbar {
    background-color: var(--odd-navy-topbar);
    color: rgba(255, 255, 255, .88);
    font-size: .75rem;
}

.topbar .contenedor {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    min-height: 2.25rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.topbar .contenedor::-webkit-scrollbar { display: none; }

.topbar__item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.topbar__item i {
    font-size: .875rem;
    color: var(--odd-naranja);
}

.topbar__item i.ico-envio { color: #ff5b4a; }
.topbar__item i.ico-tiempo { color: #ffa726; }
.topbar__item i.ico-verificado { color: #d7e2f5; }
.topbar__item i.ico-api { color: #4da3ff; }

.topbar__pais {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}

/* --- Cabecera ------------------------------------------------------------ */

.cabecera {
    background-color: var(--odd-superficie);
    border-bottom: 1px solid var(--odd-borde);
}

.cabecera__fila {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-block: .875rem;
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    flex-shrink: 0;
}

.marca__isotipo {
    width: 2.4rem;
    height: auto;
    flex-shrink: 0;
}

/* Nombre y bajada son bloques: la bajada va debajo, no en la misma línea. */
.marca__nombre {
    display: block;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.015em;
    color: var(--odd-navy);
}

.marca__nombre em {
    font-style: normal;
    color: var(--odd-naranja);
}

.marca__nombre small {
    font-size: .55em;
    font-weight: 700;
    letter-spacing: 0;
}

.marca__bajada {
    display: block;
    font-size: .6875rem;
    font-weight: 400;
    color: var(--odd-texto-suave);
    line-height: 1.2;
    margin-top: .1rem;
}

/* Variante sobre fondo oscuro (pie de página). */
.marca--clara .marca__nombre { color: #fff; }
.marca--clara .marca__bajada { color: rgba(255, 255, 255, .6); }

.buscador {
    flex: 1 1 auto;
    max-width: 44rem;
}

.buscador .form-control {
    border-color: var(--odd-borde-fuerte);
    border-right: 0;
    border-radius: var(--odd-radio) 0 0 var(--odd-radio);
    padding-block: .625rem;
    font-size: .875rem;
}

.buscador .form-control:focus {
    box-shadow: none;
    border-color: var(--odd-naranja);
}

.buscador .btn {
    background-color: var(--odd-naranja);
    border-color: var(--odd-naranja);
    color: #fff;
    border-radius: 0 var(--odd-radio) var(--odd-radio) 0;
    padding-inline: 1.1rem;
}

.buscador .btn:hover {
    background-color: var(--odd-naranja-oscuro);
    border-color: var(--odd-naranja-oscuro);
}

/* Acceso al directorio de tiendas. Reemplaza a los antiguos favoritos, cuenta y
   carrito: el sitio no vende, así que esos accesos prometían un flujo de compra
   que no existe y que ninguna pantalla podía cumplir. */
.cabecera__tiendas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    flex-shrink: 0;
    font-size: .6875rem;
    color: var(--odd-texto-suave);
    text-decoration: none;
}

.cabecera__tiendas i {
    font-size: 1.15rem;
    color: var(--odd-texto);
}

.cabecera__tiendas:hover,
.cabecera__tiendas:hover i {
    color: var(--odd-naranja);
}

/* --- Navegación de categorías -------------------------------------------- */

.nav-categorias {
    background-color: var(--odd-superficie);
    border-bottom: 1px solid var(--odd-borde);
}

/* Sin overflow: un ancestro con overflow distinto de visible recorta los
   desplegables de Bootstrap, que se abren pero quedan invisibles. Si no caben
   en una línea, la barra envuelve. */
.nav-categorias .contenedor {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem;
    overflow: visible;
}

.nav-categorias__todas {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .85rem;
    margin-block: .4rem;
    border: 0;
    border-radius: var(--odd-radio);
    background-color: #eef3fb;
    color: var(--odd-navy);
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.nav-categorias__todas:hover {
    background-color: #e2ebf9;
    color: var(--odd-navy);
}

.nav-categorias__chevron {
    display: grid;
    place-items: center;
    width: 2rem;
    align-self: stretch;
    margin-block: .4rem;
    border: 0;
    border-radius: var(--odd-radio);
    background: transparent;
    color: var(--odd-texto-suave);
    font-size: .7rem;
}

.nav-categorias__chevron:hover { background: #f2f5fa; color: var(--odd-navy); }

.nav-categorias__enlace {
    border: 0;
    background: transparent;
    padding: .7rem .8rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--odd-texto);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.nav-categorias__enlace:hover {
    color: var(--odd-naranja);
    border-bottom-color: var(--odd-naranja);
}

.nav-categorias .dropdown-menu {
    max-height: 70vh;
    overflow-y: auto;
    font-size: .8125rem;
    border-color: var(--odd-borde);
    box-shadow: var(--odd-sombra-hover);
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(120% 90% at 78% 45%, rgba(38, 120, 235, .45) 0%, rgba(10, 42, 94, 0) 60%),
        linear-gradient(115deg, #071f4a 0%, #0a2a5e 45%, #103b7d 100%);
}

/* Trama de circuito */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(120, 180, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 180, 255, .07) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(110% 100% at 70% 50%, #000 25%, transparent 75%);
    pointer-events: none;
}

.hero .contenedor {
    position: relative;
    z-index: 1;
    padding-block: 2.5rem 2.75rem;
}

.hero__titulo {
    font-size: clamp(1.55rem, 2.6vw, 2.05rem);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.01em;
    margin-bottom: .75rem;
}

.hero__titulo span { color: var(--odd-naranja); }

.hero__bajada {
    color: rgba(255, 255, 255, .8);
    font-size: .875rem;
    line-height: 1.6;
    max-width: 30rem;
    margin-bottom: 1.5rem;
}

.hero__ventajas {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    margin-bottom: 1.75rem;
}

.hero__ventaja {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.hero__ventaja > i {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .3);
    color: var(--odd-naranja);
    font-size: .8rem;
}

.hero__ventaja strong {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.25;
}

.hero__ventaja small {
    display: block;
    font-size: .6875rem;
    color: rgba(255, 255, 255, .55);
    line-height: 1.25;
}

.hero__acciones { display: flex; flex-wrap: wrap; gap: .6rem; }

/* --- Escena: dispositivos + tiendas conectadas ---------------------------- */

.escena {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    min-height: 15rem;
}

.escena__resplandor {
    position: absolute;
    left: 20%;
    top: 22%;
    width: 58%;
    height: 62%;
    background: radial-gradient(circle, rgba(64, 156, 255, .38) 0%, rgba(64, 156, 255, 0) 68%);
    filter: blur(6px);
}

/* Líneas de conexión entre los dispositivos y las tarjetas */
.escena__lineas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.escena__linea {
    fill: none;
    stroke: rgba(96, 170, 255, .55);
    stroke-width: 1;
    stroke-dasharray: 4 5;
    animation: fluir 3.5s linear infinite;
}

.escena__nodo { fill: #5fb0ff; }

@keyframes fluir {
    to { stroke-dashoffset: -18; }
}

/* Dispositivos */

.escena__dispositivos {
    position: absolute;
    left: 8%;
    bottom: 12%;
    width: 62%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3%;
    filter: drop-shadow(0 1.25rem 2rem rgba(0, 0, 0, .45));
}

.disp {
    background: #0f2246;
    border-radius: .5rem;
    padding: .18rem;
    flex-shrink: 0;
}

.disp--movil { width: 20%; border-radius: .55rem; }
.disp--laptop { width: 52%; }
.disp--tablet { width: 22%; border-radius: .45rem; }

.disp__pantalla {
    background: #fff;
    border-radius: .3rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.disp--movil .disp__pantalla { aspect-ratio: 9 / 17; }
.disp--laptop .disp__pantalla { aspect-ratio: 16 / 10; }
.disp--tablet .disp__pantalla { aspect-ratio: 3 / 4; }

.disp__base {
    height: .35rem;
    margin: .12rem -6% 0;
    border-radius: 0 0 .35rem .35rem;
    background: linear-gradient(180deg, #16305f, #0d2148);
}

/* Contenido simulado de las pantallas */

.disp__barra {
    height: 14%;
    background: var(--odd-naranja);
    display: flex;
    align-items: center;
    gap: 6%;
    padding-inline: 6%;
}

.disp__barra::before {
    content: "";
    width: 22%;
    height: 32%;
    border-radius: 1px;
    background: rgba(255, 255, 255, .9);
}

.disp__barra::after {
    content: "";
    flex: 1;
    height: 42%;
    border-radius: 2px;
    background: rgba(255, 255, 255, .55);
}

.disp__grilla {
    flex: 1;
    display: grid;
    gap: 4%;
    padding: 5%;
}

.disp--laptop .disp__grilla { grid-template-columns: repeat(4, 1fr); }
.disp--movil .disp__grilla { grid-template-columns: repeat(2, 1fr); }
.disp--tablet .disp__grilla { grid-template-columns: repeat(2, 1fr); }

.disp__grilla span {
    border-radius: 2px;
    background: #eef1f6;
    border-bottom: 3px solid #dfe5ee;
}

.disp__grilla span:nth-child(3n) { border-bottom-color: var(--odd-naranja); }

/* Tarjetas de tienda flotantes */

.escena__tienda {
    position: absolute;
    display: grid;
    place-items: center;
    min-width: 5.5rem;
    padding: .55rem .8rem;
    background: #fff;
    border-radius: .5rem;
    box-shadow: 0 .6rem 1.5rem rgba(2, 12, 32, .4);
    animation: flotar 5.5s ease-in-out infinite;
}

.escena__tienda:nth-of-type(2) { animation-delay: -1.1s; }
.escena__tienda:nth-of-type(3) { animation-delay: -2.2s; }
.escena__tienda:nth-of-type(4) { animation-delay: -3.3s; }
.escena__tienda:nth-of-type(5) { animation-delay: -4.4s; }
.escena__tienda:nth-of-type(6) { animation-delay: -2.8s; }

@keyframes flotar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@media (prefers-reduced-motion: reduce) {
    .escena__tienda,
    .escena__linea { animation: none; }
}

.escena__api {
    position: absolute;
    display: grid;
    place-items: center;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: .55rem;
    background: linear-gradient(150deg, #2b8bff 0%, #0b4bc4 100%);
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 .6rem 1.25rem rgba(2, 12, 32, .45), inset 0 0 0 1px rgba(255, 255, 255, .18);
}

/* Variante para fondo claro (página «Nosotros»).

   Los trazos y sombras de la escena están calculados contra el azul oscuro del
   hero; sobre un fondo casi blanco las líneas se pierden y las sombras negras
   ensucian. Sólo se retocan color y opacidad: la geometría es la misma, así que
   las dos páginas siguen mostrando exactamente el mismo dibujo. */

.escena--claro .escena__resplandor {
    background: radial-gradient(circle, rgba(43, 139, 255, .22) 0%, rgba(43, 139, 255, 0) 68%);
}

.escena--claro .escena__linea { stroke: rgba(20, 92, 190, .5); }
.escena--claro .escena__nodo { fill: #1c6ad6; }

.escena--claro .escena__dispositivos {
    filter: drop-shadow(0 1rem 1.75rem rgba(15, 34, 70, .22));
}

.escena--claro .escena__tienda { box-shadow: 0 .5rem 1.25rem rgba(15, 34, 70, .16); }

.escena--claro .escena__api {
    box-shadow: 0 .5rem 1rem rgba(15, 34, 70, .25), inset 0 0 0 1px rgba(255, 255, 255, .18);
}

/* --- Tarjetas de sección ------------------------------------------------- */

.panel {
    background-color: var(--odd-superficie);
    border: 1px solid var(--odd-borde);
    border-radius: var(--odd-radio-lg);
    box-shadow: var(--odd-sombra);
}

.panel + .panel { margin-top: 1rem; }

.panel--seccion { padding: 1.15rem 1.25rem 1.35rem; }

.seccion-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.seccion-titulo {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.seccion-enlace {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--odd-navy);
    white-space: nowrap;
}

.seccion-enlace:hover { color: var(--odd-naranja); }

/* --- Tiendas conectadas -------------------------------------------------- */

.tiendas {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.25rem;
    flex-wrap: wrap;
}

.tiendas__titulo {
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.2;
}

.tiendas__lista {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex-wrap: wrap;
    flex: 1 1 auto;
    justify-content: space-around;
}

/* --- Marcas (wordmarks sin imágenes) ------------------------------------- */

.marca-tienda {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8125rem;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1;
}

.marca-tienda__punto {
    display: grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    color: #fff;
    font-size: .625rem;
    font-weight: 800;
    flex-shrink: 0;
}

.marca-tienda--grande { font-size: 1rem; }
.marca-tienda--grande .marca-tienda__punto { width: 1.5rem; height: 1.5rem; font-size: .75rem; }

.marca-falabella { color: #7ab800; font-style: italic; font-weight: 600; }
.marca-paris { color: #0a7ec2; }
.marca-ripley { color: #2b2b2b; letter-spacing: .18em; font-weight: 500; }
.marca-mercadolibre { color: #2d3277; }
.marca-lider { color: #0071ce; }
.marca-sodimac { color: #d1121b; }
.marca-abcdin { color: #e0004d; }
.marca-adidas { color: #111; }
.marca-pcfactory { color: #009635; font-weight: 600; }
.marca-decathlon { color: #0082c3; letter-spacing: .06em; font-weight: 600; }
.marca-surprice { color: #e5006d; font-weight: 600; }
/* El amarillo de CAT no tiene contraste suficiente sobre fondo blanco, así que
   el texto va en negro y el color de marca queda sólo en el disco. */
.marca-cat { color: #111; font-weight: 700; letter-spacing: .04em; }
.marca-generica { color: var(--odd-texto); }

/* --- Barra de filtros ---------------------------------------------------- */

.filtros {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-wrap: wrap;
    padding: .35rem;
}

.filtro {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .9rem;
    flex: 1 1 auto;
    min-width: 11rem;
    border-right: 1px solid var(--odd-borde);
}

.filtro:last-of-type { border-right: 0; }

.filtro > i {
    color: var(--odd-texto-suave);
    font-size: 1rem;
}

.filtro__cuerpo { min-width: 0; flex: 1 1 auto; }

.filtro__etiqueta {
    display: block;
    font-size: .6875rem;
    color: var(--odd-texto-suave);
    line-height: 1.1;
}

.filtro__control {
    border: 0;
    padding: 0;
    background: transparent;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--odd-texto);
    width: 100%;
}

.filtro__control:focus { outline: none; box-shadow: none; }

select.filtro__control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 1.1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7684'%3E%3Cpath d='M8 11 3.5 6h9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .1rem center;
    background-size: .7rem;
}

.filtro__precio {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.filtro__precio input {
    width: 5.5rem;
    border: 1px solid var(--odd-borde);
    border-radius: .35rem;
    padding: .15rem .4rem;
    font-size: .75rem;
}

/* --- Barra de filtros de los listados ------------------------------------ */

.barra-filtros {
    display: flex;
    align-items: center;
    padding: .5rem 0;
}

.barra-filtros .form-select {
    font-size: .8125rem;
    border-color: var(--odd-borde-fuerte);
}

.barra-filtros .form-select:focus {
    border-color: var(--odd-naranja);
    box-shadow: none;
}

/* --- Tarjeta de oferta --------------------------------------------------- */

.oferta {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--odd-superficie);
    border: 1px solid var(--odd-borde);
    border-radius: var(--odd-radio-lg);
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease;
}

.oferta:hover {
    box-shadow: var(--odd-sombra-hover);
    transform: translateY(-2px);
}

/* Fila de etiquetas sobre la imagen: descuento naranja + campaña en oscuro. */
.oferta__etiquetas {
    position: absolute;
    top: .5rem;
    left: .5rem;
    right: 2.4rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .25rem;
    min-width: 0;
}

.oferta__descuento {
    flex-shrink: 0;
    padding: .12rem .4rem;
    border-radius: .3rem;
    background: var(--odd-naranja);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.3;
}

.oferta__campana {
    min-width: 0;
    padding: .12rem .45rem;
    border-radius: .3rem;
    background: var(--odd-texto);
    color: #fff;
    font-size: .625rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oferta__favorito,
.oferta__comparar {
    position: absolute;
    top: .4rem;
    right: .4rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--odd-texto-tenue);
    font-size: .95rem;
    line-height: 1;
}

/* Justo debajo de compartir: su alto más una separación mínima. Van apilados y
   no en una barra porque la esquina superior derecha es la única zona de la
   tarjeta que no compite con la foto del producto. */
.oferta__comparar { top: 2.3rem; }

.oferta__favorito:hover,
.oferta__favorito[aria-pressed="true"],
.oferta__comparar:hover,
.oferta__comparar:focus-visible {
    color: var(--odd-naranja);
}

/* La altura es fija: sin `flex: 0 0 auto` + `min-height: 0`, el `min-height: auto`
   por defecto de los ítems flex deja que la imagen estire la caja y se monte
   sobre el título cuando la tarjeta está limitada por la altura de la fila.

   El relleno superior reserva el espacio de la fila de etiquetas para que el
   badge de descuento no tape el producto. */
.oferta__imagen {
    display: grid;
    /* Fila explícita y acotada, por el mismo motivo que en .ficha-imagen: con la
       fila implícita, que se dimensiona por su contenido, el «height: 100%» de
       la imagen no tenía contra qué resolverse y caía en «auto». Una foto
       vertical se dibujaba más alta que la tarjeta y el recorte se la comía por
       arriba y por abajo, que es lo que se veía en las destacadas. */
    grid-template-rows: minmax(0, 1fr);
    place-items: center;
    flex: 0 0 auto;
    height: var(--oferta-alto-imagen, 13.5rem);
    min-height: 0;
    padding: 2.25rem .85rem .65rem;
    background: var(--odd-superficie);
    overflow: hidden;
}

/* `contain` mantiene la relación de aspecto original: la imagen se ve completa
   y nunca se estira ni se recorta, sea vertical (un celular) u horizontal
   (un notebook). */
.oferta__imagen img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

.oferta__sin-imagen {
    font-size: .75rem;
    color: var(--odd-texto-tenue);
}

.oferta__cuerpo {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .5rem .75rem .75rem;
    flex: 1 1 auto;
}

.oferta__titulo {
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.2rem;
}

.oferta__precio-anterior {
    font-size: .75rem;
    color: var(--odd-texto-tenue);
    text-decoration: line-through;
}

.oferta__precio {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--odd-naranja);
    line-height: 1.1;
}

.oferta__ahorro {
    font-size: .75rem;
    font-weight: 600;
    color: var(--odd-verde);
}

.oferta__meta {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .6875rem;
    color: var(--odd-texto-tenue);
}

.oferta__pie {
    padding: 0 .75rem .75rem;
}

.oferta__pie .btn {
    width: 100%;
    font-size: .8125rem;
    font-weight: 600;
    padding-block: .45rem;
    border-radius: var(--odd-radio);
}

/* --- Fila de oferta (Top del día) ---------------------------------------- */

.oferta-fila {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--odd-borde);
}

.oferta-fila:last-child { border-bottom: 0; }

/* Variante en rejilla: tres por fila, sin separadores horizontales. */
.oferta-fila--columna {
    border-bottom: 0;
    align-items: flex-start;
    padding-block: .25rem;
    gap: .6rem;
}

.oferta-fila--columna .oferta-fila__imagen { width: 3.75rem; height: 3.75rem; }

.oferta-fila__imagen {
    position: relative;
    display: grid;
    /* Igual que en la tarjeta y en la ficha: sin la fila explícita, el
       «height: 100%» de la miniatura no resuelve y una foto vertical se sale del
       cuadrado y se monta sobre el texto de al lado.

       Y sin «overflow: hidden», a diferencia de las otras dos: la insignia de
       descuento se coloca en «top: -.3rem; left: -.3rem» para asomar por la
       esquina, y recortar aquí se la comería. Con la fila acotada la imagen ya
       no puede salirse, así que el recorte no aporta nada y sí quitaría. */
    grid-template-rows: minmax(0, 1fr);
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    flex-shrink: 0;
    border-radius: var(--odd-radio);
    background: #fafbfd;
}

.oferta-fila__imagen img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: .3rem;
}

.oferta-fila__descuento {
    position: absolute;
    top: -.3rem;
    left: -.3rem;
    padding: .05rem .35rem;
    border-radius: .3rem;
    background: var(--odd-naranja);
    color: #fff;
    font-size: .625rem;
    font-weight: 700;
}

.oferta-fila__cuerpo { min-width: 0; flex: 1 1 auto; }

.oferta-fila__titulo {
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 .2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

.categoria-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: .85rem .5rem;
    border-radius: var(--odd-radio);
    text-align: center;
    transition: background-color .15s ease;
}

.categoria-tile:hover {
    background-color: #f7f9fc;
    color: inherit;
}

.categoria-tile__icono {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--odd-radio);
    border: 1px solid var(--odd-borde);
    color: var(--odd-navy);
    font-size: 1.15rem;
}

.categoria-tile__nombre {
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.2;
}

.categoria-tile__conteo {
    font-size: .6875rem;
    color: var(--odd-texto-suave);
}

/* --- Cómo funciona ------------------------------------------------------- */

.como-funciona {
    background: #eef3fc;
    border-radius: var(--odd-radio-lg);
    padding: 1.75rem 1.25rem;
}

.como-funciona__titulo {
    text-align: center;
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.paso {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    flex: 1 1 0;
    min-width: 12rem;
}

.paso__icono {
    position: relative;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: #dfe9fb;
    color: var(--odd-navy);
    font-size: 1.15rem;
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .85);
}

.paso__numero {
    position: absolute;
    top: -.25rem;
    left: -.25rem;
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--odd-navy);
    color: #fff;
    font-size: .625rem;
    font-weight: 700;
}

.paso__titulo {
    font-size: .8125rem;
    font-weight: 700;
    margin-bottom: .2rem;
}

.paso__texto {
    font-size: .6875rem;
    color: var(--odd-texto-suave);
    line-height: 1.45;
    margin: 0;
}

.paso-flecha {
    align-self: center;
    color: var(--odd-texto-tenue);
    flex-shrink: 0;
}

/* --- Newsletter y CTA de tiendas ----------------------------------------- */

.newsletter {
    background: linear-gradient(120deg, var(--odd-navy) 0%, var(--odd-navy-claro) 100%);
    color: #fff;
    border-radius: var(--odd-radio-lg);
    padding: 1.5rem;
    height: 100%;
}

.newsletter__titulo { font-size: 1rem; font-weight: 700; margin-bottom: .3rem; }
.newsletter__bajada { font-size: .8125rem; color: rgba(255, 255, 255, .78); margin-bottom: 1rem; }

.newsletter .form-control {
    border: 0;
    border-radius: var(--odd-radio) 0 0 var(--odd-radio);
    font-size: .8125rem;
    padding-block: .55rem;
}

.newsletter .form-control:focus { box-shadow: none; }

.newsletter .btn { border-radius: 0 var(--odd-radio) var(--odd-radio) 0; }

.newsletter__legal { font-size: .6875rem; color: rgba(255, 255, 255, .55); margin: .6rem 0 0; }

.newsletter__sobre {
    display: grid;
    place-items: center;
    font-size: 3.5rem;
    opacity: .95;
}

.cta-tienda {
    background: #eef3fc;
    border-radius: var(--odd-radio-lg);
    padding: 1.5rem;
    height: 100%;
}

.cta-tienda__eyebrow { font-size: .875rem; font-weight: 600; color: var(--odd-texto); }
.cta-tienda__titulo { font-size: 1rem; font-weight: 700; color: var(--odd-navy); margin-bottom: .4rem; }
.cta-tienda__texto { font-size: .8125rem; color: var(--odd-texto-suave); margin-bottom: 1rem; }

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

.pie {
    background: var(--odd-navy);
    color: rgba(255, 255, 255, .72);
    margin-top: 2.5rem;
    padding-block: 2.25rem 1.25rem;
    font-size: .8125rem;
}

.pie__titulo {
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .75rem;
}

.pie a { color: rgba(255, 255, 255, .72); }
.pie a:hover { color: #fff; }

.pie__lista { list-style: none; padding: 0; margin: 0; }
.pie__lista li + li { margin-top: .35rem; }

.pie__legal {
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 1.75rem;
    padding-top: 1rem;
    font-size: .75rem;
    color: rgba(255, 255, 255, .55);
}

/* --- Utilidades varias --------------------------------------------------- */

.chip {
    display: inline-block;
    padding: .2rem .65rem;
    border: 1px solid var(--odd-borde);
    border-radius: 999px;
    background-color: #fff;
    font-size: .8rem;
}

.chip:hover { border-color: var(--odd-naranja); color: var(--odd-naranja); }

.chip--activo {
    background-color: var(--odd-naranja);
    border-color: var(--odd-naranja);
    color: #fff;
    font-weight: 600;
}

.chip--activo:hover { color: #fff; }

.subcategorias { display: flex; flex-wrap: wrap; gap: .4rem; }

.ficha-imagen {
    display: grid;
    /* Una fila explícita y acotada.

       Sin esto la fila es implícita y se dimensiona por su contenido, así que el
       «height: 100%» de la imagen no tiene contra qué resolverse y cae en
       «auto»: una foto de 2331×3150 se dibujaba a 542×732 dentro de una caja de
       590×414 y el recorte se la comía por abajo. Con la fila fija, el
       porcentaje resuelve y «contain» hace su trabajo.

       El «minmax(0, …)» es imprescindible: el mínimo por omisión de una pista de
       grid es «auto», que significa «al menos lo que mida el contenido», y eso
       volvería a estirar la fila hasta los 732px. */
    grid-template-rows: minmax(0, 1fr);
    place-items: center;
    height: 26rem;
    padding: 1.5rem;
    background: var(--odd-superficie);
    border: 1px solid var(--odd-borde);
    border-radius: var(--odd-radio-lg);
    overflow: hidden;
}

.ficha-imagen img {
    display: block;
    width: 100%;
    height: 100%;
    /* Los topes son la red de seguridad por si alguna regla de utilidad vuelve a
       poner «height: auto»: aunque el alto se calcule solo, no puede pasarse. */
    max-width: 100%;
    max-height: 100%;
    /* «contain» y no «cover»: llena la caja hasta donde alcanza sin recortar ni
       deformar el producto. Una foto vertical dejará aire a los lados y una
       horizontal arriba y abajo, que es lo correcto en un catálogo donde cada
       comercio publica con la proporción que quiere. */
    object-fit: contain;
    object-position: center;
}

.ficha-precio .oferta__precio { font-size: 2rem; }

.pagination .page-link {
    color: var(--odd-texto);
    border-color: var(--odd-borde);
    font-size: .8125rem;
}

.pagination .page-item.active .page-link {
    background-color: var(--odd-naranja);
    border-color: var(--odd-naranja);
    color: #fff;
}

/* --- Barra de error de Blazor -------------------------------------------- */

#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 2000;
    padding: .75rem 1.25rem;
    background: #ffe8e8;
    border-top: 1px solid #f5c2c7;
    color: #842029;
}

#blazor-error-ui .reload {
    color: #842029;
    text-decoration: underline;
    font-weight: 600;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .6rem;
}

/* --- Comparador en pantallas pequeñas ------------------------------------- */

@media (max-width: 575.98px) {
    /* El buscador en dos líneas: a 375 px, campo y botón lado a lado dejan un
       campo donde no cabe ni el nombre del producto. */
    .comparar-buscador { flex-wrap: wrap; }
    .comparar-buscador .btn { width: 100%; }

    .comparar-grupo__imagen { width: 3.5rem; height: 3.5rem; }
    .comparar-grupo__titulo { font-size: .875rem; }

    /* La columna «Estado» se oculta, no se aprieta. Es la menos decisiva de las
       cinco, y quitarla deja que comercio, precio y descuento —lo que se viene
       a comparar— quepan sin desplazamiento lateral.

       Se oculta por clase y no por «nth-child»: si mañana cambia el orden de
       las columnas, una regla posicional escondería la equivocada sin avisar. */
    .tabla-comparar { min-width: 0; font-size: .8125rem; }

    .tabla-comparar th.tabla-comparar__col-estado,
    .tabla-comparar td.tabla-comparar__estado { display: none; }

    /* Los anchos se reparten de nuevo, ya sin la columna oculta. */
    .tabla-comparar th.tabla-comparar__col-comercio { width: 34%; }
    .tabla-comparar th.tabla-comparar__col-precio { width: 28%; }
    .tabla-comparar th.tabla-comparar__col-descuento { width: 18%; }
    .tabla-comparar th.tabla-comparar__col-accion { width: 20%; }

    .tabla-comparar th,
    .tabla-comparar td { padding: .5rem .35rem; }

    .comparar-resumen { flex-direction: column; gap: .45rem; }
}

/* --- Aviso de reconexión --------------------------------------------------
   Sustituye la ventana modal por defecto de Blazor («Attempting to
   reconnect…», en inglés y tapando toda la página). Es una pastilla discreta
   abajo al centro que además tarda tres segundos en hacerse visible: la
   mayoría de los cortes —bloquear el teléfono, cambiar de red— se reparan
   antes, y para esos no debe verse nada en absoluto. El sitio queda usable
   detrás: nada de cortinas ni bloqueos. */

.reconexion {
    display: none;
    position: fixed;
    inset: auto 0 1.25rem 0;
    z-index: 2000;
    justify-content: center;
    pointer-events: none;
}

/* Estados que pone Blazor. «failed» y «rejected» quedan ocultos a propósito:
   reconexion.js recarga la página en ese mismo instante, así que cualquier
   cosa que se mostrara sería un parpadeo. */
.reconexion.components-reconnect-show { display: flex; }
.reconexion.components-reconnect-hide,
.reconexion.components-reconnect-failed,
.reconexion.components-reconnect-rejected { display: none; }

.reconexion__pastilla {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    border-radius: 999px;
    background: rgba(27, 35, 48, .92);
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    box-shadow: var(--odd-sombra-hover);
    opacity: 0;
    animation: reconexion-aparecer .3s ease-out 3s forwards;
}

.reconexion__giro {
    width: .9rem;
    height: .9rem;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: reconexion-girar .8s linear infinite;
}

@keyframes reconexion-aparecer {
    to { opacity: 1; }
}

@keyframes reconexion-girar {
    to { transform: rotate(360deg); }
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 991.98px) {
    .cabecera__fila { flex-wrap: wrap; gap: .75rem; }
    .buscador { order: 3; flex-basis: 100%; max-width: none; }
    .cabecera__tiendas { margin-left: auto; }
    .escena { display: none; }
}

@media (max-width: 767.98px) {
    .oferta { --oferta-alto-imagen: 11rem; }
}

@media (max-width: 575.98px) {
    .marca__bajada { display: none; }
    .cabecera__tiendas span { display: none; }
    .filtro { border-right: 0; border-bottom: 1px solid var(--odd-borde); min-width: 100%; }
    .filtro:last-of-type { border-bottom: 0; }
}

/* ==========================================================================
   Panel de administración
   Layout propio: barra lateral fija y contenido desplazable. No comparte la
   cabecera del sitio público para que no se confundan los dos contextos.
   ========================================================================== */

.admin {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
    background: var(--odd-fondo);
}

.admin__lateral {
    display: flex;
    flex-direction: column;
    width: 16rem;
    flex-shrink: 0;
    padding: 1rem .75rem;
    background: var(--odd-navy);
    color: rgba(255, 255, 255, .75);
    position: sticky;
    top: 0;
    height: 100vh;
}

.admin__marca {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .6rem 1.25rem;
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
}

.admin__marca:hover { color: #fff; text-decoration: none; }

.admin__nav {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.admin__enlace {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .6rem;
    border-radius: var(--odd-radio);
    color: rgba(255, 255, 255, .75);
    font-size: .8125rem;
    font-weight: 500;
}

.admin__enlace:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    text-decoration: none;
}

.admin__enlace--activo {
    background: var(--odd-naranja);
    color: #fff;
    font-weight: 600;
}

.admin__enlace--activo:hover { background: var(--odd-naranja-oscuro); }

.admin__enlace--boton {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
}

.admin__pie {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.admin__contenido {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.75rem 1.5rem 3rem;
    max-width: 78rem;
}

.admin__titulo {
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: .25rem;
}

/* Indicadores del panel */

.admin__tarjeta {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    height: 100%;
    padding: 1rem;
    background: var(--odd-superficie);
    border: 1px solid var(--odd-borde);
    border-radius: var(--odd-radio-lg);
}

.admin__dato {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--odd-navy);
}

.admin__etiqueta {
    font-size: .8125rem;
    font-weight: 600;
}

/* Tablas de edición */

.admin__tabla {
    font-size: .8125rem;
    margin-bottom: 0;
}

.admin__tabla thead th {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--odd-texto-suave);
    font-weight: 700;
    border-bottom-width: 1px;
}

.admin__tabla .form-control,
.admin__tabla .form-select {
    font-size: .8125rem;
}

/* Resultados de búsqueda para fijar ofertas */

.admin__resultados {
    display: grid;
    gap: .5rem;
    max-height: 26rem;
    overflow-y: auto;
}

.admin__resultado {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem;
    border: 1px solid var(--odd-borde);
    border-radius: var(--odd-radio);
    background: #fbfcfe;
}

.admin__resultado img {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    flex-shrink: 0;
}

.admin__resultado-cuerpo {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 991.98px) {
    .admin { flex-direction: column; }

    .admin__lateral {
        width: 100%;
        height: auto;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: .25rem;
    }

    .admin__marca { padding-block: .25rem; }
    .admin__nav { flex-direction: row; flex-wrap: wrap; }
    .admin__pie { margin-top: 0; border-top: 0; display: flex; gap: .25rem; }
    .admin__contenido { padding: 1.25rem 1rem 2.5rem; }
}

/* ==========================================================================
   Mega-menús de categorías
   ========================================================================== */

.icono-cat { flex-shrink: 0; }

/* Contenedor común de los dos mega-menús. */
.mega {
    background: var(--odd-superficie);
    color: var(--odd-texto);
    font-size: .8125rem;
}



/* Contenedores desplegables anchos */

.dropdown-menu--mega,
.dropdown-menu--resto {
    border: 0;
    border-radius: var(--odd-radio-lg);
    box-shadow: 0 1.25rem 3rem rgba(16, 24, 40, .18);
    padding: 0;
    margin-top: .35rem;
}

.dropdown-menu--mega {
    width: min(52rem, calc(100vw - 2rem));
    overflow: hidden;
}

.dropdown-menu--categoria {
    /* El ancho lo fija el contenido, no el contenedor: sin el recuadro
       promocional el panel debe encogerse en lugar de dejar un vacío. */
    width: auto;
    max-width: calc(100vw - 2rem);
}

.dropdown-menu--resto {
    max-height: 70vh;
    overflow-y: auto;
    padding: .5rem 0;
    font-size: .8125rem;
}

.dropdown-menu--resto .dropdown-header {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--odd-navy);
    font-weight: 700;
    font-size: .75rem;
}

/* --- Panel doble: Todas las categorías ----------------------------------- */

.mega--todas {
    display: grid;
    grid-template-columns: 15rem 1fr;
    min-height: 24rem;
}

.mega__lista {
    display: flex;
    flex-direction: column;
    padding: .6rem;
    background: #fbfcfe;
    border-right: 1px solid var(--odd-borde);
}

.mega__item {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: .6rem .7rem;
    border: 0;
    border-radius: var(--odd-radio);
    background: transparent;
    color: var(--odd-texto);
    font-size: .8125rem;
    font-weight: 500;
    text-align: left;
}

.mega__item:hover,
.mega__item--activo {
    background: #eaf1fd;
    color: var(--odd-navy);
    font-weight: 600;
    text-decoration: none;
}

.mega__item--activo .mega__item-icono { color: var(--odd-azul-accion); }

.mega__item-icono {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: .5rem;
    background: #fff;
    border: 1px solid var(--odd-borde);
    color: var(--odd-texto-suave);
}

.mega__item-texto { flex: 1 1 auto; min-width: 0; }

.mega__item-flecha { font-size: .7rem; color: var(--odd-texto-tenue); }

.mega__item--pie { margin-top: auto; }

/* Panel derecho */

.mega__panel { padding: 1.5rem 1.6rem; }

.mega__panel-titulo {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--odd-navy);
    margin: 0;
}

.mega__panel-bajada {
    font-size: .8125rem;
    color: var(--odd-texto-suave);
    margin: .1rem 0 1.1rem;
}

.mega__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}

.mega__tarjeta {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .8rem;
    border: 1px solid var(--odd-borde);
    border-radius: var(--odd-radio);
    background: #fff;
    color: var(--odd-texto);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.25;
}

.mega__tarjeta:hover {
    border-color: var(--odd-azul-accion);
    background: #f7faff;
    color: var(--odd-navy);
    text-decoration: none;
}

.mega__tarjeta-icono {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    flex-shrink: 0;
    border-radius: .5rem;
    background: #eaf1fd;
    color: var(--odd-azul-accion);
}

.mega__tarjeta-texto { min-width: 0; }

.mega__ver-todas {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: 1.1rem;
    color: var(--odd-azul-accion);
    font-size: .8125rem;
    font-weight: 600;
}

/* --- Desplegable de una categoría ---------------------------------------- */

.mega--categoria {
    /* El ancho lo decide el contenido: con una sola subcategoría el panel queda
       angosto en lugar de estirarse y dejar un vacío junto al recuadro. El tope
       da cabida a cuatro columnas más el recuadro. */
    width: auto;
    min-width: 20rem;
    max-width: min(76rem, calc(100vw - 2rem));
    padding: 1.4rem 1.6rem 1.6rem;
}

.mega--sin-promo { min-width: 16rem; }

.mega__cabecera {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding-bottom: 1.2rem;
}

.mega__cabecera-icono {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    border-radius: .7rem;
    background: var(--odd-naranja-suave);
    color: var(--odd-naranja);
}

.mega__cabecera-titulo {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--odd-navy);
    margin: 0;
}

.mega__cabecera-bajada {
    font-size: .8125rem;
    color: var(--odd-texto-suave);
    margin: 0;
}

.mega__cuerpo {
    display: grid;
    grid-template-columns: auto 17rem;
    gap: 1.5rem;
    align-items: start;
}

/* Flex y no una rejilla de fracciones: `1fr` estiraba cada columna hasta llenar
   el contenedor, que es lo que dejaba el hueco entre la lista y el recuadro.

   `nowrap` es deliberado: las columnas van siempre una al lado de la otra. Con
   `wrap`, en cuanto el contenido superaba el ancho máximo, la segunda columna
   caía debajo y había que desplazarse para verla. */
.mega__columnas {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.75rem;
    padding-right: 1.5rem;
    border-right: 1px solid var(--odd-borde);
}

/* Ancho fijo: sin `flex-grow` ni `flex-shrink`, N columnas ocupan exactamente
   N anchos y el panel se dimensiona en consecuencia. Las etiquetas largas
   parten en dos líneas dentro de su columna. */
.mega__columna {
    flex: 0 0 11.5rem;
    min-width: 0;
}

.mega__columna-titulo {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .5rem;
    font-size: .875rem;
    font-weight: 700;
    color: var(--odd-navy);
}

.mega__columna-titulo--hombre { color: var(--odd-azul-accion); }
.mega__columna-titulo--mujer { color: #e0004d; }

.mega__columna-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega__columna-lista a {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .5rem .4rem 0;
    color: var(--odd-texto);
    font-size: .8125rem;
}

.mega__columna-lista a span {
    flex: 1 1 auto;
    min-width: 0;
}

.mega__columna-lista a i {
    font-size: .7rem;
    color: var(--odd-texto-tenue);
}

.mega__columna-lista a:hover {
    color: var(--odd-naranja);
    text-decoration: none;
}

.mega__columna-lista a:hover i { color: var(--odd-naranja); }

/* Tarjeta promocional */

.mega__promo {
    position: relative;
    overflow: hidden;
    padding: 1.1rem;
    border-radius: var(--odd-radio-lg);
    background: linear-gradient(150deg, #fff6f1 0%, #fdece2 100%);
}

.mega__promo-tag {
    color: var(--odd-naranja);
    font-size: 1.15rem;
}

.mega__promo-titulo {
    margin-top: .5rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--odd-texto);
    line-height: 1.2;
}

.mega__promo-categoria {
    font-size: .95rem;
    font-weight: 800;
    color: var(--odd-naranja);
    line-height: 1.2;
}

.mega__promo-texto {
    margin: .4rem 0 .9rem;
    font-size: .75rem;
    color: var(--odd-texto-suave);
}

/* Todo lo que no sea el arte se eleva un plano. Sin esto manda el orden del
   documento, y el arte —que va al final— acaba encima del texto. */
.mega__promo > *:not(.mega__promo-arte) {
    position: relative;
    z-index: 1;
}

.mega__promo-arte {
    position: absolute;
    right: -.75rem;
    bottom: -1rem;
    z-index: 0;
    color: rgba(244, 98, 31, .22);
    pointer-events: none;
}

/* Variante con imagen del panel.

   El icono es un trazo translúcido y se permite que asome fuera de la tarjeta;
   una fotografía no; queda dentro, con margen, y algo atenuada para que el
   texto que va encima siga legible sea cual sea la imagen que suban. */
.mega__promo-arte--imagen {
    right: .5rem;
    bottom: .5rem;
    /* Techo relativo a la tarjeta: una imagen muy ancha no puede empujar ni
       desbordar por mucho que mida el original. */
    max-width: 60%;
    max-height: 60%;
}

.mega__promo-arte--imagen .mega__promo-imagen {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    opacity: .65;
}

.mega__promo-sello {
    position: absolute;
    /* Relativo a la tarjeta desde que salió del arte. Los valores equivalen a
       donde quedaba antes, para no mover el sello del diseño. */
    right: .85rem;
    bottom: .4rem;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--odd-naranja);
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 991.98px) {
    .dropdown-menu--mega,
    .dropdown-menu--categoria { width: calc(100vw - 2rem); }

    .mega--todas { grid-template-columns: 1fr; min-height: 0; }

    .mega__lista {
        flex-direction: row;
        flex-wrap: wrap;
        border-right: 0;
        border-bottom: 1px solid var(--odd-borde);
    }

    .mega__item { width: auto; }
    .mega__item-flecha { display: none; }

    .mega__cuerpo { grid-template-columns: 1fr; }

    .mega__columnas {
        flex-wrap: wrap;
        padding-right: 0;
        border-right: 0;
        border-bottom: 1px solid var(--odd-borde);
        padding-bottom: 1rem;
    }
}

@media (max-width: 575.98px) {
    .mega__grid { grid-template-columns: 1fr; }
    .mega__promo { display: none; }
}

/* ==========================================================================
   Galería de medios del panel y bloques personalizados
   ========================================================================== */

.admin__medios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: .85rem;
}

.admin__medio {
    margin: 0;
    padding: .6rem;
    border: 1px solid var(--odd-borde);
    border-radius: var(--odd-radio);
    background: #fff;
    font-size: .75rem;
}

.admin__medio-vista {
    display: grid;
    place-items: center;
    height: 5.5rem;
    margin-bottom: .5rem;
    border-radius: .4rem;
    /* Cuadrícula: deja ver la transparencia de los PNG y SVG. */
    background-color: #fafbfd;
    background-image:
        linear-gradient(45deg, #eef1f6 25%, transparent 25%, transparent 75%, #eef1f6 75%),
        linear-gradient(45deg, #eef1f6 25%, transparent 25%, transparent 75%, #eef1f6 75%);
    background-size: 14px 14px;
    background-position: 0 0, 7px 7px;
}

.admin__medio-vista img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

.admin__medio-nombre {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Bloques creados desde el panel -------------------------------------- */

.banner-personalizado {
    overflow: hidden;
    padding: 0;
}

.banner-personalizado a { display: block; color: inherit; }
.banner-personalizado a:hover { text-decoration: none; }

.banner-personalizado__cuerpo {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.banner-personalizado__cuerpo img {
    width: 100%;
    max-height: 13rem;
    object-fit: cover;
}

.banner-personalizado__texto {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: 1rem 1.25rem;
    flex-shrink: 0;
}

.banner-personalizado__titulo {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--odd-navy);
}

@media (max-width: 767.98px) {
    .banner-personalizado__cuerpo { flex-direction: column; align-items: stretch; gap: 0; }
}

/* Recuadro promocional: sin él, las columnas ocupan todo el ancho. */
.mega__cuerpo--sin-promo { grid-template-columns: auto; }

.mega__cuerpo--sin-promo .mega__columnas {
    padding-right: 0;
    border-right: 0;
}

.mega__promo-imagen {
    width: 8.5rem;
    height: auto;
    max-height: 7rem;
    object-fit: contain;
}

/* Fila desplegable con la configuración del recuadro promocional. */
.admin__promo-fila > td {
    background: #f7f9fd;
    border-top: 0;
}

.admin__promo {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: .5rem .25rem;
}

.admin__promo-vista {
    display: grid;
    place-items: center;
    width: 7rem;
    height: 6rem;
    flex-shrink: 0;
    border-radius: var(--odd-radio);
    background: linear-gradient(150deg, #fff6f1 0%, #fdece2 100%);
    color: var(--odd-naranja);
}

.admin__promo-vista img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
}

.admin__promo-campos { flex: 1 1 auto; min-width: 0; }

@media (max-width: 767.98px) {
    .admin__promo { flex-direction: column; }
    .admin__promo-vista { width: 100%; }
}

/* Enlace trampa para robots: invisible y sin área de clic para una persona.
   No se usa display:none porque algunos rastreadores lo descartan. */
.trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
}

/* Continuación de un grupo: mantiene la altura del encabezado para que las
   columnas del mismo grupo arranquen alineadas, sin repetir el título. */
.mega__columna-titulo--hueco {
    visibility: hidden;
}

/* --- Carrusel de bloques de ofertas -------------------------------------- */
/* La pista lleva todos los bloques uno junto a otro y se desplaza con
   translateX. Se anima la transformación y no la posición para que el navegador
   pueda componer el movimiento sin recalcular el diseño en cada cuadro. */

.carrusel {
    position: relative;
}

.carrusel__ventana {
    overflow: hidden;
}

.carrusel__pista {
    display: flex;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

.carrusel__slide {
    flex: 0 0 100%;
    min-width: 0;
}

.carrusel__flecha {
    position: absolute;
    top: calc(50% - 2rem);
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--odd-borde-fuerte);
    border-radius: 50%;
    background-color: var(--odd-superficie);
    box-shadow: var(--odd-sombra-hover);
    color: var(--odd-texto);
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0;
    transition: opacity .2s ease, background-color .15s ease, color .15s ease;
}

/* Las flechas aparecen al acercarse; en pantallas táctiles quedan siempre
   visibles porque no hay hover que las revele. */
.carrusel:hover .carrusel__flecha,
.carrusel:focus-within .carrusel__flecha {
    opacity: 1;
}

.carrusel__flecha:hover,
.carrusel__flecha:focus-visible {
    background-color: var(--odd-naranja);
    border-color: var(--odd-naranja);
    color: #fff;
    opacity: 1;
}

.carrusel__flecha--anterior {
    left: -.75rem;
}

.carrusel__flecha--siguiente {
    right: -.75rem;
}

.carrusel__puntos {
    display: flex;
    justify-content: center;
    gap: .375rem;
    margin-top: .875rem;
}

.carrusel__punto {
    width: .5rem;
    height: .5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--odd-borde-fuerte);
    transition: background-color .2s ease, width .2s ease;
}

.carrusel__punto:hover {
    background-color: var(--odd-texto-tenue);
}

.carrusel__punto--activo {
    width: 1.25rem;
    border-radius: .25rem;
    background-color: var(--odd-naranja);
}

@media (max-width: 991.98px) {
    .carrusel__flecha {
        opacity: 1;
    }

    .carrusel__flecha--anterior {
        left: .25rem;
    }

    .carrusel__flecha--siguiente {
        right: .25rem;
    }
}

/* Con movimiento reducido el carrusel salta en vez de deslizarse; el avance
   automático ya viene desactivado desde carrusel.js. */
@media (prefers-reduced-motion: reduce) {
    .carrusel__pista {
        transition: none;
    }
}

/* --- Ranura: una posición de la grilla con sus relevos ------------------- */
/* Todas las opciones se apilan en la misma celda de un grid de 1x1 y sólo la
   activa es visible. Se usa visibility además de opacity para que las ocultas
   no reciban clics ni foco al tabular, cosa que opacity sola no impide. */

.ranura {
    display: grid;
    height: 100%;
}

.ranura__opcion {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s;
}

.ranura__opcion--activa {
    opacity: 1;
    visibility: visible;
}

/* Un carrusel de un solo bloque conserva las ranuras pero no tiene pasos: se
   le quita el espacio que ocupaban los puntos. */
.carrusel--sin-pasos .carrusel__ventana {
    overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
    .ranura__opcion {
        transition: none;
    }
}

/* --- Panel de administración: sección como tarjeta ----------------------- */
/* Los parámetros de una sección son de naturalezas muy distintas: textos
   largos, números de dos dígitos y un interruptor. En una tabla esa mezcla
   obliga a columnas tan estrechas que no cabe el rótulo de cada campo y el
   administrador termina adivinando. La tarjeta le da a cada campo su etiqueta
   y su espacio. */

.seccion-admin {
    background-color: var(--odd-superficie);
    border: 1px solid var(--odd-borde);
    border-radius: var(--odd-radio-lg);
    box-shadow: var(--odd-sombra);
    margin-bottom: 1rem;
    padding: 1rem 1.125rem 1.125rem;
}

.seccion-admin__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    border-bottom: 1px solid var(--odd-borde);
    padding-bottom: .75rem;
    margin-bottom: 1rem;
}

.seccion-admin__nombre {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.seccion-admin__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    margin-top: .25rem;
}

.seccion-admin__meta code {
    color: var(--odd-texto-suave);
    font-size: .75rem;
}

.seccion-admin__identidad {
    min-width: 0;
}

.seccion-admin__acciones {
    display: flex;
    align-items: center;
    gap: .625rem;
    flex-shrink: 0;
}

/* auto-fit reparte lo que haya: en pantalla ancha los campos van en una fila y
   al angostarse bajan solos, sin media queries por cada corte. */
.seccion-admin__campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
    gap: .875rem 1rem;
}

/* min-width: 0 evita que un input o un select con contenido largo estire su
   columna del grid y descuadre toda la fila. */
.campo {
    min-width: 0;
}

.campo--ancho {
    grid-column: span 2;
}

.campo--completo {
    grid-column: 1 / -1;
}

.campo__rotulo {
    display: block;
    margin-bottom: .25rem;
    color: var(--odd-texto);
    font-size: .8125rem;
    font-weight: 600;
}

.campo__ayuda {
    margin: .25rem 0 0;
    color: var(--odd-texto-suave);
    font-size: .75rem;
    line-height: 1.35;
}

.seccion-admin__grupo {
    border: 1px solid var(--odd-borde);
    border-radius: var(--odd-radio);
    background-color: var(--odd-fondo);
    margin-top: 1rem;
    padding: .875rem 1rem 1rem;
}

/* La leyenda de un fieldset es de ancho automático por defecto; se fuerza a
   ocupar la línea para que la insignia de estado quede a su lado y no debajo. */
.seccion-admin__grupo-titulo {
    float: none;
    width: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .25rem;
    padding: 0;
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--odd-texto-suave);
}

.seccion-admin__resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem .875rem;
    border-top: 1px dashed var(--odd-borde-fuerte);
    margin-top: .875rem;
    padding-top: .625rem;
    color: var(--odd-texto-suave);
    font-size: .8125rem;
}

/* Separadores entre los datos del resumen, sin escribirlos en el marcado. */
.seccion-admin__resumen > span + span::before {
    content: "·";
    margin-right: .875rem;
    color: var(--odd-texto-tenue);
}

@media (max-width: 575.98px) {
    .campo--ancho {
        grid-column: 1 / -1;
    }

    .seccion-admin__acciones {
        width: 100%;
        justify-content: space-between;
    }
}

/* --- Dashboard de estadísticas ------------------------------------------ */

.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .75rem;
}

.kpi {
    background-color: var(--odd-superficie);
    border: 1px solid var(--odd-borde);
    border-radius: var(--odd-radio-lg);
    box-shadow: var(--odd-sombra);
    padding: .875rem 1rem;
}

.kpi__titulo {
    color: var(--odd-texto-suave);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.kpi__valor {
    margin-top: .25rem;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
    /* Las cifras cambian de ancho al actualizarse y la tarjeta daría saltos. */
    font-variant-numeric: tabular-nums;
}

.kpi__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem .5rem;
    margin-top: .25rem;
    font-size: .75rem;
}

.kpi__variacion {
    display: inline-flex;
    align-items: center;
    gap: .125rem;
    border-radius: 1rem;
    padding: .0625rem .375rem;
    font-weight: 600;
}

/* Sube y baja se distinguen también por la flecha, no sólo por el color:
   con daltonismo rojo-verde el color solo no informa nada. */
.kpi__variacion--sube {
    background-color: var(--odd-verde-suave);
    color: var(--odd-verde);
}

.kpi__variacion--baja {
    background-color: var(--odd-naranja-suave);
    color: var(--odd-naranja-oscuro);
}

/* --- Gráfico de la serie --- */

.grafico__eje,
.grafico__leyenda {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1rem;
    color: var(--odd-texto-suave);
    font-size: .75rem;
}

.grafico__leyenda {
    justify-content: flex-start;
    margin-top: .5rem;
}

.grafico svg {
    width: 100%;
    height: 15rem;
}

.grafico__rejilla {
    stroke: var(--odd-borde);
    stroke-width: 1;
    /* vector-effect evita que preserveAspectRatio="none" engorde los trazos
       al estirar el viewBox al ancho del panel. */
    vector-effect: non-scaling-stroke;
}

.grafico__linea {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.grafico__linea--salidas { stroke: var(--odd-naranja); }
.grafico__linea--fichas { stroke: var(--odd-azul-accion); }
.grafico__linea--visitantes { stroke: var(--odd-texto-tenue); }

.grafico__clave {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
}

.grafico__clave::before {
    content: "";
    width: .75rem;
    height: .1875rem;
    border-radius: .125rem;
}

.grafico__clave--salidas::before { background-color: var(--odd-naranja); }
.grafico__clave--fichas::before { background-color: var(--odd-azul-accion); }
.grafico__clave--visitantes::before { background-color: var(--odd-texto-tenue); }

/* --- Embudo --- */

.embudo {
    /* Las cifras del embudo se comparan entre sí; alinearlas a la misma
       cuadrícula numérica evita que un valor de cinco dígitos parezca mayor
       sólo por ocupar más ancho. */
    font-variant-numeric: tabular-nums;
}

.embudo__paso + .embudo__paso {
    margin-top: .875rem;
}

.embudo__cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}

.embudo__etiqueta {
    font-size: .8125rem;
    font-weight: 600;
}

.embudo__valor {
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.embudo__barra {
    height: .5rem;
    border-radius: .25rem;
    background-color: var(--odd-fondo);
    margin-top: .25rem;
    overflow: hidden;
}

.embudo__relleno {
    height: 100%;
    border-radius: .25rem;
    background-color: var(--odd-naranja);
}

.embudo__paso-tasa {
    margin-top: .1875rem;
    color: var(--odd-texto-suave);
    font-size: .75rem;
}

/* --- Barra de comparación en tablas --- */

.barra {
    height: .375rem;
    border-radius: .1875rem;
    background-color: var(--odd-fondo);
    overflow: hidden;
}

.barra__relleno {
    height: 100%;
    border-radius: .1875rem;
    background-color: var(--odd-azul-accion);
}

/* --- Listas de ranking y segmentos --- */

.lista-ranking {
    margin: 0;
    padding-left: 1.25rem;
}

.lista-ranking li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: .25rem 0;
    font-size: .875rem;
}

.lista-ranking li + li {
    border-top: 1px solid var(--odd-borde);
}

.segmentos {
    margin: 0;
    padding: 0;
    list-style: none;
}

.segmento + .segmento {
    margin-top: .625rem;
}

.segmento__fila {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .1875rem;
    font-size: .8125rem;
}

.segmento__etiqueta {
    /* Un origen puede ser un dominio largo y empujaría la cifra fuera. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.segmento__valor {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* Los títulos de producto son larguísimos; se recortan a un ancho sensato y el
   completo queda en el title de la celda. */
.admin__celda-larga {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Bloque de contacto de la portada ----------------------------------- */

.contacto-cta {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    border-radius: var(--odd-radio-lg);
    background-color: var(--odd-navy);
    color: #fff;
    padding: 1.5rem;
}

.contacto-cta__texto {
    flex: 1 1 auto;
    min-width: 0;
}

.contacto-cta__titulo {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
}

.contacto-cta__bajada {
    margin: .5rem 0 .875rem;
    color: rgba(255, 255, 255, .8);
    font-size: .875rem;
}

.contacto-cta__datos {
    list-style: none;
    margin: 0 0 1.125rem;
    padding: 0;
    font-size: .875rem;
}

.contacto-cta__datos li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .1875rem 0;
}

.contacto-cta__datos i {
    color: var(--odd-naranja);
}

.contacto-cta__datos a {
    color: #fff;
    text-decoration: none;
}

.contacto-cta__datos a:hover {
    text-decoration: underline;
}

.contacto-cta__icono {
    flex: 0 0 auto;
    font-size: 3.5rem;
    /* Decorativo: no debe competir con el texto ni con el botón. */
    color: rgba(255, 255, 255, .18);
}

@media (max-width: 575.98px) {
    .contacto-cta__icono {
        display: none;
    }
}

/* --- Modal propio -------------------------------------------------------- */
/* Se dibuja aquí en vez de usar el JS de Bootstrap para que el estado del
   formulario —enviando, enviado, con error— viva en Blazor, que es quien lo
   conoce. */

.modal-fondo {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: rgba(11, 22, 44, .55);
    overflow-y: auto;
}

.modal-caja {
    width: 100%;
    max-width: 34rem;
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    border-radius: var(--odd-radio-lg);
    background-color: var(--odd-superficie);
    box-shadow: 0 1.5rem 3rem rgba(16, 24, 40, .25);
}

.modal-caja__cabecera,
.modal-caja__pie {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem 1.25rem;
}

.modal-caja__cabecera {
    justify-content: space-between;
    border-bottom: 1px solid var(--odd-borde);
}

.modal-caja__titulo {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

/* Sólo el cuerpo se desplaza: la cabecera y los botones quedan siempre a la
   vista, que es lo que hace usable un formulario largo en un móvil. */
.modal-caja__cuerpo {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.25rem;
}

.modal-caja__pie {
    justify-content: flex-end;
    border-top: 1px solid var(--odd-borde);
    background-color: var(--odd-fondo);
    border-radius: 0 0 var(--odd-radio-lg) var(--odd-radio-lg);
}

.campo__error {
    display: block;
    margin-top: .1875rem;
    color: var(--odd-naranja-oscuro);
    font-size: .75rem;
}

.contacto-exito {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: .875rem;
    border-radius: 50%;
    background-color: var(--odd-verde-suave);
    color: var(--odd-verde);
    font-size: 1.75rem;
}

/* Señuelo antispam. No usa display:none ni type="hidden" a propósito: se
   esconde del ojo humano pero sigue siendo un campo de texto normal en el HTML,
   que es justo lo que un robot rellena. */
.campo-senuelo {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Bandeja de consultas del admin ------------------------------------- */
/* Cada consulta es un <details>: se despliega sin JavaScript y el navegador se
   encarga del estado abierto/cerrado. */

.contactos {
    /* Con muchas consultas la página se haría interminable; el desplazamiento
       propio deja el resto del panel accesible. */
    max-height: 32rem;
    overflow-y: auto;
}

.contacto {
    border: 1px solid var(--odd-borde);
    border-radius: var(--odd-radio);
    background-color: var(--odd-superficie);
}

.contacto + .contacto {
    margin-top: .5rem;
}

/* Una consulta sin leer se marca con una banda, no sólo con color de fondo:
   se distingue igual en una pantalla mal calibrada o impresa. */
.contacto--nuevo {
    border-left: 3px solid var(--odd-naranja);
}

.contacto__resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem .875rem;
    padding: .625rem .875rem;
    cursor: pointer;
    font-size: .875rem;
    list-style: none;
}

/* El triángulo por defecto de <summary> desalinea la fila en Safari. */
.contacto__resumen::-webkit-details-marker {
    display: none;
}

.contacto__resumen::before {
    content: "\F285";
    font-family: "bootstrap-icons";
    color: var(--odd-texto-tenue);
    font-size: .75rem;
    transition: transform .15s ease;
}

.contacto[open] .contacto__resumen::before {
    transform: rotate(90deg);
}

.contacto__quien {
    min-width: 9rem;
}

.contacto__asunto {
    flex: 1 1 12rem;
    min-width: 0;
    color: var(--odd-texto-suave);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.contacto__cuerpo {
    border-top: 1px solid var(--odd-borde);
    padding: .875rem;
}

.contacto__datos {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem 1.25rem;
    margin-bottom: .625rem;
    font-size: .8125rem;
}

.contacto__mensaje {
    /* El mensaje llega con los saltos de línea que escribió el visitante. */
    white-space: pre-wrap;
    border-left: 3px solid var(--odd-borde-fuerte);
    padding-left: .875rem;
    margin-bottom: .875rem;
    font-size: .875rem;
}

/* --- Ficha de tienda del directorio -------------------------------------- */

.tienda-ficha {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    height: 100%;
    min-height: 8.5rem;
    padding: 1.25rem 1rem 1rem;
    border: 1px solid var(--odd-borde);
    border-radius: var(--odd-radio-lg);
    background-color: var(--odd-superficie);
    box-shadow: var(--odd-sombra);
    color: var(--odd-texto);
    text-align: center;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.tienda-ficha:hover,
.tienda-ficha:focus-visible {
    border-color: var(--odd-borde-fuerte);
    box-shadow: var(--odd-sombra-hover);
    transform: translateY(-2px);
    color: var(--odd-texto);
}

/* El logo se centra en un alto fijo para que las fichas queden alineadas
   aunque los wordmarks tengan proporciones muy distintas. */
.tienda-ficha__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
}

.tienda-ficha__datos {
    display: flex;
    flex-direction: column;
    gap: .0625rem;
    font-size: .8125rem;
    line-height: 1.3;
}

.tienda-ficha__descuento {
    position: absolute;
    top: .5rem;
    left: .5rem;
    border-radius: 1rem;
    padding: .125rem .5rem;
    background-color: var(--odd-naranja);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
}

/* --- Panel de administración plegable ------------------------------------ */
/* Se apoya en <details>/<summary>: el navegador guarda el estado abierto o
   cerrado y funciona sin JavaScript. */

.seccion-admin--plegable {
    padding: 0;
}

.seccion-admin__resumen-plegable {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: 1rem 1.125rem;
    cursor: pointer;
    /* El triángulo por defecto se sustituye por un chevron que rota. */
    list-style: none;
}

.seccion-admin__resumen-plegable::-webkit-details-marker {
    display: none;
}

.seccion-admin__resumen-plegable::before {
    content: "\F285";
    font-family: "bootstrap-icons";
    flex-shrink: 0;
    color: var(--odd-texto-tenue);
    font-size: .8125rem;
    transition: transform .15s ease;
}

.seccion-admin--plegable[open] > .seccion-admin__resumen-plegable::before {
    transform: rotate(90deg);
}

.seccion-admin--plegable[open] > .seccion-admin__resumen-plegable {
    border-bottom: 1px solid var(--odd-borde);
}

.seccion-admin__resumen-plegable:hover {
    background-color: var(--odd-fondo);
}

/* Dentro de un summary, la identidad es un span y no un div: el elemento no
   admite contenido de bloque en todos los navegadores. */
.seccion-admin__resumen-plegable .seccion-admin__identidad {
    display: block;
    min-width: 0;
}

.seccion-admin__resumen-plegable .seccion-admin__nombre {
    display: block;
    font-size: 1rem;
    font-weight: 600;
}

.seccion-admin__resumen-plegable .seccion-admin__meta {
    display: block;
    margin-top: .125rem;
}

/* El contenido del panel recupera el relleno que se le quitó al contenedor. */
.seccion-admin--plegable > *:not(summary) {
    margin-left: 1.125rem;
    margin-right: 1.125rem;
}

.seccion-admin--plegable > *:not(summary):first-of-type {
    margin-top: 1rem;
}

.seccion-admin--plegable > *:not(summary):last-child {
    margin-bottom: 1.125rem;
}


/* --- Modal de contacto: dos columnas ------------------------------------- */
/* El panel lateral no es decoración: sostiene los datos de contacto mientras el
   formulario ocupa la atención. Quien prefiere escribir desde su propio correo
   los tiene a la vista sin cerrar la ventana. */

.modal-caja--contacto {
    max-width: 52rem;
    flex-direction: row;
    overflow: hidden;
}

.contacto-modal__lateral {
    flex: 0 0 15rem;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem;
    background-color: var(--odd-navy);
    color: #fff;
}

.contacto-modal__emblema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .12);
    font-size: 1.4rem;
}

.contacto-modal__lateral-titulo {
    margin: 0 0 .5rem;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
}

.contacto-modal__lateral-texto {
    margin: 0 0 1.5rem;
    color: rgba(255, 255, 255, .75);
    font-size: .875rem;
    line-height: 1.5;
}

.contacto-modal__datos {
    list-style: none;
    margin: 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, .15);
    font-size: .8125rem;
}

.contacto-modal__datos li {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: .5rem 0;
}

.contacto-modal__datos i {
    flex-shrink: 0;
    margin-top: .125rem;
    color: rgba(255, 255, 255, .6);
}

.contacto-modal__datos span {
    min-width: 0;
    /* La dirección de correo puede ser larga y el panel es angosto. */
    overflow-wrap: anywhere;
}

.contacto-modal__datos strong {
    display: block;
    font-weight: 600;
}

.contacto-modal__datos li strong + * ,
.contacto-modal__datos li > span:not(:has(strong)) {
    color: rgba(255, 255, 255, .7);
}

.contacto-modal__datos a {
    color: #fff;
    text-decoration: none;
}

.contacto-modal__datos a:hover {
    text-decoration: underline;
}

/* --- Columna del formulario --- */

.contacto-modal__cuerpo {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Sólo esta columna se desplaza: el panel lateral queda fijo. */
    overflow-y: auto;
}

.contacto-modal__cerrar {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: var(--odd-texto-suave);
    font-size: .95rem;
}

.contacto-modal__cerrar:hover {
    background-color: var(--odd-fondo);
    color: var(--odd-texto);
}

.contacto-modal__cabecera {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: 1.75rem 1.75rem 0;
}

.contacto-modal__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--odd-radio);
    background-color: var(--odd-azul-accion);
    color: #fff;
    font-size: 1.15rem;
}

.contacto-modal__titulo {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
}

.contacto-modal__bajada {
    margin: .25rem 0 0;
    color: var(--odd-texto-suave);
    font-size: .8125rem;
}

.contacto-modal__campos {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 1.75rem;
}

.contacto-modal__legal {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin: 0;
    color: var(--odd-texto-suave);
    font-size: .75rem;
}

.contacto-modal__pie {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: auto;
    padding: 1rem 1.75rem;
    border-top: 1px solid var(--odd-borde);
}

.contacto-modal__exito {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    padding: 3rem 1.75rem;
    text-align: center;
}

/* --- Campo con icono dentro --- */

.campo-icono {
    position: relative;
}

.campo-icono > i {
    position: absolute;
    top: 50%;
    left: .75rem;
    transform: translateY(-50%);
    /* El icono no debe robarle el clic al campo. */
    pointer-events: none;
    color: var(--odd-texto-tenue);
    font-size: .95rem;
}

.campo-icono .form-control {
    padding-left: 2.375rem;
}

/* --- Contador del mensaje --- */

.campo-contador {
    position: relative;
}

.campo-contador .form-control {
    /* Espacio inferior para que el texto no pase por debajo de la cifra. */
    padding-bottom: 1.5rem;
    resize: vertical;
}

.campo-contador__cifra {
    position: absolute;
    right: .75rem;
    bottom: .5rem;
    pointer-events: none;
    color: var(--odd-texto-tenue);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 767.98px) {
    /* En móvil el panel lateral pasa a ser una cabecera compacta: en columna
       ocuparía media pantalla antes de llegar al primer campo. */
    .modal-caja--contacto {
        flex-direction: column;
    }

    .contacto-modal__lateral {
        flex: 0 0 auto;
        padding: 1.25rem 1.5rem;
    }

    .contacto-modal__emblema,
    .contacto-modal__lateral-texto,
    .contacto-modal__datos {
        display: none;
    }

    .contacto-modal__lateral-titulo {
        margin: 0;
        font-size: 1.05rem;
    }
}

/* --- Ficha de tienda del mantenedor -------------------------------------- */
/* La ficha entera es el botón que alterna el estado: un interruptor pequeño en
   una esquina obligaría a apuntar, y aquí el blanco es toda la tarjeta. */

.tienda-admin {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    height: 100%;
    min-height: 9.5rem;
    padding: 2rem 1rem 1rem;
    border: 1px solid var(--odd-borde);
    border-radius: var(--odd-radio-lg);
    background-color: var(--odd-superficie);
    box-shadow: var(--odd-sombra);
    color: var(--odd-texto);
    text-align: center;
    transition: border-color .15s ease, box-shadow .15s ease, filter .15s ease, opacity .15s ease;
}

.tienda-admin:hover:not(:disabled),
.tienda-admin:focus-visible {
    border-color: var(--odd-borde-fuerte);
    box-shadow: var(--odd-sombra-hover);
}

.tienda-admin:disabled {
    cursor: progress;
}

/* Deshabilitada: gris y atenuada. El estado se lee sin depender del color,
   porque la etiqueta y el icono de la esquina también cambian. */
.tienda-admin--apagada {
    filter: grayscale(1);
    opacity: .55;
    background-color: var(--odd-fondo);
    border-style: dashed;
}

.tienda-admin--apagada:hover:not(:disabled) {
    filter: grayscale(.35);
    opacity: 1;
}

.tienda-admin__estado {
    position: absolute;
    top: .5rem;
    left: .5rem;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    border-radius: 1rem;
    padding: .125rem .5rem;
    background-color: var(--odd-verde-suave);
    color: var(--odd-verde);
    font-size: .6875rem;
    font-weight: 600;
}

.tienda-admin--apagada .tienda-admin__estado {
    background-color: var(--odd-borde);
    color: var(--odd-texto-suave);
}

.tienda-admin__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
}

.tienda-admin__datos {
    display: flex;
    flex-direction: column;
    gap: .0625rem;
    font-size: .8125rem;
    line-height: 1.3;
}

/* El aviso conserva su color aunque la ficha esté en escala de grises: es la
   advertencia que no debe pasar desapercibida. */
.tienda-admin__aviso {
    margin-top: .25rem;
    color: var(--odd-naranja-oscuro);
    font-size: .6875rem;
    font-weight: 600;
}

/* --- Página «Nosotros» --------------------------------------------------- */

.nosotros-hero {
    background: linear-gradient(180deg, #eef4fd 0%, #f7fafe 100%);
    border-bottom: 1px solid var(--odd-borde);
    padding: 2.5rem 0;
}

.nosotros-hero__fila {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nosotros-hero__texto {
    flex: 1 1 26rem;
    min-width: 0;
}

.nosotros-hero__antetitulo {
    margin: 0 0 .5rem;
    color: var(--odd-naranja);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.nosotros-hero__titulo {
    margin: 0 0 .875rem;
    color: var(--odd-navy);
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.1;
}

.nosotros-hero__bajada {
    margin: 0 0 1.25rem;
    max-width: 34rem;
    color: var(--odd-texto);
    font-size: .95rem;
    line-height: 1.6;
}

.nosotros-hero__distintivos {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .875rem;
    font-weight: 600;
}

.nosotros-hero__distintivos i {
    color: var(--odd-azul-accion);
}

/* --- Escena decorativa --- */

/* Sólo reserva el espacio: la escena en sí es el componente EscenaTiendas, el
   mismo que usa la portada. */
.nosotros-hero__escena {
    flex: 1 1 24rem;
    min-width: 0;
}

@media (max-width: 991.98px) {
    .nosotros-hero__fila { flex-direction: column; align-items: flex-start; }
    /* La escena es decorativa: en pantalla angosta sólo empuja el contenido. */
    .nosotros-hero__escena { display: none; }
    .nosotros-hero__titulo { font-size: 1.75rem; }
}

/* --- Títulos de sección --- */

.nosotros-titulo {
    margin: 0 0 1rem;
    color: var(--odd-navy);
    font-size: 1.15rem;
    font-weight: 700;
}

.nosotros-titulo--centro {
    text-align: center;
    margin-bottom: 1.25rem;
}

/* --- Cifras --- */

.cifra-tarjeta {
    display: flex;
    align-items: center;
    gap: .875rem;
    height: 100%;
    padding: 1rem 1.125rem;
    border: 1px solid var(--odd-borde);
    border-radius: var(--odd-radio-lg);
    background-color: var(--odd-superficie);
    box-shadow: var(--odd-sombra);
}

.cifra-tarjeta__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--odd-radio);
    font-size: 1.15rem;
}

.cifra-tarjeta__datos {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.cifra-tarjeta__datos strong {
    color: var(--odd-navy);
    font-size: 1.4rem;
    font-weight: 800;
}

.cifra-tarjeta__datos span {
    color: var(--odd-texto-suave);
    font-size: .8125rem;
}

/* --- Misión --- */

.nosotros-mision {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-top: 1.25rem;
    padding: .875rem 1rem;
    border-radius: var(--odd-radio);
    background-color: #eef4fd;
    font-size: .875rem;
}

.nosotros-mision i {
    flex-shrink: 0;
    margin-top: .125rem;
    color: var(--odd-azul-accion);
}

.nosotros-mision p {
    margin: 0;
}

.nosotros-mision strong {
    color: var(--odd-navy);
}

/* --- Lista «cómo funciona» --- */

.nosotros-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nosotros-lista li {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: .625rem 0;
}

.nosotros-lista li + li {
    border-top: 1px solid var(--odd-borde);
}

.nosotros-lista__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--odd-radio);
    font-size: .95rem;
}

.nosotros-lista strong {
    display: block;
    color: var(--odd-navy);
    font-size: .9375rem;
}

.nosotros-lista span > span,
.nosotros-lista li > span:last-child {
    color: var(--odd-texto-suave);
    font-size: .8125rem;
    line-height: 1.5;
}

/* --- Motivos --- */

.motivo-tarjeta {
    height: 100%;
    padding: 1.25rem;
    border: 1px solid var(--odd-borde);
    border-radius: var(--odd-radio-lg);
    background-color: var(--odd-superficie);
    box-shadow: var(--odd-sombra);
}

.motivo-tarjeta__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: .875rem;
    border-radius: 50%;
    font-size: 1.25rem;
}

.motivo-tarjeta__titulo {
    margin: 0 0 .375rem;
    color: var(--odd-navy);
    font-size: 1rem;
    font-weight: 700;
}

.motivo-tarjeta__texto {
    margin: 0;
    color: var(--odd-texto-suave);
    font-size: .875rem;
    line-height: 1.5;
}

/* --- Proceso --- */
/* Las flechas son elementos de la lista, así que se ocultan de la numeración
   con list-style y se alinean con el resto por flexbox. */

.proceso {
    display: flex;
    align-items: stretch;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.proceso__paso {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding: 1.25rem 1rem 1rem;
    border: 1px solid var(--odd-borde);
    border-radius: var(--odd-radio-lg);
    background-color: var(--odd-superficie);
    box-shadow: var(--odd-sombra);
}

.proceso__flecha {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    color: var(--odd-texto-tenue);
}

.proceso__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: .625rem;
    border-radius: var(--odd-radio);
    font-size: 1.05rem;
}

.proceso__numero {
    position: absolute;
    top: .625rem;
    right: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background-color: var(--odd-azul-accion);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
}

.proceso__cuerpo {
    display: flex;
    flex-direction: column;
    gap: .1875rem;
}

.proceso__cuerpo strong {
    color: var(--odd-navy);
    font-size: .875rem;
    line-height: 1.3;
}

.proceso__cuerpo span {
    color: var(--odd-texto-suave);
    font-size: .75rem;
    line-height: 1.4;
}

@media (max-width: 767.98px) {
    /* En vertical la flecha entre pasos no aporta y rompe el ritmo. */
    .proceso { flex-direction: column; }
    .proceso__flecha { display: none; }
}

/* --- Matices de las fichas --- */
/* Un solo juego de clases para cifras, motivos, lista y proceso: el color lo
   elige el editor desde el panel y no depende del bloque donde aparezca. */

.tono--azul    { background-color: #e8f0fd; color: var(--odd-azul-accion); }
.tono--naranja { background-color: var(--odd-naranja-suave); color: var(--odd-naranja-oscuro); }
.tono--verde   { background-color: var(--odd-verde-suave); color: var(--odd-verde); }
.tono--morado  { background-color: #efeaff; color: #6b46c1; }

/* --- Editor de elementos de página --------------------------------------- */

.items-pagina {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.item-pagina {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem 1rem;
    padding: .875rem;
    border: 1px solid var(--odd-borde);
    border-radius: var(--odd-radio);
    background-color: var(--odd-superficie);
}

/* Un elemento oculto se atenúa, pero el interruptor y los botones conservan su
   contraste: hay que poder volver a activarlo sin forzar la vista. */
.item-pagina--oculto {
    background-color: var(--odd-fondo);
    border-style: dashed;
}

.item-pagina--oculto .item-pagina__campos {
    opacity: .6;
}

.item-pagina__campos {
    flex: 1 1 24rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: .625rem .75rem;
    min-width: 0;
}

.item-pagina__acciones {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

/* Vista previa del icono junto al campo: escribir «shop» y verlo aparecer
   ahorra ir a la documentación de Bootstrap Icons para comprobar el nombre. */
.campo-icono-vista {
    display: flex;
    align-items: center;
    gap: .375rem;
}

.campo-icono-vista__muestra {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: var(--odd-radio);
    font-size: .875rem;
}

/* --- Página de filtros avanzados ----------------------------------------- */

.filtros-avanzados {
    padding: 1.15rem 1.25rem 1rem;
}

.filtros-avanzados__grilla {
    display: grid;
    /* auto-fit y no un número fijo de columnas: así pasa de tres a dos y a una
       sola por sí mismo, sin un punto de corte por cada ancho. */
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .9rem 1rem;
}

.filtros-avanzados__acciones {
    display: flex;
    /* Sin envolver: los dos botones van siempre en la misma línea, uno al lado
       del otro. */
    flex-wrap: nowrap;
    gap: .5rem;
    /* Al final de la celda y no centrados: así los botones quedan alineados con
       los desplegables de al lado, que llevan un rótulo encima. Centrados
       flotarían a media altura entre el rótulo y el campo. */
    align-self: end;
}

.filtros-avanzados__acciones .btn {
    white-space: nowrap;
}

.filtros-avanzados__resumen {
    text-align: right;
    margin: .75rem 0 0;
}

@media (max-width: 575.98px) {
    .filtros-avanzados { padding: 1rem .9rem; }
    .filtros-avanzados__acciones { margin-top: .25rem; }
    .filtros-avanzados__acciones .btn { flex: 1 1 auto; }
    .filtros-avanzados__resumen { text-align: left; }
}

/* --- Visitas (panel) ------------------------------------------------------ */

.visitas__cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
}

.visitas__cifra {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .9rem 1rem;
    border-radius: var(--odd-radio-lg);
    background: #f7f9fc;
}

/* La visita a la portada es la cifra que se busca al abrir la pantalla, así que
   se distingue del resto en vez de quedar como una más de cuatro iguales. */
.visitas__cifra--principal {
    background: linear-gradient(150deg, #fff6f1 0%, #fdece2 100%);
}

.visitas__numero {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--odd-navy);
}

.visitas__cifra--principal .visitas__numero { color: var(--odd-naranja-oscuro); }

.visitas__rotulo {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--odd-texto);
}

.visitas__nota {
    font-size: .6875rem;
    color: var(--odd-texto-suave);
    line-height: 1.3;
}

/* --- Comparador de precios ------------------------------------------------ */

.comparar-intro { max-width: 62ch; margin-bottom: 1.25rem; }

.comparar-buscador {
    display: flex;
    gap: .5rem;
    margin-bottom: 1.5rem;
    max-width: 46rem;
}

.comparar-buscador .form-control { flex: 1 1 auto; }
.comparar-buscador .btn { flex: 0 0 auto; white-space: nowrap; }

.comparar-conteo { margin-bottom: .75rem; }

.comparar-vacio { text-align: center; padding: 2.5rem 1.25rem; }

.comparar-vacio__icono {
    display: block;
    font-size: 1.75rem;
    color: var(--odd-texto-tenue);
    margin-bottom: .5rem;
}

.comparar-grupo { margin-bottom: 1.25rem; }

.comparar-grupo__cabecera {
    display: flex;
    align-items: center;
    gap: .875rem;
    margin-bottom: .875rem;
}

/* Caja de tamaño fijo con la imagen contenida: las fotos de catálogo llegan en
   cualquier proporción y sin esto cada fila tendría una altura distinta. */
.comparar-grupo__imagen {
    flex: 0 0 auto;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    width: 4.5rem;
    height: 4.5rem;
    padding: .25rem;
    background: #fff;
    border: 1px solid var(--odd-borde);
    border-radius: var(--odd-radio);
}

.comparar-grupo__imagen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.comparar-grupo__datos { min-width: 0; }

.comparar-grupo__titulo {
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: .15rem;
}

.comparar-grupo__titulo a:hover { color: var(--odd-naranja); }

/* Contenedor con desplazamiento propio: en un teléfono la tabla no cabe, y es
   preferible que se deslice a que empuje el ancho de la página entera. */
.comparar-tabla {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tabla-comparar {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: .8438rem;
}

.tabla-comparar th,
.tabla-comparar td {
    padding: .6rem .5rem;
    border-bottom: 1px solid var(--odd-borde);
    vertical-align: middle;
    text-align: left;
}

.tabla-comparar thead th {
    font-size: .75rem;
    font-weight: 600;
    color: var(--odd-texto-suave);
    text-transform: uppercase;
    letter-spacing: .02em;
    border-bottom-width: 2px;
}

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

/* El selector lleva el elemento a propósito. La regla general de arriba es
   «.tabla-comparar th, .tabla-comparar td» —una clase y un elemento— y le gana
   en especificidad a una clase sola, así que la versión corta no alineaba nada:
   los importes salían a la izquierda mientras su encabezado iba a la derecha. */
.tabla-comparar th.tabla-comparar__num,
.tabla-comparar td.tabla-comparar__num {
    text-align: right;
    white-space: nowrap;
}

.tabla-comparar th.tabla-comparar__accion,
.tabla-comparar td.tabla-comparar__accion { text-align: right; }

.tabla-comparar__fila--mejor { background: var(--odd-verde-suave); }

.tabla-comparar__precio {
    display: block;
    font-weight: 700;
    font-size: .9375rem;
    color: var(--odd-texto);
}

.tabla-comparar__antes {
    display: block;
    font-size: .75rem;
    color: var(--odd-texto-tenue);
    text-decoration: line-through;
}

.tabla-comparar__diferencia {
    display: block;
    font-size: .75rem;
    color: var(--odd-texto-suave);
}

.tabla-comparar__descuento {
    font-weight: 700;
    color: var(--odd-naranja);
}

/* Anchos declarados en la cabecera: sin ellos el navegador reparte según el
   contenido y las columnas bailan entre un producto y otro. */
.tabla-comparar__col-comercio { width: 30%; }
.tabla-comparar__col-precio { width: 22%; }
.tabla-comparar__col-descuento { width: 14%; }
.tabla-comparar__col-estado { width: 22%; }
.tabla-comparar__col-accion { width: 12%; }

.tabla-comparar__estado { min-width: 9rem; }

.tabla-comparar__visto {
    display: block;
    font-size: .75rem;
    color: var(--odd-texto-suave);
}

.tabla-comparar__accion { text-align: right; }

/* Bloque y no en línea: va bajo el importe, dentro de una celda alineada a la
   derecha, y en línea empujaría el precio hacia la izquierda. */
.etiqueta-comparar {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-top: .25rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 700;
    white-space: nowrap;
}

.etiqueta-comparar--precio { background: var(--odd-verde); color: #fff; }
.etiqueta-comparar--descuento { background: var(--odd-naranja-suave); color: var(--odd-naranja-oscuro); }

.comparar-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin-top: 1rem;
    padding-top: .875rem;
    border-top: 1px solid var(--odd-borde);
    font-size: .8438rem;
}

.comparar-resumen__dato { display: flex; align-items: center; gap: .45rem; }

.comparar-resumen__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    font-size: .75rem;
}

.comparar-resumen__icono--precio { background: var(--odd-verde-suave); color: var(--odd-verde); }
.comparar-resumen__icono--descuento { background: var(--odd-naranja-suave); color: var(--odd-naranja); }
.comparar-resumen__icono--brecha { background: #eef1f6; color: var(--odd-texto-suave); }

.comparar-aviso {
    margin: .75rem 0 0;
    font-size: .75rem;
    color: var(--odd-texto-tenue);
}

/* --- Vista previa de los avisos legales (admin) --- */

.legal-vista {
    margin-top: .75rem;
    padding: .65rem .85rem;
    background: var(--odd-fondo);
    border: 1px dashed var(--odd-borde-fuerte);
    border-radius: var(--odd-radio);
}

.legal-vista__rotulo {
    display: block;
    margin-bottom: .3rem;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--odd-texto-tenue);
}

/* --- Registro de problemas (admin) --- */

.registro-log__fila {
    padding: .65rem 0;
    border-bottom: 1px solid var(--odd-borde);
    font-size: .8438rem;
    line-height: 1.45;
}

.registro-log__fila:last-child { border-bottom: 0; }

/* --- Tabla con barra proporcional --- */

.tabla-simple__fila {
    display: grid;
    grid-template-columns: minmax(7rem, 1fr) minmax(4rem, 2fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--odd-borde);
}

.tabla-simple__fila:last-child { border-bottom: 0; }

.tabla-simple__nombre {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--odd-texto);
}

.tabla-simple__barra {
    display: block;
    height: .5rem;
    border-radius: 999px;
    background: #eef1f6;
    overflow: hidden;
}

.tabla-simple__barra > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--odd-naranja);
}

.tabla-simple__valor {
    text-align: right;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--odd-navy);
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    /* La barra desaparece antes que los números: es la ayuda visual, no el dato. */
    .tabla-simple__fila { grid-template-columns: 1fr auto; }
    .tabla-simple__barra { display: none; }
}

/* --- Menú de compartir ---------------------------------------------------- */

/* Respaldo de escritorio, donde no existe el panel nativo del sistema. Lo
   dibuja compartir.js junto al botón pulsado. */
.compartir-menu {
    position: absolute;
    z-index: 1070;
    min-width: 11rem;
    padding: .35rem;
    border: 1px solid var(--odd-borde);
    border-radius: var(--odd-radio-lg);
    background: var(--odd-superficie);
    box-shadow: var(--odd-sombra-hover);
}

.compartir-menu__item {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .45rem .65rem;
    border: 0;
    border-radius: var(--odd-radio);
    background: transparent;
    color: var(--odd-texto);
    font-size: .8125rem;
    text-align: left;
}

.compartir-menu__item:hover {
    background: #f4f7fc;
    color: var(--odd-navy);
}

.compartir-menu__item i {
    font-size: 1rem;
    color: var(--odd-naranja);
}

/* --- Foco al navegar ------------------------------------------------------ */

/* Blazor mueve el foco al primer <h1> en cada navegación —lo hace
   FocusOnNavigate, en Routes.razor— para que un lector de pantalla anuncie la
   página nueva en vez de dejar al usuario al principio del documento. Para
   conseguirlo le pone tabindex="-1" al título, y el navegador dibuja su anillo
   de foco: ese es el recuadro blanco que aparece alrededor del titular al
   cargar la portada.

   Se quita sólo el dibujo, no el foco: el anuncio del lector de pantalla se
   conserva intacto. Y se limita a tabindex="-1", que marca elementos a los que
   no se llega con el tabulador, así que ningún usuario de teclado pierde la
   señal de dónde está parado. */
[tabindex="-1"]:focus {
    outline: none;
}

/* --- API de comercios (panel) -------------------------------------------- */

/* El token en claro sólo se ve una vez. El recuadro naranja está para que sea
   imposible cerrar la pantalla sin haberlo notado. */
.token-nuevo {
    border-color: var(--odd-naranja);
    box-shadow: 0 0 0 3px var(--odd-naranja-suave);
}

.token-nuevo__valor {
    display: block;
    padding: .75rem .9rem;
    border: 1px solid var(--odd-borde);
    border-radius: var(--odd-radio);
    background: #f7f9fc;
    color: var(--odd-navy);
    font-size: .875rem;
    font-weight: 600;
    /* El token no tiene espacios: sin esto se sale del panel en vez de partir. */
    overflow-wrap: anywhere;
    user-select: all;
}

.tabla-api__fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--odd-borde);
}

.tabla-api__fila:last-child { border-bottom: 0; }

.tabla-api__comercio {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 0 0 12rem;
}

.tabla-api__estado {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1 1 14rem;
    min-width: 0;
}

.tabla-api__prefijo {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--odd-navy);
}

.tabla-api__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-left: auto;
}

@media (max-width: 575.98px) {
    .tabla-api__comercio,
    .tabla-api__estado { flex-basis: 100%; }
    .tabla-api__acciones { margin-left: 0; }
}

/* =========================================================================
   ADAPTACIÓN A PANTALLAS PEQUEÑAS
   =========================================================================

   Todo lo que sigue vive dentro de «@media (max-width: …)» o pertenece a
   clases que sólo existen en móvil (.nav-movil*). Ninguna regla de este
   bloque se aplica en un escritorio de 1200px o más, así que el diseño de
   escritorio queda exactamente como estaba.

   Los cortes siguen los de Bootstrap 5, que es la rejilla que usa el
   marcado. Mezclar dos escalas distintas produce saltos raros justo en el
   ancho donde una cambia y la otra no:

     1199.98px  notebook chico
      991.98px  tablet horizontal  ← aquí la barra pasa a menú
      767.98px  tablet vertical
      575.98px  teléfono
      380px     teléfono angosto (iPhone SE y similares)
   ========================================================================= */


/* --- Menú de categorías para móvil --------------------------------------- */

/* Oculto por defecto: sobre 992px manda la barra de desplegables de siempre.
   Se muestra dentro del corte correspondiente, más abajo. */
.nav-movil__boton {
    display: none;
    align-items: center;
    gap: .5rem;
    margin-block: .4rem;
    padding: .55rem .85rem;
    border: 0;
    border-radius: var(--odd-radio);
    background-color: #eef3fb;
    color: var(--odd-navy);
    font-size: .8125rem;
    font-weight: 600;
}

.nav-movil__boton i { font-size: 1.05rem; }

.nav-movil__velo {
    position: fixed;
    inset: 0;
    z-index: 1059;
    background: rgba(4, 16, 38, .5);
    animation: velo-entra .18s ease-out;
}

@keyframes velo-entra {
    from { opacity: 0; }
    to { opacity: 1; }
}

.nav-movil {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    width: min(21rem, 86vw);
    background: var(--odd-superficie);
    box-shadow: .5rem 0 2rem rgba(4, 16, 38, .28);
    animation: panel-entra .2s ease-out;
}

@keyframes panel-entra {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .nav-movil,
    .nav-movil__velo { animation: none; }
}

.nav-movil__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem;
    background: var(--odd-navy);
    color: #fff;
}

.nav-movil__titulo { font-size: .9375rem; font-weight: 700; }

.nav-movil__cerrar {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: var(--odd-radio);
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

/* El cuerpo es lo único que hace scroll: la cabecera y el pie quedan siempre
   a la vista, que es lo que se espera de un panel de navegación.
   «overscroll-behavior: contain» evita que al llegar al final se empiece a
   mover la página de atrás. */
.nav-movil__cuerpo {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.nav-movil__grupo { border-bottom: 1px solid var(--odd-borde); }

.nav-movil__padre {
    display: flex;
    align-items: center;
    gap: .6rem;
    /* 3rem de alto: por debajo de eso el dedo falla más de lo que acierta. */
    min-height: 3rem;
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--odd-navy);
    cursor: pointer;
    list-style: none;
}

.nav-movil__padre::-webkit-details-marker { display: none; }

.nav-movil__padre > span { flex: 1 1 auto; min-width: 0; }

.nav-movil__flecha {
    flex-shrink: 0;
    font-size: .7rem;
    color: var(--odd-texto-suave);
    transition: transform .15s ease;
}

.nav-movil__grupo[open] .nav-movil__flecha { transform: rotate(180deg); }

.nav-movil__hija {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: .4rem 1rem .4rem 2.6rem;
    font-size: .8125rem;
    color: var(--odd-texto);
    background: #fafbfd;
    border-top: 1px solid var(--odd-borde);
}

.nav-movil__hija--todas { font-weight: 600; color: var(--odd-navy); }

.nav-movil__pie {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    padding: .85rem 1rem;
    border-top: 1px solid var(--odd-borde);
    background: #f7f9fc;
    font-size: .8125rem;
    font-weight: 600;
}

.nav-movil__pie a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.25rem;
    color: var(--odd-navy);
}

.nav-movil__pie i { color: var(--odd-naranja); }


/* --- Notebook chico ------------------------------------------------------ */

@media (max-width: 1199.98px) {
    /* La barra de beneficios ya se desliza; lo que no cabe es la bandera con
       el país empujada a la derecha, que en este ancho queda pegada al último
       texto y parece parte de él. */
    .topbar__pais { margin-left: 1.75rem; }
}


/* --- Tablet horizontal: la barra pasa a menú ----------------------------- */

@media (max-width: 991.98px) {
    /* Red de seguridad. Un solo elemento que se pase de ancho hace aparecer la
       barra de scroll horizontal en toda la página, y en un teléfono eso
       descoloca la lectura entera. No hay nada «position: sticky» en el sitio
       público, que es lo único que este recorte podría estropear. */
    body { overflow-x: hidden; }

    .nav-movil__boton { display: inline-flex; }

    /* Los desplegables de escritorio siguen en el DOM pero no se dibujan: son
       menús que se abren al pasar el mouse por encima y necesitan 20rem de
       ancho. Ninguna de las dos cosas existe en un teléfono. */
    .nav-categorias .contenedor > .dropdown { display: none; }

    .cabecera__fila { align-items: center; }

    /* El buscador ya baja a una línea propia; lo que faltaba era que el botón
       de tiendas no quedara descolgado a la derecha del logotipo. */
    .cabecera__tiendas { margin-left: auto; }

    /* --- Área de toque ---
       Un dedo acierta un objetivo de unos 44px; por debajo de eso empieza a
       fallar. Varios controles del sitio son de 18 a 25px de alto porque
       estaban pensados para un puntero. Se les añade alto sin tocar el tamaño
       de letra ni los bordes, así que se ven igual: sólo son más fáciles de
       acertar. */
    .filtro { padding-block: .7rem; }
    .filtro__control { min-height: 1.75rem; }
    .filtro__precio input { min-height: 2rem; }

    .seccion-enlace {
        display: inline-flex;
        align-items: center;
        min-height: 2.25rem;
    }

    .cabecera__tiendas { justify-content: center; min-height: 2.75rem; }

    .categoria-tile { min-height: 6rem; justify-content: center; }
}


/* --- Tablet vertical ----------------------------------------------------- */

@media (max-width: 767.98px) {
    .hero .contenedor { padding-block: 1.75rem 2rem; }
    .hero__bajada { margin-bottom: 1.25rem; }

    /* El titular trae saltos de línea escritos a mano para cuadrar las tres
       líneas del escritorio. En un teléfono el texto ya envuelve solo, y esos
       saltos añadían una cuarta línea con una palabra suelta. */
    .hero__titulo br { display: none; }
    .hero__ventajas { gap: .9rem 1.25rem; margin-bottom: 1.25rem; }

    .topbar__pais { display: none; }

    .panel--seccion { padding: 1rem .9rem 1.15rem; }

    .como-funciona { padding: 1.35rem 1rem; }

    .tiendas { gap: .85rem; padding: .9rem 1rem; }
    .tiendas__lista { gap: .9rem 1.25rem; justify-content: flex-start; }

    /* La ficha del producto reservaba 26rem de alto para la imagen: en vertical
       eso deja el precio y el botón fuera de la primera pantalla. */
    .ficha-imagen { height: 16rem; padding: 1rem; }
    .ficha-precio .oferta__precio { font-size: 1.6rem; }

    /* Con muchas páginas el paginador se salía del contenedor en vez de
       envolver, porque Bootstrap lo deja en una sola línea. */
    .pagination { flex-wrap: wrap; justify-content: center; row-gap: .35rem; }
}


/* --- Teléfono ------------------------------------------------------------ */

@media (max-width: 575.98px) {
    /* Imagen más baja: con dos tarjetas por fila, 11rem de foto dejaban el
       precio por debajo del pliegue en casi todas. */
    .oferta { --oferta-alto-imagen: 9rem; }

    .seccion-cabecera {
        flex-wrap: wrap;
        gap: .35rem .75rem;
        margin-bottom: .85rem;
    }

    .seccion-titulo { font-size: .9375rem; }
    .seccion-enlace { font-size: .75rem; }

    /* Los dos campos de precio sumaban 11rem fijos dentro de un filtro que en
       este ancho mide menos: se salían del recuadro. */
    .filtro__precio input { width: auto; flex: 1 1 0; min-width: 0; }

    .oferta-fila__imagen { width: 3.5rem; height: 3.5rem; }
    .oferta-fila--columna .oferta-fila__imagen { width: 3rem; height: 3rem; }

    /* «Top ofertas del día» va de a dos por fila. Con la miniatura al lado, al
       texto le quedan unos 60px y un precio como «$1.099.990» necesita más:
       la tarjeta desbordaba y sacaba barra horizontal en toda la página.
       El precio baja de tamaño sólo dentro de esta variante, así que la
       tarjeta grande de la grilla no se toca. */
    .oferta-fila--columna { gap: .45rem; }
    .oferta-fila--columna .oferta__precio { font-size: .875rem; }
    .oferta-fila--columna .oferta__precio-anterior { font-size: .6875rem; }
    .oferta-fila--columna .oferta__ahorro { font-size: .6875rem; }

    .categoria-tile { padding: .65rem .35rem; }
    .categoria-tile__icono { width: 2.35rem; height: 2.35rem; font-size: 1rem; }

    /* Cada paso ocupaba un mínimo de 12rem y quedaban dos por fila apretados. */
    .paso { min-width: 100%; }

    .como-funciona__titulo { margin-bottom: 1rem; }

    .ficha-imagen { height: 13rem; }

    /* Blanco suficiente para el dedo sin cambiar el aspecto de la píldora. */
    .chip { padding: .35rem .8rem; }

    /* Las cifras de «Nosotros» van de a dos por fila. En horizontal, el disco
       del icono más «50.000+» no caben en 158px y la tarjeta desbordaba: era el
       único punto del sitio que sacaba barra de scroll horizontal a 375px.
       En vertical el número manda y el icono queda encima. */
    .cifra-tarjeta {
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
        padding: .85rem .9rem;
    }

    .cifra-tarjeta__icono { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
    .cifra-tarjeta__datos { width: 100%; }
    .cifra-tarjeta__datos strong { font-size: 1.2rem; }

    /* Sin esto, un número largo sigue empujando el ancho de la tarjeta. */
    .cifra-tarjeta__datos strong,
    .cifra-tarjeta__datos span { overflow-wrap: anywhere; }

    .pie { margin-top: 1.75rem; padding-block: 1.75rem 1rem; }
    .pie__legal { margin-top: 1.25rem; }

    .contacto-cta { padding: 1.15rem 1rem; }
}


/* --- Teléfono angosto ---------------------------------------------------- */

@media (max-width: 380px) {
    /* Un poco menos de margen lateral: a 320px cada rem cuenta y son 2rem que
       se le quitaban al contenido. */
    .contenedor { padding-inline: .75rem; }

    .marca__isotipo { width: 2rem; }
    .marca__nombre { font-size: .95rem; }

    .oferta { --oferta-alto-imagen: 8rem; }

    .hero__titulo { font-size: 1.35rem; }

    /* Último apretón del ranking: a este ancho la columna mide 133px y el
       precio se comía los dos últimos píxeles. */
    .oferta-fila--columna .oferta-fila__imagen { width: 2.5rem; height: 2.5rem; }
    .oferta-fila--columna .oferta__precio { font-size: .8125rem; }
}