@font-face {
  font-family: "Oswald";
  src: url("oswald-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-display: block;
}
@font-face {
  font-family: "Poppins";
  src: url("poppins-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-display: block;
}
:root {
  --color-odr-card: #000000;
  --color-odr-elevated: #1a1a1a;
  --color-odr-border: #3a3a3a;
  --color-odr-fg: #fafaf9;
  --color-odr-primary: #7c3aed;
  --color-odr-primary-soft: #a78bfa;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: var(--color-odr-card);
  color: var(--color-odr-fg);
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

/* La pieza entera es el enlace, recta (sin radio), con el tinte de la marca como en el sitio. */
.enlace {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
  border: 1px solid var(--color-odr-border);
  background-color: var(--color-odr-card);
  background-image: linear-gradient(90deg, #7c3aed75 0%, #7c3aed33 50%, transparent 85%);
  color: inherit;
  text-decoration: none;
}
.enlace:hover { background-color: var(--color-odr-elevated); }
.enlace:focus-visible { outline: 2px solid var(--color-odr-primary-soft); outline-offset: -2px; }

/* Brillo al hover solo sobre el botón (CRODR-675): la misma franja recta, medida contra la caja
   del CTA, que espera fuera a la izquierda, cruza una vez y termina fuera a la derecha. Al
   salir el mouse vuelve sin transición, así no barre de regreso. La pieza entera no barre. */
.cta { position: relative; overflow: hidden; isolation: isolate; }
.cta::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  display: none;
  width: 50%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-200%) skewX(-12deg);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cta::before { display: block; }
  .cta:hover::before {
    transform: translateX(300%) skewX(-12deg);
    transition: transform 900ms ease-out;
  }
}

.media {
  position: relative;
  display: flex;
  flex-shrink: 0;
  overflow: hidden;
  width: 100%;
  background: var(--color-odr-primary);
}
.media-mov { display: flex; flex: 1; align-items: center; justify-content: center; }
.portada { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.icono { color: #ffffff; }
.texto { display: flex; flex: 1; flex-direction: column; gap: 6px; min-height: 0; padding: 12px; }
.kicker {
  font-size: 11px;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-odr-primary-soft);
}
.titulo {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  font-family: "Oswald", system-ui, sans-serif;
  color: var(--color-odr-fg);
}
.cta-pos { display: flex; margin: 0 12px 12px; }
.cta {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  background: var(--color-odr-primary);
  color: #ffffff;
  font-size: 14px;
  line-height: 20px;
}
.flecha { flex-shrink: 0; width: 16px; height: 16px; }

/* 160x600. La imagen (CRODR-675): con ícono, fondo morado suave y opaco (el tinte de la marca
   del enlace no se trasluce) e ícono en el morado fuerte; la portada la tapa entera, sin tinte. */
.columna .media {
  height: 240px;
  background-color: var(--color-odr-card);
  background-image: linear-gradient(#a78bfa24, #a78bfa24);
}
.columna .icono { width: 64px; height: 64px; color: var(--color-odr-primary); }
/* El brillo de entrada de la imagen (`BRILLO_ANUNCIO`), en la columna, la columna corta y la
   tarjeta: una franja que espera fuera de la caja y termina fuera. Lo mueve `anuncio.js` una
   sola vez, y con movimiento reducido no existe. */
.media-brillo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: none;
  width: 50%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: translateX(-200%) skewX(-12deg);
}
@media (prefers-reduced-motion: no-preference) {
  .media-brillo { display: block; }
}
.columna .titulo { font-size: 24px; line-height: 1.25; -webkit-line-clamp: 6; line-clamp: 6; }
/* 160x300 */
.columna-corta .media { height: 100px; }
.columna-corta .icono { width: 40px; height: 40px; }
.columna-corta .titulo { font-size: 16px; line-height: 1.375; -webkit-line-clamp: 3; line-clamp: 3; }
/* 300x250 */
.tarjeta .media { height: 110px; }
.tarjeta .icono { width: 40px; height: 40px; }
.tarjeta .titulo { font-size: 16px; line-height: 1.375; -webkit-line-clamp: 2; line-clamp: 2; }
.tarjeta .cta-pos { align-self: flex-start; }
.tarjeta .cta { padding: 0 16px; }

/* 320x50, 468x60 y 728x90: una fila. El ancho es el del iframe, o sea el de la caja. */
.franja .enlace { flex-direction: row; align-items: center; gap: 12px; padding-right: 8px; }
.franja .media { width: auto; height: 100%; aspect-ratio: 1 / 1; }
.franja .icono { width: 20px; height: 20px; }
.franja .texto { min-width: 0; gap: 2px; padding: 0; }
.franja .titulo { display: block; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; line-height: 1.25; }
.franja .cta-pos { flex-shrink: 0; margin: 0; }
.franja .cta { flex: none; width: 32px; height: 32px; }
.franja .cta-texto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (min-width: 468px) {
  .franja .titulo { font-size: 16px; }
}
@media (min-width: 728px) {
  .franja .enlace { gap: 16px; padding-right: 20px; }
  .franja .icono { width: 32px; height: 32px; }
  .franja .texto { gap: 4px; }
  .franja .titulo { font-size: 20px; }
  .franja .cta { width: auto; height: 40px; padding: 0 16px; }
  .franja .cta-texto { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
}

/* Cabeza (antetítulo y titular) y detalle (beneficios, bajada o tamaño), CRODR-677. */
.cabeza { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.detalle { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lista { display: flex; flex-direction: column; gap: 7px; }
.item { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.35; color: #d4d4d8; }
.check { flex: none; width: 12px; height: 12px; margin-top: 1px; color: var(--color-odr-primary-soft); }
.bajada { font-size: 12px; line-height: 1.45; color: #d4d4d8; }
.medida {
  display: inline-flex;
  align-self: flex-start;
  padding: 2px 5px;
  border: 1px solid var(--color-odr-border);
  color: #a1a1aa;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.08em;
}
.franja .detalle { display: none; }

/* Piezas de venta (CRODR-677): F para radios, G para marcas y H, el espacio como ejemplo. Van
   después de los diseños porque a igual especificidad gana la última regla. */
[data-tipo="venta"] .media { background: #171323; }
[data-tipo="venta"] .icono { color: var(--color-odr-primary); }
[data-tipo="venta"] .kicker { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
[data-tipo="venta"] .texto { overflow: hidden; }
.columna[data-tipo="venta"] .media { height: 220px; }
.columna-corta[data-tipo="venta"] .media { height: 96px; }
.tarjeta[data-tipo="venta"] .media { height: 84px; }
.columna[data-tipo="venta"] .texto { gap: 8px; padding: 14px 12px 0; }
.columna[data-tipo="venta"] .cabeza { gap: 8px; }
.columna[data-tipo="venta"] .titulo { font-size: 22px; line-height: 1.15; -webkit-line-clamp: 5; line-clamp: 5; }
.columna-corta[data-tipo="venta"] .texto { gap: 5px; padding: 12px 12px 0; }
.columna-corta[data-tipo="venta"] .cabeza { gap: 5px; }
.columna-corta[data-tipo="venta"] .titulo { font-size: 19px; line-height: 1.2; -webkit-line-clamp: 3; line-clamp: 3; }
.tarjeta[data-tipo="venta"] .texto { gap: 5px; padding: 12px 16px 0; }
.tarjeta[data-tipo="venta"] .cabeza { gap: 5px; }
.tarjeta[data-tipo="venta"] .titulo { font-size: 19px; line-height: 1.2; -webkit-line-clamp: 2; line-clamp: 2; }
.tarjeta[data-tipo="venta"] .cta-pos { margin: 0 16px 14px; }

.ilustra { display: flex; }
.media-mov .ilustra { flex: none; }
.linea { display: block; height: 3px; background: #3a3a3a; }

/* F: cards de radios y una marcada «Tu radio». */
.il-f { flex-wrap: wrap; gap: 6px; }
.tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  padding: 5px;
  border: 1px solid #2e2e2e;
  background: #1f1f1f;
}
.tile .linea + .linea { width: 60%; }
.tu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--color-odr-primary);
  background: rgba(124, 58, 237, 0.22);
  color: #c4b5fd;
  font-size: 8px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}
.estrella { flex: none; width: 13px; height: 13px; color: var(--color-odr-primary-soft); }
.columna .il-f { width: 110px; }
.columna .il-f .tile, .columna .il-f .tu { width: 52px; height: 52px; }
.columna-corta .il-f { width: 120px; }
.columna-corta .il-f .tile, .columna-corta .il-f .tu { width: 36px; height: 36px; }
.columna-corta .estrella { width: 12px; height: 12px; }
.tarjeta .il-f { width: 210px; }
.tarjeta .il-f .tile, .tarjeta .il-f .tu { width: 48px; height: 48px; }
.tarjeta .estrella { width: 12px; height: 12px; }

/* G: una página en miniatura con el banner «Tu marca». */
.pag {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 7px;
  border: 1px solid #2e2e2e;
  background: #0d0d0d;
}
.pag .linea { height: 4px; background: #262626; }
.l45 { width: 45%; }
.l80 { width: 80%; }
.l60 { width: 60%; }
.ban {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-odr-primary);
  color: #ffffff;
  font-size: 8px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pag-fila { display: flex; gap: 5px; margin-top: auto; }
.pag-fila .tile { flex: 1; padding: 3px; }
.columna .pag { width: 112px; height: 150px; }
.columna .ban { height: 26px; }
.columna .pag-fila .tile { height: 30px; }
.columna-corta .pag { width: 100px; height: 74px; }
.tarjeta .pag { width: 200px; height: 68px; }
.columna-corta .ban, .tarjeta .ban { height: 16px; }
.columna-corta .pag-fila .tile, .tarjeta .pag-fila .tile { height: 14px; }

/* H: la maqueta punteada de un anuncio, del tamaño real del espacio. */
.columna[data-pieza="h"] .media { height: 324px; }
.columna-corta[data-pieza="h"] .media { height: 132px; }
.tarjeta[data-pieza="h"] .media { height: 104px; padding: 0 16px; }
[data-pieza="h"] .media { background: transparent; }
[data-pieza="h"] .media-mov { align-items: flex-end; }
.gh {
  display: flex;
  gap: 8px;
  border: 1px dashed rgba(167, 139, 250, 0.65);
  background: rgba(124, 58, 237, 0.06);
}
.gl {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px dashed #52525b;
  color: #71717a;
  font-size: 8px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}
.gb { display: block; height: 7px; background: #2a2a2a; }
.g85 { width: 85%; }
.g65 { width: 65%; }
.g40 { width: 40%; height: 5px; background: #222222; }
.g70 { width: 70%; height: 5px; }
.gbt {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  margin-top: auto;
  border: 1px dashed var(--color-odr-primary);
  color: var(--color-odr-primary-soft);
  font-size: 10px;
  line-height: 1;
}
.columna .gh, .columna-corta .gh { flex-direction: column; align-items: stretch; width: 136px; padding: 10px; }
.columna .gh { height: 300px; }
.columna .gl { width: 100%; height: 126px; }
.columna-corta .gh { gap: 4px; height: 120px; }
.columna-corta .gl { width: 100%; height: 46px; }
.columna-corta .gb { height: 5px; }
.columna-corta .gbt { height: 20px; }
.tarjeta .gh { align-items: center; gap: 10px; width: 268px; height: 92px; padding: 10px; }
.tarjeta .gl { width: 70px; height: 70px; }
.gh-texto { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.gh-vivo {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #a1a1aa;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.punto { width: 5px; height: 5px; background: #ef4444; }
.gh-radio { font-family: "Oswald", system-ui, sans-serif; font-size: 17px; line-height: 1.1; color: #a1a1aa; }
.columna-corta[data-pieza="h"] .titulo { font-size: 18px; }

/* La franja tiene tres textos por pieza, uno por ancho: se ve el del formato que cabe. */
.franja [data-v] { display: none; }
.franja [data-v="f320"] { display: inline; }
@media (min-width: 468px) {
  .franja [data-v="f320"] { display: none; }
  .franja [data-v="f468"] { display: inline; }
  .franja[data-tipo="venta"] .cta { width: auto; height: 34px; padding: 0 12px; }
  .franja[data-tipo="venta"] .cta-texto { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
}
@media (min-width: 728px) {
  .franja [data-v="f468"] { display: none; }
  .franja [data-v="f728"] { display: inline; }
  .franja[data-tipo="venta"] .cta { height: 40px; padding: 0 18px; }
  .franja .detalle:not([hidden]) { display: flex; }
  .franja .bajada { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #a1a1aa; }
}

/* Entrada: con movimiento permitido el texto (y la imagen, o en la franja la pieza entera)
   espera oculto a que `anuncio.js` lo anime al aparecer. Si el script no corriera, el respaldo lo muestra igual a los 1,5 s; `listo` (lo
   pone el script) apaga ese respaldo. */
@keyframes revelar { to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .entra { opacity: 0; animation: revelar 0.3s 1.5s forwards; }
  .listo .entra { animation: none; }
  .aparece { opacity: 0; animation: revelar 0.3s 1.5s forwards; }
  .listo .aparece { animation: none; }
}

/* Al final: las clases de arriba ponen display y, a igual especificidad, gana la última. */
[hidden] { display: none; }