/* ===================================================================
   TE LO CUENTO MX — hoja de estilos
   Tokens: ink navy / paper / brick red / ochre thread
=================================================================== */

:root{
  --ink:        #14213D;   /* azul tinta — fondo principal, texto de marca */
  --ink-soft:   #1E2E52;
  --paper:      #F1ECE0;   /* papel cálido */
  --paper-2:    #E8E1D0;
  --brick:      #B3312C;   /* rojo tenue — acento editorial */
  --ochre:      #C99A3A;   /* hilo narrativo / acento dorado */
  --slate:      #3A3F44;   /* texto de cuerpo sobre papel */
  --slate-soft: #6B6F73;
  --line:       rgba(20,33,61,0.14);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Source Sans 3", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --radius: 3px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  color: var(--slate);
  background: var(--paper);
  line-height:1.55;
}

h1,h2,h3,h4,.display-font{
  font-family: var(--font-display);
  color: var(--ink);
  font-weight:600;
  letter-spacing:-0.01em;
}

a{ color: var(--brick); text-decoration:none; }
a:hover{ color: var(--ink); }

.eyebrow{
  font-family: var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: var(--brick);
  display:inline-block;
  margin-bottom:0.5rem;
}

.dateline{
  font-family: var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.06em;
  color: var(--slate-soft);
  text-transform:uppercase;
}

/* Focus visibility */
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible{
  outline:2px solid var(--ochre);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------------- Top utility bar ---------------- */
.top-bar{
  background: var(--ink);
  color: var(--paper-2);
  font-family: var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.05em;
  padding:6px 0;
}
.top-bar a{ color: var(--paper-2); opacity:0.85; }
.top-bar a:hover{ color:#fff; opacity:1; }
.top-bar .live-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--brick);
  display:inline-block;
  margin-right:6px;
  animation: pulse 1.6s infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; } 50%{ opacity:0.35; }
}

/* ---------------- Navbar ---------------- */
.navbar-tlc{
  background: var(--paper);
  border-bottom:2px solid var(--ink);
  padding-top:.85rem;
  padding-bottom:.85rem;
}
.brand-mark{
  font-family: var(--font-display);
  font-weight:700;
  font-size:1.6rem;
  color: var(--ink) !important;
  line-height:1;
}
.brand-mark .dot{ color: var(--brick); }
.brand-slogan{
  font-family: var(--font-mono);
  font-size:0.65rem;
  letter-spacing:0.1em;
  color: var(--slate-soft);
  text-transform:uppercase;
  display:block;
  margin-top:2px;
}
.navbar-tlc .nav-link{
  font-family: var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color: var(--ink);
  padding:0.5rem 0.7rem !important;
  position:relative;
}
.navbar-tlc .nav-link.active,
.navbar-tlc .nav-link:hover{ color: var(--brick); }
.navbar-tlc .nav-link.active::after{
  content:"";
  position:absolute;
  left:0.7rem; right:0.7rem; bottom:0.15rem;
  height:2px;
  background: var(--ochre);
}
.dropdown-menu{
  border-radius:var(--radius);
  border:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.03em;
}

/* ---------------- Hero ---------------- */
.hero{
  background: var(--ink);
  color: var(--paper);
  padding:4.5rem 0 3.5rem;
  position:relative;
  overflow:hidden;
}
.hero h1{
  color:#fff;
  font-size:clamp(2.2rem, 5vw, 3.6rem);
  line-height:1.05;
}
.hero p.lead{
  color: var(--paper-2);
  max-width:640px;
}
.hero .eyebrow{ color: var(--ochre); }

/* ---------------- Signature: el hilo narrativo ---------------- */
/* A vertical thread linking story "chapters" — literal to the slogan:
   every news item is a chapter stitched into one continuing story. */
.hilo{
  position:relative;
  padding-left:2.75rem;
}
.hilo::before{
  content:"";
  position:absolute;
  left:0.95rem;
  top:0.4rem;
  bottom:0.4rem;
  width:2px;
  background: linear-gradient(to bottom, var(--ochre), var(--line) 92%);
}
.capitulo{
  position:relative;
  padding-bottom:2.4rem;
}
.capitulo:last-child{ padding-bottom:0; }
.capitulo::before{
  content:attr(data-cap);
  position:absolute;
  left:-2.75rem;
  top:0.1rem;
  width:2rem; height:2rem;
  background: var(--paper);
  border:2px solid var(--ochre);
  border-radius:50%;
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:0.68rem;
  display:flex; align-items:center; justify-content:center;
}
.capitulo h3{ margin-bottom:0.35rem; font-size:1.3rem; }
.capitulo .resumen{ color: var(--slate); }

