/* ============================================================
   TRAINOLOGYM — BLOG INDIVIDUAL (post)
   Clon del Figma. Desktop frame 65-3704 / Móvil 65-5452.
   Depende de styles.css (tokens, nav, footer, blog-card).
   ============================================================ */

.bi-page{background:var(--tgy-bg)}

/* ============ HEADING POST ============ */
.bi-head{display:flex;align-items:stretch;background:var(--tgy-rojo);overflow:hidden}
.bi-head__content{flex:0 0 710px;max-width:710px;height:675px;background:var(--tgy-rojo);position:relative}
.bi-head__inner{position:absolute;left:105px;top:264px;width:535px;display:flex;flex-direction:column;gap:29px}
.bi-head__img{flex:1 1 auto;height:675px;overflow:hidden;position:relative}
.bi-head__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}

.bi-cats{display:flex;align-items:center;gap:32px}
.bi-cat{display:inline-flex;align-items:center;gap:8px;font-family:var(--tgy-font-body);font-weight:400;font-size:18px;line-height:24px;color:#fff;white-space:nowrap}
.bi-cat__dash{width:16px;height:2px;background:#fff;flex-shrink:0}
.bi-cat__sep{width:1px;height:24px;background:var(--tgy-border);opacity:.7}
.bi-cat--dark{color:rgba(0,0,0,.81);font-size:16px}
.bi-cat--dark .bi-cat__dash{width:8px;background:#000}
.bi-cat__sep--dark{background:#838383}

.bi-head__title{display:flex;flex-direction:column;gap:16px;letter-spacing:.5px}
.bi-head__h1{font-family:var(--tgy-font-display);font-weight:400;font-size:64px;line-height:67px;color:#fff;text-transform:uppercase;margin:0}
.bi-head__lead{font-family:var(--tgy-font-body);font-weight:400;font-size:20px;line-height:24px;color:rgba(255,255,255,.99);margin:0;max-width:478px}

/* ============ POST ============ */
.bi-post{padding:80px 0 0}
.bi-post__grid{width:100%;max-width:1231px;margin-inline:auto;padding-inline:16px;
  display:grid;grid-template-columns:967px 185px;column-gap:79px;align-items:start}

/* ---- Artículo ---- */
.bi-article{display:flex;flex-direction:column;gap:28px;min-width:0}
.bi-passage{display:flex;flex-direction:column;gap:12px}
.bi-paragraph{display:flex;flex-direction:column;gap:8px}
.bi-h6{font-family:var(--tgy-font-body);font-weight:700;font-size:24px;line-height:32px;color:#fff;text-transform:capitalize;margin:0}
.bi-p{font-family:var(--tgy-font-body);font-weight:400;font-size:19px;line-height:30px;color:rgba(255,255,255,.94);margin:0}

/* Cita */
.bi-quote{position:relative;border-radius:16px;overflow:hidden;margin:12px 0;
  padding:48px 80px;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.bi-quote__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:16px}
.bi-quote__overlay{position:absolute;inset:0;background:rgba(0,0,0,.37);border-radius:16px}
.bi-quote__inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.bi-quote__line{width:120px;height:6px;border-radius:20px;background:#fff}
.bi-quote__text{font-family:var(--tgy-font-display);font-weight:400;font-size:39px;line-height:42px;color:#fff;text-transform:uppercase;text-align:center;margin:0}
.bi-quote__author{font-family:var(--tgy-font-body);font-weight:700;font-size:16px;line-height:24px;color:rgba(255,255,255,.94);text-transform:capitalize}

/* Imagen del cuerpo (16:9) */
.bi-bodyimg{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#e9e9e9;margin:12px 0}
.bi-bodyimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:12px}

/* ---- Sidebar ---- */
.bi-side{display:flex;flex-direction:column;gap:38px;width:185px}

/* Tabla categorías con borde redondeado tipo notch */
.bi-cattab{border:2px solid #fff;border-radius:37px;width:185px;padding:0 0 28px;
  display:flex;flex-direction:column;align-items:center;gap:29px;background:transparent}
.bi-cattab__head{background:#fff;border-radius:60px;width:100%;padding:10px;display:flex;align-items:center;justify-content:center}
.bi-cattab__head span{font-family:var(--tgy-font-display);font-weight:400;font-size:29px;line-height:1;color:#000;text-transform:uppercase;text-align:center}
.bi-cattab__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:29px;align-items:center;width:100%}
.bi-cattab__list li{font-family:var(--tgy-font-body);font-weight:500;font-size:24px;line-height:1;letter-spacing:-1px;color:#fff;text-transform:uppercase;text-align:center;cursor:pointer;transition:color .2s}
.bi-cattab__list li:hover{color:var(--tgy-rojo)}

/* Promo lateral */
.bi-promo{position:relative;width:185px;height:255px;border-radius:13px;overflow:hidden;
  display:flex;align-items:center;padding:31px 14px 32px}
/* Banner clicable completo cuando tiene enlace */
.bi-promo--link{display:block;text-decoration:none;color:inherit;cursor:pointer;transition:transform .25s ease,filter .25s ease}
.bi-promo--link:hover{transform:translateY(-2px);filter:brightness(1.05)}
.bi-promo__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:13px}
.bi-promo__overlay{position:absolute;inset:0;background:rgba(0,0,0,.29);border-radius:13px}
.bi-promo__content{position:relative;display:flex;flex-direction:column;gap:21px;width:158px}
.bi-promo__title{font-family:var(--tgy-font-body);font-weight:600;font-size:26px;line-height:28px;color:#fff;text-transform:uppercase;margin:0;letter-spacing:.5px}
.bi-promo__sub{font-family:var(--tgy-font-body);font-weight:400;font-size:20px;line-height:24px;color:rgba(255,255,255,.71);margin:0}

/* ---- Botón gradiente reutilizable ---- */
.bi-btn{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--tgy-font-label);font-weight:600;font-size:14px;line-height:24px;
  letter-spacing:.5px;color:#fff;border-radius:32px;white-space:nowrap;transition:filter .2s}
.bi-btn--grad{background:var(--tgy-gradient-cta);height:40px;padding:0 18px}
.bi-btn--grad:hover{filter:brightness(1.08)}
.bi-btn--sm{height:44px;align-self:flex-start}

/* ============ AUTOR ============ */
.bi-authorwrap{padding:48px 0}
.bi-author{width:100%;max-width:968px;margin-inline:auto;background:var(--tgy-rojo);
  border-radius:15px;padding:16px 23px 18px 16px;display:flex;gap:20px;align-items:center}
.bi-author__photo{flex:0 0 189px;width:189px;height:199px;border-radius:10px;overflow:hidden;background:#d9d9d9}
.bi-author__photo img{width:100%;height:100%;object-fit:cover}
.bi-author__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:16px}
.bi-author__top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.bi-author__name{font-family:var(--tgy-font-body);font-weight:600;font-size:30px;line-height:40px;color:#fff;letter-spacing:.5px}
.bi-author__handle{font-family:var(--tgy-font-body);font-weight:700;font-size:16px;line-height:24px;color:#e5e5e5;white-space:nowrap}
.bi-author__role{font-family:var(--tgy-font-body);font-weight:400;font-size:16px;line-height:24px;color:#e5e5e5;margin:0}
.bi-author__text{font-family:var(--tgy-font-body);font-weight:400;font-size:16px;line-height:1.3;color:rgba(255,255,255,.8);margin:0}

/* ============ SECCIONES (Instagram / Relacionados) ============ */
.bi-section{padding:48px 0}
.bi-section .bi-secthead,.bi-section .bi-instagram,.bi-section .bi-related,.bi-section .bi-related__nav{
  width:100%;max-width:var(--tgy-maxw);margin-inline:auto;padding-inline:16px}

.bi-secthead{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:40px}
.bi-secthead__tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--tgy-font-body);font-weight:500;font-size:20px;line-height:1.3;color:#fff;white-space:nowrap;flex-shrink:0}
.bi-secthead__dot{width:18px;height:18px;border-radius:50%;background:var(--tgy-rojo);flex-shrink:0}
.bi-secthead__title{font-family:var(--tgy-font-display);font-weight:400;font-size:86px;line-height:1.1;letter-spacing:-1.72px;color:#fff;text-transform:uppercase;text-align:right;margin:0;max-width:750px}

/* Instagram banner */
.bi-instagram{border-radius:18px;overflow:hidden}
.bi-instagram img{display:block;width:100%;height:auto;border-radius:18px}

/* Relacionados — reutiliza .blog-card (notch + clip-path en styles.css) */
/* Carrusel: 3 tarjetas por vista, el resto desbordan y se recorren con flechas/swipe */
.bi-related{display:flex;gap:41px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.bi-related::-webkit-scrollbar{width:0;height:0;display:none}
.bi-related .blog-card{flex:0 0 calc((100% - 82px) / 3);scroll-snap-align:start}
.bi-related__btn{position:absolute;left:6px;bottom:8px;z-index:2}
.bi-related__meta{position:absolute;left:155px;bottom:20px;display:flex;align-items:center;gap:5px;z-index:2}

.bi-related__nav{display:flex;align-items:center;justify-content:space-between;margin-top:32px}
.bi-navbtn{width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);
  background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s}
.bi-navbtn svg{width:22px;height:22px}
.bi-navbtn:hover{border-color:#fff}
.bi-navbtn--grad{background:var(--tgy-gradient-cta);border-color:transparent}
.bi-navbtn--grad:hover{filter:brightness(1.08)}
.bi-dots{display:flex;align-items:center;gap:12px}
.bi-dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.35)}
.bi-dot.active{width:14px;height:14px;background:var(--tgy-rojo)}

/* =====================================================================
   RESPONSIVE — Móvil (≤991.98px) · frame 65-5452 (393)
   ===================================================================== */
@media (max-width:991.98px){
  /* Heading: imagen arriba, contenido rojo debajo */
  .bi-head{flex-direction:column}
  .bi-head__content{flex:none;max-width:none;width:100%;height:auto;padding:40px 24px 48px}
  .bi-head__inner{position:static;left:auto;top:auto;width:100%;gap:24px}
  .bi-head__h1{font-size:40px;line-height:42px}
  .bi-head__lead{font-size:18px;line-height:24px;max-width:none}
  .bi-head__img{order:-1;width:100%;height:300px;flex:none}
  .bi-head__img img{object-position:center}

  /* Post: una columna */
  .bi-post{padding:48px 0 0}
  .bi-post__grid{grid-template-columns:1fr;row-gap:48px;max-width:none}
  .bi-article{gap:24px}
  .bi-h6{font-size:22px;line-height:28px}
  .bi-p{font-size:17px;line-height:27px}
  .bi-quote{padding:36px 28px}
  .bi-quote__text{font-size:28px;line-height:32px}
  .bi-side{width:100%}
  .bi-cattab,.bi-promo,.bi-promo__content{width:100%}
  .bi-promo{height:auto;min-height:255px}

  /* Autor: columna */
  .bi-author{flex-direction:column;align-items:stretch;padding:16px 16px 24px;text-align:left}
  .bi-author__photo{flex:none;width:100%;height:220px}
  .bi-author__top{flex-direction:column;align-items:flex-start;gap:4px}
  .bi-author__name{font-size:26px;line-height:30px}

  /* Secciones */
  .bi-section{padding:40px 0}
  .bi-secthead{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:28px}
  .bi-secthead__title{font-size:40px;line-height:1.05;letter-spacing:-.5px;text-align:left;max-width:none}

  /* Relacionados: carrusel horizontal */
  .bi-related{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:18px}
  .bi-related::-webkit-scrollbar{display:none}
  .bi-related .blog-card{flex:0 0 86%;scroll-snap-align:start}
  .bi-btn--grad{padding:0 12px}
  .bi-related__meta{align-items: self-start; flex-direction: column;}
  .bi-cat__sep--dark{display:none}
}

@media (max-width:575.98px){
  .bi-head__content{padding:32px 18px 40px}
  .bi-head__h1{font-size:34px;line-height:36px}
  .bi-secthead__title{font-size:34px}
}