/* El sello de Cyber Monday (lienzo "Vivo 2, un brillo que pasa", elegido por
   Martín el 2/11/2026): pastilla lila con la letra de neón y el taco magenta,
   el tachado al lado del precio y "Ahorrás" abajo. Lo dibuja `EPH_Temporada`
   (cyber_sello, cyber_antes, cyber_ahorro, cyber_taco). Los selectores van con
   `html body` para ganarle al reset de la terminación nueva. */

html body .epc-sello{position:relative;display:inline-flex;align-items:stretch;background:#FDF4FF;border:1px solid #F0ABFC;border-radius:10px;overflow:hidden;box-shadow:0 4px 12px -5px rgba(162,28,175,.4);margin:0;line-height:1;white-space:nowrap;pointer-events:none}
html body .epc-sello::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(-18deg);animation:epc-pasa 4.5s ease-in-out 1s infinite}
@keyframes epc-pasa{0%{left:-40%}35%,100%{left:130%}}
@media (prefers-reduced-motion:reduce){html body .epc-sello::after{animation:none;display:none}}
html body .epc-sello .epc-t{display:inline-flex;align-items:center;padding:6px 10px 6px 11px;font:400 13.5px/1 'Tilt Neon',Inter,system-ui,sans-serif;color:#A21CAF}
html body .epc-sello .epc-n{display:inline-flex;align-items:center;background:#C026D3;color:#fff;font:800 15px/1 Inter,system-ui,sans-serif;padding:0 11px 0 10px;letter-spacing:-.01em}
html body .epc-sello .epc-corto{display:none}

/* En la foto de la tarjeta: abajo a la izquierda (el ojo de "Vista previa" va a la derecha). */
html body :is(.rl-pc-foto,.eph-visual){position:relative}
html body :is(.rl-pc-foto,.eph-visual)>.epc-sello{position:absolute;left:10px;bottom:12px;z-index:2}

/* El precio con el tachado al lado, y "Ahorrás" abajo. */
/* Abajo y no por la línea de base: el precio de la tarjeta trae un relleno
   arriba y con `baseline` el tachado quedaba subido. */
html body .epc-fila{display:flex;align-items:flex-end;gap:4px 10px;flex-wrap:wrap}
html body .epc-fila>*{margin-bottom:0}
html body .epc-antes{margin:0 0 .3em;font:500 14px/1 Inter,system-ui,sans-serif;color:#64748B;text-decoration:line-through;text-decoration-thickness:1.5px;font-variant-numeric:tabular-nums}
html body .epc-ahorro{display:block;margin:6px 0 0;font:600 13px/1.3 Inter,system-ui,sans-serif;color:#A21CAF}

/* La ficha: el sello en grande arriba del precio. */
html body .eph-rf-precio-caja .epc-ficha-sello{margin:0 0 14px;line-height:1}
html body .epc-sello.epc-sello-ficha{border-radius:12px}
html body .epc-sello.epc-sello-ficha .epc-t{font-size:18px;padding:9px 14px 9px 16px}
html body .epc-sello.epc-sello-ficha .epc-n{font-size:20px;padding:0 15px 0 14px}
html body .epc-sello.epc-sello-ficha .epc-largo{display:inline}
html body .epc-sello.epc-sello-ficha .epc-corto{display:none}
html body .eph-rf-precio-caja .epc-antes{font-size:20px}
html body .eph-rf-precio-caja .epc-ahorro{margin:10px 0 0;font-size:15px;line-height:1.4}

/* Los «Desde» de la portada: el taco solo. */
html body .epc-taco{display:inline-flex;align-items:center;margin-left:8px;background:#C026D3;color:#fff;border-radius:6px;padding:4px 8px;font:800 12.5px/1 Inter,system-ui,sans-serif;vertical-align:middle;white-space:nowrap}

/* En el celular la tarjeta es chica: el sello dice solo "Cyber". */
@media (max-width:600px){
  html body :is(.rl-pc-foto,.eph-visual)>.epc-sello{left:6px;bottom:6px;border-radius:8px}
  html body :is(.rl-pc-foto,.eph-visual)>.epc-sello .epc-t{font-size:11px;padding:4px 7px 4px 8px}
  html body :is(.rl-pc-foto,.eph-visual)>.epc-sello .epc-n{font-size:12px;padding:0 7px}
  html body :is(.rl-pc-foto,.eph-visual)>.epc-sello .epc-largo{display:none}
  html body :is(.rl-pc-foto,.eph-visual)>.epc-sello .epc-corto{display:inline}
  html body .epc-fila{gap:2px 6px}
  html body .epc-antes{font-size:12px}
  html body .epc-ahorro{margin-top:5px;font-size:11.5px}
  html body .eph-rf-precio-caja .epc-antes{font-size:17px}
  html body .eph-rf-precio-caja .epc-ahorro{font-size:14px}
}

/* Modo oscuro: la celda de la foto sigue blanca (a propósito), así que el sello de
   la tarjeta queda claro. Cambian el de la ficha, el tachado y "Ahorrás". */
html[data-theme="dark"] body .epc-sello-ficha{background:rgba(192,38,211,.16);border-color:#A21CAF;box-shadow:0 4px 14px -6px rgba(232,121,249,.45)}
html[data-theme="dark"] body .epc-sello-ficha::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent)}
html[data-theme="dark"] body .epc-sello-ficha .epc-t{color:#F0ABFC}
html[data-theme="dark"] body .epc-antes{color:#94A3B8}
html[data-theme="dark"] body .epc-ahorro{color:#F0ABFC}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) body .epc-sello-ficha{background:rgba(192,38,211,.16);border-color:#A21CAF;box-shadow:0 4px 14px -6px rgba(232,121,249,.45)}
  html:not([data-theme="light"]) body .epc-sello-ficha::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent)}
  html:not([data-theme="light"]) body .epc-sello-ficha .epc-t{color:#F0ABFC}
  html:not([data-theme="light"]) body .epc-antes{color:#94A3B8}
  html:not([data-theme="light"]) body .epc-ahorro{color:#F0ABFC}
}