/* ================================================================
   OFERTA DEL DÍA
   Bloque destacado: un producto real del catálogo, con su foto, su
   descuento y una cuenta regresiva.

   Nació dentro del tema "Almacén — Figma" y quedó atado a él: el CSS
   colgaba de `body.layout-almacen-figma` y el JS no lo dibujaba con
   ningún otro tema. Ahora vive acá, con los colores del tema activo
   (--color-primario y derivados), así funciona en los 21 layouts. Cada
   tema puede ajustarlo en su propia hoja, después de esta.

   Las clases conservan el prefijo `af-` para no tocar el HTML ni el JS
   que ya las usa.
   ================================================================ */

.af-oferta-dia {
    display: block;
    max-width: 80rem;
    margin: 3rem auto;
    background: var(--color-primario);
    color: var(--color-texto-sobre-primario, #fff);
    border-radius: 1.5rem;
    overflow: hidden;
}

.af-od-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .af-od-grid { grid-template-columns: 1fr 1fr; } }

.af-od-text { padding: 2.5rem; }
.af-od-badge {
    background: var(--color-acento);
    color: var(--color-texto-sobre-acento, #fff);
    border-radius: 999px;
    padding: .3rem .9rem;
    font-size: .8rem;
    display: inline-block;
    margin-bottom: 1rem;
}
.af-od-text h2 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    margin: 0 0 .75rem;
    color: inherit;
}
/* Los textos secundarios se aclaran/oscurecen contra el fondo del bloque en
   vez de usar un color fijo: el bloque toma el primario del comercio, que
   puede ser claro u oscuro. */
.af-od-text > p { color: currentColor; opacity: .75; margin-bottom: 1.5rem; }
/* Precio: el bloque anunciaba "-31%" en la foto y no decía de cuánto a cuánto.
   El precio actual manda; el anterior va tachado al lado y el ahorro como
   pastilla, para que el descuento se lea sin hacer la cuenta. */
.af-od-precios {
    display: flex; align-items: baseline; gap: .7rem;
    flex-wrap: wrap; margin-bottom: 1rem;
}
.af-od-precio {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 800; line-height: 1;
}
.af-od-precio-anterior {
    text-decoration: line-through;
    opacity: .6; font-size: 1.05rem;
}
.af-od-ahorro {
    background: var(--color-acento);
    color: var(--color-texto-sobre-acento, #fff);
    border-radius: 999px; padding: .2rem .7rem;
    font-size: .78rem; font-weight: 700;
}

.af-od-meta { margin-bottom: 1.1rem; font-size: .85rem; }
.af-od-stock {
    display: inline-flex; align-items: center; gap: .35rem;
    border: 1px solid currentColor; border-radius: 999px;
    padding: .2rem .7rem; opacity: .85;
}

.af-od-countdown { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.af-od-countdown > span { color: currentColor; opacity: .6; font-size: .8rem; }
.af-od-boxes { display: flex; gap: .5rem; }
.af-od-boxes div {
    background: color-mix(in srgb, currentColor 14%, transparent);
    border-radius: .5rem;
    padding: .5rem .8rem;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.2rem;
    min-width: 3.2rem;
}
.af-od-boxes small { display: block; font-size: .6rem; opacity: .7; }

.af-od-cta {
    background: var(--color-acento);
    color: var(--color-texto-sobre-acento, #fff);
    border: none;
    border-radius: 999px;
    padding: .9rem 1.8rem;
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
}
.af-od-cta:hover { filter: brightness(1.08); }

.af-od-img-wrap { position: relative; min-height: 220px; }
.af-od-img { width: 100%; height: 100%; object-fit: cover; background: var(--color-gris-claro, #f1f1f1); display: block; }
.af-od-pct {
    position: absolute; top: 1rem; right: 1rem;
    background: var(--color-acento);
    color: var(--color-texto-sobre-acento, #fff);
    border-radius: 999px;
    width: 3.5rem; height: 3.5rem;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900;
    font-family: var(--font-display);
}

@media (max-width: 600px) {
    .af-oferta-dia { margin: 2rem 1rem; border-radius: 1rem; }
    .af-od-text { padding: 1.6rem; }
}