/* Estilos del cluster "Centro de ayuda":
   preguntas-frecuentes.html, politica-privacidad.html,
   politica-cookies.html y terminos-y-condiciones.html.

   Este archivo vuelve a ser la unica fuente. Durante un tiempo cada
   pagina llevo una copia inline con el comentario "el hosting no sirve
   ese archivo", y esas copias acabaron divergiendo entre si. El hosting
   si lo sirve (comprobado, HTTP 200), asi que se carga de aqui y se
   descarga una sola vez para las cuatro paginas en lugar de 11,7 KB
   dentro de cada HTML.

   Las rutas url() son relativas a la raiz del sitio (assets/img/...),
   no a esta carpeta: Cloudflare Pages sirve el CSS desde /assets/css/
   pero las rutas se resuelven contra la URL del propio CSS, por eso
   llevan ../../ delante. */
/* Estilos del cluster "Centro de ayuda":
   preguntas-frecuentes.html, politica-privacidad.html,
   politica-cookies.html y terminos-y-condiciones.html.
   Copia inline de assets/css/help.css (el hosting no sirve ese archivo).
   Ojo: aca las rutas url() son relativas a la raiz (assets/img/...). */

:root{
  --bg:#131313;
  --bg-alt:#1c1c1c;
  --card:#1f1f1f;
  --magenta:#C109B4;
  --teal:#33DBDB;
  --text:#ffffff;
  --text-muted:#a3a3a3;
  --gold:#caa24a;
}
*{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:0 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;}
section{padding:40px 0;}

/* 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;}

/* Help header */
.help-title{
  padding:24px 20px 0;
}
.help-eyebrow{
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--teal);
  margin-bottom:6px;
}
.help-title h1{
  font-size:20px;
  font-weight:800;
  display:inline-block;
  padding-bottom:8px;
  background:url('../../assets/img/line-underline.svg') left bottom no-repeat;
  background-size:70px 4px;
}
.help-updated{
  color:var(--text-muted);
  font-size:12px;
  margin-top:10px;
}
.help-tabs{
  display:flex;
  gap:10px;
  padding:20px 0 0;
  overflow-x:auto;
  scrollbar-width:none;
}
.help-tabs::-webkit-scrollbar{display:none;}
/* Espaciadores de 10px (+ los 10px del gap = 20px de aire a cada lado) en vez
   de padding lateral: el padding derecho de un contenedor con scroll horizontal
   no se respeta al llegar al final del scroll. Se notaba en
   terminos-y-condiciones.html, donde la pestaña activa es la ultima y el boton
   magenta quedaba pegado al borde de la pantalla. */
.help-tabs::before,
.help-tabs::after{content:'';flex:0 0 10px;}
.help-tab{
  flex:1 0 auto;
  padding:12px 16px;
  border-radius:80px;
  font-size:12px;
  font-weight:600;
  text-align:center;
  white-space:nowrap;
  background:rgba(51,51,51,.5);
  color:var(--text-muted);
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.help-tab.active{
  background:var(--magenta);
  color:#fff;
  box-shadow:0 2px 3px rgba(0,0,0,.35);
}

/* Legal intro */
.legal-intro{
  color:var(--text-muted);
  font-size:14px;
  margin-top:16px;
}

/* Acordeon de FAQ y de paginas legales (misma base) */
.faq-list,
.legal-list{padding:0 20px;}
.faq-item,
.legal-item{
  border-bottom:1px solid #2a2a2a;
  padding:16px 0;
}
.faq-item summary,
.legal-item summary{
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-weight:600;
  font-size:16px;
  cursor:pointer;
}
.faq-item summary::-webkit-details-marker,
.legal-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after,
.legal-item summary::after{
  content:'▾';
  color:var(--teal);
  transition:transform .2s;
  flex-shrink:0;
}
.faq-item[open] summary::after,
.legal-item[open] summary::after{transform:rotate(180deg);}
.faq-item p,
.legal-item p{
  color:var(--text-muted);
  font-size:15px;
  line-height:1.6;
  margin-top:10px;
}
/* Tabla de cookies (solo la usa politica-cookies.html) */
.legal-item table{
  width:100%;
  border-collapse:collapse;
  margin-top:12px;
  font-size:12px;
}
.legal-item th, .legal-item td{
  text-align:left;
  padding:8px 6px;
  border-bottom:1px solid #2a2a2a;
  color:var(--text-muted);
}
.legal-item th{color:var(--text);font-weight:600;}

/* Barra flotante 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. */
.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:16px;}
.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:16px;}
.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:var(--card);
  border-radius:16px;
  padding:24px;
  margin-bottom:24px;
}
.contact-box h4{font-size:16px;margin-bottom:8px;}
.contact-box p{color:var(--text-muted);font-size:13px;margin-bottom:16px;}
.whatsapp-btn{
  background:#25D366;
  color:#0d0d0d;
  font-weight:700;
  padding:12px 24px;
  border-radius:30px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
}
.socials{
  display:flex;
  justify-content:center;
  gap:20px;
  font-size:13px;
  color:var(--text-muted);
  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;}
  /* El centro de ayuda usa una columna de 900px (.help-title, .help-tabs,
     .faq-list, .legal-list). El .container heredado media 1100px con 20px de
     padding, asi que en escritorio el h2 y el parrafo de intro arrancaban ~120px
     mas a la izquierda que el resto de la pagina. En movil no se notaba porque
     ambos comparten los mismos 20px. */
  .container{max-width:900px;margin:0 auto;padding:0 40px;}
  .help-title{max-width:900px;margin:0 auto;padding:24px 40px 0;}
  .help-tabs{max-width:900px;margin:0 auto;padding:20px 40px 0;justify-content:flex-start;}
  .help-tab{flex:none;}
  /* Aca la fila ya no scrollea, asi que los espaciadores sobran; display:none
     los saca del flex para que tampoco aporten el gap. */
  .help-tabs::before,.help-tabs::after{display:none;}
  .faq-list,
  .legal-list{max-width:900px;margin:0 auto;padding:0 40px;}
  .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;}