/* ---------------- Cards ---------------- */
.card-tlc{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  height:100%;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card-tlc:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(20,33,61,0.10);
}
.card-tlc .card-body{ padding:1.4rem; }
.card-tlc h3, .card-tlc h4{ font-size:1.15rem; }
.tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:0.65rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--brick);
  border:1px solid var(--brick);
  border-radius:20px;
  padding:2px 10px;
  margin-bottom:0.6rem;
}

/* ---------------- Section framing ---------------- */
.section{ padding:4rem 0; }
.section-alt{ background: var(--paper-2); }
.section-title{
  display:flex;
  align-items:baseline;
  gap:0.75rem;
  margin-bottom:2rem;
}
.section-title .num{
  font-family:var(--font-mono);
  color:var(--ochre);
  font-size:0.95rem;
}
hr.rule{
  border:0; border-top:1px solid var(--line);
  margin:0.5rem 0 2rem;
}

/* ---------------- Quote / declaraciones ---------------- */
.quote-block{
  border-left:3px solid var(--brick);
  padding:0.4rem 0 0.4rem 1.4rem;
  font-family: var(--font-display);
  font-size:1.35rem;
  font-style:italic;
  color:var(--ink);
}
.quote-source{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--slate-soft);
  margin-top:0.5rem;
}

/* ---------------- En vivo ---------------- */
.live-badge{
  display:inline-flex; align-items:center; gap:6px;
  background: var(--brick);
  color:#fff;
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:20px;
}
.live-badge .dot{
  width:7px; height:7px; border-radius:50%;
  background:#fff; animation:pulse 1.4s infinite;
}
.player-frame{
  background: var(--ink);
  border-radius:var(--radius);
  aspect-ratio:16/9;
  display:flex; align-items:center; justify-content:center;
  color: var(--paper-2);
  font-family:var(--font-mono);
  font-size:0.85rem;
  text-align:center;
  padding:2rem;
}

/* ---------------- Data / datos ---------------- */
.stat{
  border-top:2px solid var(--ochre);
  padding-top:0.8rem;
}
.stat .num{
  font-family:var(--font-display);
  font-size:2.6rem;
  color:var(--ink);
  line-height:1;
}
.stat .label{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--slate-soft);
}

/* ---------------- Buttons ---------------- */
.btn-tlc{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background: var(--brick);
  color:#fff;
  border:1px solid var(--brick);
  border-radius:var(--radius);
  padding:0.6rem 1.4rem;
}
.btn-tlc:hover{ background:transparent; color:var(--brick); }
.btn-outline-tlc{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background:transparent;
  color:var(--paper);
  border:1px solid var(--paper);
  border-radius:var(--radius);
  padding:0.6rem 1.4rem;
}
.btn-outline-tlc:hover{ background:var(--paper); color:var(--ink); }

/* ---------------- Forms ---------------- */
.form-control, .form-select{
  border-radius:var(--radius);
  border:1px solid var(--line);
  font-family:var(--font-body);
}
.form-control:focus, .form-select:focus{
  border-color:var(--ochre);
  box-shadow:0 0 0 0.2rem rgba(201,154,58,0.25);
}
label{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--ink);
}

/* ---------------- Footer ---------------- */
footer.site-footer{
  background: var(--ink);
  color: var(--paper-2);
  padding:3rem 0 1.5rem;
}
footer.site-footer h5{
  color:#fff;
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:1rem;
}
footer.site-footer a{ color: var(--paper-2); }
footer.site-footer a:hover{ color: var(--ochre); }
footer.site-footer ul{ list-style:none; padding:0; margin:0; }
footer.site-footer li{ margin-bottom:0.5rem; font-size:0.92rem; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.12);
  margin-top:2rem;
  padding-top:1.2rem;
  font-family:var(--font-mono);
  font-size:0.7rem;
  color: rgba(241,236,224,0.55);
}
.social-icons a{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  border:1px solid rgba(241,236,224,0.3);
  border-radius:50%;
  margin-right:8px;
}
.social-icons a:hover{ border-color:var(--ochre); }

/* Back to top */
#back-to-top{
  position:fixed; right:1.25rem; bottom:1.25rem;
  width:42px; height:42px;
  background:var(--ink); color:#fff;
  border-radius:50%;
  display:none; align-items:center; justify-content:center;
  border:1px solid var(--ochre);
  z-index:1050;
}

/* Skip link */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--ink); color:#fff; padding:10px 16px; z-index:2000;
}
.skip-link:focus{ left:1rem; top:1rem; }