@font-face {
  font-family: "Montserrat";
  src:
    url("fuentes/montserrat.woff2") format("woff2"),
    url("imagenes/Montserrat-ExtraBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  /* Sin font-display: swap. Con swap, el primer pintado usa el fallback y el
     intercambio a Montserrat cae en instante real imprevisible: a 72px de
     cuerpo (la cuenta gigante del 970) la diferencia entre pasadas supera la
     tolerancia de V-05. Sin swap, el pintado espera al woff2, que el arnes
     siempre recoge cargado. Misma cura que enate-brand-stories. */
}

:root {
  color-scheme: dark;
  --fondo: #090a0f;
  --tinta: #ffffff;
  --oro: #deb22f;
  --oro-oscuro: #c1943d;
  --rojo: #ba0a0a;
  --azul: #103351;
  --superficie: #111a25;
  --curva: cubic-bezier(0, 0, 0.3, 1);
  /* Ritmo vertical en tres unidades de lectura: (kicker + titulo + precio),
     (cuenta + fecha) y (CTA + claim). Dentro de una unidad se respira poco;
     entre unidades, mucho. Estos tres valores gobiernan los huecos del cartel:
     si se tocan, se toca el ritmo entero, que es justo lo que se quiere. */
  --respiro-pegado: 7px;
  --respiro-dentro: 16px;
  --respiro-entre: 62px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 300px;
  height: 600px;
  margin: 0;
  overflow: hidden;
  background: transparent;
}

body {
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  color: var(--tinta);
}

button {
  font: inherit;
}

.ad {
  position: relative;
  isolation: isolate;
  width: 300px;
  height: 600px;
  overflow: hidden;
  border: 1px solid #282828;
  /* El halo dorado se apaga con caida suave y termina en el mismo dorado con
     alfa 0: una rampa lineal que se cortaba en seco dejaba un borde circular
     visible alrededor de la tarjeta, y `transparent` habria interpolado hacia
     negro. Las paradas van juntas donde la pendiente es mayor. */
  background:
    radial-gradient(
      circle 168px at 50% 41%,
      rgba(222, 178, 47, 0.125) 0%,
      rgba(222, 178, 47, 0.112) 16%,
      rgba(222, 178, 47, 0.086) 32%,
      rgba(222, 178, 47, 0.058) 48%,
      rgba(222, 178, 47, 0.034) 63%,
      rgba(222, 178, 47, 0.016) 77%,
      rgba(222, 178, 47, 0.005) 90%,
      rgba(222, 178, 47, 0) 100%
    ),
    linear-gradient(180deg, var(--azul) 0%, #0b1e2e 15%, var(--fondo) 49%, #050609 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.ambiente,
.grano,
.haz,
.aro {
  position: absolute;
  pointer-events: none;
}

.ambiente {
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.haz {
  top: -75px;
  width: 170px;
  height: 510px;
  opacity: 0.48;
  filter: blur(10px);
  background: linear-gradient(180deg, rgba(222, 178, 47, 0.22), rgba(222, 178, 47, 0));
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0;
}

.haz-uno {
  left: -55px;
  transform: rotate(-10deg);
}

.haz-dos {
  right: -56px;
  transform: rotate(10deg);
}

/* Los aros son eco de sala, no un contorno: con el borde de 1px nitido leian
   como el escalon del halo. Se difuminan medio pixel y bajan de intensidad. */
.aro {
  left: 50%;
  border: 1px solid rgba(222, 178, 47, 0.11);
  border-radius: 50%;
  filter: blur(0.6px);
  transform: translateX(-50%);
}

.aro-uno {
  top: 134px;
  width: 252px;
  height: 252px;
}

.aro-dos {
  top: 153px;
  width: 214px;
  height: 214px;
  border-color: rgba(222, 178, 47, 0.055);
}

/* Grano de sala + tramado. Las dos rejillas de 1px cruzadas suman como mucho
   dos niveles de color: no se ven, pero rompen el escalonado del degradado en
   los motores que no traman gradientes (Firefox dejaba bandas planas de hasta
   50px). El grano conserva su intensidad de antes: la opacidad del elemento
   estaba en 0.16 y ahora va horneada en el alfa de cada punto. */
.grano {
  inset: 0;
  opacity: 1;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.005) 0 1px, rgba(255,255,255,0) 1px 2px),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.005) 0 1px, rgba(255,255,255,0) 1px 2px),
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.051) 0 0.5px, transparent 0.7px),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,0.038) 0 0.5px, transparent 0.7px);
  background-size: 2px 2px, 2px 2px, 9px 11px, 13px 15px;
}

