:root{
    --navy:#0B1636;
    --navy-soft:#16224A;
    --blue:#2F6FED;
    --blue-dark:#1E52C4;
    --blue-pale:#DCE9FF;
    --red:#E63946;
    --bg:#F1F5FC;
    --card:#FFFFFF;
    --ink:#0B1636;
    --ink-soft:#5A6786;
    /* Antes #8B96B5 — ~2.7:1 de contraste sobre --bg/--card, por debajo del
       mínimo de accesibilidad (WCAG AA, 4.5:1 para texto normal) para un
       color usado en meta-datos/fechas/badges por toda la web. #626D8C
       mantiene el mismo tono azul-grisáceo apagado pero da ~4.7:1,
       revisado 2026-08-27 — no es un cambio de diseño, es legibilidad. */
    --ink-faint:#626D8C;
    --border:#DCE4F5;
  }
  /* El resaltado táctil nativo de WebKit a veces se queda "pegado" en
     elementos donde se hace preventDefault() del click (como el botón de
     copiar cupón, anidado dentro de la tarjeta que es un enlace) hasta que
     el usuario toca otra cosa. Se quita y se sustituye por :active propio
     donde hace falta feedback. */
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Inter', sans-serif; }
  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; }

  /* ---------- FOCO VISIBLE (accesibilidad de teclado) ---------- */
  /* :focus-visible (no :focus a secas) para no dibujar el anillo en un
     clic de ratón, solo cuando de verdad se navega con teclado. Los
     elementos custom sobre fondos oscuros (nav, footer, banner de
     cookies) llevan además un halo blanco: el azul de --blue solo ya
     apenas se distingue sobre --navy. */
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
  [tabindex]:focus-visible{
    outline:2px solid var(--blue); outline-offset:2px; border-radius:4px;
  }
  nav.mainnav :focus-visible, footer :focus-visible, .hero-band :focus-visible,
  .cookie-banner :focus-visible{
    outline-color:#fff; box-shadow:0 0 0 4px rgba(255,255,255,0.35);
  }

  /* Oculto visualmente pero legible por lectores de pantalla (etiquetas de
     formulario sin espacio para mostrarse, p.ej. el buscador). */
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  /* Enlace "Saltar al contenido": invisible hasta que se navega con
     teclado, para no obligar a tabular por toda la nav en cada página. */
  .skip-link{
    position:absolute; top:-40px; left:8px; z-index:100;
    background:var(--navy); color:#fff; padding:10px 16px; border-radius:8px;
    font-weight:600;
  }
  .skip-link:focus-visible{ top:8px; }

  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration:0.001ms !important; animation-iteration-count:1 !important;
      transition-duration:0.001ms !important; scroll-behavior:auto !important;
    }
  }

  /* ---------- MAIN NAV ---------- */
  nav.mainnav{
    position:sticky; top:0; z-index:30;
    background:var(--navy);
    padding:10px 28px;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  /* Antes era un <div> sin enlace — en las páginas sin navlinks visibles
     (móvil, ver .navlinks below) el logo era la única cosa en la cabecera
     y no llevaba a ningún sitio. Ahora es un <a>, con text-decoration:none
     para que no herede el subrayado azul por defecto del navegador. */
  .navbrand{ display:flex; align-items:center; gap:9px; flex-shrink:0; text-decoration:none; }
  .navbrand img{ width:34px; height:34px; border-radius:50%; }
  .navbrand .word{ font-family:'Oswald',sans-serif; font-weight:700; font-size:14px; color:#fff; line-height:1.15; }
  .navbrand .word span{ color:var(--red); }
  /* Fase 2 (2026-08-27): de 5 a 7 enlaces (Destacados y Promociones nuevos,
     Sobre nosotros retirado por redundante con el Telegram del footer/hero)
     — gap y padding recortados un poco para que quepan sin apretar el ancho
     mínimo de 1000px en el que .navlinks sigue visible (por debajo de eso ya
     se oculta y manda la hamburguesa). */
  .navlinks{ display:flex; gap:2px; flex:1; justify-content:center; }
  .navlinks a{
    font-family:'Oswald',sans-serif; font-weight:600; font-size:13px; color:#B7C2E0;
    padding:8px 11px; border-radius:9px; display:flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap;
  }
  .navlinks a:hover, .navlinks a.active{ color:#fff; background:rgba(255,255,255,0.07); }
  .navlinks a.active{ box-shadow: inset 0 -2px 0 var(--red); }
  .nav-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
  .nav-search-btn{
    width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12); color:#fff; display:flex; align-items:center; justify-content:center;
    cursor:pointer; flex-shrink:0; font-size:14px;
  }
  @media (max-width:1000px){ .navlinks{ display:none; } }

  .nav-burger{
    display:none;
    width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12); color:#fff; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; cursor:pointer; flex-shrink:0;
  }
  .nav-burger span{ width:20px; height:2px; background:#fff; border-radius:2px; }
  @media (max-width:1000px){ .nav-burger{ display:flex; } }

  /* Antes vivía en el flujo normal, justo debajo de <nav> en el HTML — pero
     nav.mainnav es position:sticky, así que al abrir el menú con la página
     desplazada hacia abajo, el menú aparecía en su sitio ORIGINAL del
     documento (arriba del todo), fuera de la pantalla (hallazgo del
     usuario, 2026-08-27). position:fixed + el "top" calculado en JS a la
     altura real de la nav (ver cookie-consent.js) lo deja siempre pegado
     debajo de la barra, se haya scrolleado lo que se haya scrolleado. */
  .mobile-menu{
    display:none;
    position:fixed; left:0; right:0; z-index:29;
    max-height:calc(100vh - 60px); overflow-y:auto;
    background:var(--navy-soft);
    border-bottom:1px solid rgba(255,255,255,0.1);
    padding:10px 20px 16px;
  }
  .mobile-menu.open{ display:block; }
  .mobile-menu a{
    display:flex; align-items:center; gap:10px;
    font-family:'Oswald',sans-serif; font-weight:600; font-size:15px; color:#D6DFF5;
    padding:12px 6px; border-bottom:1px solid rgba(255,255,255,0.06);
  }
  .mobile-menu a:last-child{ border-bottom:none; }

  /* ---------- HERO ---------- */
  .hero-band{
    background-image:url('hero-visual.jpg');
    background-size:cover;
    background-position:center center;
    min-height:480px;
    display:flex;
    align-items:center;
  }
  @media (min-width:900px){ .hero-band{ min-height:560px; background-position:center 40%; } }
  .hero-grid{
    max-width:min(1600px, 92vw); margin:0 auto;
    padding:40px 20px;
    width:100%;
  }

  .hero-eyebrow{
    font-family:'Oswald',sans-serif; font-weight:600; font-size:12.5px; letter-spacing:0.12em;
    color:var(--red); text-transform:uppercase; display:flex; align-items:center; gap:10px; margin-bottom:10px;
  }
  .hero-eyebrow::before{ content:""; width:3px; height:16px; background:var(--red); display:inline-block; }
  .hero-title{
    font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(34px,5.2vw,54px);
    line-height:1.05; color:#fff; margin:0 0 14px;
  }
  .hero-title .accent{ color:var(--red); }
  .hero-sub{ color:#B7C2E0; font-size:15.5px; line-height:1.6; max-width:460px; margin:0 0 24px; }
  .hero-cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px; }
  .hero-cta{
    font-family:'Oswald',sans-serif; font-weight:700; font-size:13.5px; text-transform:uppercase;
    padding:13px 22px; border-radius:24px; cursor:pointer; border:none; display:inline-flex; align-items:center; gap:8px;
  }
  .hero-cta.primary{ background:var(--red); color:#fff; }
  .hero-cta.secondary{ background:rgba(255,255,255,0.06); color:#fff; border:1.5px solid rgba(255,255,255,0.18); }

  /* ---------- SEARCH BAR (in hero band) ---------- */
  .hero-search-wrap{ background:var(--navy); padding:28px 20px 48px; }
  .hero-search{
    max-width:min(1600px, 92vw); margin:0 auto;
    display:flex; gap:10px;
    background:rgba(255,255,255,0.06); border:1.5px solid rgba(255,255,255,0.12);
    border-radius:16px; padding:6px;
  }
  .hero-search input{
    flex:1; min-width:0; background:transparent; border:none; outline:none;
    color:#fff; font-size:14.5px; padding:12px 14px;
  }
  .hero-search input::placeholder{ color:#7A88AD; }
  .hero-search button{
    font-family:'Oswald',sans-serif; font-weight:700; font-size:13.5px; text-transform:uppercase;
    background:var(--red); color:#fff; border:none; border-radius:11px; padding:0 26px; cursor:pointer;
    /* .hero-search es flex sin align-items propio => el botón se estira
       (stretch, el valor por defecto) a la altura del input, pero el texto
       de dentro no se centraba solo por eso: hacía falta flex también aquí. */
    display:flex; align-items:center; justify-content:center;
  }

  /* ---------- CONTENT ---------- */
  .section-wrap{ max-width:min(1600px, 92vw); margin:0 auto; padding:34px 20px 60px; }
  .section-head-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
  .section-title{ font-family:'Oswald',sans-serif; font-weight:700; font-size:23px; margin:0; }
  .section-title .accent{ color:var(--blue); }
  .pill-scroll{
    display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;
  }
  .pill{
    font-family:'Oswald',sans-serif; font-weight:500; font-size:13px;
    padding:9px 16px; border-radius:20px; white-space:nowrap; flex:0 0 auto;
    background:var(--card); border:1.5px solid var(--border); color:var(--ink-soft); cursor:pointer;
    display:inline-flex; align-items:center; gap:6px;
  }
  .pill.active{ background:var(--blue); color:#fff; border-color:var(--blue-dark); }
  .pill-logo{ display:block; }

  /* Categorías/Tiendas: menú desplegable desde la cabecera (rediseño
     2026-08-27, petición del usuario tras ver que las tres barras "Categorías
     / Tiendas / Filtros" apiladas dejaban demasiado hueco vacío hasta
     pulsarlas). En escritorio es una tarjeta centrada bajo la nav; en móvil
     (mismo corte de 1000px que .navlinks/.mobile-menu, porque ahí es donde
     se entra por el menú hamburguesa) se convierte en una hoja que sube
     desde abajo — mismas pills en los dos casos, ya no hace falta el
     <select> nativo que existía solo para móvil: con más espacio para
     envolver en varias filas dentro de la hoja, las pills funcionan igual
     de bien que un <select> y encima muestran los logos/iconos. */
  .mega-panel-backdrop{
    display:none; position:fixed; inset:0; z-index:38; background:rgba(11,22,54,0.45);
  }
  .mega-panel-backdrop.open{ display:block; }
  .mega-panel{
    display:none; position:fixed; z-index:39;
    top:76px; left:50%; transform:translateX(-50%);
    width:92vw; max-width:560px; max-height:75vh; overflow-y:auto;
    background:var(--card); border-radius:16px; box-shadow:0 20px 48px -12px rgba(11,22,54,0.35);
    padding:18px;
  }
  .mega-panel.open{ display:block; }
  .mega-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .mega-panel-head span{ font-family:'Oswald',sans-serif; font-weight:700; font-size:16px; color:var(--ink); }
  .mega-panel-close{
    width:30px; height:30px; border-radius:50%; border:1.5px solid var(--border); background:var(--bg);
    color:var(--ink-soft); font-size:14px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .mega-panel .pill-scroll .pill{ padding:11px 16px; }
  @media (max-width:1000px){
    .mega-panel{
      top:auto; bottom:0; left:0; right:0; transform:none;
      width:100%; max-width:none; max-height:78vh;
      border-radius:18px 18px 0 0;
    }
  }

  /* Antes una barra a todo lo ancho, apilada junto con las de Categorías/
     Tiendas (que ahora viven en la cabecera, ver .mega-panel) — ahora un
     botón pequeño junto al título "Últimas ofertas cazadas", como en la
     opción elegida por el usuario. */
  .filter-toggle{
    display:inline-flex; align-items:center; gap:6px; flex:none;
    background:var(--blue-pale); border:none; border-radius:9px;
    padding:9px 14px; margin:0; cursor:pointer;
    font-family:'Oswald',sans-serif; font-weight:600; font-size:12.5px; color:var(--blue-dark);
  }
  .filter-toggle .chev{ transition:transform .2s ease; }
  .filter-toggle.open .chev{ transform:rotate(180deg); }
  .filter-panel{
    display:none;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:12px;
    background:var(--card); border:1.5px solid var(--border); border-radius:12px;
    padding:16px; margin:10px 0 18px;
  }
  .filter-panel.open{ display:grid; }
  .filter-box label{
    font-family:'Oswald',sans-serif; font-weight:600; font-size:12px; color:var(--ink-soft);
    display:flex; align-items:center; gap:5px; margin-bottom:8px;
  }
  .range-inputs{ display:flex; align-items:center; gap:6px; }
  .range-inputs input, .filter-box select{
    width:100%; background:var(--bg); border:1.5px solid var(--border); border-radius:8px;
    padding:8px 9px; color:var(--ink); font-size:13px; outline:none;
  }
  .filter-box select{ cursor:pointer; }
  .filter-actions{ grid-column:1/-1; display:flex; gap:10px; margin-top:4px; }
  .btn-apply{
    flex:1; font-family:'Oswald',sans-serif; font-weight:700; font-size:14px; text-transform:uppercase;
    background:var(--blue); color:#fff; border:none; border-radius:9px; padding:12px; cursor:pointer;
  }
  @media (hover:hover){ .btn-apply:hover{ background:var(--blue-dark); } }
  .btn-clear{
    font-family:'Oswald',sans-serif; font-weight:600; font-size:13px;
    background:transparent; color:var(--ink-soft); border:1.5px solid var(--border);
    border-radius:9px; padding:12px 18px; cursor:pointer;
  }

  /* ---------- LO MÁS CALIENTE HOY (tira horizontal, no un grid que
     apile las tarjetas en móvil) ---------- */
  .hot-today-wrap{ background:linear-gradient(180deg, rgba(230,57,70,0.07), transparent 70%); padding-bottom:12px; }
  .hot-scroll-wrap{ position:relative; }
  .hot-scroll{
    display:flex; gap:14px; overflow-x:auto; padding:4px 4px 10px;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  }
  /* Tarjetas más anchas que en el grid normal (230px): esta tira solo
     enseña unas pocas, mejor aprovechar el espacio para que la foto/precio
     se vean grandes en vez de priorizar que quepan muchas. */
  .hot-scroll .oferta-card{ flex:0 0 280px; scroll-snap-align:start; }
  .hot-scroll .img-wrap > img{ height:190px; }
  .hot-scroll::-webkit-scrollbar{ height:7px; }
  .hot-scroll::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; }
  @media (max-width:640px){ .hot-scroll .oferta-card{ flex:0 0 220px; } .hot-scroll .img-wrap > img{ height:150px; } }

  .hot-scroll-arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    width:38px; height:38px; border-radius:50%; border:1.5px solid var(--border);
    background:var(--card); color:var(--navy); font-size:22px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(11,22,54,0.15);
    transition:opacity .15s ease, background .15s ease;
  }
  .hot-scroll-arrow:hover{ background:var(--blue-pale); }
  .hot-scroll-arrow.left{ left:-4px; }
  .hot-scroll-arrow.right{ right:-4px; }
  .hot-scroll-arrow.is-hidden{ opacity:0; pointer-events:none; }
  /* En pantallas muy estrechas las flechas tapan las tarjetas de los
     extremos — el deslizamiento táctil ya es evidente ahí (todo el mundo
     sabe deslizar en el móvil), así que se ocultan y solo queda el
     degradado como pista. */
  @media (max-width:480px){ .hot-scroll-arrow{ display:none; } }

  /* ---------- CARDS ---------- */
  /* scroll-margin-top: para que scrollIntoView() al cambiar de página (ver
     renderGrid() en index.html) no deje la rejilla nueva tapada por la
     barra sticky (nav.mainnav) — sin esto, saltar con block:'start' pone el
     borde superior justo debajo del borde de la ventana, detrás de la nav. */
  .grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:16px; scroll-margin-top:70px; }
  /* Bloque de comunidad intercalado en el feed (Fase 4, 2026-08-27) —
     grid-column:1/-1 para que ocupe la fila entera dentro de .grid, no una
     celda de tarjeta más. Mismos tokens que .telegram-cta-block (offer/
     categoría) pero con dos botones (Telegram + WhatsApp) en vez de uno. */
  .community-cta-block{
    grid-column: 1 / -1;
    background:var(--navy); border-radius:16px; padding:24px 26px;
    display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  }
  .community-cta-text strong{ display:block; color:#fff; font-family:'Oswald',sans-serif; font-weight:700; font-size:16px; margin-bottom:3px; }
  .community-cta-text span{ color:#B7C2E0; font-size:13.5px; }
  .community-cta-actions{ display:flex; gap:10px; flex-wrap:wrap; }
  /* Clases propias, NO .hero-cta — hallazgo real (2026-08-27, aviso del
     usuario en móvil): .hero-cta tiene su propia regla móvil
     (width:100% sin acotar a .hero-cta-row) pensada solo para el hero de
     arriba, que se colaba aquí también al reutilizar la clase y dejaba el
     botón de WhatsApp descuadrado/oculto. Mismo aspecto visual, sin
     compartir la clase. */
  .comm-btn{
    font-family:'Oswald',sans-serif; font-weight:700; font-size:13.5px; text-transform:uppercase;
    padding:13px 22px; border-radius:24px; display:inline-flex; align-items:center; gap:8px;
    text-decoration:none; white-space:nowrap;
  }
  .comm-btn-primary{ background:var(--red); color:#fff; }
  .comm-btn-secondary{ background:rgba(255,255,255,0.06); color:#fff; border:1.5px solid rgba(255,255,255,0.18); }
  @media (max-width:640px){
    .community-cta-block{ flex-direction:column; text-align:center; }
    .community-cta-actions{ flex-direction:column; width:100%; }
    .comm-btn{ width:100%; justify-content:center; }
  }
  .oferta-card{
    background:var(--card); border:1.5px solid var(--border); border-radius:14px; overflow:hidden;
    display:flex; flex-direction:column; position:relative;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .oferta-card:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(11,22,54,0.12); }
  .img-wrap{ position:relative; background:#fff; }
  /* Selector acotado a hijo directo: si fuera ".oferta-card img" (cualquier
     descendiente) también pillaría el logo de la tienda anidado dentro de
     .store-badge y lo estiraría a tamaño completo. */
  .img-wrap > img{ width:100%; height:170px; object-fit:contain; display:block; }
  .discount-ring{
    position:absolute; top:10px; left:10px;
    min-width:46px; height:46px; padding:0 7px; border-radius:23px;
    background:var(--red); color:#fff;
    display:flex; align-items:center; justify-content:center; flex-direction:row;
    font-family:'Oswald',sans-serif; font-weight:700; font-size:14px; line-height:1; white-space:nowrap;
    border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,0.18);
  }
  .record-badge{
    position:absolute; top:10px; right:10px;
    background:var(--navy); color:#fff;
    padding:4px 8px; border-radius:6px;
    font-family:'Oswald',sans-serif; font-weight:700; font-size:9.5px; text-transform:uppercase; letter-spacing:0.02em;
    border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,0.18);
  }
  /* Antes flotaba sobre la esquina de la foto (position:absolute) — se
     solapaba con el logo de tienda que ya lleva incrustado la propia
     plantilla de imagen del panel (mismo sitio, abajo a la izquierda),
     dando un "logo fantasma" doble (hallazgo real 2026-08-15, fnac). Ahora
     vive en el cuerpo de la tarjeta, fuera de la foto — así nunca puede
     chocar con nada que la foto ya traiga dibujado encima. */
  .store-badge{
    align-self:flex-start;
    background:var(--bg); border:1.5px solid var(--border);
    padding:3px 9px; border-radius:20px;
    display:flex; align-items:center; gap:5px;
    font-family:'Oswald',sans-serif; font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:0.02em;
    color:var(--ink);
  }
  .store-badge img{ display:block; width:auto; }
  .oferta-body{ padding:13px 14px 15px; display:flex; flex-direction:column; gap:7px; flex:1; }
  .meta-row{ display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--ink-faint); }
  .rating-row{ font-size:11.5px; color:var(--ink-soft); }
  .rating-row .review-count{ color:var(--ink-faint); }
  .oferta-title{
    font-weight:600; font-size:14.5px; line-height:1.35; color:var(--ink);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:38px;
  }
  .oferta-desc{
    font-size:12px; line-height:1.4; color:var(--ink-soft);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .price-row{ display:flex; align-items:baseline; gap:9px; }
  /* Precio como protagonista de la tarjeta (evolución 2026-08-27, tipo
     Chollos Deluxe) — antes 21px, subido para que sea lo primero que se lea
     sin necesidad de leer nada más. Puro tamaño, sin tocar el resto del
     diseño. */
  .price-now{ font-family:'Oswald',sans-serif; font-weight:700; font-size:25px; color:var(--navy); letter-spacing:-0.01em; }
  .price-before{ font-size:12.5px; color:var(--ink-faint); text-decoration:line-through; }
  /* Promos "pack" (3x2, 2x1, 2ª unidad a mitad de precio, ver
     promo_pack.py): el precio mostrado es el del PACK entero, no de una
     unidad — sin avisarlo, "4,50€" tachando "2,25€" parece una SUBIDA de
     precio en vez de un chollo (hallazgo real del usuario, 2026-08-22,
     oferta de lápices Alpino 3x2). Desde 2026-08-27 el badge da el precio
     EFECTIVO por unidad ("🔥 Sale a X€/ud.") en vez de solo "Precio por N
     uds." — y el "antes" tachado se deja de mostrar del todo para packs
     (ver _get_precio()/getPrecio()), en vez de solo avisar con el badge. */
  .pack-badge{
    display:inline-block; font-size:11px; font-weight:700; color:var(--blue-dark);
    background:var(--blue-pale); padding:3px 8px; border-radius:6px;
  }
  /* "⏳ Termina hoy/mañana/Hasta el DD de mes" para promos con fecha de fin
     — superpuesto sobre la foto (mismo sitio que el aro de descuento), así
     no añade ni una línea de alto a la tarjeta. */
  .promo-end-badge{
    position:absolute; bottom:8px; left:8px; right:8px;
    background:rgba(11,22,54,0.88); color:#fff;
    font-family:'Oswald',sans-serif; font-weight:700; font-size:10.5px; text-transform:uppercase;
    text-align:center; padding:5px 8px; border-radius:8px; letter-spacing:0.02em;
  }
  .published{ font-size:11px; color:var(--ink-faint); }
  /* Preventa que aún no ha salido (16/09): etiqueta bajo el título de la
     tarjeta y franja con la fecha de salida en la ficha. */
  .preventa-badge{
    align-self:flex-start; background:#FFD23F; color:var(--navy);
    padding:3px 9px; border-radius:6px;
    font-family:'Oswald',sans-serif; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:0.02em;
  }
  .preventa-aviso{
    display:flex; flex-wrap:wrap; gap:2px 6px; align-items:baseline;
    background:#FFF6D6; border:1.5px solid #FFD23F; border-radius:10px; padding:10px 14px;
    font-size:14px; color:var(--ink);
  }
  .preventa-aviso strong{ font-family:'Oswald',sans-serif; text-transform:uppercase; color:var(--navy); }
  .preventa-aviso span{ flex-basis:100%; font-size:12px; color:var(--ink-soft); }
  .coupon-box{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    border:1.5px dashed var(--red); border-radius:8px; padding:9px 12px; background:#FFF1F2; cursor:pointer;
    transition:background .15s ease;
  }
  .coupon-box:active{ background:#FFD9DC; }
  /* Cupón "de checkbox" (Amazon, Miravia): informativo, no hay nada que
     copiar ni pegar — sin cursor de clic ni el resaltado de :active. */
  .coupon-box.coupon-info{ cursor:default; justify-content:center; }
  .coupon-box.coupon-info:active{ background:#FFF1F2; }
  /* #C0202E en vez de --red: sobre el fondo rosa (#FFF1F2) el rojo de marca
     da ~3.79:1, por debajo del mínimo AA (4.5:1) para texto de 12.5px en
     negrita (no llega al umbral de "texto grande"). Este tono da ~5.48:1
     manteniendo el mismo rojo de familia — solo aquí, --red se queda igual
     en el resto de la web (revisado 2026-08-27, Fase 8). */
  .coupon-code{ font-weight:700; font-size:12.5px; color:#C0202E; }
  .coupon-copy{ font-family:'Oswald',sans-serif; font-size:10.5px; font-weight:700; text-transform:uppercase; background:var(--navy); color:#fff; padding:4px 8px; border-radius:5px; }
  .ver-oferta{
    /* margin-top:auto lo empuja siempre al fondo de .oferta-body (flex
       column), para que quede a la misma altura en toda la fila aunque el
       contenido de arriba varíe (con/sin cupón, con/sin descripción...). */
    margin-top:auto; text-align:center; font-family:'Oswald',sans-serif; font-weight:700; font-size:13.5px;
    text-transform:uppercase; background:var(--navy); color:#fff; padding:10px; border-radius:9px;
  }
  .oferta-card:hover .ver-oferta{ background:var(--blue); }

  /* ---------- ME GUSTA / COMPARTIR ---------- */
  .card-actions{ display:flex; align-items:center; gap:8px; }
  .like-btn, .share-btn{
    display:flex; align-items:center; gap:5px; font-family:inherit; cursor:pointer;
    background:none; border:1.5px solid var(--border); border-radius:20px;
    padding:6px 12px; font-size:12px; font-weight:600; color:var(--ink-soft);
    transition:background .15s ease, border-color .15s ease, color .15s ease;
  }
  .share-btn{ flex:1; justify-content:center; }
  .like-btn .like-icon{ font-size:14px; line-height:1; }
  .like-btn.liked{ border-color:var(--red); color:var(--red); background:#FFF1F2; }
  .like-btn:active, .share-btn:active{ transform:scale(0.96); }
  @media (hover:hover){
    .like-btn:hover{ border-color:var(--red); color:var(--red); }
    .share-btn:hover{ border-color:var(--blue); color:var(--blue); }
  }

  /* Un único popover reutilizado por todas las tarjetas (no uno por
     tarjeta) — se reposiciona en JS junto al botón que lo abrió. */
  .share-backdrop{ display:none; position:fixed; inset:0; z-index:59; }
  .share-popover{
    display:none; flex-direction:column; position:absolute; z-index:60;
    background:var(--card); border:1.5px solid var(--border); border-radius:14px;
    box-shadow:0 12px 30px rgba(11,22,54,0.22); padding:8px; width:230px; gap:1px;
  }
  .share-popover-title{
    font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.3;
    padding:4px 8px 9px; margin-bottom:4px; border-bottom:1px solid var(--border);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .share-option{
    display:flex; align-items:center; gap:11px; width:100%; text-align:left;
    font-family:inherit; background:none; border:none; cursor:pointer;
    padding:9px 8px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--ink);
  }
  .share-option:hover{ background:var(--bg); }
  .share-option-icon{
    flex-shrink:0; width:26px; height:26px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:14px; color:#fff;
  }
  .share-option-icon svg{ display:block; }
  .share-option-icon.tg{ background:#29A9EA; }
  .share-option-icon.wa{ background:#25D366; }
  .share-option-icon.ig{ background:linear-gradient(135deg,#F58529,#DD2A7B,#8134AF); }
  .share-option-icon.x{ background:#000; }
  .share-option-icon.fb{ background:#1877F2; }
  .share-option-icon.copy{ background:var(--ink-faint); }
  .share-copy-label{ margin-left:auto; font-size:10.5px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; }

  .empty{ text-align:center; padding:50px 16px; color:var(--ink-soft); font-family:'Oswald',sans-serif; }

  /* ---------- PAGINATION ---------- */
  .pagination{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:32px; }
  .page-arrow{
    width:40px; height:40px; border-radius:50%; background:var(--card); border:1.5px solid var(--border);
    color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px;
  }
  .page-arrow:disabled{ opacity:0.35; cursor:default; }
  @media (hover:hover){ .page-arrow:not(:disabled):hover{ border-color:var(--blue); color:var(--blue); } }
  .page-dots{ display:flex; gap:7px; }
  .page-dot{ position:relative; width:7px; height:7px; border-radius:50%; background:var(--border); cursor:pointer; }
  .page-dot.active{ background:var(--blue); width:20px; border-radius:4px; }
  /* El punto visible es pequeño a propósito, pero el área táctil real es
     más grande (pseudo-elemento invisible, no afecta al tamaño visual). */
  .page-dot::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:28px; height:28px; }
  .page-label{ font-family:'Oswald',sans-serif; font-size:12.5px; color:var(--ink-soft); }

  /* ---------- BOTÓN VOLVER AL INICIO ---------- */
  /* Flotante y fijo para que esté disponible en cualquier punto del scroll
     (no solo al final de la página), pero oculto cerca del inicio para no
     estorbar donde ya se ve toda la cabecera. */
  .back-to-top{
    position:fixed; bottom:22px; right:22px; z-index:35;
    background:var(--navy); color:#fff;
    font-family:'Oswald',sans-serif; font-weight:700; font-size:13px; text-transform:uppercase;
    padding:12px 18px; border-radius:30px; border:none; cursor:pointer;
    display:flex; align-items:center; gap:8px;
    box-shadow:0 4px 14px rgba(11,22,54,0.3);
    opacity:0; visibility:hidden; transform:translateY(10px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .back-to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); }
  @media (hover:hover){ .back-to-top:hover{ background:var(--blue); } }
  @media (max-width:640px){
    .back-to-top{ bottom:16px; right:16px; padding:11px 16px; font-size:12px; }
  }

  /* ---------- COOKIE BANNER + MODAL "PERSONALIZAR" ---------- */
  .cookie-banner{
    position:fixed; left:16px; right:16px; bottom:16px; z-index:50;
    max-width:640px; margin:0 auto;
    background:var(--navy); color:#fff;
    border-radius:14px; padding:18px 20px;
    box-shadow:0 8px 24px rgba(11,22,54,0.35);
    display:none; flex-direction:column; gap:12px;
  }
  .cookie-banner.visible{ display:flex; }
  .cookie-banner p{ margin:0; font-size:13px; line-height:1.5; color:#D6DFF5; }
  .cookie-banner p a{ color:#fff; font-weight:600; text-decoration:underline; }
  .cookie-banner-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
  @media (max-width:640px){
    .cookie-banner{ left:10px; right:10px; bottom:10px; padding:16px; }
    .cookie-banner-actions{ justify-content:stretch; }
    .cookie-banner-actions button{ flex:1; }
  }

  /* Botones reutilizables del sistema de cookies — cc-btn-solid funciona
     sobre cualquier fondo (relleno opaco); ghost/text están pensados para
     el banner (fondo navy) y outline para el modal (fondo blanco). */
  .cc-btn-solid, .cc-btn-ghost, .cc-btn-outline, .cc-btn-text{
    font-family:'Oswald',sans-serif; font-weight:700; font-size:12.5px; text-transform:uppercase;
    padding:10px 18px; border-radius:20px; border:none; cursor:pointer; white-space:nowrap;
  }
  .cc-btn-solid{ background:var(--red); color:#fff; }
  @media (hover:hover){ .cc-btn-solid:hover{ background:#cf2f3b; } }
  .cc-btn-ghost{ background:transparent; color:#D6DFF5; border:1.5px solid rgba(255,255,255,0.25); }
  .cc-btn-text{ background:none; color:#D6DFF5; text-decoration:underline; padding:10px 4px; }
  .cc-btn-outline{ background:transparent; color:var(--ink); border:1.5px solid var(--border); }
  @media (hover:hover){ .cc-btn-outline:hover{ border-color:var(--blue); color:var(--blue); } }

  .cookie-modal-backdrop{
    display:none; position:fixed; inset:0; z-index:70; background:rgba(11,22,54,0.55);
  }
  .cookie-modal-backdrop.visible{ display:block; }
  .cookie-modal{
    display:none; position:fixed; z-index:71; left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(480px, 92vw); max-height:85vh; overflow-y:auto;
    background:var(--card); border-radius:16px; padding:24px;
    box-shadow:0 20px 50px rgba(11,22,54,0.4);
  }
  .cookie-modal.visible{ display:block; }
  /* Evita el scroll de fondo mientras el modal está abierto. */
  body.cc-modal-open{ overflow:hidden; }
  .cookie-modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:6px; }
  .cookie-modal-head h2{ font-family:'Oswald',sans-serif; font-size:18px; margin:0; color:var(--ink); }
  .cc-modal-close{
    background:none; border:none; font-size:16px; color:var(--ink-faint); cursor:pointer;
    padding:5px 8px; line-height:1; border-radius:6px; flex-shrink:0;
  }
  @media (hover:hover){ .cc-modal-close:hover{ background:var(--bg); color:var(--ink); } }
  .cookie-modal-intro{ font-size:13px; color:var(--ink-soft); line-height:1.55; margin:0 0 14px; }
  .cookie-modal-intro a{ color:var(--blue); font-weight:600; }
  .cookie-category{ border-top:1px solid var(--border); padding:14px 0; }
  .cookie-category:first-of-type{ border-top:none; padding-top:4px; }
  .cookie-category-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .cookie-category-name{ font-family:'Oswald',sans-serif; font-weight:600; font-size:14px; color:var(--ink); }
  .cookie-category-desc{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:6px 0 0; }
  .cookie-modal-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
  /* Bug real (captura del usuario, 2026-08-27): con white-space:nowrap
     (heredado de .cc-btn-*) "GUARDAR PREFERENCIAS" no cabía en 1/3 del
     modal y desbordaba encima del botón rojo de al lado en vez de partirse
     en dos líneas. Se permite el salto de línea solo aquí. */
  .cookie-modal-actions button{ flex:1 1 0; min-width:0; white-space:normal; line-height:1.25; padding-left:8px; padding-right:8px; }

  /* Interruptor accesible: checkbox real (focus/teclado nativos) pintado
     como un toggle — el input queda invisible pero sigue ahí encima,
     clicable y enfocable, en vez de sustituirlo por un <div> falso. */
  .cookie-toggle{ position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; cursor:pointer; }
  .cookie-toggle input{
    position:absolute; inset:0; margin:0; opacity:0; cursor:pointer; z-index:1;
  }
  .cookie-toggle input:disabled{ cursor:not-allowed; }
  .cookie-toggle-track{
    position:absolute; inset:0; background:var(--border); border-radius:999px;
    transition:background .15s ease;
  }
  .cookie-toggle input:checked + .cookie-toggle-track{ background:var(--blue); }
  .cookie-toggle input:disabled + .cookie-toggle-track{ background:var(--blue); opacity:.5; }
  .cookie-toggle-knob{
    position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
    background:#fff; box-shadow:0 1px 3px rgba(11,22,54,0.3); transition:transform .15s ease;
  }
  .cookie-toggle input:checked + .cookie-toggle-track .cookie-toggle-knob{ transform:translateX(18px); }
  .cookie-toggle input:focus-visible + .cookie-toggle-track{
    outline:2px solid var(--blue); outline-offset:2px;
  }

  /* ---------- FOOTER ---------- */
  footer{ background:var(--navy); padding:40px 20px 20px; margin-top:0; }
  .footer-inner{
    max-width:min(1600px, 92vw); margin:0 auto;
    display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  }
  .footer-brand-row{ display:flex; align-items:center; gap:14px; }
  .footer-logo{ width:44px; height:44px; border-radius:50%; flex-shrink:0; }
  .footer-brand{ font-family:'Oswald',sans-serif; font-weight:700; font-size:18px; margin:0 0 4px; }
  /* margin:0 porque el <p> trae un margen por defecto del navegador que
     descuadraba el centrado vertical del logo respecto a las dos líneas. */
  .footer-desc{ color:#8FA0CC; font-size:14.5px; line-height:1.5; max-width:420px; margin:0; }
  .footer-tg{
    font-family:'Oswald',sans-serif; font-weight:700; font-size:14px; text-transform:uppercase;
    color:#fff; background:var(--red); border-radius:24px; padding:13px 24px;
    display:inline-flex; align-items:center; gap:8px; white-space:nowrap; flex-shrink:0;
  }
  @media (hover:hover){ .footer-tg:hover{ background:#cf2f3b; } }

  .footer-legal-row{
    max-width:min(1600px, 92vw); margin:28px auto 0; padding-top:24px;
    border-top:1px solid rgba(255,255,255,0.08);
    display:flex; gap:56px; flex-wrap:wrap;
  }
  .footer-legal-col{ display:flex; flex-direction:column; gap:10px; min-width:150px; }
  .footer-legal-title{
    font-family:'Oswald',sans-serif; font-weight:700; font-size:11px; text-transform:uppercase;
    letter-spacing:0.06em; color:#6E7CA5; margin:0 0 2px;
  }
  .footer-legal-col a, .footer-legal-col button{
    font-size:13px; color:#B7C2E0; cursor:pointer;
    background:none; border:none; padding:0; margin:0; text-align:left; font-family:inherit;
  }
  @media (hover:hover){ .footer-legal-col a:hover, .footer-legal-col button:hover{ color:#fff; text-decoration:underline; } }

  .copyright{ text-align:center; color:#6E7CA5; font-size:11.5px; margin-top:24px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.08); }
  @media (max-width:640px){
    .footer-legal-row{ justify-content:center; text-align:center; }
  }

  /* ---------- MOBILE ---------- */
  @media (max-width:640px){
    .filter-panel{ grid-template-columns:1fr; }
    .hero-cta-row{ flex-direction:column; }
    .hero-cta{ width:100%; justify-content:center; }
    /* Una oferta por fila en móvil: la tarjeta aprovecha todo el ancho, así
       que la imagen puede ser más alta y la descripción cabe en 2 líneas. */
    .grid{ grid-template-columns:1fr; gap:14px; }
    .img-wrap > img{ height:190px; }
    .footer-inner{ flex-direction:column; text-align:center; }
    .footer-brand-row{ justify-content:center; }
    .footer-desc{ margin:0 auto; }
    /* Bug real (captura del usuario, 2026-08-17): con background-size:cover
       en un móvil estrecho, la franja visible de hero-visual.jpg es mucho
       más estrecha que la imagen entera (1536x1024) — con "8% center" esa
       franja caía casi entera sobre el hueco oscuro vacío de la izquierda,
       dejando solo un borde del círculo del logo asomando a la derecha.
       El logo está a ~70% del ancho de la imagen original, así que hay que
       centrar ahí, no cerca del borde izquierdo. */
    .hero-band{ min-height:0; background-position:70% center; }
    /* A petición del usuario (2026-08-18): sin la capa oscura de encima
       (probada el día anterior para el contraste del título) — el logo
       debe verse nítido, no apagado. El contraste del texto se cubre con
       text-shadow en vez de oscurecer la foto entera (ver .hero-eyebrow/
       .hero-title más abajo). */
    .hero-eyebrow, .hero-title{ text-shadow:0 2px 10px rgba(0,0,0,0.85), 0 0 3px rgba(0,0,0,0.6); }
    /* A petición del usuario (2026-08-17, misma captura): en móvil el
       párrafo de descripción empujaba los botones muy abajo, lejos de la
       altura del logo, y dejaba mucho margen suelto arriba/abajo del
       hero. Se oculta el párrafo y se recorta el padding vertical del
       contenedor para que quede compacto. */
    .hero-sub{ display:none; }
    .hero-title{ margin-bottom:16px; }
    .hero-grid{ padding:26px 20px 22px; }
    /* A petición del usuario (2026-08-18): un solo botón en móvil ("Ver
       ofertas" sobra, ya está el buscador justo debajo) y con más
       separación respecto al título/logo. */
    .hero-cta.secondary{ display:none; }
    .hero-cta-row{ margin-top:50px; }
    nav.mainnav{ padding:9px 16px; }
    /* Safari en iOS hace zoom automático de toda la página al enfocar un
       campo de texto con font-size menor de 16px — por debajo de eso, cada
       toque para escribir dispara un zoom no deseado. */
    .hero-search input, .mobile-select, .range-inputs input, .filter-box select{
      font-size:16px;
    }
  }

  /* ---------- PÁGINAS LEGALES (aviso-legal, privacidad, cookies, terminos) --------
     Antes cada título llevaba su style="" repetido a mano en el HTML — se
     centraliza aquí para que las 4 páginas compartan exactamente el mismo
     aspecto sin duplicar reglas de tipografía en cada archivo. */
  .legal-content{ font-size:14.5px; line-height:1.75; color:var(--ink-soft); }
  .legal-content h2{
    font-family:'Oswald',sans-serif; color:var(--ink); font-size:18px; margin:28px 0 8px;
  }
  .legal-content h2:first-child{ margin-top:0; }
  .legal-content h3{
    font-family:'Oswald',sans-serif; color:var(--ink); font-size:15px; margin:18px 0 6px;
  }
  .legal-content p{ margin:0 0 12px; }
  .legal-content a{ color:var(--blue); font-weight:600; }
  .legal-content a:hover{ text-decoration:underline; }
  .legal-content ul{ margin:0 0 12px; padding-left:22px; }
  .legal-content li{ margin-bottom:6px; }
  .legal-content strong{ color:var(--ink); }
  .legal-placeholder{
    background:#FFF7E6; color:#8A5A00; border:1px dashed #E0B048; border-radius:4px;
    padding:1px 6px; font-weight:700; white-space:nowrap;
  }
  .legal-updated{ color:var(--ink-faint); font-size:12.5px; margin:0 0 28px; }
  .legal-table{ width:100%; border-collapse:collapse; margin:0 0 16px; font-size:13px; }
  .legal-table th, .legal-table td{
    text-align:left; padding:9px 10px; border:1px solid var(--border); vertical-align:top;
  }
  .legal-table th{ background:var(--bg); font-family:'Oswald',sans-serif; font-size:11.5px; text-transform:uppercase; color:var(--ink-soft); }
  .legal-table-wrap{ overflow-x:auto; margin:0 0 16px; }
  @media (max-width:640px){ .legal-table{ font-size:12px; } .legal-table th, .legal-table td{ padding:7px 8px; } }

  /* ---------- PÁGINA DE DETALLE DE OFERTA ---------- */
  .breadcrumb{ font-size:12.5px; color:var(--ink-faint); margin:20px 0 18px; }
  .breadcrumb a{ color:var(--blue); }
  .breadcrumb a:hover{ text-decoration:underline; }
  .offer-detail{
    display:grid; grid-template-columns:minmax(260px, 440px) 1fr; gap:32px;
    background:var(--card); border:1.5px solid var(--border); border-radius:16px;
    padding:24px; margin-bottom:28px;
  }
  .offer-detail-media{ position:relative; background:#fff; border-radius:12px; overflow:hidden; }
  .offer-detail-media img{ width:100%; height:auto; max-height:420px; object-fit:contain; display:block; margin:0 auto; }
  .offer-detail-info{ display:flex; flex-direction:column; gap:10px; }
  .offer-detail-info h1{
    font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(20px,2.6vw,28px);
    line-height:1.25; margin:0; color:var(--ink);
  }
  .price-row-lg{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
  .price-row-lg .price-now{ font-size:32px; }
  .price-row-lg .price-before{ font-size:15px; }
  /* Desglose completo de precio en packs (Fase 7, 2026-08-27) — la rejilla
     se queda con el badge de una línea (ver .pack-badge); aquí, sin
     vecinas con las que descuadrar la altura de la fila, cabe la caja
     entera: normal/ud. → total sin promo → con promoción → efectivo/ud. */
  .price-breakdown{
    background:var(--bg); border:1.5px dashed var(--border); border-radius:10px;
    padding:12px 16px; font-size:13.5px; color:var(--ink-soft);
  }
  .price-breakdown-row{ display:flex; justify-content:space-between; padding:2px 0; }
  .price-breakdown-final{
    margin-top:6px; padding-top:8px; border-top:1px solid var(--border);
    font-family:'Oswald',sans-serif; font-weight:700; font-size:15px; color:var(--blue-dark); text-align:center;
  }
  .offer-detail-desc{ font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin:0; white-space:pre-line; }
  .ver-oferta-lg{
    align-self:flex-start; font-family:'Oswald',sans-serif; font-weight:700; font-size:14.5px; text-transform:uppercase;
    background:var(--navy); color:#fff; padding:14px 30px; border-radius:10px; display:inline-flex; align-items:center; gap:8px;
    margin-top:4px;
  }
  @media (hover:hover){ .ver-oferta-lg:hover{ background:var(--blue); } }
  .telegram-cta-block{
    background:var(--navy); border-radius:16px; padding:26px 28px; margin-bottom:32px;
    display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  }
  .telegram-cta-block p{ color:#B7C2E0; font-size:14.5px; margin:0; max-width:520px; }
  @media (max-width:640px){
    .offer-detail{ grid-template-columns:1fr; padding:18px; }
    .telegram-cta-block{ flex-direction:column; text-align:center; }
  }

  /* ---------- OFERTAS CADUCADAS/AGOTADAS ---------- */
  .oferta-card.expired .img-wrap > img{ filter:grayscale(1); opacity:.55; }
  .expired-badge{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    background:rgba(11,22,54,0.88); color:#fff;
    font-family:'Oswald',sans-serif; font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:0.04em;
    padding:8px 16px; border-radius:8px; white-space:nowrap; z-index:2;
  }
  .oferta-card.expired .oferta-title{ color:var(--ink-faint); }
  .oferta-card.expired .ver-oferta{ background:var(--ink-faint); }
  .offer-detail-media.expired img{ filter:grayscale(1); opacity:.55; }
  .offer-detail-media .expired-badge{ font-size:14px; padding:10px 20px; }