/* timeline.css — widget ch-timeline */

/* ── FUENTE ─────────────────────────────────────────────── */
@font-face {
  font-family: 'Antio';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url('/wp-content/uploads/2026/07/Antio-Regular.ttf') format('truetype');
}

/* ── VARIABLES ──────────────────────────────────────────── */
:root {
  --bg:     #000000;
  --line:   #ffffff;
  --dot:    #ffffff;
  --pink:   #ff9495;
  --text:   #f2f2f2;
  --cap:    #3a3a3a;
  --hand:   'Antio', cursive;
  --script: 'Antio', cursive;
}

/* ── RESET ──────────────────────────────────────────────── */
.tl,
.tl * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── CONTENEDOR ─────────────────────────────────────────── */
.tl {
  background: var(--bg);
  color: var(--text);
  font-family: var(--hand);
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px 70px;
}

/* Línea vertical central. bottom en px (no rem): el root font-size del
   sitio es responsivo por pasos (16px hasta ~1200px, 17px de ahí en
   adelante) y con rem el offset real cambiaba con el ancho aunque el
   cluster de huellas (tamaños en px fijos) no se moviera — dejaba hueco
   en unos anchos y en otros no. Medido por muestreo de píxeles contra
   la huella superior (el hueco entre lóbulos del corazón empieza en
   rosa ~9px dentro de su caja): 228px dejaba la línea justo entrando en
   ese hueco en TODO el rango desktop (900-1920px), sin asomar por el
   otro lado (la huella sigue siendo rosa sólido hasta ~70px). */
.tl::before {
  content: "";
  position: absolute;
  top: 96px;
  bottom: 228px;
  left: 50%;
  width: .25rem;
  background: var(--line);
  transform: translateX(-50%);
}

/* ── INICIO (corazón + año) ─────────────────────────────── */
.tl__start {
  position: relative;
  text-align: center;
  padding: 60px 0 22px;
  z-index: 2;
}

.tl__start svg {
  width: 104px;
  height: auto;
  display: inline-block;
}

.tl__start .year {
  font-family: var(--script);
  font-size: 60px;
  color: var(--pink);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -4px;
  line-height: 1;
}

/* ── FILAS Y CELDAS ─────────────────────────────────────── */
.tl .row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 150px;
  margin: 60px 0;
}

.tl .cell {
  width: 50%;
  flex: 0 0 50%;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ── DOT Y CONNECTOR ────────────────────────────────────── */
.tl .dot {
  position: absolute;
  top: 50%;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--dot);
  transform: translateY(-50%);
  z-index: 3;
}

.tl .conn {
  position: absolute;
  top: 50%;
  height: .25rem;
  width: 72px;
  background: var(--line);
  transform: translateY(-50%);
  z-index: 2;
}

.tl .row--l .dot  { left: calc(50% - 93px); }
.tl .row--l .conn { left: calc(50% - 70px); }
.tl .row--r .dot  { left: calc(50% + 60px); }
.tl .row--r .conn { left: 50%; }

/* ── POLAROID ───────────────────────────────────────────── */
.tl .polaroid {
  background: #fff;
  padding: 14px 14px 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .6);
  transform: rotate(-3.5deg);
  width: 289px;
  max-width: 100%;
  word-wrap: break-word;
}

.tl .cell--r .polaroid {
  transform: rotate(3deg);
}

/* Foto */
.tl .polaroid .shot {
  display: block;
  position: relative;
}

.tl .polaroid .ph {
  display: block;
  width: 100%;
}

.tl .polaroid img.ph {
  height: auto;
}

