/* cancun100-campanas · /ofertas/ en piel «Cinta amarilla» (ORDEN-OFERTAS-1, maqueta final). Calle de noche: siempre oscura.
   Manrope (--ui) y JetBrains Mono (--mo-f) del tema. Botones: el .btn del tema, solo cambian sus colores.
   Las animaciones se pausan fuera de pantalla (.o-fuera, lo pone ofertas.js) y con prefers-reduced-motion todo queda quieto. */
.c100-ofertas {
  --o-noche: #07070A; --o-asfalto: #111116; --o-linea: #2B2B35; --o-amarillo: #FFD400; --o-amarillo-canto: #8A7300;
  --o-sobre-amarillo: #07070A; --o-rosa: #FF2E88; --o-rosa-canto: #8C0F47; --o-cian: #22E1FF; --o-blanco: #F6F6F2; --o-gris: #A6A6B0; --o-verde: #4ADE9A;
  --o-ui: var(--ui, "Manrope", system-ui, sans-serif); --o-mo: var(--mo-f, "JetBrains Mono", ui-monospace, monospace);
  color-scheme: dark; background: var(--o-noche); color: var(--o-blanco); font-family: var(--o-ui); font-size: 15px; line-height: 1.5;
  overflow-x: clip; padding-bottom: var(--o-barra-alto, calc(66px + env(safe-area-inset-bottom, 0px)));
}
.c100-ofertas *, .c100-ofertas *::before, .c100-ofertas *::after { box-sizing: border-box; }
.c100-ofertas h1, .c100-ofertas h2, .c100-ofertas h3 { margin: 0; text-wrap: balance; color: var(--o-blanco); letter-spacing: normal; }
.c100-ofertas p { margin: 0; }
.c100-ofertas :focus-visible { outline: 2px solid var(--o-cian); outline-offset: 3px; }
.o-wrap { max-width: 1200px; margin: 0 auto; padding-inline: 16px; }
.o-ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* botones: el .btn del tema con los colores de la piel */
.c100-ofertas .btn { text-transform: uppercase; letter-spacing: .02em; white-space: normal; text-align: center; }
.c100-ofertas a.btn, .c100-ofertas a.btn:hover { color: var(--btn-tinta); text-decoration: none; }
.c100-ofertas .o-btn--am, .c100-ofertas .btn.o-btn--chico { --btn-cara: var(--o-amarillo); --btn-tinta: var(--o-sobre-amarillo); --btn-borde: var(--o-amarillo); --btn-canto: var(--o-amarillo-canto); }
.c100-ofertas .o-btn--rosa { --btn-cara: var(--o-rosa); --btn-tinta: #fff; --btn-borde: var(--o-rosa); --btn-canto: var(--o-rosa-canto); }
.c100-ofertas .o-btn--linea { --btn-cara: transparent; --btn-tinta: var(--o-blanco); --btn-borde: var(--o-blanco); --btn-canto: var(--o-linea); }
/* Auditoría de botones 3D (B, 12:49): el chico de las variables comunes; sin relleno vertical (el .btn le daba 57 px de alto) */
.c100-ofertas .o-btn--chico { display: inline-flex; align-items: center; justify-content: center; min-height: var(--c100-btn-alto-chico, 44px); padding-block: 0; padding-inline: var(--c100-btn-pl-chico, 16px); font-size: var(--c100-btn-fuente-chico, .875rem); line-height: 1.2; }

/* 1 · letrero LED */
.o-led { position: relative; background: #050505; border-block: 3px solid #222; overflow: hidden; height: 52px; }
.o-led__pista { display: flex; width: max-content; animation: o-corre 40s linear infinite; }
.o-led__pista span { font: 800 26px/52px var(--o-mo); letter-spacing: .08em; color: var(--o-amarillo); text-shadow: 0 0 6px rgba(255,212,0,.9), 0 0 18px rgba(255,160,0,.55); white-space: nowrap; padding-right: 40px; text-transform: uppercase; }
.o-led__pista b { color: var(--o-rosa); text-shadow: 0 0 6px rgba(255,46,136,.9), 0 0 18px rgba(255,46,136,.5); }
.o-led__pista b svg { width: .62em; height: .62em; vertical-align: .06em; fill: currentColor; filter: drop-shadow(0 0 6px rgba(255,46,136,.9)) drop-shadow(0 0 18px rgba(255,46,136,.5)); }
.o-led::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, transparent 1.5px, rgba(5,5,5,.8) 2px) 0 0 / 4px 4px; }
@keyframes o-corre { to { transform: translateX(-50%); } }