.marca {
  position: absolute;
  top: 23px;
  left: 24px;
  width: 138px;
  height: 43px;
  z-index: 1;
}

.marca img {
  display: block;
  width: 138px;
  height: 43px;
  object-fit: contain;
}

.mensaje {
  position: absolute;
  top: 100px;
  left: 20px;
  width: 258px;
  /* 334px de contenido mas los 9px que el bloque baja durante la entrada: el
     marco declarado tiene que contener tambien el instante t0. */
  height: 343px;
  text-align: center;
}

.fecha-evento,
.cuenta-rotulo,
.fecha-fallback,
.pie {
  margin: 0;
  letter-spacing: 0.12em;
}

.fecha-evento {
  color: var(--oro);
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

h1 {
  margin: var(--respiro-pegado) 0 0;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: 26px;
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.035em;
}

h1 span {
  display: block;
}

h1 span:last-child {
  color: var(--oro);
}

/* La caja del precio se queda con altura fija —asi el heroe cae en el mismo
   pixel en los cuatro motores— pero ajustada al contenido (63px de linea): con
   103px sobraban 20 arriba y 20 abajo y el precio se despegaba de su titular.
   Los margenes descuentan el aire que la propia caja aporta al centrar. */
.oferta {
  display: flex;
  height: 72px;
  margin-top: calc(var(--respiro-dentro) - 11px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.oferta-intro {
  margin-bottom: -2px;
  color: #ffffff;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.oferta strong {
  color: var(--oro);
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: 53px;
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.07em;
  text-shadow: 0 0 26px rgba(222, 178, 47, 0.16);
}

.oferta strong span {
  margin-left: 2px;
  font-size: 27px;
  letter-spacing: -0.03em;
  vertical-align: 9px;
}

/* Arranca la segunda unidad: la cuenta y su fecha. El margen la separa del
   bloque del titular; el relleno superior centra el contenido dentro de la
   tarjeta, que antes colgaba de arriba y dejaba 32px muertos abajo. */
.cuenta {
  position: relative;
  width: 100%;
  height: 100px;
  margin-top: calc(var(--respiro-entre) - 4px);
  padding: 17px 8px 0;
  border: 1px solid rgba(222, 178, 47, 0.48);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(16, 51, 81, 0.84), rgba(17, 26, 37, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.cuenta::before,
.cuenta::after {
  position: absolute;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--oro);
  content: "";
  transform: translateY(-50%);
}

.cuenta::before { left: 0; }
.cuenta::after { right: 0; }

.cuenta-rotulo {
  margin-bottom: 5px;
  color: rgba(255,255,255,0.72);
  font-size: 10px;
  line-height: 12px;
}

.unidades {
  display: grid;
  grid-template-columns: 1fr 7px 1fr 7px 1fr 7px 1fr;
  align-items: start;
  width: 100%;
}

.unidad {
  min-width: 0;
}

.unidad strong {
  display: block;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: 27px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 32px;
  letter-spacing: -0.05em;
  animation: numero-entra 560ms var(--curva) both;
}

.unidad:nth-of-type(1) strong { animation-delay: 120ms; }
.unidad:nth-of-type(2) strong { animation-delay: 210ms; }
.unidad:nth-of-type(3) strong { animation-delay: 300ms; }
.unidad:nth-of-type(4) strong { animation-delay: 390ms; }

@keyframes numero-entra {
  0% {
    opacity: 0.28;
    transform: translateY(10px);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.dias-largos .unidad:first-child strong {
  font-size: 17px;
  letter-spacing: -0.08em;
}

.unidad span {
  display: block;
  color: var(--oro);
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: 8px;
  font-weight: 800;
  line-height: 12px;
  letter-spacing: 0.08em;
}

.unidades i {
  color: var(--oro-oscuro);
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;
  font-style: normal;
  line-height: 30px;
}

.fecha-fallback {
  margin-top: calc(var(--respiro-dentro) - 5px);
  color: rgba(255,255,255,0.78);
  font-size: 11px;
  line-height: 16px;
}

/* Ocupa el sitio exacto de la cuenta —mismo margen y misma altura— para que la
   fecha y el ritmo de los tres grupos no se muevan al pasar por cero. */
.ya {
  display: none;
  height: 100px;
  margin-top: calc(var(--respiro-entre) - 4px);
  padding-top: 16px;
  border-top: 1px solid rgba(222, 178, 47, 0.38);
  border-bottom: 1px solid rgba(222, 178, 47, 0.38);
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
}

.ya span,
.ya strong {
  display: block;
}

.ya span {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0.16em;
}

.ya strong {
  color: var(--oro);
  font-size: 43px;
  line-height: 48px;
  letter-spacing: -0.04em;
}

.ad.expirada .cuenta { display: none; }
.ad.expirada .ya { display: block; }

/* Tercera unidad: boton y claim viajan juntos y separados del resto. Las dos
   posiciones son absolutas, asi que el hueco entre grupos esta en la distancia
   a la fecha (62px) y el de dentro, en la distancia al claim (13px). */
.cta {
  position: absolute;
  top: 491px;
  left: 35px;
  z-index: 2;
  width: 228px;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 4px;
  background: linear-gradient(180deg, #ca1010 0%, var(--rojo) 55%, #990606 100%);
  color: #ffffff;
  cursor: pointer;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 48px;
  text-align: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

.cta:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 3px;
}

.cta span {
  display: inline-block;
  margin-left: 8px;
  color: #ffffff;
}

.pie {
  position: absolute;
  top: 552px;
  left: 20px;
  width: 258px;
  color: rgba(255,255,255,0.45);
  font-size: 8px;
  line-height: 12px;
  text-align: center;
}

.mensaje > *,
.pie {
  opacity: 1;
  transform: translateY(9px);
}

.is-ready .mensaje > *,
.is-ready .pie {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 500ms var(--curva),
    transform 500ms var(--curva);
}

.is-ready h1 { transition-delay: 90ms; }
.is-ready .oferta { transition-delay: 180ms; }
.is-ready .cuenta,
.is-ready .ya { transition-delay: 270ms; }
.is-ready .fecha-fallback { transition-delay: 360ms; }
.is-ready .pie { transition-delay: 540ms; }

/* ─────────────────────────────────────────────────────────────────────────
   970x250 — segunda pasada: LA CUENTA ES EL CARTEL. La primera pasada tumbo
   la pila en fila y dejo la oferta como masa dominante y el temporizador de
   guarnicion; el brief dice que la pieza vive de la urgencia y el formato se
   llama countdown-timer, asi que la jerarquia se invierte: las cuatro
   unidades pasan al centro a escala gigante (contraste de escala: una masa
   enorme y el resto minimo), la oferta se compacta a la izquierda bajo la
   marca y el CTA cierra por la derecha. El orden de lectura del corpus —
   centro primero, izquierda despues, derecha ultima parada— pone la urgencia
   en el primer golpe de vista y el dinero en el segundo. Nada de esto toca
   el 300x600: la media query mide el viewport del slot.

   Ritmo Y1 re-instanciado: dentro de un grupo mandan --respiro-pegado (7) y
   --respiro-dentro (16); entre zonas manda --respiro-columna, >= 2,5x el
   mayor de dentro. La fila cierra el ancho exacto:
   28 + 222 + 40 + 412 + 40 + 200 + 28 = 970.
   ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 970px) {
  :root {
    --respiro-columna: 40px;
    --fila-margen: 28px;
    --col-oferta: 222px;
    --col-cuenta: 412px;
    --col-cta: 200px;
  }

  html,
  body {
    width: 970px;
    height: 250px;
  }

  .ad {
    width: 970px;
    height: 250px;
    /* El halo se muda detras de la masa dominante, que ahora es la cuenta
       (centro de su tarjeta, 496/970 = 51%). Las ocho paradas y la caida
       suave viajan tal cual: el borde circular no puede reaparecer. */
    background:
      radial-gradient(
        circle 300px at 51% 50%,
        rgba(222, 178, 47, 0.125) 0%,
        rgba(222, 178, 47, 0.112) 16%,
        rgba(222, 178, 47, 0.086) 32%,
        rgba(222, 178, 47, 0.058) 48%,
        rgba(222, 178, 47, 0.034) 63%,
        rgba(222, 178, 47, 0.016) 77%,
        rgba(222, 178, 47, 0.005) 90%,
        rgba(222, 178, 47, 0) 100%
      ),
      linear-gradient(180deg, var(--azul) 0%, #0b1e2e 26%, var(--fondo) 74%, #050609 100%);
  }

  /* Los haces caen desde las esquinas altas y se apagan dentro del lienzo:
     a 250px de alto el cono de 510 dejaba una diagonal dura. */
  .haz {
    top: -54px;
    width: 210px;
    height: 300px;
    opacity: 0.38;
  }

  .haz-uno { left: 96px; transform: rotate(-13deg); }
  .haz-dos { right: 96px; transform: rotate(13deg); }

  /* Los aros acompanan a la cuenta, no al centro geometrico. */
  .aro { left: 51%; }
  .aro-uno { top: -62px; }
  .aro-dos { top: -43px; }

  /* ── columna izquierda: la marca abre y la oferta se compacta debajo ── */
  .marca {
    top: 22px;
    left: var(--fila-margen);
  }

  /* El mensaje cubre dos cosas: la pila de la oferta (que fluye en los 222px
     de la izquierda) y la tarjeta de la cuenta (posicionada a la derecha).
     Marco: 156 de contenido + 9 de la entrada + 1 de aire = 166. */
  .mensaje {
    top: 72px;
    left: 28px;
    width: 674px;
    height: 166px;
    padding-right: calc(var(--col-cuenta) + var(--respiro-columna));
    text-align: left;
  }

  h1 {
    font-size: 28px;
  }

  /* En vertical el kicker y la fecha tenian 258px de caja; aqui viven en
     columnas de 222 y 412. El track de 0,12em se afloja lo justo para que la
     linea entre entera: es decision tipografica del ramal horizontal. */
  .fecha-evento {
    letter-spacing: 0.08em;
  }

  .oferta {
    height: 64px;
    align-items: flex-start;
  }

  .oferta strong {
    font-size: 46px;
  }

  .oferta strong span {
    font-size: 24px;
  }

  /* ── centro: la cuenta es la masa dominante ──
     La tarjeta crece a 412x132 y los digitos a 72px: el temporizador deja de
     ser un accesorio de la oferta y pasa a ser el cartel. La cuenta y su
     relevo tras cero comparten rectangulo exacto: al pasar por cero no se
     mueve nada. */
  .cuenta,
  .ya {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--col-cuenta);
    height: 132px;
    margin-top: 0;
  }

  .cuenta {
    padding: 14px 8px 0;
  }

  .cuenta-rotulo {
    margin-bottom: 6px;
  }

  .unidades {
    grid-template-columns: 1fr 10px 1fr 10px 1fr 10px 1fr;
  }

  .unidad strong {
    font-size: 72px;
    line-height: 76px;
  }

  /* Cada unidad mide ~91px: los dias de cinco cifras del reloj gobernado
     necesitan bajar a 30 para caber. En servicio real son dos cifras a 72. */
  .dias-largos .unidad:first-child strong {
    font-size: 30px;
    line-height: 76px;
  }

  .unidad span {
    font-size: 9px;
  }

  .unidades i {
    font-size: 40px;
    line-height: 72px;
  }

  .ya {
    padding-top: 26px;
    border: 1px solid rgba(222, 178, 47, 0.48);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(16, 51, 81, 0.84), rgba(17, 26, 37, 0.72));
    text-align: center;
  }

  .ya span {
    font-size: 16px;
    line-height: 20px;
  }

  .ya strong {
    font-size: 56px;
    line-height: 60px;
  }

  .fecha-fallback {
    position: absolute;
    top: 140px;
    right: 0;
    width: var(--col-cuenta);
    margin-top: 0;
    letter-spacing: 0.04em;
    text-align: center;
  }

  /* ── derecha: el CTA cierra la fila ──
     Grupo (CTA + claim) apoyado en la linea de base de la columna izquierda:
     esquina inferior derecha, el final del recorrido de lectura. */
  .cta {
    top: 160px;
    left: calc(970px - var(--fila-margen) - var(--col-cta));
    width: var(--col-cta);
    padding: 0 12px;
    white-space: nowrap;
  }

  .pie {
    top: 214px;
    left: calc(970px - var(--fila-margen) - var(--col-cta));
    width: var(--col-cta);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cuenta,
  .ya {
    visibility: hidden;
  }

  .mensaje > *,
  .pie,
  .is-ready .mensaje > *,
  .is-ready .pie {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .unidad strong {
    animation: none;
  }
}