/* ==========================================================================
   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 {
    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;
}

.oferta__favorito:hover,
.oferta__favorito[aria-pressed="true"] {
    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;
    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%;
    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;
    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%;
    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;
    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 {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.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;
}

/* --- 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);
}

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

.mega__promo-sello {
    position: absolute;
    right: 1.6rem;
    bottom: 1.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;
}

/* --- 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; }
}