/* Plantilla del cartelón "Un día como hoy" · lienzo fijo de 1920x1080.
   El fondo (rayas, grano, arco y estrellas) es public/assets/fondo_editable.svg, incrustado por poster.js.
   La demo escala el lienzo con transform; Puppeteer lo captura a tamaño real. */

.otd-poster {
  --s: 1;       /* factor de autoajuste (lo reduce poster.js si el contenido no cabe) */
  --u: 1;       /* escala de tamaño elegida por el usuario */
  --lh: 1;      /* multiplicador de interlineado */
  --ls: 0.5px;  /* espaciado entre letras del cuerpo (titulares y descripción) */
  --oy: 0px;    /* desplazamiento vertical del bloque de texto */

  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  color: #fff;
  font-family: "Poppins", "Segoe UI", sans-serif;
  background: #b81818; /* se ve solo mientras carga el SVG */
}

.otd-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  display: block;
}

/* ---------- Columna de texto ---------- */
.otd-left {
  position: absolute;
  left: 88px;
  top: 84px;
  bottom: 64px;
  width: 950px; /* el arco del SVG empieza en x=1061 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  transform: translateY(var(--oy));
}

/* Tamaño base = tamaño de diseño × autoajuste (--s) × escala del usuario (--u). */
.otd-kicker {
  white-space: nowrap;
  font-family: "Kaushan Script", "Brush Script MT", cursive;
  font-size: calc(104px * var(--s) * min(var(--u), 1.15)); /* tope: no invadir el arco del fondo */
  line-height: 1.1;
  margin: 0;
  font-weight: 400;
  letter-spacing: calc(var(--ls) + 1.5px); /* 2px con el valor por defecto */
}

.otd-date {
  white-space: nowrap;
  font-size: calc(112px * var(--s) * min(var(--u), 1.06)); /* tope: no invadir el arco del fondo */
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: calc(var(--ls) - 1.5px); /* -1px con el valor por defecto (antes -2px) */
  margin: calc(6px * var(--s) * var(--u)) 0 calc(14px * var(--s) * var(--u));
}

.otd-item { margin-top: calc(22px * var(--s) * var(--u)); max-width: 900px; }
.otd-item:first-of-type { margin-top: 0; }

.otd-headline {
  font-size: calc(46px * var(--s) * var(--u));
  line-height: calc(1.15 * var(--lh));
  font-weight: 700;
  letter-spacing: var(--ls);
  margin: 0 0 calc(10px * var(--s) * var(--u));
}

.otd-desc {
  font-size: calc(34px * var(--s) * var(--u));
  line-height: calc(1.32 * var(--lh));
  font-weight: 400;
  letter-spacing: var(--ls);
  margin: 0;
  opacity: 0.96;
}

/* ---------- Foto dentro del arco del SVG ----------
   Arco del SVG: x 1061 a 1869 (centro 1465, radio 404), tramo recto hasta y=548.
   La foto deja ~36px de aire a los lados y termina sobre las estrellas (la más alta empieza en y≈818). */
.otd-photo {
  position: absolute;
  left: 1100px;
  top: 0;
  width: 730px;
  height: 845px;
  border-radius: 0 0 365px 365px;
  background-color: rgba(0, 0, 0, 0.25);
  background-size: cover;
  background-position: center 20%;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.otd-photo.is-empty {
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.3));
}