.tl .polaroid .ph--placeholder {
  height: 210px;
  background: linear-gradient(135deg, #9aa0a6, #5f646a);
}

/* Caption */
.tl .polaroid .cap {
  font-family: var(--hand);
  color: var(--cap);
  font-size: 16px;
  font-weight: bold;
  line-height: 1.15;
  padding: 14px 6px 6px;
  text-align: center;
  text-transform: uppercase;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.tl .polaroid .cap__logo {
  display: block;
  max-width: 85px;
  height: auto;
  flex-shrink: 0;
}

/* ── TEXTO LATERAL ──────────────────────────────────────── */
.tl .txt {
  font-family: var(--hand);
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: .4px;
  text-transform: uppercase;
  max-width: 100%;
  color: var(--text);
  text-align: center;
  word-wrap: break-word;
  font-weight: bold;
}

.tl .txt .pending {
  color: var(--pink);
  font-style: italic;
  text-transform: none;
}

/* ── CIERRE (huellas + año + texto) ─────────────────────── */
.tl__end {
  position: relative;
  text-align: center;
  padding-top: 6px;
  z-index: 2;
}

.tl__end .cluster {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.tl__end .cluster .paw {
  fill: var(--pink);
  display: block;
  transform: translateX(-1px) rotate(180deg);
  transform-origin: center center;
}

.tl__end .cluster svg:nth-child(1) { width: 68px; height: 76px; }
.tl__end .cluster svg:nth-child(2) { width: 44px; height: 49px; }
.tl__end .cluster svg:nth-child(3) { width: 30px; height: 34px; }

.tl__end .year {
  font-family: var(--script);
  font-size: 60px;
  color: var(--dot);
  position: absolute;
  left: calc(50% + 56px);
  top: -5px;
  line-height: 1;
}

/* Mismo font-weight que .tl .txt (las celdas de texto lateral): antes
   se quedaba en 400 por defecto y se veía más fino que el resto del
   texto de la línea de tiempo. Anclada por izquierda (alineada con
   .year, mismo left: calc(50% + 56px)) y por derecha (right: 20px) en
   vez de un max-width fijo: el ancho se resuelve solo según el hueco
   disponible, sin desbordar ni necesitar parches por rango de ancho. */
.tl__end .closing {
  font-family: var(--hand);
  text-transform: uppercase;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: .3px;
  color: var(--text);
  margin: 0;
  text-align: left;
  position: absolute;
  top: 4rem;
  left: calc(50% + 56px);
  right: 20px;
}

/* ── TABLET (769px – 1024px) ────────────────────────────── */
@media (max-width: 1024px) and (min-width: 769px) {
  .tl .conn           { width: 50px; }
  .tl .row--l .dot    { left: calc(50% - 51px); }
  .tl .row--l .conn   { left: calc(50% - 50px); }
  .tl .row--r .dot    { left: calc(50% + 22px); }
  .tl .row--r .conn   { left: 50%; }
}

/* ── MÓVIL (≤768px) ─────────────────────────────────────── */
@media (max-width: 768px) {

  /* Línea vertical: pegada a la izquierda. bottom en px (no rem) porque
     se ajustó por medición directa contra la primera huella del cluster
     de cierre (getBoundingClientRect en varios anchos, 320-768px) — un
     valor "redondo" en rem dejaba un hueco visible entre la línea y la
     huella. 266px es el mejor equilibrio: prácticamente a 0 en el rango
     375-480px (el más común), con un margen mínimo de sobra en los
     extremos (huellas viejos ~320px, tablets ~768px). */
  .tl::before {
    left: 30px;
    bottom: 266px;
  }

  /* Inicio */
  .tl__start {
    margin-left: -79px;
    padding: 47px 0 20px 55px;
    text-align: left;
  }

  .tl__start svg   { width: 68px; }
  /* left: padding-left(55px) + mitad del ancho del svg(68px/2) = centro real del corazón */
  .tl__start .year { left: 89px; transform: translateX(-50%); top: -10px; font-size: 42px; }

  /* Filas: apiladas en columna */
  .tl .row {
    flex-direction: column;
    align-items: flex-start;
    margin: 30px 0;
  }

  .tl .cell {
    width: 100%;
    flex: 0 0 100%;
    padding: 8px 0 8px 66px;
    align-items: flex-start;
    text-align: left;
  }

  /* Dot y connector: anclados al centro vertical de la foto.
     Los .dot/.conn de la fila se centran en la fila entera (foto +
     texto apilados) y quedan descolgados; se sustituyen por
     pseudo-elementos del wrapper .shot de la propia foto. */
  .tl .dot,
  .tl .conn {
    display: none;
  }

  .tl .polaroid .shot::before,
  .tl .polaroid .shot::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }

  /* Línea: desde el tronco (30px en .tl; la foto está a 100px:
     20 padding + 66 cell + 14 polaroid) hasta debajo del punto */
  .tl .polaroid .shot::before {
    left: -71px;
    right: calc(100% + 30px);
    height: .25rem;
    background: var(--line);
  }

  /* Punto: siempre a 10px del marco blanco del polaroid (14px) */
  .tl .polaroid .shot::after {
    right: calc(100% + 24px);
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--dot);
  }

  /* Polaroid */
  .tl .polaroid,
  .tl .cell--r .polaroid {
    transform: rotate(-2deg);
    max-width: 250px;
    width: 100%;
    margin-bottom: 15px;
  }

  .tl .polaroid .ph--placeholder { height: 200px; }

  .tl .polaroid .cap {
    font-size: 14px;
    padding: 10px 4px 4px;
  }

  /* Texto lateral */
  .tl .txt {
    font-size: 17px;
  }

  /* En filas derechas, el polaroid sube arriba */
  .tl .row--r .cell--r { order: -1; }
  .tl .row--r .cell--l { order: 1; }

  /* Cierre: flex horizontal — huellas a la izquierda, texto a la derecha */
  .tl__end {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 15px;
    margin-left: -79px;
    padding: 40px 20px 40px 54px;
    position: relative;
    min-height: 200px;
    text-align: left;
  }

  .tl__end .visual-column {
    flex-shrink: 0;
    position: relative;
    width: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .tl__end .cluster {
    position: static;
    transform: none;
    width: 78px;
    margin-left: -14px;
  }

  /* margin-left:-14px de arriba ya deja el cluster 2px a la izquierda de la
     línea; el ajuste óptico de base es -1px, así que aquí hace falta +1px
     para llegar al mismo resultado final (-1px) que en desktop/tablet */
  .tl__end .cluster .paw {
    transform: translateX(1px) rotate(180deg);
  }

  /* El año vive dentro de .text-column (ver markup en
     class-timeline-widget.php), igual que en desktop: arriba del todo,
     alineado con la huella superior del cluster, y con el texto de
     cierre debajo — no colgado bajo todo el cluster de huellas. */
  .tl__end .year {
    position: static;
    font-size: 42px;
    /* A tamaño más pequeño, el mismo font-weight normal de desktop se ve
       más fino (efecto óptico típico en fuentes manuscritas). Bold
       compensa para que el año se vea igual de "grueso" que en desktop. */
    font-weight: bold;
    margin: 0 0 6px;
    text-align: left;
    line-height: 1;
  }

  .tl__end .text-column {
    flex: 1;
  }

  .tl__end .closing {
    position: static;
    transform: none;
    font-size: 18px;
    line-height: 1.5;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
  }
}

/* ── MÓVIL PEQUEÑO (≤480px) ─────────────────────────────── */
@media (max-width: 480px) {
  .tl__end {
    gap: 10px;
    padding: 30px 15px 30px 55px;
  }

  .tl__end .year    { font-size: 32px; }
  .tl__end .closing { font-size: 14px; } /* font-weight ya viene de la regla base */
}