/* Bencefalo v89 — full-width descriptive copy, how-it-works icons and expanded Taller navigation */

/* Descriptive copy should use the full content rail of its section/card. */
.taller-page .courses-intro,
.taller-page .academy-how-intro,
.taller-page .guide-copy p,
.taller-page .course-description,
.taller-page .story-copy,
.taller-page .story-copy p{
  width:100%!important;
  max-width:none!important;
}
.taller-page .guide-copy{min-width:0!important;width:100%!important}

/* Decorative round icons for Cómo funciona */
.academy-how-card{padding-right:24px!important}
.academy-how-card h3{padding-right:62px!important}
.academy-how-icon{
  position:absolute;
  top:20px;
  right:20px;
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(202,153,255,.30);
  background:
    radial-gradient(circle at 32% 28%,rgba(212,172,255,.18),transparent 35%),
    linear-gradient(145deg,rgba(123,50,181,.82),rgba(76,20,127,.92));
  box-shadow:0 8px 24px rgba(92,28,145,.24),inset 0 1px 0 rgba(255,255,255,.10);
  color:#f0ddff;
}
.academy-how-icon svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Six-item Taller nav remains compact on desktop and scrollable before it collides. */
.taller-page .navlinks{gap:14px!important}
.taller-page .navlinks .nav-anchor{font-size:11px!important}
@media(max-width:1180px){
  .taller-page .tb-nav .wrap{gap:14px!important}
  .taller-page .navlinks{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    overscroll-behavior-inline:contain;
  }
  .taller-page .navlinks::-webkit-scrollbar{display:none}
  .taller-page .navlinks>a{flex:0 0 auto!important}
}

/* Footer Taller column now has more entries; keep its rhythm compact. */
.site-footer .footer-col:nth-of-type(3){gap:8px!important}

@media(max-width:680px){
  .academy-how-card{
    padding:21px 19px!important;
  }
  .academy-how-card h3{padding-right:54px!important}
  .academy-how-icon{
    top:17px;
    right:17px;
    width:44px;
    height:44px;
  }
  .academy-how-icon svg{width:20px;height:20px}
}