/* ==========================================================
   La Clave Escuela – estilos base (inicio aprobado)
   ========================================================== */
:root{
    --red:#DA0B0B;
    --red-dark:#AE0808;
    --black:#0A0A0A;
    --ink:#1A1A1A;
    --white:#FFFFFF;
    --light:#F4F4F4;
    --gray:#5F5F5F;
    --line:#DEDEDE;
    --wa:#1FA855;
    --display:"Montserrat", "Helvetica Neue", Arial, sans-serif;
    --text:"Poppins", "Montserrat", system-ui, sans-serif;
    --wrap:1200px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--white);color:var(--ink);font:400 16px/1.7 var(--text);-webkit-font-smoothing:antialiased}
  img{max-width:100%;display:block}
  a{color:inherit}
  button{font-family:inherit}
  :focus-visible{outline:3px solid var(--red);outline-offset:3px}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
  @media (min-width:720px){.wrap{padding:0 32px}}
  h1,h2,h3,h4{font-family:var(--display);margin:0;color:var(--black)}
  h2{font-size:clamp(30px,4.6vw,52px);font-weight:800;line-height:1.02;letter-spacing:-.02em;text-transform:uppercase}
  h3{font-size:20px;font-weight:700;line-height:1.25}
  p{margin:0}
  .lead{font-size:17px;color:var(--gray);max-width:58ch}
  .sec{padding:104px 0}
  .bg-light{background:var(--light)}

  /* Encabezado de sección: título + línea + emblema (estilo editorial) */
  .sh{display:flex;align-items:flex-end;gap:24px;margin-bottom:22px}
  .sh h2{flex:0 1 auto;min-width:0;max-width:16ch;overflow-wrap:break-word}
  .sh .rule{flex:1;height:1px;background:var(--black);margin-bottom:12px;min-width:24px}
  @media (max-width:520px){.sh{gap:14px}.sh .mk{display:none}}
  .sh .mk{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--black);margin-bottom:-3px;
    background:repeating-linear-gradient(to bottom,#fff 0 4px,var(--black) 4px 7px)}
  .sh-sub{margin-bottom:56px}
  .on-dark .sh .rule{background:#fff}
  .on-dark .sh .mk{border-color:#fff;background:repeating-linear-gradient(to bottom,var(--black) 0 4px,#fff 4px 7px)}
  .on-dark h2{color:#fff}

  /* Botones */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;font:600 15px/1 var(--display);text-decoration:none;border-radius:999px;padding:16px 26px;border:0;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
  .btn-red{background:var(--red);color:#fff}
  .btn-red:hover{background:var(--red-dark)}
  .btn-black{background:var(--black);color:#fff}
  .btn-black:hover{background:var(--red)}
  .btn-white{background:#fff;color:var(--black)}
  .btn-white:hover{background:var(--black);color:#fff}
  .btn-outline{background:transparent;color:var(--black);box-shadow:inset 0 0 0 1.5px var(--black)}
  .btn-outline:hover{background:var(--black);color:#fff}
  .btn-sm{padding:12px 20px;font-size:13.5px}
  .ico{width:19px;height:19px;flex:none}
  /* Píldora con círculo (referencia vinilo) */
  .pill-cta{display:inline-flex;align-items:center;gap:22px;padding:8px 8px 8px 30px;border-radius:999px;border:1.5px solid var(--black);text-decoration:none;font:600 16px var(--display);color:var(--black);background:#fff;transition:background .2s,color .2s}
  .pill-cta .circ{width:58px;height:58px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;transition:transform .25s}
  .pill-cta .circ svg{width:22px;height:22px}
  .pill-cta:hover{background:var(--black);color:#fff;border-color:var(--black)}
  .pill-cta:hover .circ{transform:rotate(-45deg)}
  .text-link{font:600 15px var(--display);text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:3px}
  .text-link:hover{color:var(--red)}

  /* Barra superior */
  .topbar{background:var(--black);color:#fff;font-size:13.5px}
  .topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
  .topbar .msg b{color:#fff;background:var(--red);border-radius:4px;padding:1px 8px;margin-right:8px;font:700 12px var(--display)}
  .topbar a{text-decoration:none;opacity:.85}
  .topbar a:hover{opacity:1}
  .topbar .right{display:flex;gap:18px;align-items:center}
  @media (max-width:760px){.topbar .right{display:none}.topbar .wrap{justify-content:center;text-align:center}}

  /* Header */
  header.top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .top .wrap{display:flex;align-items:center;justify-content:space-between;height:82px;gap:16px}
  .logo img{height:54px;width:auto}
  nav.main ul{list-style:none;margin:0;padding:0;display:flex;gap:30px}
  nav.main a{text-decoration:none;font:600 14px var(--display);padding:8px 0;position:relative}
  nav.main a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transition:transform .2s;transform-origin:left}
  nav.main a:hover::after,nav.main a[aria-current]::after{transform:scaleX(1)}
  .menu-btn{display:none;background:none;border:1.5px solid var(--black);border-radius:999px;padding:9px 16px;font:600 13px var(--display);cursor:pointer}
  @media (max-width:1060px){
    nav.main{position:absolute;top:82px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);display:none;box-shadow:0 24px 30px -24px rgba(0,0,0,.3)}
    nav.main.open{display:block}
    nav.main ul{flex-direction:column;gap:0;padding:8px 16px 18px}
    nav.main a{display:block;padding:14px 0;border-bottom:1px solid var(--light)}
    nav.main a::after{display:none}
    .menu-btn{display:inline-block}
  }
  @media (max-width:420px){.logo img{height:42px}.top .btn-sm{padding:11px 14px}}

  /* ---------- HERO con vinilo ---------- */
  .hero{position:relative;overflow:hidden;background:var(--light);padding:88px 0 0}
  .hero-inner{position:relative;z-index:2;max-width:640px}
  .kicker{display:flex;align-items:center;gap:12px;font:600 14px var(--display);color:var(--gray)}
  .kicker::before{content:"";width:36px;height:2px;background:var(--red)}
  .hero h1{font-size:clamp(52px,8.4vw,112px);font-weight:900;line-height:.9;letter-spacing:-.035em;text-transform:uppercase;margin-top:26px}
  .hero h1 .dot{color:var(--red)}
  .hero .lead{margin-top:30px;font-size:18px;color:#4A4A4A}
  .hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:20px 30px;margin-top:38px}
  .vinyl-zone{position:absolute;z-index:1;right:-230px;top:-150px;width:820px;height:820px}
  .vinyl{position:absolute;inset:0;border-radius:50%;
    background:
      radial-gradient(circle,transparent 0 33%,rgba(255,255,255,.06) 33.4%,transparent 34%,transparent 46%,rgba(255,255,255,.07) 46.4%,transparent 47%,transparent 61%,rgba(255,255,255,.07) 61.3%,transparent 62%,transparent 79%,rgba(255,255,255,.06) 79.3%,transparent 80%),
      repeating-radial-gradient(circle,#0b0b0b 0 2px,#161616 2px 3.5px);
    box-shadow:0 40px 80px -30px rgba(0,0,0,.6);animation:spin 14s linear infinite}
  .vinyl-zone.has-audio .vinyl{animation-play-state:paused}
  .vinyl-zone.has-audio.is-playing .vinyl{animation-play-state:running;animation-duration:1.8s}
  .vinyl .label{position:absolute;inset:31%;border-radius:50%;background:var(--red);display:grid;place-items:center;box-shadow:inset 0 0 0 10px rgba(0,0,0,.12)}
  .vinyl .label .emb{width:62%;aspect-ratio:1;border-radius:50%;border:4px solid #fff;background:repeating-linear-gradient(to bottom,#fff 0 9%,var(--black) 9% 18%);position:relative}
  .vinyl .label .emb::after{content:"";position:absolute;left:50%;top:50%;width:14%;height:14%;margin:-7% 0 0 -7%;border-radius:50%;background:var(--light);border:3px solid var(--red)}
  .vinyl .label .txt{position:absolute;inset:6%;border-radius:50%}
  .sheen{position:absolute;inset:0;border-radius:50%;pointer-events:none;
    background:conic-gradient(from 210deg,transparent 0deg,rgba(255,255,255,.16) 22deg,transparent 52deg,transparent 180deg,rgba(255,255,255,.12) 205deg,transparent 236deg);
    -webkit-mask:radial-gradient(circle,transparent 0 31%,#000 31.2%);mask:radial-gradient(circle,transparent 0 31%,#000 31.2%)}
  @keyframes spin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){.vinyl{animation:none}}
  .stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,1fr);margin-top:80px;border-top:1px solid #CFCFCF;background:var(--light)}
  @media (min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}
  .stat{padding:26px 22px 30px 0}
  .stat + .stat{padding-left:22px;border-left:1px solid #CFCFCF}
  @media (max-width:899px){.stat:nth-child(3){border-left:0;padding-left:0;border-top:1px solid #CFCFCF}.stat:nth-child(4){border-top:1px solid #CFCFCF}}
  .stat b{display:block;font:800 40px/1 var(--display);letter-spacing:-.03em;color:var(--black)}
  .stat span{display:block;margin-top:8px;font-size:14px;color:var(--gray)}
  @media (max-width:1100px){.vinyl-zone{width:640px;height:640px;right:-260px;top:-80px;opacity:.95}}
  @media (max-width:860px){
    .hero{padding-top:390px}
    .vinyl-zone{right:-120px;top:20px;width:340px;height:340px;opacity:1}
    .hero-inner{max-width:none}
  }
  @media (max-width:520px){
    .hero{padding-top:300px}
    .vinyl-zone{right:-80px;top:16px;width:260px;height:260px}
  }

  /* Franja de instrumentos */
  .band{background:var(--black);color:#fff;overflow:hidden;white-space:nowrap}
  .band .track{display:inline-flex;padding:20px 0;animation:slide 45s linear infinite}
  .band span{font:700 15px var(--display);letter-spacing:.14em;text-transform:uppercase;padding:0 26px;display:inline-flex;align-items:center;gap:52px}
  .band span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--red)}
  @keyframes slide{to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){.band .track{animation:none}}

  /* ---------- PIANO ---------- */
  .piano{max-width:1080px;margin:0 auto;filter:drop-shadow(0 36px 40px rgba(0,0,0,.22))}
  .cabinet{background:linear-gradient(#1d1d1d,#050505);border-radius:16px 16px 0 0;padding:18px 26px;display:flex;justify-content:space-between;align-items:center;color:#fff}
  .cabinet .brand{font:800 14px var(--display);letter-spacing:.32em}
  .cabinet .hint{font-size:13px;color:#A8A8A8;display:flex;align-items:center;gap:14px}
  .sound-btn{display:inline-flex;align-items:center;gap:8px;background:#262626;color:#fff;border:1px solid #3a3a3a;border-radius:999px;padding:7px 14px;font:600 12.5px var(--display);cursor:pointer}
  .sound-btn[aria-pressed="true"]{background:var(--red);border-color:var(--red)}
  .sound-btn svg{width:15px;height:15px}
  .felt{height:7px;background:linear-gradient(#b30909,#7c0505)}
  .keybed{position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:3px;background:#050505;padding:0 6px 10px;border-radius:0 0 14px 14px;height:380px}
  .key{position:relative;appearance:none;border:0;cursor:pointer;text-align:center;color:var(--black);
    background:linear-gradient(to bottom,#fdfdfd 0%,#f6f6f6 70%,#e9e9e9 100%);
    border-radius:0 0 9px 9px;box-shadow:inset 0 -6px 0 #d8d8d8,inset -1px 0 0 #e3e3e3;
    display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:10px;padding:0 6px 26px;transition:transform .08s,box-shadow .08s,background .15s}
  .key svg{width:38px;height:38px;color:#2a2a2a;transition:color .15s}
  .key .nm{font:600 14px/1.2 var(--display)}
  .key::after{content:"";position:absolute;left:14%;right:14%;bottom:13px;height:3px;border-radius:3px;background:transparent;transition:background .15s}
  .key:hover,.key.is-down{transform:translateY(3px);box-shadow:inset 0 -3px 0 #d0d0d0,inset -1px 0 0 #e3e3e3;background:linear-gradient(to bottom,#f4f4f4,#ececec 70%,#e2e2e2)}
  .key[aria-pressed="true"] svg{color:var(--red)}
  .key[aria-pressed="true"]::after{background:var(--red)}
  .bk{position:absolute;top:0;width:8.2%;height:56%;transform:translateX(-50%);z-index:3;pointer-events:none;border-radius:0 0 6px 6px;
    background:linear-gradient(to bottom,#2b2b2b 0%,#111 60%,#000 100%);
    box-shadow:inset 2px 0 0 rgba(255,255,255,.08),inset -2px 0 0 rgba(0,0,0,.6),inset 0 -12px 0 #1c1c1c,0 6px 8px rgba(0,0,0,.35)}
  .bk::before{content:"";position:absolute;left:18%;right:18%;top:0;height:70%;background:linear-gradient(to right,rgba(255,255,255,.04),rgba(255,255,255,.12),rgba(255,255,255,.04));border-radius:0 0 3px 3px}
  .panel{margin:44px auto 0;max-width:1080px;display:grid;gap:28px;align-items:center;background:#fff;border:1px solid var(--line);border-left:6px solid var(--red);border-radius:6px 16px 16px 6px;padding:30px 32px}
  @media (min-width:860px){.panel{grid-template-columns:1fr auto}}
  .panel .p-top{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
  .panel h3{font-size:30px;font-weight:800;text-transform:uppercase;letter-spacing:-.01em}
  .panel .p-kind{font:600 14px var(--display);color:var(--red)}
  .panel p{color:var(--gray);margin-top:8px;max-width:60ch}
  .panel .p-ctas{display:flex;gap:12px;flex-wrap:wrap}
  @media (max-width:760px){
    .cabinet{padding:14px 16px;border-radius:12px 12px 0 0}
    .cabinet .brand{font-size:11px;letter-spacing:.24em}
    .cabinet .hint .t{display:none}
    .keybed{height:230px;gap:2px;padding:0 4px 8px}
    .key{padding:0 2px 20px}
    .key .nm{display:none}
    .key svg{width:26px;height:26px}
    .panel{padding:24px 20px}
    .panel h3{font-size:24px}
  }

  /* ---------- PROGRAMAS ---------- */
  .programs{display:grid;gap:22px}
  @media (min-width:700px){.programs{grid-template-columns:repeat(2,1fr)}}
  @media (min-width:1100px){.programs{grid-template-columns:repeat(4,1fr)}}
  .prog{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;text-decoration:none;transition:border-color .2s}
  .prog:hover{border-color:var(--black)}
  .ph{position:relative;aspect-ratio:4/3;background:repeating-linear-gradient(to bottom,#e9e9e9 0 10%,#dcdcdc 10% 20%);overflow:hidden}
  .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .4s,transform .5s}
  .prog:hover .ph img,.photo:hover img{filter:none;transform:scale(1.03)}
  .prog .age-tag{position:absolute;left:14px;top:14px;background:var(--red);color:#fff;font:700 12.5px var(--display);padding:5px 12px;border-radius:999px}
  .prog .body{padding:24px 22px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
  .prog p{color:var(--gray);font-size:15px}
  .prog .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
  .prog .meta span{font-size:12.5px;font-weight:500;background:var(--light);border-radius:999px;padding:3px 11px}
  .prog .go{margin-top:auto;padding-top:12px;font:700 14px var(--display);display:flex;align-items:center;gap:8px}
  .prog .go svg{width:16px;height:16px;color:var(--red);transition:transform .2s}
  .prog:hover .go svg{transform:translateX(4px)}

  /* ---------- ADMISIÓN ---------- */
  .admision{background:var(--red);color:#fff;position:relative;overflow:hidden}
  .admision::before{content:"";position:absolute;right:-140px;top:50%;width:520px;height:520px;transform:translateY(-50%);border-radius:50%;
    background:repeating-linear-gradient(to bottom,rgba(255,255,255,.13) 0 9%,transparent 9% 18%)}
  .admision .wrap{position:relative;display:grid;gap:36px;align-items:center;padding-top:80px;padding-bottom:80px}
  @media (min-width:900px){.admision .wrap{grid-template-columns:1.4fr 1fr}}
  .admision .label{display:inline-block;font:700 13px var(--display);border:1.5px solid rgba(255,255,255,.7);border-radius:999px;padding:5px 14px}
  .admision h2{color:#fff;font-size:clamp(36px,5.6vw,68px);margin-top:18px}
  .admision p{margin-top:16px;font-size:17px;color:#FFE1E1;max-width:52ch}
  .adm-card{background:#fff;color:var(--black);border-radius:16px;padding:28px;display:grid;gap:16px}
  .adm-card .row{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:12px;font-size:15px}
  .adm-card .row span{color:var(--gray)}
  .adm-card .row b{font-family:var(--display);text-align:right}

  /* ---------- POR QUÉ ---------- */
  .why{display:grid;gap:56px}
  @media (min-width:960px){.why{grid-template-columns:.9fr 1.1fr}}
  .why h2{font-size:clamp(40px,6vw,76px);line-height:.95}
  .why .lead{margin-top:24px}
  .values{display:grid;gap:0}
  @media (min-width:640px){.values{grid-template-columns:1fr 1fr}}
  .value{padding:30px 28px 30px 0;border-top:1px solid var(--black)}
  @media (min-width:640px){.value:nth-child(even){padding-left:28px;border-left:1px solid var(--line)}}
  .value svg{width:34px;height:34px;color:var(--red);margin-bottom:16px}
  .value h3{margin-bottom:8px}
  .value p{color:var(--gray);font-size:15px}

  /* ---------- SEDE ---------- */
  .dark{background:var(--black);color:#fff}
  .dark .lead{color:#B5B5B5}
  .sede{display:grid;gap:56px;align-items:center}
  @media (min-width:960px){.sede{grid-template-columns:1fr 1.05fr}}
  .floors{list-style:none;padding:0;margin:36px 0 40px}
  .floors li{display:grid;grid-template-columns:90px 1fr;gap:18px;padding:18px 0;border-top:1px solid #2A2A2A}
  .floors li:last-child{border-bottom:1px solid #2A2A2A}
  .floors .fl{font:700 13px var(--display);color:var(--red);letter-spacing:.06em;text-transform:uppercase;padding-top:4px}
  .floors b{display:block;font:700 17px var(--display)}
  .floors span{color:#B5B5B5;font-size:15px}
  .mosaic{display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:540px}
  .photo{position:relative;overflow:hidden;border-radius:4px;background:repeating-linear-gradient(to bottom,#1f1f1f 0 10%,#161616 10% 20%)}
  .photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .4s,transform .5s}
  .mosaic .photo:first-child{grid-row:span 2}
  .mosaic .tagline{position:absolute;left:14px;bottom:14px;background:var(--red);color:#fff;font:700 12.5px var(--display);padding:6px 12px;border-radius:999px}
  @media (max-width:600px){.mosaic{height:400px}}

  /* ---------- VIDEO ---------- */
  .video-grid{display:grid;gap:48px;align-items:center}
  @media (min-width:960px){.video-grid{grid-template-columns:1.2fr .8fr}}
  .video-box{position:relative;aspect-ratio:16/9;background:var(--black);border-radius:6px;overflow:hidden}
  .video-box video{width:100%;height:100%;object-fit:cover;display:block}
  .quote{font:600 clamp(22px,2.4vw,28px)/1.35 var(--display);color:var(--black);margin:0;letter-spacing:-.01em}
  .quote::before{content:"“";display:block;font:900 96px/.7 var(--display);color:var(--red);margin-bottom:6px}
  .q-author{margin-top:24px;display:flex;align-items:center;gap:14px}
  .q-author .line{width:36px;height:2px;background:var(--red)}
  .q-author b{display:block;font:700 15px var(--display)}
  .q-author span{display:block;color:var(--gray);font-size:14px}

  /* ---------- DOCENTES ---------- */
  .teachers{display:grid;gap:28px 18px;grid-template-columns:repeat(2,1fr)}
  @media (min-width:900px){.teachers{grid-template-columns:repeat(5,1fr)}}
  .teacher .photo{aspect-ratio:3/4;background:repeating-linear-gradient(to bottom,#e7e7e7 0 10%,#dadada 10% 20%)}
  .teacher h3{font-size:17px;margin-top:16px}
  .teacher .role{font-size:14px;color:var(--red);font-weight:500}

  /* ---------- EVENTOS ---------- */
  .events{display:grid;gap:22px}
  @media (min-width:860px){.events{grid-template-columns:repeat(3,1fr)}}
  .event{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;display:flex;flex-direction:column}
  .event .photo{aspect-ratio:16/10;border-radius:0;background:repeating-linear-gradient(to bottom,#e9e9e9 0 10%,#dcdcdc 10% 20%)}
  .event .date{position:absolute;left:14px;top:14px;background:#fff;border-radius:6px;padding:8px 12px;text-align:center;font-family:var(--display);line-height:1;box-shadow:0 6px 14px -6px rgba(0,0,0,.3)}
  .event .date b{display:block;font-size:24px;font-weight:800}
  .event .date span{font-size:11px;font-weight:700;color:var(--red);text-transform:uppercase}
  .event .body{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
  .event .type{font:700 12.5px var(--display);color:var(--red)}
  .event p{color:var(--gray);font-size:15px}
  .event .text-link{margin-top:auto;align-self:flex-start;margin-top:12px}

  /* ---------- TESTIMONIOS ---------- */
  .testi{display:grid;gap:22px}
  @media (min-width:900px){.testi{grid-template-columns:repeat(3,1fr)}}
  .testi figure{margin:0;padding:32px 28px;background:#fff;border-top:4px solid var(--black);display:flex;flex-direction:column;gap:18px}
  .testi .stars{color:var(--red);letter-spacing:3px}
  .testi blockquote{margin:0;font:500 18px/1.5 var(--display);color:var(--black)}
  .testi figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;font-size:14px}
  .testi .av{width:46px;height:46px;border-radius:50%;background:repeating-linear-gradient(to bottom,#fff 0 4px,var(--black) 4px 8px);border:2px solid var(--black)}
  .testi figcaption b{display:block;font-family:var(--display)}
  .testi figcaption span{color:var(--gray)}

  /* ---------- FAQ + INSCRIPCIÓN ---------- */
  .faq details{border-bottom:1px solid var(--line)}
  .faq details:first-child{border-top:1px solid var(--line)}
  .faq summary{cursor:pointer;list-style:none;padding:22px 52px 22px 0;font:600 16.5px var(--display);position:relative}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"";position:absolute;right:4px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;border:1.5px solid var(--black);
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%230A0A0A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .2s}
  .faq details[open] summary::after{transform:rotate(45deg);border-color:var(--red);background-color:var(--red);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
  .faq details p{padding:0 0 22px;color:var(--gray);max-width:62ch}
  .faq-grid{display:grid;gap:48px}
  @media (min-width:960px){.faq-grid{grid-template-columns:.85fr 1.15fr}}

  .signup{display:grid;gap:56px;align-items:start}
  @media (min-width:960px){.signup{grid-template-columns:1fr 1fr}}
  .signup>*{min-width:0}
  .steps{list-style:none;padding:0;margin:40px 0 0;counter-reset:s}
  .steps li{counter-increment:s;display:grid;grid-template-columns:56px 1fr;gap:18px;padding:20px 0;border-top:1px solid #2A2A2A}
  .steps li::before{content:"0" counter(s);font:800 28px/1 var(--display);color:var(--red)}
  .steps b{display:block;font:700 17px var(--display);margin-bottom:4px}
  .steps span{color:#B5B5B5;font-size:15px}
  .contact-mini{margin-top:36px;display:grid;gap:8px;font-size:15px;color:#B5B5B5}
  .contact-mini b{color:#fff;font-family:var(--display)}
  form.lead-form{background:#fff;color:var(--black);border-radius:12px;padding:34px;display:grid;gap:16px;border-top:6px solid var(--red)}
  .lead-form h3{font-size:24px;font-weight:800;text-transform:uppercase}
  .lead-form .sub{color:var(--gray);font-size:14.5px;margin-top:-6px}
  .lead-form label{display:grid;gap:6px;font:600 13.5px var(--display)}
  .lead-form input,.lead-form select{width:100%;min-width:0;font:400 15.5px var(--text);padding:14px 16px;border:1.5px solid var(--line);border-radius:8px;background:var(--light);color:var(--black)}
  .lead-form input:focus,.lead-form select:focus{border-color:var(--black);outline:none;background:#fff}
  .lead-form .two{display:grid;gap:16px}
  @media (min-width:520px){.lead-form .two{grid-template-columns:1fr 1fr}}
  .lead-form .hint{font-weight:400;color:var(--gray)}
  .lead-form .btn{width:100%;margin-top:6px}
  .lead-form .small{font-size:12.5px;color:var(--gray);text-align:center}

  /* ---------- FOOTER ---------- */
  footer{background:#000;color:#A9A9A9;padding:72px 0 0;font-size:14.5px}
  footer .cols{display:grid;gap:40px}
  @media (min-width:900px){footer .cols{grid-template-columns:1.5fr 1fr 1fr 1fr}}
  footer .f-logo{background:#fff;border-radius:10px;padding:10px 14px;display:inline-block;margin-bottom:20px}
  footer .f-logo img{height:50px;width:auto}
  footer h4{color:#fff;font:700 14px var(--display);margin:0 0 16px;text-transform:uppercase;letter-spacing:.08em}
  footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
  footer a{text-decoration:none}
  footer a:hover{color:#fff}
  .socials{display:flex;gap:10px;margin-top:22px}
  .socials a{width:40px;height:40px;border-radius:50%;border:1px solid #333;display:grid;place-items:center;color:#fff;font:700 13px var(--display)}
  .socials a:hover{background:var(--red);border-color:var(--red)}
  .legal{border-top:1px solid #1E1E1E;margin-top:56px;padding:22px 0;font-size:13px;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
  .legal nav{display:flex;flex-wrap:wrap;gap:8px 22px}
  .reclamos{display:inline-flex;align-items:center;gap:8px;border:1px solid #333;border-radius:6px;padding:6px 12px;color:#fff}

  /* WhatsApp flotante */
  .wa-float{position:fixed;right:18px;bottom:18px;z-index:50;display:flex;align-items:center;gap:10px;background:var(--wa);color:#fff;text-decoration:none;border-radius:999px;padding:13px 20px 13px 15px;font:600 14px var(--display);box-shadow:0 14px 30px -10px rgba(0,0,0,.45)}
  .wa-float svg{width:26px;height:26px}
  @media (max-width:600px){.wa-float .t{display:none}.wa-float{padding:15px}}

/* ==========================================================
   Páginas internas – mismo sistema de diseño
   ========================================================== */
.btn-line-w{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75)}
.btn-line-w:hover{background:#fff;color:var(--black)}
.pill-dark{border-color:#fff}
.pill-dark:hover{background:var(--red);border-color:var(--red);color:#fff}
.pill-dark:hover .circ{background:#fff;color:var(--red)}

/* Hero de páginas */
.phero{position:relative;overflow:hidden;background:var(--light);padding:72px 0 104px;display:flex;flex-direction:column}
.phero .wrap{width:100%}
.phero-inner{position:relative;z-index:2;max-width:660px}
.has-deco .phero-inner{max-width:600px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:600 13px var(--display);color:var(--gray);margin-bottom:30px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--red)}
.crumbs span[aria-hidden]{color:#B5B5B5}
.phero h1{font-size:clamp(46px,7.4vw,98px);font-weight:900;line-height:.92;letter-spacing:-.035em;text-transform:uppercase;margin-top:22px}
.phero h1 .dot{color:var(--red)}
.phero .lead{margin-top:28px;font-size:18px;color:#4A4A4A}
.phero .hero-ctas{margin-top:36px}
.phero-dark{background:var(--black);color:#fff}
.phero-dark h1{color:#fff}
.phero-dark .lead,.phero-dark .kicker{color:#BDBDBD}
.phero-dark .crumbs{color:#8C8C8C}
.phero-dark .crumbs span[aria-hidden]{color:#4A4A4A}

/* Decoración: emblema (Nosotros) */
.deco-emblem{position:absolute;z-index:1;right:-150px;top:50%;width:600px;height:600px;transform:translateY(-50%)}
.deco-emblem .de-ring{position:absolute;inset:-26px;border:2px solid var(--red);border-radius:50%}
.deco-emblem .de-disc{position:absolute;inset:0;border-radius:50%;border:8px solid var(--black);background:repeating-linear-gradient(to bottom,#fff 0 7.5%,var(--black) 7.5% 15%);box-shadow:0 40px 80px -40px rgba(0,0,0,.5)}
.deco-emblem .de-dot{position:absolute;left:4%;top:6%;width:120px;height:120px;border-radius:50%;background:var(--red);border:8px solid var(--light)}

/* Decoración: teclado (Cursos) */
.deco-keys{position:absolute;z-index:1;top:0;right:0;bottom:0;width:44%;border-top:8px solid var(--red);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 600' preserveAspectRatio='none'%3E%3Cg fill='%23fff'%3E%3Crect x='1' width='58' height='600' rx='4'/%3E%3Crect x='61' width='58' height='600' rx='4'/%3E%3Crect x='121' width='58' height='600' rx='4'/%3E%3Crect x='181' width='58' height='600' rx='4'/%3E%3Crect x='241' width='58' height='600' rx='4'/%3E%3Crect x='301' width='58' height='600' rx='4'/%3E%3Crect x='361' width='58' height='600' rx='4'/%3E%3C/g%3E%3Cg fill='%230A0A0A'%3E%3Crect x='41' width='38' height='370' rx='3'/%3E%3Crect x='101' width='38' height='370' rx='3'/%3E%3Crect x='221' width='38' height='370' rx='3'/%3E%3Crect x='281' width='38' height='370' rx='3'/%3E%3Crect x='341' width='38' height='370' rx='3'/%3E%3C/g%3E%3C/svg%3E") repeat-x left top/336px 100%;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 45%);mask-image:linear-gradient(to right,transparent 0%,#000 45%);opacity:.92}

/* Decoración: pentagrama (Malla) */
.deco-staff-wrap{position:absolute;z-index:1;right:24px;top:50%;width:min(540px,40%);transform:translateY(-50%)}
.deco-staff{width:100%;height:auto;display:block}
.deco-staff .note{animation:noteIn .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d)}
@keyframes noteIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Decoración: docentes */
.deco-avatars{position:absolute;z-index:1;right:4%;top:50%;width:470px;height:420px;transform:translateY(-50%)}
.deco-avatars .av{position:absolute;width:200px;height:200px;border-radius:50%;overflow:hidden;border:6px solid var(--light);outline:3px solid var(--black);background:repeating-linear-gradient(to bottom,#fff 0 9%,var(--black) 9% 18%)}
.deco-avatars .av img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.deco-avatars .av-0{left:0;top:56px;z-index:3}
.deco-avatars .av-1{left:150px;top:0;z-index:2}
.deco-avatars .av-2{left:270px;top:150px;z-index:4}
.deco-avatars .av-3{left:110px;top:210px;z-index:5}
.deco-avatars .av-plus{left:330px;top:24px;width:118px;height:118px;background:var(--red);outline-color:var(--red);color:#fff;display:grid;place-items:center;text-align:center;font:800 15px/1.1 var(--display);z-index:6}

/* Decoración: ondas (Contacto) */
.deco-waves{position:absolute;z-index:1;right:8%;top:50%;width:440px;height:440px;transform:translateY(-50%)}
.deco-waves span{position:absolute;inset:0;border-radius:50%;border:2px solid var(--red);opacity:0;animation:wave 4.8s cubic-bezier(.2,.6,.3,1) infinite}
.deco-waves span:nth-child(2){animation-delay:1.2s}
.deco-waves span:nth-child(3){animation-delay:2.4s}
.deco-waves span:nth-child(4){animation-delay:3.6s}
@keyframes wave{0%{transform:scale(.25);opacity:.9}100%{transform:scale(1);opacity:0}}
.deco-waves i{position:absolute;left:50%;top:50%;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;background:var(--red);display:grid;place-items:center;color:#fff;box-shadow:0 0 0 12px rgba(218,11,11,.18)}
.deco-waves i .ico{width:44px;height:44px}

/* Decoración: 404 */
.deco-404{position:absolute;z-index:1;right:-1%;top:50%;transform:translateY(-50%);font:900 clamp(180px,30vw,440px)/1 var(--display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px #303030}

@media (prefers-reduced-motion:reduce){.deco-staff .note,.deco-waves span{animation:none}.deco-waves span{opacity:.35}.deco-waves span:nth-child(1){transform:scale(.45)}.deco-waves span:nth-child(2){transform:scale(.65)}.deco-waves span:nth-child(3){transform:scale(.85)}}

@media (max-width:1100px){
  .deco-emblem{width:460px;height:460px;right:-200px}
  .deco-avatars{transform:translateY(-50%) scale(.8);transform-origin:right center;right:0}
  .deco-waves{width:340px;height:340px;right:2%}
}
@media (max-width:900px){
  .phero{padding-bottom:64px}
  .phero .wrap{order:1}
  .deco-emblem,.deco-staff-wrap,.deco-avatars,.deco-waves{order:2;position:relative;top:auto;right:auto;transform:none}
  .deco-emblem{width:420px;height:420px;margin:48px -150px -150px auto}
  .deco-staff-wrap{width:auto;margin:44px 16px 0}
  .deco-avatars{width:470px;height:420px;margin:30px auto -40px;transform:scale(.72);transform-origin:center top}
  .deco-waves{width:300px;height:300px;margin:40px auto -20px}
  .deco-keys{top:auto;height:120px;width:100%;border-top-width:6px;-webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent);mask-image:linear-gradient(to bottom,#000 30%,transparent);opacity:.5}
  .phero:has(.deco-keys){padding-bottom:150px}
  .deco-404{font-size:220px;right:-20px;opacity:.6}
}
@media (max-width:520px){
  .deco-emblem{width:320px;height:320px;margin:40px -120px -110px auto}
  .deco-avatars{transform:scale(.62);margin-bottom:-150px}
}

/* ---------- NOSOTROS ---------- */
.story{display:grid;gap:44px;align-items:start}
@media (min-width:960px){.story{grid-template-columns:1fr 1fr;gap:72px}}
.story-big{font:800 clamp(28px,3.6vw,44px)/1.12 var(--display);letter-spacing:-.02em;color:var(--black)}
.story-big span{display:block;color:var(--red);margin-top:10px}
.story-text p{color:var(--gray);font-size:17px}
.story-text p + p{margin-top:18px}

.mv{display:grid;gap:22px;margin-top:48px}
@media (min-width:860px){.mv{grid-template-columns:1fr 1fr}}
.mv-card{position:relative;overflow:hidden;border-radius:20px;padding:44px 40px;color:#fff;min-height:360px}
.mv-black{background:var(--black)}
.mv-red{background:var(--red)}
.mv-num{position:absolute;right:-6px;bottom:-70px;font:900 280px/1 var(--display);color:#fff;opacity:.1;pointer-events:none}
.mv-card h3{color:#fff;font-size:30px;font-weight:800;text-transform:uppercase;margin-bottom:22px}
.mv-card ul{list-style:none;margin:0;padding:0;position:relative}
.mv-card li{padding:15px 0;border-top:1px solid rgba(255,255,255,.22);font-size:16px}

.director{display:grid;gap:52px;align-items:center}
@media (min-width:960px){.director{grid-template-columns:.8fr 1.2fr;gap:72px}}
.director-photo{aspect-ratio:4/5;background:repeating-linear-gradient(to bottom,#e7e7e7 0 10%,#dadada 10% 20%)}
.director-photo img{filter:grayscale(1) contrast(1.05)}

.building-wrap{display:grid;gap:56px;align-items:center}
@media (min-width:960px){.building-wrap{grid-template-columns:1fr 1fr}}
.building{max-width:480px;width:100%;margin:0 auto}
.building .roof{height:70px;background:var(--red);clip-path:polygon(6% 100%,50% 0,94% 100%);display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px}
.building .roof span{font:800 12px var(--display);letter-spacing:.3em;color:#fff}
.building .floor{position:relative;display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:center;background:#151515;border:1px solid #2A2A2A;border-radius:8px;padding:18px 90px 18px 18px;margin-top:8px}
.building .floor::after{content:"";position:absolute;right:18px;top:50%;width:52px;height:30px;margin-top:-15px;border-radius:3px;background:repeating-linear-gradient(to right,#2c2c2c 0 10px,transparent 10px 14px)}
.building .floor-ground{border-left:4px solid var(--red)}
.building .f-ico{width:56px;height:56px;border-radius:50%;border:1.5px solid #3a3a3a;display:grid;place-items:center;color:#fff}
.building .f-ico .ico{width:30px;height:30px}
.building b{display:block;color:#fff;font:700 16px var(--display)}
.building .floor span:not(.f-ico){color:#A9A9A9;font-size:14px}
.building .ground{height:12px;border-radius:6px;background:#2A2A2A;margin-top:8px}

.promo-grad{display:grid;gap:48px;align-items:center}
@media (min-width:960px){.promo-grad{grid-template-columns:1.1fr .9fr}}
.promo-photo{aspect-ratio:4/3;background:repeating-linear-gradient(to bottom,#e7e7e7 0 10%,#dadada 10% 20%)}
.promo-photo .tagline{position:absolute;left:14px;bottom:14px;background:var(--red);color:#fff;font:700 12.5px var(--display);padding:6px 12px;border-radius:999px}
.promo-sign{margin-top:24px;font:800 22px var(--display);text-transform:uppercase;color:var(--red);letter-spacing:-.01em}

/* ---------- CURSOS ---------- */
.chips{position:sticky;top:82px;z-index:30;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.chips-track{display:flex;gap:8px;overflow-x:auto;padding:14px 0;scrollbar-width:none}
.chips-track::-webkit-scrollbar{display:none}
.chips a{flex:none;display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 12px;border:1.5px solid var(--line);border-radius:999px;text-decoration:none;font:600 14px var(--display);transition:border-color .2s,background .2s,color .2s}
.chips a .ico{width:22px;height:22px;color:var(--red)}
.chips a:hover{border-color:var(--black)}
.chips a[aria-current]{background:var(--black);border-color:var(--black);color:#fff}
.chips a[aria-current] .ico{color:#fff}
.courses-sec{padding-top:40px}
.course{display:grid;gap:30px;padding:56px 0;border-top:1px solid var(--black);scroll-margin-top:170px}
.course:first-child{border-top:0}
@media (min-width:1000px){.course{grid-template-columns:minmax(0,.95fr) minmax(0,1.35fr) minmax(0,.9fr);gap:44px;align-items:start}}
.c-side .btn{line-height:1.25;text-align:left}
.c-head{display:flex;gap:20px;align-items:center}
.c-badge{flex:none;width:92px;height:92px;border-radius:50%;background:var(--black);color:#fff;display:grid;place-items:center;outline:2px solid var(--black);outline-offset:5px;transition:background .2s}
.course:hover .c-badge{background:var(--red)}
.c-badge .ico{width:48px;height:48px}
.c-kind{display:block;font:600 14px var(--display);color:var(--red);margin-bottom:6px}
.c-head h2{font-size:clamp(32px,3.8vw,46px)}
.c-desc{font-size:17px;color:#4A4A4A}
.c-sub{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:26px 0 14px;color:var(--black)}
.c-learn{list-style:none;padding:0;margin:0;display:grid;gap:12px 24px}
@media (min-width:640px){.c-learn{grid-template-columns:1fr 1fr}}
.c-learn li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.c-learn .ico,.plan li .ico{width:20px;height:20px;color:var(--red);margin-top:2px}
.c-side{background:var(--light);border-radius:14px;padding:24px;display:grid;gap:18px}
.c-side dl{margin:0;display:grid}
.c-side dl div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.c-side dt{color:var(--gray)}
.c-side dd{margin:0;font:600 14px var(--display);text-align:right}
.c-side .btn{width:100%}

.plans{display:grid;gap:22px}
@media (min-width:960px){.plans{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.plan{border:1px solid var(--line);border-radius:16px;padding:32px;background:#fff;display:flex;flex-direction:column;gap:16px}
.plan.feat{border:2px solid var(--red);box-shadow:0 26px 50px -30px rgba(218,11,11,.55)}
.plan .tag{align-self:flex-start;background:var(--red);color:#fff;font:700 12.5px var(--display);border-radius:999px;padding:5px 12px}
.plan h3{font-size:22px;font-weight:800;text-transform:uppercase}
.plan .price{font:800 42px/1 var(--display);letter-spacing:-.03em;color:var(--black)}
.plan .price small{font:500 15px var(--text);color:var(--gray);letter-spacing:0}
.plan .price .ask{font:700 18px var(--display);color:var(--gray);letter-spacing:0}
.plan ul{list-style:none;margin:4px 0 8px;padding:0;display:grid;gap:10px}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:#4A4A4A}
.plan .btn{margin-top:auto;width:100%}

/* ---------- MALLA ---------- */
.formula{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:64px}
.formula .chip{display:inline-flex;align-items:center;gap:12px;border:1.5px solid var(--black);border-radius:999px;padding:12px 24px 12px 14px;font:700 clamp(16px,1.8vw,20px) var(--display)}
.formula .chip .ico{width:30px;height:30px;color:var(--red)}
.formula .op{font:900 clamp(26px,3vw,38px)/1 var(--display);color:var(--red)}
.formula .res{background:var(--red);color:#fff;border-radius:999px;padding:14px 28px;font:800 clamp(16px,1.8vw,20px) var(--display);text-transform:uppercase}
.stats-plain{margin-top:0;background:transparent;border-top-color:var(--black)}

.level-tabs{display:flex;overflow-x:auto;border-bottom:1px solid var(--black);margin-top:44px}
.level-tabs button{flex:1 0 auto;background:none;border:0;padding:18px 28px 18px 0;text-align:left;cursor:pointer;color:#9A9A9A;box-shadow:inset 0 -4px 0 transparent;transition:color .2s,box-shadow .2s}
.level-tabs button + button{padding-left:28px;border-left:1px solid var(--line)}
.level-tabs button[aria-selected="true"]{color:var(--black);box-shadow:inset 0 -4px 0 var(--red)}
.level-tabs .lt-n{display:block;font:600 13px var(--display)}
.level-tabs .lt-name{display:block;font:800 clamp(20px,2.4vw,28px)/1.1 var(--display);text-transform:uppercase;margin-top:4px}
html:not(.js-tabs) .level + .level{margin-top:56px}
.level{padding-top:40px}
.level-head{display:grid;gap:12px;margin-bottom:30px;max-width:760px}
.level-head h3{font-size:30px;font-weight:800;text-transform:uppercase}
.level-head p{color:var(--gray)}
.level-dur{justify-self:start;background:var(--black);color:#fff;font:700 12.5px var(--display);padding:5px 12px;border-radius:999px}
.measures{display:grid;background:#fff;border:1.5px solid var(--black);border-radius:14px;overflow:hidden}
@media (min-width:700px){.measures{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.measures{grid-template-columns:repeat(4,1fr)}}
.measure{padding:26px 24px 28px;border-top:1.5px solid var(--black)}
.measure:first-child{border-top:0}
@media (min-width:700px){.measure:nth-child(2){border-top:0}.measure:nth-child(even){border-left:1.5px solid var(--black)}}
@media (min-width:1100px){.measure{border-top:0}.measure + .measure{border-left:1.5px solid var(--black)}}
.m-head{display:flex;align-items:center;gap:14px;height:64px;margin-bottom:12px;background:repeating-linear-gradient(to bottom,transparent 0 11px,#D4D4D4 11px 12px) center/100% 60px no-repeat}
.m-note{flex:none;min-width:52px;height:40px;padding:0 10px;border-radius:50%;background:var(--black);color:#fff;display:grid;place-items:center;font:800 14px var(--display);transform:rotate(-14deg);box-shadow:0 0 0 5px #fff}
.m-note,.m-label{position:relative}
.m-label{font:700 15px var(--display);background:#fff;padding:2px 8px;border-radius:4px}
.level-avanzado .m-note{background:var(--red)}
.measure ul{list-style:none;margin:0;padding:0}
.measure li{padding:13px 0;border-top:1px solid var(--line)}
.measure li b{display:block;font:700 15px/1.3 var(--display);color:var(--black)}
.measure li span{display:block;margin-top:4px;font-size:14px;color:var(--gray);line-height:1.5}

.duo{display:grid;gap:22px}
@media (min-width:960px){.duo{grid-template-columns:repeat(3,1fr)}}
.duo-card{border:1px solid var(--line);border-radius:18px;padding:36px 32px;background:#fff;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.duo-ico{width:48px;height:48px;color:var(--red);margin-bottom:8px}
.duo-card h3{font-size:22px;font-weight:800;text-transform:uppercase}
.duo-card p{color:var(--gray);font-size:15.5px}
.duo-card .text-link{margin-top:auto;padding-top:10px}
.duo-red{background:var(--red);border-color:var(--red);color:#fff}
.duo-red h3{color:#fff}
.duo-red p{color:#FFE1E1}
.duo-red .duo-ico{color:#fff}
.duo-red .text-link{color:#fff;border-color:#fff}

/* ---------- DOCENTES ---------- */
.t-feature{display:grid;background:var(--black);color:#fff;border-radius:22px;overflow:hidden}
@media (min-width:900px){.t-feature{grid-template-columns:.85fr 1.15fr}}
.t-feature-photo{min-height:440px;border-radius:0}
.t-feature-body{padding:56px 48px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.t-role-tag{background:var(--red);color:#fff;font:700 13px var(--display);border-radius:999px;padding:5px 14px}
.t-feature h2{color:#fff;margin-top:20px}
.t-feature p{color:#BDBDBD;margin-top:18px;max-width:56ch;font-size:16.5px}
.t-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.t-links a{text-decoration:none;border:1.5px solid #3A3A3A;border-radius:999px;padding:7px 16px;font:600 13px var(--display);color:#fff;transition:background .2s,border-color .2s}
.t-links a:hover{background:var(--red);border-color:var(--red)}
.t-grid{display:grid;gap:22px;margin-top:48px}
@media (min-width:640px){.t-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.t-grid{grid-template-columns:repeat(4,1fr)}}
.t-card{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.t-card:hover .photo img{filter:none;transform:scale(1.03)}
.t-card-photo{aspect-ratio:4/5;border-radius:0;background:repeating-linear-gradient(to bottom,#e7e7e7 0 10%,#dadada 10% 20%)}
.t-chip{position:absolute;left:14px;bottom:14px;background:var(--red);color:#fff;font:700 12.5px var(--display);padding:5px 12px;border-radius:999px}
.t-card-body{padding:24px 22px 26px}
.t-card-body h3{font-size:19px}
.t-card-body p{color:var(--gray);font-size:14.5px;margin-top:8px}
.t-card .t-links a{color:var(--black);border-color:var(--line)}
.t-card .t-links a:hover{color:#fff}
.join{background:var(--red);color:#fff;position:relative;overflow:hidden}
.join::before{content:"";position:absolute;left:-120px;top:50%;width:380px;height:380px;transform:translateY(-50%);border-radius:50%;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.12) 0 9%,transparent 9% 18%)}
.join-inner{position:relative;display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between;padding-top:72px;padding-bottom:72px}
.join h2{color:#fff;font-size:clamp(28px,3.6vw,42px)}
.join p{color:#FFE1E1;margin-top:12px;max-width:56ch}

/* ---------- CONTACTO ---------- */
.info-cards{display:grid;gap:18px}
@media (min-width:640px){.info-cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.info-cards{grid-template-columns:repeat(4,1fr)}}
.info-card{background:var(--light);border:1.5px solid transparent;border-radius:18px;padding:30px 26px;text-decoration:none;display:flex;flex-direction:column;gap:10px;transition:border-color .2s}
a.info-card:hover{border-color:var(--black)}
.info-card .ic{width:56px;height:56px;border-radius:50%;background:var(--black);color:#fff;display:grid;place-items:center;margin-bottom:8px}
.info-card .ic .ico{width:26px;height:26px}
.info-card h3{font-size:18px}
.info-card p{color:var(--gray);font-size:15px}
.info-card p.big{font:800 24px var(--display);color:var(--black);letter-spacing:-.01em}
.info-card .go{margin-top:auto;padding-top:8px;display:flex;align-items:center;gap:8px;font:700 14px var(--display);color:var(--red)}
.info-card .go .ico{width:16px;height:16px}
.info-card-red{background:var(--red);color:#fff}
.info-card-red h3,.info-card-red p,.info-card-red p.big,.info-card-red .go{color:#fff}
.info-card-red .ic{background:#fff;color:var(--red)}
a.info-card-red:hover{border-color:var(--black)}
.soc-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.soc-list a{font:600 15px var(--display);text-decoration:none;border-bottom:2px solid var(--red)}
.map-sec{position:relative;height:540px;background:var(--light)}
.map-full{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.08)}
.map-overlay-wrap{position:relative;height:100%;display:flex;align-items:center;pointer-events:none}
.map-card{pointer-events:auto;background:#fff;border-radius:18px;border-top:6px solid var(--red);padding:32px;max-width:400px;box-shadow:0 30px 60px -20px rgba(0,0,0,.4);display:grid;gap:14px}
.map-card h3{font-size:24px;font-weight:800;text-transform:uppercase}
.map-card p{color:var(--gray)}
.map-card p b{color:var(--black)}
.map-card .btn{justify-self:start}
@media (max-width:760px){
  .map-sec{height:auto}
  .map-full{position:relative;height:340px}
  .map-overlay-wrap{height:auto;padding-top:0;padding-bottom:40px}
  .map-card{margin-top:-60px;max-width:none}
}

/* ---------- Genéricas ---------- */
.prose{max-width:760px;margin:0 auto;font-size:17px;color:#333}
.prose p,.prose ul,.prose ol{margin:0 0 1.2em}
.prose h2{text-transform:none;font-size:30px;margin:1.6em 0 .6em}
.prose h3{margin:1.4em 0 .5em}
.prose a{color:var(--red)}
.prose img{border-radius:8px;height:auto}
.prose-cover{max-width:960px;aspect-ratio:16/9;margin:0 auto 48px;border-radius:12px}
.prose-cover img{filter:none}
.pager{margin-top:48px}
.pager .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.pager .page-numbers{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 14px;border:1.5px solid var(--line);border-radius:999px;text-decoration:none;font:600 14px var(--display)}
.pager .page-numbers.current{background:var(--black);border-color:var(--black);color:#fff}
.empty{max-width:640px}
.e404{min-height:64vh;justify-content:center}

/* ---------- Tocadiscos del inicio ---------- */
.deck{position:absolute;left:50%;top:50%;z-index:3;width:0;height:0}
.deck-play{position:absolute;left:-40px;top:-40px;width:80px;height:80px;border-radius:50%;border:0;cursor:pointer;background:#fff;color:var(--red);display:grid;place-items:center;
  box-shadow:0 0 0 6px rgba(255,255,255,.25),0 14px 30px -8px rgba(0,0,0,.6);transition:transform .2s,background .2s,color .2s}
.deck-play:hover{transform:scale(1.07)}
.deck-play svg{width:32px;height:32px;grid-area:1/1}
.deck-play .i-play{margin-left:4px}
.deck-play .i-pause,.is-playing .deck-play .i-play{display:none}
.is-playing .deck-play .i-pause{display:block}
.is-playing .deck-play{background:var(--black);color:#fff}
.deck-mute{position:absolute;left:30px;top:22px;width:42px;height:42px;border-radius:50%;border:2px solid #fff;cursor:pointer;background:var(--red);color:#fff;display:grid;place-items:center;
  opacity:0;transform:scale(.6);pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 8px 18px -6px rgba(0,0,0,.6)}
.deck-mute svg{width:20px;height:20px;grid-area:1/1}
.deck-mute .i-off,.is-muted .deck-mute .i-on{display:none}
.is-muted .deck-mute .i-off{display:block}
.is-playing .deck-mute,.is-muted .deck-mute{opacity:1;transform:none;pointer-events:auto}
.deck-tag{position:absolute;left:0;top:52px;transform:translateX(-50%);white-space:nowrap;background:var(--black);color:#fff;font:700 12px var(--display);letter-spacing:.04em;padding:6px 12px;border-radius:999px;pointer-events:none;transition:opacity .2s}
.deck-tag::before{content:"";position:absolute;left:50%;top:-5px;margin-left:-5px;border:5px solid transparent;border-top:0;border-bottom-color:var(--black)}
.is-playing .deck-tag{opacity:0}
@media (max-width:860px){
  .deck-play{left:-30px;top:-30px;width:60px;height:60px}
  .deck-play svg{width:24px;height:24px}
  .deck-mute{left:-62px;top:14px;width:36px;height:36px}
  .deck-tag{top:40px;font-size:11px}
}
@media (prefers-reduced-motion:reduce){.vinyl-zone.has-audio.is-playing .vinyl{animation:none}}