/* 2 · portada neón */
.o-portada { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 85% 0%, #2a0b1f 0%, transparent 55%), radial-gradient(100% 80% at 0% 100%, #06222b 0%, transparent 55%), var(--o-noche); border-bottom: 4px solid var(--o-amarillo); }
.o-lluvia { position: absolute; inset: -50% 0 0; pointer-events: none; background: repeating-linear-gradient(100deg, rgba(255,255,255,.06) 0 1px, transparent 1px 14px); animation: o-llueve .7s linear infinite; opacity: .8; }
@keyframes o-llueve { to { transform: translateY(40px); } }
.o-portada__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; padding-block: 36px 44px; }
.o-sale { font: 800 clamp(72px, 13vw, 172px)/.85 var(--o-ui); letter-spacing: -.03em; color: #fff; text-shadow: 0 0 4px #fff, 0 0 12px var(--o-rosa), 0 0 32px var(--o-rosa), 0 0 64px var(--o-rosa); animation: o-parpadea 5s infinite; }
@keyframes o-parpadea { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: .35; } }
.o-portada h1 { font: 800 clamp(30px, 4.4vw, 54px)/1.08 var(--o-ui); text-transform: uppercase; margin-top: 16px; }
.o-portada .o-sub { color: var(--o-gris); margin-top: 24px; max-width: 50ch; font-size: 16px; }
.o-portada__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; align-items: center; }
.o-aqui { display: inline-flex; align-items: center; gap: 8px; font: 800 22px var(--o-mo); color: var(--o-cian); text-shadow: 0 0 6px var(--o-cian), 0 0 20px var(--o-cian); animation: o-empuja 1.1s ease-in-out infinite; }
.o-aqui .o-ic { width: 30px; height: 30px; stroke-width: 2.6; filter: drop-shadow(0 0 6px var(--o-cian)); }
@keyframes o-empuja { 50% { transform: translateX(-8px); } }
.o-reloj { display: grid; gap: 10px; justify-items: start; }
.o-reloj__t { font: 800 12px var(--o-mo); letter-spacing: .12em; color: var(--o-amarillo); text-transform: uppercase; }
.o-flaps { display: flex; gap: 8px; flex-wrap: wrap; }
.o-flap { display: grid; gap: 6px; justify-items: center; }
.o-flap__c { display: flex; gap: 3px; }
.o-celda { position: relative; width: 32px; height: 48px; background: #18181d; border-radius: 5px; display: grid; place-items: center; font: 800 28px var(--o-mo); color: var(--o-blanco); box-shadow: inset 0 -2px 0 rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.6); }
.o-celda::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: #050505; }
.o-celda.o-gira { animation: o-gira .28s ease-in; }
@keyframes o-gira { 50% { transform: scaleY(.08); } }
.o-flap span { font: 700 10.5px var(--o-mo); color: var(--o-gris); letter-spacing: .08em; text-transform: uppercase; }
.o-reloj__pie { font-size: 13px; color: var(--o-gris); }
.o-emoji { position: absolute; pointer-events: none; line-height: 1; }
.o-emoji img { display: block; width: 100%; height: auto; }
.o-emoji--fuego { top: 14px; right: 10px; width: clamp(64px, 9vw, 120px); transform-origin: 50% 90%; filter: drop-shadow(0 0 22px rgba(255,110,0,.8)); }
.o-emoji--regalo { top: 12px; right: 12px; width: 64px; }

/* cinta de precaución */
/* TIENDA-E-IMAGENES-1 §1 (Marco, 13-oct): cinta de precaución de verdad: centro amarillo liso y, arriba y abajo, un borde
   de rayas diagonales negras y amarillas (un solo elemento: el amarillo en padding-box y las rayas en border-box) */
.o-cinta { --o-raya: 8px; background: linear-gradient(var(--o-amarillo), var(--o-amarillo)) padding-box, repeating-linear-gradient(-45deg, #111 0 10px, #FFD400 10px 20px) border-box; overflow: hidden; transform: rotate(-2deg); margin: 26px -20px; border: 0 solid transparent; border-block-width: var(--o-raya); box-shadow: 0 10px 18px -10px rgba(0,0,0,.55); }
@media (max-width: 600px) { .o-cinta { --o-raya: 6px; background: linear-gradient(var(--o-amarillo), var(--o-amarillo)) padding-box, repeating-linear-gradient(-45deg, #111 0 7px, #FFD400 7px 14px) border-box; } }
.o-cinta .o-pista { display: flex; width: max-content; animation: o-corre 22s linear infinite; }
.o-cinta span { font: 800 22px/44px var(--o-mo); color: #0B0B0C; letter-spacing: .1em; padding-right: 28px; white-space: nowrap; }
@media (max-width: 600px) { .o-cinta span { font-size: 17px; line-height: 36px; } }

/* secciones */
/* Bajo el pliegue el navegador no maqueta ni pinta lo que no se ve (el layout inicial era 2x el de /tours/ en movil lento). */
.o-sec { padding-block: 44px; content-visibility: auto; contain-intrinsic-size: auto 900px; }
.o-sec__hd { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.o-sec__hd h2 { font: 800 clamp(28px, 4vw, 46px)/1 var(--o-ui); text-transform: uppercase; }
.o-sec__hd h2 em { font-style: normal; color: var(--o-amarillo); }
.o-sec__hd p { color: var(--o-gris); max-width: 54ch; }
.o-eti { font: 800 12px var(--o-mo); letter-spacing: .12em; color: var(--o-rosa); text-transform: uppercase; }

/* 4 · producto de la semana */
.o-semana { display: grid; grid-template-columns: minmax(0, 1fr); border: 3px solid var(--o-amarillo); background: var(--o-asfalto); position: relative; overflow: hidden; }
.o-semana__f { min-height: 230px; position: relative; background: linear-gradient(135deg, #0B3D5C, #1B8AA6 45%, #F2C14E); display: grid; place-items: center; }
.o-grande { font: 800 clamp(90px, 14vw, 190px)/.8 var(--o-mo); color: #fff; letter-spacing: -.06em; text-shadow: 6px 6px 0 var(--o-sobre-amarillo); }
.o-semana__c { padding: 24px 20px; display: grid; gap: 14px; align-content: center; min-width: 0; }
.o-semana__c h2 { font: 800 clamp(26px, 3.2vw, 38px)/1.05 var(--o-ui); text-transform: uppercase; }
.o-desc { color: var(--o-gris); }
.o-datos { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13.5px; }
.o-datos span { display: inline-flex; gap: 6px; align-items: center; }
.o-datos .o-ic { color: var(--o-amarillo); }
.o-precio { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.o-precio s { font: 500 14px var(--o-mo); color: var(--o-gris); }
.o-precio strong { font: 800 26px var(--o-mo); color: var(--o-amarillo); }
.o-precio--grande strong { font-size: clamp(34px, 5vw, 46px); }
.o-ahorro { color: var(--o-verde); font-weight: 800; font-size: 14px; }
.o-cuenta-mini { font: 800 13px var(--o-mo); color: var(--o-cian); letter-spacing: .05em; }
.o-colgantes { position: absolute; top: 0; right: 22px; display: flex; gap: 14px; }
.o-colg { transform-origin: 50% 0; animation: o-mece 2.8s ease-in-out infinite; display: grid; justify-items: center; }
.o-colg:nth-child(2) { animation-delay: -.9s; }
.o-colg i { width: 2px; height: 38px; background: var(--o-gris); }
.o-colg b { font: 800 15px var(--o-mo); background: var(--o-blanco); color: var(--o-noche); padding: 10px 10px 8px; clip-path: polygon(50% 0, 100% 18%, 100% 100%, 0 100%, 0 18%); position: relative; }
.o-colg b::before { content: ""; position: absolute; left: 50%; top: 7px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--o-noche); }
@keyframes o-mece { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }

/* 5 · tablero */
.o-tablero { background: #0d0d11; border: 2px solid var(--o-linea); padding: 18px; display: grid; gap: 12px; }
.o-fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 14px; align-items: center; border-bottom: 1px dashed var(--o-linea); padding-bottom: 12px; }
.o-fila:last-child { border-bottom: 0; padding-bottom: 0; }
.o-fila__n { font: 800 16px var(--o-mo); text-transform: uppercase; letter-spacing: .04em; min-width: 0; }
.o-fila__n small { display: block; font: 500 12px var(--o-ui); color: var(--o-gris); letter-spacing: 0; text-transform: none; }
.o-mini .o-celda { width: 24px; height: 34px; font-size: 20px; color: var(--o-amarillo); }

/* 6 · carrusel automático */
.o-carril { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.o-carril__pista { display: flex; gap: 16px; width: max-content; animation: o-corre var(--o-dur, 44s) linear infinite; padding-block: 4px 10px; }
.o-carril:hover .o-carril__pista, .o-carril:focus-within .o-carril__pista, .o-carril.o-tocado .o-carril__pista { animation-play-state: paused; }
/* TIENDA-E-IMAGENES-1 §2: con ofertas.js el carril lo mueve el script (corre solo, se arrastra con dedo y ratón, inercia,
   retoma a los 3 s); la animación CSS queda solo de respaldo sin script. El scroll vertical del teléfono sigue libre. */
.o-carril--js { touch-action: pan-y; cursor: grab; }
.o-carril--js.o-arrastra { cursor: grabbing; }
.o-carril--js .o-carril__pista { animation: none; will-change: transform; }
.o-carril--js.o-arrastra * { user-select: none; -webkit-user-select: none; }
.o-carril--js img { -webkit-user-drag: none; }

/* tarjetas (carrusel y lista) */
.o-tarjeta { width: 270px; flex: none; background: var(--o-asfalto); border: 2px solid var(--o-blanco); box-shadow: 6px 6px 0 var(--o-amarillo); display: grid; grid-template-rows: 130px 1fr; min-width: 0; }
.o-tarjeta__f { position: relative; display: grid; place-items: end start; padding: 10px; }
.o-tarjeta__f b { position: absolute; top: 10px; right: 10px; font: 800 20px var(--o-mo); background: var(--o-rosa); color: #fff; padding: 6px 8px; transform: rotate(4deg); }
.o-prueba { font: 700 10px var(--o-mo); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.6); padding: 3px 7px; }
.o-tarjeta__c { padding: 14px; display: grid; gap: 8px; align-content: start; }
.o-tarjeta__c h3 { font: 800 15.5px/1.25 var(--o-ui); }
.o-tarjeta__c h3 i, .o-cb h3 i { font-style: normal; color: var(--o-rosa); }
.o-tarjeta__c .o-datos { font-size: 12.5px; color: var(--o-gris); }
.o-tarjeta__c .btn { justify-self: start; margin-top: 4px; }
.o-g1 { background: linear-gradient(135deg, #0E7C86, #39B5A5 55%, #F2C14E); } .o-g2 { background: linear-gradient(135deg, #1B4F72, #2E86AB 50%, #9AD1D4); }
.o-g3 { background: linear-gradient(135deg, #5B3A29, #A0673B 55%, #E3B778); } .o-g4 { background: linear-gradient(135deg, #10403B, #1F7A5C 50%, #8CCB9B); }
.o-g5 { background: linear-gradient(135deg, #3B2F63, #7C5CBF 55%, #F1A7C4); } .o-g6 { background: linear-gradient(135deg, #6B2D0F, #C75B2A 50%, #F4B860); }

/* 7 · lista con filtros */
.o-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; scrollbar-width: none; }
.o-chip { flex: none; font: 700 13px var(--o-ui); padding: 9px 14px; border: 2px solid var(--o-blanco); background: transparent; color: var(--o-blanco); cursor: pointer; min-height: 44px; }
.o-chip[aria-pressed="true"] { background: var(--o-amarillo); color: var(--o-sobre-amarillo); border-color: var(--o-amarillo); }
.o-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.o-lista .o-tarjeta { width: auto; }
.o-lista .o-tarjeta[hidden] { display: none; }

/* 8 · calle con combos */
.o-calle { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: stretch; }
.o-vert { font: 800 22px/1 var(--o-ui); letter-spacing: .05em; padding: 10px; border: 3px solid currentColor; text-align: center; border-radius: 6px; }
.o-vert--rosa { color: var(--o-rosa); text-shadow: 0 0 6px var(--o-rosa), 0 0 22px var(--o-rosa); box-shadow: 0 0 18px rgba(255,46,136,.35), inset 0 0 18px rgba(255,46,136,.2); }
.o-vert--cian { color: var(--o-cian); text-shadow: 0 0 6px var(--o-cian), 0 0 22px var(--o-cian); box-shadow: 0 0 18px rgba(34,225,255,.35), inset 0 0 18px rgba(34,225,255,.2); animation: o-parpadea 7s infinite 1s; }
.o-calle__c { display: grid; gap: 16px; align-content: center; min-width: 0; }
.o-calle__c .o-sec__hd { margin: 0; }
.o-combos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.o-cb { background: var(--o-asfalto); border: 2px solid var(--o-blanco); padding: 16px; display: grid; gap: 8px; min-width: 0; }
.o-cb h3 { font: 800 17px var(--o-ui); }
.o-cb .btn { justify-self: start; }
.o-vig { font: 700 10.5px var(--o-mo); color: var(--o-verde); letter-spacing: .08em; text-transform: uppercase; }

/* 9 · juegos */
.o-juegos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.o-juego { position: relative; background: var(--o-asfalto); border: 2px solid var(--o-linea); padding: 26px 22px; display: grid; gap: 14px; justify-items: center; text-align: center; min-width: 0; overflow: hidden; }
.o-juego h3 { font: 800 20px var(--o-ui); text-transform: uppercase; }
.o-juego p { color: var(--o-gris); font-size: 14px; }
.o-regalo { position: relative; width: 150px; height: 150px; border: 0; background: none; cursor: pointer; padding: 0; }
.o-regalo__caja { position: absolute; left: 15px; right: 15px; bottom: 0; height: 95px; background: var(--o-rosa); box-shadow: inset 0 -10px 0 rgba(0,0,0,.18); }
.o-regalo__caja::before, .o-regalo__tapa::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 18px; margin-left: -9px; background: var(--o-amarillo); }
.o-regalo__tapa { position: absolute; left: 5px; right: 5px; bottom: 92px; height: 30px; background: #ff4f9d; transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.o-regalo__mono { position: absolute; left: 50%; bottom: 120px; width: 60px; height: 34px; margin-left: -30px; transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.o-regalo__mono::before, .o-regalo__mono::after { content: ""; position: absolute; bottom: 0; width: 30px; height: 30px; border: 7px solid var(--o-amarillo); border-radius: 50% 50% 0 50%; }
.o-regalo__mono::before { left: 0; transform: rotate(10deg); } .o-regalo__mono::after { right: 0; transform: scaleX(-1) rotate(10deg); }
.o-regalo:not(.o-abierto) { animation: o-salta 1.6s ease-in-out infinite; }
@keyframes o-salta { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-6deg); } 86% { transform: rotate(6deg); } 94% { transform: rotate(-3deg); } }
.o-regalo.o-abierto .o-regalo__tapa { transform: translateY(-70px) rotate(-18deg); }
.o-regalo.o-abierto .o-regalo__mono { transform: translateY(-90px) rotate(-24deg); }
.o-premio-t { font: 800 15px var(--o-ui); color: var(--o-amarillo); }
.o-caribe { font: 800 26px var(--o-ui); text-transform: uppercase; color: #fff; text-shadow: 0 0 4px #fff, 0 0 12px var(--o-cian), 0 0 30px var(--o-cian); }
canvas.o-confeti { position: absolute; inset: 0; pointer-events: none; width: 100%; height: 100%; }
.o-slot { display: flex; gap: 8px; background: #050505; border: 3px solid var(--o-amarillo); padding: 10px; box-shadow: 0 0 22px rgba(255,212,0,.25); }
.o-rodillo { width: 66px; height: 76px; background: var(--o-blanco); display: grid; place-items: center; color: var(--o-noche); }
.o-rodillo .o-ic { width: 40px; height: 40px; stroke-width: 1.7; }
.o-rodillo.o-giro { animation: o-tiembla .12s linear infinite; }
@keyframes o-tiembla { 50% { transform: translateY(3px); } }

/* 10 · confianza y calendario, 11 · preguntas */
.o-dos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.o-caja { background: var(--o-asfalto); border: 2px solid var(--o-linea); padding: 22px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.o-caja h3 { font: 800 19px var(--o-ui); text-transform: uppercase; }
.o-caja ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.o-caja li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; font-size: 14px; color: var(--o-gris); }
.o-caja li .o-ic { color: var(--o-amarillo); margin-top: 2px; }
.o-caja li b { color: var(--o-blanco); }
.o-caja .btn { justify-self: start; }
.o-cal div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--o-linea); font-size: 14px; }
.o-cal div:last-child { border-bottom: 0; }
.o-cal span { font: 700 12.5px var(--o-mo); color: var(--o-gris); }
.o-cal .o-ya { color: var(--o-amarillo); }
.o-faq { border-top: 2px solid var(--o-linea); max-width: 860px; }
.o-faq details { border-bottom: 2px solid var(--o-linea); }
.o-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; font-weight: 800; font-size: 16px; }
.o-faq summary::-webkit-details-marker { display: none; }
.o-faq summary::after { content: "+"; font: 800 20px var(--o-mo); color: var(--o-amarillo); line-height: 1; }
.o-faq details[open] summary::after { content: "\2013"; }
.o-faq details p { padding: 0 0 16px; color: var(--o-gris); max-width: 70ch; }
.o-pie { padding-block: 22px; color: var(--o-gris); font-size: 12.5px; border-top: 1px solid var(--o-linea); }

/* 12 · barra fija (deja libre la esquina del chat del tema) */
.o-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #050505; border-top: 3px solid var(--o-amarillo); padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); }
.o-barra__in { max-width: 1200px; margin: 0 auto; display: flex; gap: 12px; align-items: center; justify-content: space-between; padding-right: 64px; }
.o-barra__t { font: 800 14px var(--o-mo); color: var(--o-amarillo); text-shadow: 0 0 8px rgba(255,212,0,.7); letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.o-cupon-flota { position: fixed; left: 16px; bottom: calc(var(--o-barra-alto, 76px) + 12px); z-index: 31; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; font: 800 13px var(--o-ui); background: var(--o-rosa); color: #fff; border: 0; padding: 10px 14px; cursor: pointer; box-shadow: 0 4px 0 var(--o-rosa-canto), 0 10px 24px rgba(0,0,0,.5); }
.o-cupon-flota[hidden] { display: none; }

/* 13 · rasca y gana en ventana */
.o-velo { position: fixed; inset: 0; z-index: 9990; background: rgba(3,3,5,.86); display: grid; place-items: center; padding: 16px; animation: o-aparece .35s ease-out; }
.o-velo[hidden] { display: none; }
@keyframes o-aparece { from { opacity: 0; } }
.o-ventana { position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--o-asfalto); border: 3px solid var(--o-amarillo); box-shadow: 0 0 0 6px #0B0B0C, 0 0 60px rgba(255,212,0,.25); padding: 26px 22px 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; text-align: center; animation: o-entra .45s cubic-bezier(.3,1.5,.5,1); }
@keyframes o-entra { from { transform: scale(.85) rotate(-3deg); opacity: 0; } }
.o-ventana .o-cinta--v { margin: -26px -22px 6px; transform: none; border-block-width: 0 var(--o-raya); box-shadow: none; }
.o-ventana .o-cinta--v span { font-size: 15px; line-height: 30px; }
.o-ventana h2 { font: 800 26px/1.05 var(--o-ui); text-transform: uppercase; }
.o-ventana > p { color: var(--o-gris); font-size: 14.5px; }
.o-cerrar { position: absolute; top: 8px; right: 8px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; background: #0B0B0C; color: var(--o-blanco); border: 2px solid var(--o-blanco); cursor: pointer; }
.o-rasca { position: relative; width: 100%; aspect-ratio: 2 / 1; background: var(--o-noche); border: 3px dashed var(--o-amarillo); display: grid; place-items: center; padding: 10px; }
.o-rasca__premio strong { display: block; font: 800 30px var(--o-mo); color: var(--o-amarillo); letter-spacing: .06em; }
.o-rasca__premio span { font-size: 13px; color: var(--o-blanco); }
.o-rasca canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.o-revelar { justify-self: center; background: none; border: 0; color: var(--o-gris); font: 600 13px var(--o-ui); text-decoration: underline; cursor: pointer; min-height: 44px; }
.o-premio { display: grid; gap: 12px; }
.o-premio[hidden] { display: none; }
.o-codigo { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.o-codigo code { font: 800 20px var(--o-mo); letter-spacing: .12em; border: 2px dashed var(--o-amarillo); padding: 8px 14px; color: var(--o-amarillo); user-select: all; background: none; }
.o-cond { font-size: 12px; color: var(--o-gris); }

/* escritorio */
@media (min-width: 561px) {
  .o-celda { width: 44px; height: 62px; font-size: 40px; }
  .o-mini .o-celda { width: 30px; height: 42px; font-size: 26px; }
  .o-fila { grid-template-columns: minmax(0, 1.6fr) auto; }
  .o-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 861px) {
  .o-portada__in { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); padding-block: 44px 54px; }
  .o-semana { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .o-semana__f { min-height: 360px; }
  .o-semana__c { padding: 28px; }
  .o-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .o-calle { grid-template-columns: auto minmax(0, 1fr) auto; }
  .o-vert { writing-mode: vertical-rl; text-orientation: upright; font-size: 30px; padding: 16px 10px; }
  .o-combos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .o-juegos, .o-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-sec { padding-block: 52px; }
  .o-barra__t { font-size: 15px; }
}
@media (max-width: 560px) {
  .o-led__pista span { font-size: 21px; }
  .o-cupon-flota span { display: none; }
  /* en el celular la cuenta de la barra no se corta: dos renglones, el reloj abajo */
  .o-barra__t { font-size: 12px; line-height: 1.3; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
}

/* fuera de pantalla: quieto (lo marca ofertas.js) · y con reduced-motion, todo quieto y el carrusel a mano */
.c100-ofertas .o-fuera, .c100-ofertas .o-fuera * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .c100-ofertas *, .c100-ofertas *::before, .c100-ofertas *::after { animation: none !important; transition: none !important; }
  .o-carril { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* =============================================================================
   A-OF2 (ORDEN-OFERTAS-CLARO-1) · 1 · la portada llega hasta el pixel 0, como el mega hero
   La pagina sube lo mismo que el sitio le reserva al header (telefono: 64 px + zona segura; escritorio: el header sticky
   de 67 px) y lo devuelve como margen interno: el letrero LED queda debajo del header, sin que lo tape. Valores fijos,
   no --c100-header-h (cambia al desplazarse: CLS). En escritorio el vidrio del header deja ver la portada: la clase c100-hdr-foto del body
   (style.css, la misma regla del mega hero).
   ========================================================================== */
.c100-ofertas { --o-top: calc(64px + env(safe-area-inset-top, 0px)); margin-top: calc(-1 * var(--o-top)); padding-top: var(--o-top); }
@media (min-width: 1000px) { .c100-ofertas { --o-top: 67px; } }
/* el vidrio del header en escritorio: la bandera comun c100-hdr-foto del body (la pone class-ofertas.php; la regla vive en style.css) */

/* =============================================================================
   A-OF2 · 2 · la version clara («Cinta amarilla» de dia). La oscura es la oficial y no cambia: esto solo vale con el
   interruptor de tema en dia (:root[data-theme="light"], que el tema tambien pone con prefers-color-scheme). Todo por
   tokens del tema; el amarillo (la marca de la piel) no cambia. Sin resplandor: el neon no se lee sobre blanco.
   ========================================================================== */
:root[data-theme="light"] .c100-ofertas {
  color-scheme: light;
  --o-noche: var(--g); --o-asfalto: var(--s); --o-linea: var(--rl); --o-blanco: var(--tx); --o-gris: var(--mu);
  --o-rosa: color-mix(in oklab, var(--go) 85%, var(--tx)); --o-rosa-canto: color-mix(in oklab, var(--go) 55%, var(--tx)); --o-cian: var(--ai); --o-verde: color-mix(in oklab, var(--ok) 78%, var(--tx));   /* rosa y verde un poco mas hondos: AA en texto chico sobre blanco (4.38 y 4.10 → 5.6 y 5.3) */
  --o-amarillo-canto: color-mix(in oklab, var(--o-amarillo) 55%, var(--tx));
  background:
    repeating-linear-gradient(135deg, color-mix(in oklab, var(--tx) 4%, transparent) 0 2px, transparent 2px 14px),
    var(--g);
}
/* letrero LED: como el de la home de dia, fondo blanco y puntos de tinta; los acentos en el rosa del tema */
:root[data-theme="light"] .o-led { background: var(--g); border-block-color: var(--tx); }
:root[data-theme="light"] .o-led__pista span { color: var(--tx); text-shadow: none; }
:root[data-theme="light"] .o-led__pista b { color: var(--go); text-shadow: none; }
:root[data-theme="light"] .o-led__pista b svg { filter: none; }
:root[data-theme="light"] .o-led::after { background: radial-gradient(circle, transparent 1.5px, color-mix(in oklab, var(--g) 82%, transparent) 2px) 0 0 / 4px 4px; }
/* portada: el blanco del tema con un toque de color; SALE en tinta solida con sombra rosa desplazada */
:root[data-theme="light"] .o-portada { background: radial-gradient(120% 90% at 85% 0%, color-mix(in oklab, var(--go) 10%, transparent) 0%, transparent 55%), radial-gradient(100% 80% at 0% 100%, color-mix(in oklab, var(--ai) 10%, transparent) 0%, transparent 55%), var(--g); }
:root[data-theme="light"] .o-lluvia { background: repeating-linear-gradient(100deg, color-mix(in oklab, var(--tx) 6%, transparent) 0 1px, transparent 1px 14px); }
:root[data-theme="light"] .o-sale { color: var(--tx); text-shadow: 5px 5px 0 var(--go); }
:root[data-theme="light"] .o-aqui { color: var(--ai); text-shadow: none; }
:root[data-theme="light"] .o-aqui .o-ic { filter: none; }
/* reloj de persianas: fichas blancas con borde de tinta, numero de tinta */
:root[data-theme="light"] .o-reloj__t { color: var(--tx); }
:root[data-theme="light"] .o-celda { background: var(--g); color: var(--tx); border: 2px solid var(--tx); box-shadow: none; }
:root[data-theme="light"] .o-celda::after { background: color-mix(in oklab, var(--tx) 35%, transparent); height: 1px; }
:root[data-theme="light"] .o-mini .o-celda { color: var(--tx); }
/* amarillo como texto sobre blanco no se lee: pasa a resaltado (fondo amarillo, tinta) o a tinta */
:root[data-theme="light"] .o-sec__hd h2 em { color: var(--o-sobre-amarillo); background: var(--o-amarillo); padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:root[data-theme="light"] :is(.o-precio strong, .o-premio-t, .o-cal .o-ya, .o-rasca__premio strong, .o-codigo code) { color: var(--tx); }
:root[data-theme="light"] :is(.o-datos .o-ic, .o-caja li .o-ic) { color: var(--tx); }
:root[data-theme="light"] .o-faq summary::after { color: var(--go); }
:root[data-theme="light"] .o-codigo code { border-color: var(--tx); }
/* tarjetas, tablero, combos y juegos: sus pares claros con los mismos tokens */
:root[data-theme="light"] .o-tablero { background: var(--s); }
:root[data-theme="light"] :is(.o-vert--rosa, .o-vert--cian) { text-shadow: none; box-shadow: none; }
:root[data-theme="light"] .o-vert--rosa { color: var(--go); }
:root[data-theme="light"] .o-vert--cian { color: var(--ai); }
:root[data-theme="light"] .o-caribe { color: var(--ai); text-shadow: none; }
:root[data-theme="light"] .o-slot { background: var(--g); box-shadow: none; }
:root[data-theme="light"] .o-ventana { box-shadow: 0 0 0 6px var(--tx), 0 24px 60px color-mix(in oklab, var(--tx) 25%, transparent); }
:root[data-theme="light"] .o-velo { background: color-mix(in oklab, var(--tx) 55%, transparent); }
:root[data-theme="light"] .o-cerrar { background: var(--g); color: var(--tx); border-color: var(--tx); }
/* barra de campaña de abajo: blanca con borde de tinta, texto de tinta, boton amarillo */
:root[data-theme="light"] .o-barra { background: var(--g); border-top-color: var(--tx); box-shadow: 0 -10px 30px color-mix(in oklab, var(--tx) 12%, transparent); }
:root[data-theme="light"] .o-barra__t { color: var(--tx); text-shadow: none; }
/* Marco 20-oct 10:21: el separador de la cinta es un punto grueso centrado en la altura del texto, mismo negro y el mismo
   aire a los dos lados. Solo transform: no mueve nada al pintar. */
.o-cinta .o-sep { display: inline-block; font-style: normal; margin: 0 .55em; color: #0B0B0C; transform: scale(1.5); }
.o-cinta span { padding-right: 0; }   /* el aire entre vueltas lo da el último punto, igual que entre frases */
.o-cinta .o-sep { letter-spacing: 0; margin: 0 .6em; }

/* =============================================================================
   Marco 20-oct 10:19 §3 · /ofertas/ de día con el mismo neón tipo Blade Runner que de noche (la noche no se toca)
   Sobre blanco el neón no se lee como luz: cada letrero de neón va sobre su panel oscuro, como un anuncio de verdad,
   con los colores reales (no los del tema de día, que lo dejaban café y apagado). Solo color, fondo y sombras: nada se
   mueve al pintar.
   ========================================================================== */
.c100-ofertas { --o-neon-rosa: #FF2E88; --o-neon-cian: #22E1FF; --o-panel: #0B0716; }
/* los rótulos de neón: los colores de noche. El letrero LED de día es claro con LEDs de tinta (Marco 20-oct 16:09: en
   claro no queda ninguna sección oscura): valen las reglas claras de A-OF2 de arriba. */
:root[data-theme="light"] .o-vert--rosa { color: var(--o-neon-rosa); text-shadow: 0 0 6px var(--o-neon-rosa), 0 0 22px var(--o-neon-rosa); box-shadow: 0 0 18px rgba(255,46,136,.35), inset 0 0 18px rgba(255,46,136,.2); }
:root[data-theme="light"] .o-vert--cian { color: var(--o-neon-cian); text-shadow: 0 0 6px var(--o-neon-cian), 0 0 22px var(--o-neon-cian); box-shadow: 0 0 18px rgba(34,225,255,.35), inset 0 0 18px rgba(34,225,255,.2); }
:root[data-theme="light"] .o-caribe { color: #0090B0; text-shadow: 0 0 1px #fff, 0 0 6px rgba(34,225,255,.95), 0 0 16px rgba(34,225,255,.6), 0 0 32px rgba(0,170,210,.35); }

/* GLITCH de «SALE», de día y de noche: un foco que falla (se apaga y se prende 2 o 3 veces rápido, con un ligero desfase
   de color) y luego 4 a 6 s quieto. Solo opacidad, transform y filtro: nada del layout. Con prefers-reduced-motion, quieto
   (la regla general de arriba apaga toda animación de la página). */
.o-sale { animation: o-glitch 5.4s steps(1, end) infinite; }
@keyframes o-glitch {
  0%, 100% { opacity: 1; transform: none; filter: none; }
  2% { opacity: .15; transform: translateX(2px); filter: hue-rotate(-25deg); }
  4% { opacity: 1; transform: none; filter: none; }
  6% { opacity: .3; transform: translateX(-2px); filter: hue-rotate(30deg); }
  8% { opacity: 1; transform: none; filter: none; }
  10% { opacity: .1; transform: translateX(1px); filter: hue-rotate(-15deg); }
  12% { opacity: 1; transform: none; filter: none; }
}
/* =============================================================================
   OFERTAS-ESTETICA-2 (Marco, 20-oct 15:50) · parte de B · 0.3.17
   ========================================================================== */
/* 1 y 5 · H1: la marca con trazo de marcatextos como la home (bajo, irregular, mitad de abajo de la letra), no un
   rectángulo; de noche el mismo trazo al 50 % con la letra blanca (blanco sobre el trazo: 5.3:1). El resto va en su línea, más ligero y más chico.
   Escala de 8 px: 16 arriba, 8 entre líneas, 24 al subtítulo y a los botones. */
.o-portada h1 .o-h1-marca {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath fill='%23FFD400' fill-opacity='.5' d='M9 17 C70 11 170 13 262 10 S372 8 393 13 L386 19 C396 22 384 27 397 31 L388 36 C394 40 386 44 392 47 C330 52 238 53 150 54 S44 57 11 55 C17 49 4 45 12 40 C3 35 13 29 6 25 C12 22 4 20 9 17Z'/%3E%3Cpath fill='%23FFD400' fill-opacity='.22' d='M30 6 C120 2 260 3 360 4 L352 9 C250 9 130 10 34 12Z'/%3E%3C/svg%3E") left 100% / 100% 62% no-repeat;
  color: var(--o-blanco); padding-inline: .12em; margin-inline: -.12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
:root[data-theme="light"] .o-portada h1 .o-h1-marca { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath fill='%23FFD400' fill-opacity='0.95' d='M9 17 C70 11 170 13 262 10 S372 8 393 13 L386 19 C396 22 384 27 397 31 L388 36 C394 40 386 44 392 47 C330 52 238 53 150 54 S44 57 11 55 C17 49 4 45 12 40 C3 35 13 29 6 25 C12 22 4 20 9 17Z'/%3E%3Cpath fill='%23FFD400' fill-opacity='0.43' d='M30 6 C120 2 260 3 360 4 L352 9 C250 9 130 10 34 12Z'/%3E%3C/svg%3E"); color: var(--tx); }
.o-portada h1 .o-h1-resto { display: block; margin-top: 8px; font-size: .62em; font-weight: 600; line-height: 1.1; letter-spacing: .01em; }
.o-portada__cta { margin-top: 24px; }

/* 3 · SALE y «← AQUÍ» de día sin cajas negras: el neón de color saturado sobre el claro, con resplandor en capas; el
   glitch de SALE sigue igual. */
:root[data-theme="light"] .o-sale {
  color: #FF1A8C;
  text-shadow: 0 0 1px #fff, 0 0 2px #FF1A8C, 0 0 8px rgba(255,26,140,.85), 0 0 20px rgba(255,26,140,.55), 0 0 42px rgba(214,0,110,.4), 0 0 80px rgba(214,0,110,.25);
}
:root[data-theme="light"] .o-aqui {
  color: #0090B0;
  text-shadow: 0 0 1px #fff, 0 0 6px rgba(34,225,255,.95), 0 0 16px rgba(34,225,255,.6), 0 0 32px rgba(0,170,210,.35);
}
:root[data-theme="light"] .o-aqui .o-ic { filter: drop-shadow(0 0 4px rgba(34,225,255,.95)) drop-shadow(0 0 12px rgba(34,225,255,.5)); }

/* 4 · tablero de aeropuerto de día: panel claro (sin negro) y las fichas en tinta con número claro, en contraste.
   El nombre del producto en tinta plena (AA en los dos modos; de noche ya es blanco sobre casi negro). */
:root[data-theme="light"] .o-tablero { background: var(--s); border-color: var(--tx); }
:root[data-theme="light"] .o-tablero .o-celda { background: var(--tx); color: var(--g); border-color: var(--tx); }
:root[data-theme="light"] .o-tablero .o-mini .o-celda { color: var(--o-amarillo); }
:root[data-theme="light"] .o-tablero .o-celda::after { background: color-mix(in oklab, var(--g) 30%, transparent); }
.o-fila__n { color: var(--o-blanco); }
:root[data-theme="light"] .o-fila__n small { color: var(--mu); }

/* §A · la foto real en la tarjeta y en el producto de la semana, con el % encima; sin foto queda el degradado */
.o-tarjeta__f, .o-semana__f { overflow: hidden; }
.o-tarjeta__f .o-foto, .o-semana__f .o-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.o-tarjeta__f b, .o-colgantes { z-index: 1; }
.o-tarjeta__f .o-prueba, .o-semana__f .o-grande { position: relative; z-index: 1; }

/* Marco 20-oct 16:09 §4 · en claro no queda NINGUNA sección oscura en /ofertas/: lo que quedaba en negro de día */
:root[data-theme="light"] .o-prueba { background: var(--g); color: var(--tx); }
:root[data-theme="light"] .o-cerrar { background: var(--g); }

/* =============================================================================
   OUTLET BUEN FIN (OUTLET-BUEN-FIN-1 §2, Marco 20-oct 19:32) · «Bloqueado para el Buen Fin»: tarjetas con candado, precio
   borroso hasta que el visitante desbloquea (cookie del enlace o código), cupo «Quedan X de Y», leyenda grande y el
   registro ahí mismo. Con el estilo actual de /ofertas/ (el rediseño menos cyberpunk va aparte). El precio guarda su
   sitio desde el HTML (MX$0,000 borroso): cuando llega el GET solo cambia el texto (CLS 0).
   ========================================================================== */
.o-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.o-outlet__ley { font: 800 clamp(20px, 3.2vw, 28px)/1.2 var(--o-ui); color: var(--o-amarillo); margin-top: 8px; }
:root[data-theme="light"] .o-outlet__ley { color: var(--tx); }
.o-outlet__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 18px; }
.o-out { position: relative; display: grid; grid-template-rows: 150px 1fr; min-width: 0; background: var(--o-asfalto); border: 2px solid var(--o-blanco); box-shadow: 6px 6px 0 var(--o-amarillo); }
.o-out[hidden] { display: none; }
.o-out__f { position: relative; overflow: hidden; background: linear-gradient(135deg, #3B2F63, #7C5CBF 55%, #F1A7C4); }
.o-out__f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.o-out__candado { position: absolute; top: 10px; right: 10px; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--o-noche); color: var(--o-amarillo); border: 2px solid var(--o-amarillo); }
.o-out__candado[hidden] { display: none; }
.o-out__2x1 { position: absolute; top: 10px; left: 10px; z-index: 1; font: 800 16px var(--o-mo); background: var(--o-amarillo); color: var(--o-sobre-amarillo); padding: 4px 8px; transform: rotate(-3deg); }
.o-out__c { display: grid; gap: 8px; align-content: start; padding: 14px; }
.o-out__c h3 { font: 800 15.5px/1.25 var(--o-ui); }
.o-out__pre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.o-out__pre s { color: var(--o-gris); font-size: 13.5px; }
.o-out__precio { font: 800 22px var(--o-mo); color: var(--o-amarillo); transition: filter .25s; }
:root[data-theme="light"] .o-out__precio { color: var(--tx); }
.o-out__precio.is-borroso { filter: blur(6px); user-select: none; }
.o-out__cupo { font: 700 12.5px var(--o-mo); letter-spacing: .04em; color: var(--o-rosa); text-transform: uppercase; }
.o-out__btn { justify-self: start; }
.o-outlet__alta { display: grid; gap: 14px; margin-top: 22px; max-width: 640px; }
.o-outlet__cod { display: grid; gap: 8px; }
.o-outlet__cod label { font-weight: 800; }
.o-outlet__cod > div { display: flex; flex-wrap: wrap; gap: 8px; }
.o-outlet__cod input { flex: 1 1 160px; min-width: 0; height: 44px; padding: 0 12px; border: 2px solid var(--o-linea); background: var(--o-noche); color: var(--o-blanco); font: 700 16px var(--o-mo); letter-spacing: .08em; text-transform: uppercase; }
.o-outlet__cod output { min-height: 1.4em; font-size: 13.5px; color: var(--o-gris); }
.o-outlet--abierto .o-outlet__ley { text-decoration: line-through; opacity: .6; }
.o-outlet--publico .o-outlet__ley, .o-outlet--cerrado .o-outlet__ley { text-decoration: none; opacity: 1; }   /* publico y cerrado: la leyenda ya es la de la fase, no se tacha */
/* 0.3.27: en publico y cerrado el registro es una caja chica («Avísame de la próxima campaña»), sin el título de la franja ni el
   formulario del código; en cerrado las tarjetas van sin precio, botón, cupo ni contador */
.o-outlet__aviso { margin: 0; font-weight: 800; }
.o-outlet__aviso[hidden] { display: none; }
.o-outlet--publico .o-outlet__alta, .o-outlet--cerrado .o-outlet__alta { max-width: 480px; margin-top: 28px; padding: 14px 16px; border: 1px solid var(--o-linea); border-radius: 12px; gap: 10px; }
.o-outlet--publico .o-outlet__alta .c100-cfranja__st, .o-outlet--cerrado .o-outlet__alta .c100-cfranja__st { display: none; }
.o-outlet--cerrado .o-out__pre, .o-outlet--cerrado .o-out__btn, .o-outlet--cerrado .o-out__cupo, .o-outlet--cerrado .o-out__cuenta, .o-outlet--cerrado .o-out__candado { display: none; }
@media (prefers-reduced-motion: reduce) { .o-out__precio { transition: none; } }

/* OUTLET-REGLAS-FINALES §3: el contador de cada tarjeta bloqueada */
.o-out__cuenta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font: 600 12.5px var(--o-ui); color: var(--o-gris); }
.o-out__cuenta[hidden] { display: none; }
.o-out__cuenta-n { font: 800 15px var(--o-mo); color: var(--o-amarillo); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
:root[data-theme="light"] .o-out__cuenta-n { color: var(--tx); }
.o-out__cuenta-o { color: var(--o-cian); text-decoration: underline; text-underline-offset: 3px; }
.o-out__cuenta-o[hidden] { display: none; }
:root[data-theme="light"] .o-out__cuenta-o { color: var(--ai); }