/* Estilos de las 8 paginas de disciplina:
   crossfit, levantamiento-olimpico, hybrid, gymnastics, strongman,
   full-body, competidor y adulto-mayor.

   Antes cada una llevaba su propia copia inline de ~14 KB, con solo una
   o dos reglas de diferencia entre ellas. Quien visitaba dos disciplinas
   se descargaba 28 KB del mismo CSS. Ahora la base viaja una vez y se
   cachea, y cada pagina anade inline solo lo suyo.

   Las url() llevan ../../ porque se resuelven contra la URL de este
   archivo (/assets/css/), no contra la de la pagina. */
  :root{
    --bg:#131313;
    --bg-alt:#1c1c1c;
    --card:#1e1e1e;
    --magenta:#C109B4;
    --teal:#33DBDB;
    --text:#ffffff;
    --text-muted:#a3a3a3;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--teal) #0c0c0c;}
  html::-webkit-scrollbar{width:10px;}
  html::-webkit-scrollbar-track{background:#0c0c0c;}
  html::-webkit-scrollbar-thumb{background:var(--teal);border-radius:5px;}
  html::-webkit-scrollbar-thumb:hover{background:#5ce6e6;}
  body{
    background:#000;
    color:var(--text);
    font-family:'Poppins', 'Segoe UI', Arial, sans-serif;
    line-height:1.4;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none;}
  .app{
    max-width:480px;
    margin:0 auto;
    background:var(--bg);
    overflow-x:hidden;
    position:relative;
  }
  @media (min-width:481px){
    .app{box-shadow:0 0 60px rgba(0,0,0,.6);min-height:100vh;}
  }
  .container{padding:0 20px;}

  /* Migas de pan */
  .breadcrumb{padding:10px 0 12px;}
  .breadcrumb ol{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
    list-style:none;
    margin:0;
    padding:0;
    font-size:12px;
    color:var(--text-muted);
  }
  .breadcrumb li{display:flex;align-items:center;gap:6px;}
  .breadcrumb li+li::before{content:'\203A';opacity:.65;}
  .breadcrumb a{color:var(--text-muted);text-decoration:none;}
  .breadcrumb a:hover{color:var(--teal);text-decoration:underline;}
  .breadcrumb [aria-current='page']{color:var(--text);font-weight:600;}

  /* Header */
  header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 20px;
  }
  .menu-btn{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;}
  .logo-nav{display:flex;align-items:center;}
  .logo-nav img{height:64px;width:auto;display:block;}

  /* Hero card */
  .discipline-page{padding-top:0;padding-bottom:40px;}
  .hero-card{
    position:relative;
    border-radius:30px;
    overflow:hidden;
    padding:30px 24px;
    margin-top:16px;
  }
  .hero-card img.bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:.6;
  }
  .hero-card .overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.7);
  }
  .hero-card .content{position:relative;z-index:1;}
  .hero-card h1{
    font-size:24px;
    font-weight:700;
    display:inline-block;
    padding-bottom:8px;
    background:url('../../assets/img/line-underline.svg') left bottom no-repeat;
    background-size:172px 7px;
    margin-bottom:10px;
  }
  .hero-card .subtitle{font-size:16px;font-weight:700;margin-bottom:10px;}
  .hero-card .desc{font-size:14px;color:#f8f8f8;}

  /* Info cards */
  .info-card{
    background:var(--card);
    border-radius:30px;
    padding:20px 20px 20px 30px;
    margin-top:14px;
    box-shadow:0 2px 6px rgba(0,0,0,.35);
  }
  .info-card h2{font-size:18px;font-weight:700;margin-bottom:6px;}
  .info-card p{font-size:14px;color:#f8f8f8;}
  .info-card p + p{margin-top:10px;}
  .info-card ul{list-style:disc;padding-left:20px;font-size:14px;color:#f8f8f8;}
  .info-card ul li{margin-bottom:2px;}

  /* Beneficios */
  .section-title{margin-top:28px;margin-bottom:14px;}
  .section-title h2{
    font-size:20px;
    font-weight:700;
    display:inline-block;
    padding-bottom:8px;
    background:url('../../assets/img/line-underline.svg') left bottom no-repeat;
    background-size:172px 3px;
  }
  .benefits-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }
  .benefit-card{
    background:rgba(193,9,180,.2);
    border-radius:30px;
    padding:20px 10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:4px;
    box-shadow:0 2px 6px rgba(0,0,0,.5);
  }
  .benefit-card img{width:24px;height:24px;}
  .benefit-card span{font-size:12px;font-weight:500;color:#fff;}

  /* Coach.
     Todas las medidas del bloque de la foto salen de --cv (el ancho del
     anillo, 133px en el Figma) para poder achicarlo de una sola vez en
     pantallas angostas: con 133px fijos, en un iPhone de 320px CSS (Display
     Zoom) el circulo se comia el ancho y el nombre se salia de la tarjeta. */
  .coach-row{
    --cv:133px;
    display:flex;
    align-items:center;
    padding:12px 18px 12px 10px;
    background:var(--card);
    border-radius:20px;
  }
  @media (max-width:380px){ .coach-row{--cv:88px;padding-right:12px;} }
  @media (max-width:380px){ .coach-tags li{font-size:9px;padding:3px 8px;} }

  /* Enlaces cruzados al resto de las disciplinas (cierre de la pagina). */
  .other-disciplines{list-style:none;display:flex;flex-wrap:wrap;gap:8px;}
  .other-disciplines a{
    display:inline-flex;align-items:center;
    background:var(--card);
    border:1px solid rgba(255,255,255,.08);
    border-radius:70px;
    padding:10px 16px;font-size:13px;font-weight:600;color:#f8f8f8;
  }
  .coach-visual{
    position:relative;
    width:var(--cv);
    height:calc(var(--cv) * 168 / 133);
    flex-shrink:0;
    margin-right:calc(var(--cv) * -40 / 133);
  }
  .coach-visual .ring{
    position:absolute;
    left:0;
    top:calc(var(--cv) * 36 / 133);
    width:var(--cv);
    height:calc(var(--cv) * 132 / 133);
  }
  .coach-visual .photo,
  .coach-visual .photo-front{
    position:absolute;
    left:calc(var(--cv) * 19 / 133);
    top:0;
    width:calc(var(--cv) * 96 / 133);
    height:calc(var(--cv) * 160 / 133);
  }
  /* la foto trasera solo se ve dentro del circulo del anillo */
  .coach-visual .photo{filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));clip-path:circle(calc(var(--cv) * 66 / 133) at calc(var(--cv) * 47.5 / 133) calc(var(--cv) * 102 / 133));}
  /* copia superior de la foto por delante del anillo, como en Figma (nodo 116:40416) */
  .coach-visual .photo-front{clip-path:inset(0 0 calc(var(--cv) * 51 / 133) 0);}
  .coach-info{
    flex:1;
    min-width:0;
    padding:0 6px 0 calc(var(--cv) * 48 / 133);
    filter:drop-shadow(0 4px 2px rgba(0,0,0,.5));
  }
  .coach-info h3{font-size:clamp(16px,5.1vw,20px);font-weight:700;color:#f8f8f8;line-height:1.2;text-wrap:balance;}
  .coach-info p{font-size:clamp(11.5px,3.6vw,13px);font-weight:600;color:#f8f8f8;margin-top:4px;line-height:1.4;}
  /* Credenciales de la coach: badges bajo el cargo. Envuelven en dos filas en
     pantallas angostas, por eso flex-wrap. */
  .coach-tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
  .coach-tags li{
    display:inline-flex;align-items:center;
    background:rgba(51,219,219,.14);
    border:1px solid rgba(51,219,219,.4);
    color:var(--teal);border-radius:70px;
    padding:3px 9px;font-size:10px;font-weight:600;line-height:1.3;
    white-space:nowrap;max-width:100%;
  }

  /* Pills (base heredada por .quick-actions .pill) */
  .pill{
    padding:10px 20px;
    border-radius:70px;
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    gap:4px;
  }
  .pill-teal{background:rgba(255,255,255,.1);color:#f8f8f8;}
  .pill-dark{background:var(--magenta);color:#f8f8f8;}
  .pill-dark img{width:18px;height:18px;}

  /* Barra fija de CTA (la misma de index.html). Los .pill van scopeados a
     .quick-actions para que la barra se vea igual en todo el sitio aunque la
     pagina defina su propio .pill con otro tamaño (pasa en las disciplinas). */
  .quick-actions{
    display:flex;
    justify-content:center;
    padding:0 12px;
    position:fixed;
    left:50%;
    bottom:14px;
    transform:translateX(-50%);
    width:100%;
    max-width:480px;
    z-index:80;
    pointer-events:none;
  }
  .quick-actions-inner{
    pointer-events:auto;
    background:rgba(30,30,30,.88);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 10px 28px rgba(0,0,0,.55);
    border-radius:130px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px;
  }
  .quick-actions .pill{
    padding:10px 14px;
    border-radius:70px;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    gap:3px;
  }
  .quick-actions .pill-teal{background:rgba(255,255,255,.1);color:#f8f8f8;font-size:18px;}
  .quick-actions .pill-dark{background:var(--magenta);color:#f8f8f8;font-size:20px;}
  .quick-actions .pill-dark img{width:16px;height:16px;}

  /* Footer */
  footer{
    background:var(--bg-alt);
    padding:40px 20px 120px;
    text-align:center;
  }
  .footer-logo{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin-bottom:24px;
    font-weight:800;
    font-size:15px;
    flex-wrap:wrap;
  }
  .footer-logo .bull-badge{
    display:flex;align-items:center;justify-content:center;
  }
  .footer-logo .bull-badge img{width:50px;height:auto;object-fit:contain;}
  .footer-logo .wordmark{display:flex;flex-direction:column;gap:2px;}
  .footer-logo .wordmark img{height:21px;width:auto;}
  .footer-links{
    text-align:left;
    max-width:300px;
    margin:0 auto 20px;
  }
  .footer-links details{
    border-bottom:1px solid #2a2a2a;
    padding:12px 0;
  }
  .footer-links summary{
    cursor:pointer;
    list-style:none;
    display:flex;
    justify-content:space-between;
    font-weight:600;
    font-size:14px;
  }
  .footer-links summary::-webkit-details-marker{display:none;}
  .footer-links summary::after{content:'▾';color:var(--teal);transition:transform .2s;}
  .footer-links details[open] summary::after{transform:rotate(180deg);}
  .footer-links a.plain{display:flex;justify-content:space-between;align-items:center;padding:10px 0;font-weight:600;font-size:14px;}
  .footer-links a.plain::after{content:'>';color:var(--magenta);font-weight:700;font-size:14px;line-height:1;position:relative;top:1px;}
  .footer-links details ul{list-style:none;padding:8px 0 4px 8px;}
  .footer-links details ul li{padding:6px 0;}
  .footer-links details ul a{color:var(--text-muted);font-size:13px;}
  .footer-links details ul a:hover{color:var(--teal);}
  .map-block{margin-bottom:24px;}
  .map-block h3{font-size:18px;margin-bottom:8px;}
  .map-block h3 span{display:block;width:172px;height:3px;background:url('../../assets/img/line-underline.svg') center/contain no-repeat;margin:8px auto 0;}
  .map-block p{color:#f8f8f8;font-size:14px;font-weight:600;}

  /* Drawer menu */
  .drawer-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.6);
    opacity:0;pointer-events:none;transition:opacity .25s;z-index:90;
  }
  .drawer-overlay.open{opacity:1;pointer-events:auto;}
  .drawer{
    position:fixed;top:0;left:0;height:100%;
    width:min(330px,85vw);
    background:var(--bg-alt);
    padding:24px 20px;
    transform:translateX(-100%);
    visibility:hidden;
    transition:transform .3s ease, visibility .3s;
    z-index:91;
    overflow-y:auto;
  }
  .drawer.open{transform:translateX(0);visibility:visible;}
  .drawer-close{
    background:none;border:none;color:#fff;font-size:20px;
    cursor:pointer;margin-bottom:16px;padding:4px;
  }
  .drawer-nav details{border-bottom:1px solid #2a2a2a;padding:10px 0;}
  .drawer-nav summary{
    cursor:pointer;list-style:none;display:flex;
    justify-content:space-between;align-items:center;
    font-weight:600;font-size:14px;color:#fff;
  }
  .drawer-nav summary::-webkit-details-marker{display:none;}
  .drawer-nav summary::after{content:'▾';color:var(--teal);transition:transform .2s;}
  .drawer-nav details[open] summary::after{transform:rotate(180deg);}
  .drawer-nav details ul{list-style:none;padding:8px 0 4px 8px;}
  .drawer-nav details ul li{padding:6px 0;}
  .drawer-nav details ul a{color:var(--text-muted);font-size:13px;}
  .drawer-nav details ul a:hover{color:var(--teal);}
  .drawer-item-plain{
    display:flex;justify-content:space-between;align-items:center;
    padding:10px 0;font-weight:600;font-size:14px;color:#fff;
    border-bottom:1px solid #2a2a2a;
  }
  .drawer-item-plain::after{content:'>';color:var(--magenta);font-weight:700;font-size:14px;line-height:1;position:relative;top:1px;}
  .drawer-map{
    margin-top:24px;padding:10px 0;border-radius:20px;text-align:center;
  }
  .drawer-map h3{font-size:18px;margin-bottom:8px;color:#fff;}
  .drawer-map h3 span{display:block;width:172px;height:3px;background:url('../../assets/img/line-underline.svg') center/contain no-repeat;margin:8px auto 0;}
  .drawer-map p{color:#f8f8f8;font-size:14px;font-weight:600;}
  .contact-box{
    background:rgba(30,30,30,.5);
    border-radius:30px;
    padding:20px 24px;
    margin-bottom:24px;
  }
  .contact-box h4{font-size:18px;margin-bottom:8px;}
  .contact-box .underline{width:172px;height:3px;background:url('../../assets/img/line-underline.svg') center/contain no-repeat;margin:0 auto 8px;}
  .contact-box p{color:#f8f8f8;font-size:12px;margin-bottom:16px;}
  .whatsapp-btn{
    background:rgba(51,219,219,.2);
    color:#f8f8f8;
    font-weight:600;
    padding:10px 20px;
    border-radius:80px;
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-size:14px;
    box-shadow:0 2px 6px rgba(0,0,0,.35);
  }
  .socials{
    display:flex;
    justify-content:center;
    gap:20px;
    font-size:12px;
    color:#fff;
    margin-bottom:20px;
  }
  .legal-links{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    font-size:13px;
    color:var(--text-muted);
    margin-bottom:12px;
  }
  .legal-links a:hover{color:var(--teal);}
  .copyright{font-size:16px;font-weight:600;color:#f8f8f8;text-align:center;}

  /* Desktop */
  @media (min-width:900px){
    .app{max-width:none;box-shadow:none;}
    .container{max-width:1100px;margin:0 auto;}

    .hero-card{padding:50px 60px;}
    .hero-card .content{max-width:640px;margin:0 auto;text-align:center;}
    .hero-card h1{font-size:32px;}

    .benefits-grid{grid-template-columns:repeat(4,1fr);}

    .quick-actions{max-width:900px;justify-content:center;}
    footer{padding:60px 40px 130px;}
    .footer-links{max-width:900px;}
  }

  /* Oculto temporalmente: portal de alumnos BoxMagic.
     Para volver a mostrarlo, borra esta regla. */
  .footer-links a.plain,
  .drawer-item-plain{display:none;}