
.tbno-page{background:#070707;color:#f4f4f4;overflow:hidden}
.tbno-wrap{width:min(1180px,calc(100% - 40px));margin:0 auto}
.tbno-kicker{color:#e01818;text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;font-weight:900;margin-bottom:14px}
.tbno-hero{position:relative;min-height:720px;display:flex;align-items:flex-end;background:#0b0b0b;border-bottom:1px solid #2c0808}
.tbno-hero-image{position:absolute;inset:0;background-size:cover;background-position:center}
.tbno-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.76) 46%,rgba(0,0,0,.25) 100%),linear-gradient(0deg,rgba(0,0,0,.78),transparent 55%)}
.tbno-hero-inner{position:relative;z-index:2;padding-bottom:86px}
.tbno-hero h1{font-size:clamp(3.2rem,7.1vw,7.3rem);line-height:.91;text-transform:uppercase;max-width:1000px;margin:0;letter-spacing:-.035em}
.tbno-hero p{max-width:760px;color:#d0d0d0;font-size:1.16rem;line-height:1.72;margin:28px 0 0;border-left:3px solid #dc1111;padding-left:20px}
.tbno-story{padding:110px 0}
.tbno-story-grid{display:grid;grid-template-columns:230px 1fr;gap:82px}
.tbno-sticky-label{position:sticky;top:150px;height:max-content;border-top:1px solid #d31515;padding-top:18px}
.tbno-sticky-label span{font-size:4.4rem;font-weight:950;line-height:1;color:#fff;display:block}
.tbno-sticky-label small{display:block;color:#d31515;letter-spacing:.18em;font-weight:900;margin-top:8px}
.tbno-story-content{max-width:780px}
.tbno-story-block{position:relative;padding:0 0 100px}
.tbno-block-number{position:absolute;right:0;top:-24px;font-size:7rem;font-weight:950;line-height:1;color:rgba(255,255,255,.035)}
.tbno-story-block h2,.tbno-timeline-section h2,.tbno-closing h2{font-size:clamp(2.4rem,5vw,5rem);text-transform:uppercase;line-height:.96;margin:0 0 26px;letter-spacing:-.03em}
.tbno-prose p{color:#bfbfbf;line-height:1.9;font-size:1.07rem;margin:0 0 20px}
.tbno-prose p:first-child{font-size:1.22rem;color:#e6e6e6}
.tbno-quote{margin:10px 0 110px;padding:52px 54px;border-left:5px solid #e01616;background:linear-gradient(135deg,#151515,#0c0c0c);position:relative}
.tbno-quote:before{content:"“";position:absolute;right:24px;top:-42px;font-size:11rem;color:rgba(224,22,22,.17);font-family:serif;line-height:1}
.tbno-quote p{font-size:clamp(1.9rem,4vw,3.3rem);line-height:1.08;font-weight:900;text-transform:uppercase;margin:0;max-width:680px}
.tbno-quote cite{display:block;color:#e01616;font-style:normal;font-weight:900;margin-top:22px;text-transform:uppercase;letter-spacing:.12em;font-size:.75rem}
.tbno-timeline-section{padding:100px 0;background:#101010;border-top:1px solid #222;border-bottom:1px solid #222}
.tbno-timeline-section> .tbno-wrap > h2{max-width:900px;margin-bottom:64px}
.tbno-timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative}
.tbno-timeline:before{content:"";position:absolute;left:0;right:0;top:77px;height:1px;background:#4a1515}
.tbno-milestone{position:relative;padding-right:42px}
.tbno-year{font-size:3.2rem;font-weight:950;color:#fff;line-height:1}
.tbno-dot{width:13px;height:13px;border-radius:50%;background:#df1515;margin:22px 0 30px;position:relative;z-index:2;box-shadow:0 0 0 7px #101010}
.tbno-milestone h3{font-size:1.45rem;text-transform:uppercase;margin:0 0 12px}
.tbno-milestone p{color:#aaa;line-height:1.7;margin:0;max-width:300px}
.tbno-closing{padding:120px 0;background:radial-gradient(circle at 80% 50%,rgba(204,0,0,.2),transparent 35%),#070707}
.tbno-closing .tbno-wrap{max-width:1000px;text-align:center}
.tbno-closing-line{display:block;width:70px;height:4px;background:#e01515;margin:0 auto 35px}
.tbno-closing h2{font-size:clamp(3rem,7vw,7rem)}
.tbno-closing p{max-width:760px;margin:30px auto;color:#c6c6c6;line-height:1.8;font-size:1.08rem}
.tbno-btn{display:inline-flex;min-height:54px;align-items:center;justify-content:center;padding:0 25px;background:#df1515;color:#fff!important;text-decoration:none!important;font-weight:900;letter-spacing:.04em;margin-top:12px}
.tbno-btn:hover{filter:brightness(1.1)}
@media(max-width:900px){
 .tbno-hero{min-height:640px}
 .tbno-story-grid{grid-template-columns:1fr;gap:48px}
 .tbno-sticky-label{position:relative;top:auto;display:flex;align-items:end;gap:15px}
 .tbno-sticky-label span{font-size:3.6rem}
 .tbno-timeline{grid-template-columns:1fr;gap:42px}
 .tbno-timeline:before{left:5px;right:auto;top:0;bottom:0;width:1px;height:auto}
 .tbno-milestone{padding-left:38px;padding-right:0}
 .tbno-dot{position:absolute;left:0;top:48px;margin:0;transform:translateX(-1px)}
}
@media(max-width:620px){
 .tbno-wrap{width:min(100% - 28px,1180px)}
 .tbno-hero{min-height:560px}
 .tbno-hero-inner{padding-bottom:54px}
 .tbno-hero h1{font-size:clamp(2.9rem,14vw,4.8rem)}
 .tbno-hero p{font-size:1rem}
 .tbno-story{padding:72px 0}
 .tbno-story-block{padding-bottom:72px}
 .tbno-quote{padding:38px 26px;margin-bottom:78px}
 .tbno-timeline-section,.tbno-closing{padding:72px 0}
}


/* v1.2 — Ajuste específico del H1 de Nosotros para fuentes display como Bad Coma */
body .tbno-page .tbno-hero h1{
    font-size:clamp(2.75rem,5.15vw,5.35rem)!important;
    line-height:.93!important;
    max-width:920px;
    letter-spacing:-.025em;
}
@media (max-width:1100px){
    body .tbno-page .tbno-hero h1{
        font-size:clamp(2.7rem,6.2vw,4.8rem)!important;
        max-width:820px;
    }
}
@media (max-width:760px){
    body .tbno-page .tbno-hero h1{
        font-size:clamp(2.55rem,10.5vw,4.15rem)!important;
        line-height:.94!important;
        max-width:100%;
    }
}
@media (max-width:480px){
    body .tbno-page .tbno-hero h1{
        font-size:clamp(2.35rem,11vw,3.35rem)!important;
        line-height:.95!important;
        letter-spacing:-.015em;
    }
}


/* v1.3 — Vídeo vertical bajo 1994 */
.tbno-sticky-label{
    display:block;
}
.tbno-sticky-year{
    margin-bottom:24px;
}
.tbno-story-video-wrap{
    position:relative;
    width:100%;
    max-width:210px;
    aspect-ratio:9/16;
    overflow:hidden;
    background:#111;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 48px rgba(0,0,0,.28);
}
.tbno-story-video{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    background:#000;
}
.tbno-audio-toggle{
    position:absolute;
    z-index:3;
    top:10px;
    right:10px;
    min-height:34px;
    padding:0 10px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:999px;
    background:rgba(5,5,5,.78);
    color:#fff;
    font-size:10px;
    font-weight:900;
    letter-spacing:.06em;
    cursor:pointer;
    backdrop-filter:blur(6px);
}
.tbno-audio-toggle .tbno-audio-off{display:none}
.tbno-audio-toggle.is-muted .tbno-audio-on{display:none}
.tbno-audio-toggle.is-muted .tbno-audio-off{display:inline}
.tbno-audio-toggle:hover{background:#d31515;border-color:#d31515}

@media(max-width:900px){
    .tbno-sticky-label{
        display:grid;
        grid-template-columns:auto minmax(140px,190px);
        align-items:start;
        justify-content:start;
        gap:26px;
    }
    .tbno-sticky-year{margin-bottom:0}
    .tbno-story-video-wrap{max-width:190px}
}
@media(max-width:620px){
    .tbno-sticky-label{
        grid-template-columns:1fr;
        gap:24px;
    }
    .tbno-story-video-wrap{
        width:min(68vw,230px);
        max-width:none;
    }
}


/* v1.4 — Audio mediante controles nativos del vídeo.
   Evita que los estilos globales del tema conviertan el antiguo botón
   "SIN AUDIO" en un elemento enorme sobre el Reel. */
.tbno-story-video-wrap .tbno-audio-toggle{
    display:none!important;
}
.tbno-story-video{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}


/* =========================================================
   v1.6 — FOTO OPCIONAL EN CADA HITO / AÑO
   Sin imagen, la línea temporal conserva exactamente su layout.
   ========================================================= */
.tbno-milestone-image{
  width:100%;
  margin:24px 0 22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:#0b0b0b;
}
.tbno-milestone-image img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}
@media(max-width:700px){
  .tbno-milestone-image{margin:20px 0 18px}
}


/* v1.8 — Foto encima del vídeo en el bloque 1994 */
.tbno-story-media{
  width:100%;
}
.tbno-story-image{
  width:100%;
  margin:0 0 14px;
  overflow:hidden;
}
.tbno-story-image img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.tbno-story-image + .tbno-story-video-wrap{
  margin-top:0;
}
