/* NUVOX · sitio público. Estilo del homepage de la academia: fondo negro, verde #D2FF00, títulos en Oswald. */
:root{
  --bg:#000000;--panel:#111111;--panel2:#151515;--ink:#F2F2F2;--muted:#A0A0A0;--line:#333333;
  --accent:#D2FF00;--accent-ink:#000000;
  --a1:#FF6FB5;--a2:#2ECC71;--b1:#1E40AF;--b2:#4FC3F7;--c1:#E53935;
  --display:'Oswald',"Arial Narrow",Impact,sans-serif;--body:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.6 var(--body);overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--accent);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding-inline:20px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;background:var(--accent);color:#000;padding:8px 12px;z-index:999}
h1,h2,h3{font-family:var(--display);text-transform:uppercase;text-wrap:balance;margin:0;line-height:1.05}
h2{font-size:clamp(30px,4.4vw,44px);margin-bottom:14px}
h3{font-size:22px;margin-bottom:6px}
.eyebrow{margin:0 0 8px;font:700 14px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.muted{color:var(--muted)}

/* ===== Encabezado del inicio (diseño original de NUVOX) ===== */
.home-head{display:flex;flex-direction:column;align-items:center;padding:40px 20px 0;border-bottom:1px solid var(--line);position:relative}
.cta-button-corner{position:absolute;top:30px;right:40px;display:inline-block;background:var(--accent);color:#000;font:700 16px/1.2 var(--display);text-transform:uppercase;text-decoration:none;padding:14px 30px;letter-spacing:1px;border:2px solid var(--accent);transition:all .3s ease;z-index:200}
.cta-button-corner:hover{background:transparent;color:var(--accent)}
.cta-circle-left{position:absolute;top:25px;left:40px;width:215px;height:215px;background:var(--accent);border:3px solid #000;border-radius:50%;box-shadow:0 0 0 3px var(--accent);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;text-decoration:none;color:#000;font:700 23px/1.1 var(--display);text-transform:uppercase;letter-spacing:1px;padding:10px;z-index:200;transform:rotate(-8deg);transition:transform .25s ease;-webkit-tap-highlight-color:transparent}/* 5.50: sello plano (antes: esfera con brillo radial y sombra 3D) */
.cta-circle-left span{display:block}
.cta-circle-left small{display:block;font:600 13px/1.2 var(--body);text-transform:none;letter-spacing:0;margin-top:6px}
.cta-circle-left:hover,.cta-circle-left:focus-visible{transform:rotate(0deg)}
.cta-circle-left:active{transform:rotate(0deg) scale(.97)}
.wordmark{font:700 90px/1 var(--display);text-transform:uppercase;letter-spacing:-4px;margin:0 0 -3px;cursor:pointer;user-select:none;position:relative;z-index:100;color:var(--ink);-webkit-tap-highlight-color:transparent}
.wordmark span{color:var(--accent)}
p.slogan{font-size:20px;margin:0 0 18px;font-weight:800;text-align:center}
p.slogan span{transition:color .4s ease,text-shadow .4s ease}
p.slogan span.highlight{color:var(--accent)}
.home-lead{max-width:640px;text-align:center;color:#C9C9C2;font-size:18px;margin:0 0 22px}
.search-container{width:100%;max-width:600px;margin-bottom:25px;position:relative}
.search-container input{width:100%;padding:15px 25px;font-size:18px;border-radius:30px;border:2px solid var(--line);background:var(--panel);color:var(--ink);outline:none;text-align:center;font-family:var(--body)}
.search-container input:focus{border-color:var(--accent)}
.results{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden;z-index:300;text-align:left;max-height:340px;overflow-y:auto}
.results a{display:flex;gap:10px;align-items:center;padding:10px 16px;color:var(--ink);text-decoration:none;border-bottom:1px solid #1f1f1f;font-size:16px}
.results a:hover,.results a:focus{background:#1b1b1b}
.results p{margin:0;padding:12px 16px;color:var(--muted);font-size:15px}
.home-nav{width:100%;display:flex;justify-content:center;flex-wrap:wrap;gap:12px 35px;padding-bottom:20px}
.home-nav a{color:var(--ink);text-decoration:none;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:1px;transition:color .2s}
.home-nav a:hover{color:var(--accent)}

/* ===== Carrusel de temas ===== */
.hot-topics{padding:30px 0 70px;position:relative}
.hot-topics h2{text-align:center;font-size:30px;margin-bottom:8px}
.hot-topics .sub{text-align:center;color:var(--muted);margin:0 16px 22px;font-size:16px}
.carrusel-wrapper{position:relative;width:100%;display:flex;align-items:center}
/* 5.50: sin desvanecidos a los lados (degradado brusco sobre las portadas); las tarjetas se cortan limpias en el borde */
.carrusel-btn{position:absolute;z-index:10;background:var(--panel);color:var(--ink);border:2px solid var(--line);border-radius:50%;width:50px;height:50px;font-size:20px;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all .2s}
.carrusel-btn:hover{border-color:var(--accent);color:var(--accent)}
.btn-left{left:40px}.btn-right{right:40px}
.carrusel-viewport{width:100%;overflow-x:auto;overflow-y:hidden;padding:20px 0;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;cursor:grab;--cw:400px}
.carrusel-viewport::-webkit-scrollbar{display:none}
.carrusel-viewport.dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
.carrusel-viewport.dragging .carrusel-item{pointer-events:none}
.carrusel-track{display:flex;gap:20px;width:max-content;padding-inline:calc(50% - var(--cw) / 2)}
.carrusel-item{scroll-snap-align:center;-webkit-user-drag:none;user-select:none}
.carrusel-item{width:400px;background:var(--panel);border-radius:6px;overflow:hidden;transition:all .3s ease;border:2px solid transparent;flex-shrink:0;position:relative;color:var(--ink);text-decoration:none;display:block}
.carrusel-item:hover,.carrusel-item:focus-visible{border-color:var(--accent);z-index:2}
.carrusel-texto{padding:24px 20px 26px}
.carrusel-texto h3{font:700 22px/1.2 var(--body);text-transform:none;margin:0}
.carrusel-texto p{font-size:15.5px;color:var(--muted);margin:6px 0 0}

/* Portada generada del tema: color del nivel + ícono de la habilidad (sin fotos de stock) */
.cover{height:300px;position:relative;overflow:hidden;background:var(--lv,#222);color:#000}
.cover.dark{color:#fff}
.cover .lvl{position:absolute;right:-8px;bottom:-34px;font:700 210px/1 var(--display);letter-spacing:-8px;opacity:.28}
.cover .sk{position:absolute;left:22px;top:20px;font:700 15px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.cover .sk svg{width:26px;height:26px;fill:currentColor}
.cover .word{position:absolute;left:22px;right:22px;bottom:22px;font:700 34px/1.05 var(--display);text-transform:uppercase}
.cover .pill{position:absolute;right:18px;top:16px;background:#000;color:var(--accent);font:700 14px/1 var(--display);padding:7px 10px;border-radius:999px;letter-spacing:.06em}
.lv-A1{--lv:var(--a1)}.lv-A2{--lv:var(--a2)}.lv-B1{--lv:var(--b1)}.lv-B2{--lv:var(--b2)}.lv-C1{--lv:var(--c1)}

/* ===== Secciones del inicio y páginas internas ===== */
.sec{padding-block:60px;border-top:1px solid var(--line)}
.intro{max-width:44em;color:var(--muted);margin:0 0 28px;font-size:18.5px}
.answer{background:var(--panel);border:1px solid var(--line);padding:16px 20px;border-radius:6px;margin:0 0 28px;max-width:52em}
.answer b:first-child{display:block;font:700 13px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.answer p{margin:0}
.cols{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.cols>*{min-width:0}
.tile{background:var(--panel);border:1px solid #1f1f1f;border-radius:6px;padding:20px}
.tile p{margin:0;color:var(--muted);font-size:16.5px}
.tile h3 a{color:inherit;text-decoration:none}.tile h3 a:hover{color:var(--accent)}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:20px;counter-reset:s}
.steps li{display:grid;grid-template-columns:54px minmax(0,1fr);gap:14px;counter-increment:s}
.steps li::before{content:counter(s);font:700 40px/1 var(--display);color:var(--accent);border-bottom:3px solid var(--accent);height:max-content;padding-bottom:4px;text-align:center}
.steps p{margin:4px 0 0;color:var(--muted)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}
.facts div{background:var(--panel);border-radius:6px;padding:20px}
.facts b{display:block;font:700 44px/1 var(--display);color:var(--accent)}
.facts span{color:var(--muted);font-size:15.5px}
.scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:end;max-width:640px}
.scale div{border-radius:10px 10px 4px 4px;color:#000;padding:10px;font:700 30px/1 var(--display);display:flex;flex-direction:column;justify-content:flex-end}
.scale small{font:600 12.5px/1.2 var(--body);display:block;margin-top:4px;opacity:.8;overflow-wrap:anywhere}
.scale .l1{background:var(--a1);height:90px}.scale .l2{background:var(--a2);height:125px}.scale .l3{background:var(--b1);color:#fff;height:160px}.scale .l4{background:var(--b2);height:195px}.scale .l5{background:var(--c1);color:#fff;height:230px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;background:var(--accent);color:#000;font:700 16px/1 var(--display);text-transform:uppercase;letter-spacing:1px;text-decoration:none;border:2px solid var(--accent);transition:all .3s}
.btn:hover{background:transparent;color:var(--accent)}
.btn.line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.line:hover{color:var(--accent);border-color:var(--accent)}
.row{display:flex;gap:12px;flex-wrap:wrap}
.cta-box{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:26px;display:grid;gap:12px;margin-top:36px}
.cta-box p{margin:0;color:var(--muted)}
details{border-bottom:1px solid var(--line);padding:14px 0}
details summary{cursor:pointer;font:700 19px/1.3 var(--body)}
details p{margin:10px 0 0;color:var(--muted)}
.plans{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.plan{position:relative;background:var(--panel);border:2px solid #1f1f1f;border-radius:6px;padding:22px;display:flex;flex-direction:column;gap:8px;min-width:0}
.plan.star{border-color:var(--accent)}
.plan .tag{position:absolute;top:18px;right:18px;background:var(--accent);color:#000;font:700 13px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;padding:6px 10px}
.plan .price{font:700 46px/1 var(--display);font-variant-numeric:tabular-nums}
.plan .price small{display:block;margin-top:6px;font:600 15px var(--body);color:var(--muted)}
.plan ul{margin:6px 0 0;padding-left:18px;color:var(--muted);font-size:16px}
.cop{color:var(--muted);font-size:14.5px}
/* Planes en vivo (5.19): descuento, descripción y secciones */
.plan .was{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.plan .was s{color:var(--muted);font:600 20px/1 var(--body);font-variant-numeric:tabular-nums}
.plan .off{background:var(--accent);color:#000;font:700 14px/1 var(--display);letter-spacing:.04em;padding:5px 8px;white-space:nowrap}
.plan .promo{margin:0;color:var(--accent);font-size:15px;font-weight:600;overflow-wrap:anywhere}
.plan .pdesc{margin:4px 0 0;font-size:16px;overflow-wrap:anywhere}
.plan.star h3{padding-right:112px}
.plan h3{overflow-wrap:anywhere}
.plans-h{margin:44px 0 14px;font-size:clamp(26px,3.6vw,36px)}
.plans-h:first-child{margin-top:0}
.plans-nota{margin:0 0 16px;color:var(--muted);max-width:44em}
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
table{border-collapse:collapse;width:100%;font-size:16.5px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:700 14px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.scroll{overflow-x:auto}
.lv{display:inline-block;min-width:44px;text-align:center;border-radius:6px;font:700 17px/1.6 var(--display);color:#000;background:var(--lv)}
.lv.lv-B1,.lv.lv-C1{color:#fff}
/* páginas internas */
.top{border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;padding-block:16px}
.top .mark{font:700 44px/1 var(--display);letter-spacing:-2px;color:var(--ink);text-decoration:none}
.top .mark span{color:var(--accent)}
.top nav{display:flex;gap:6px 20px;flex-wrap:wrap;align-items:center}
.top nav a{color:var(--ink);text-decoration:none;font:700 14px/1 var(--body);text-transform:uppercase;letter-spacing:1px;padding:8px 0}
.top nav a:hover,.top nav a[aria-current]{color:var(--accent)}
.top nav .btn{min-height:40px;padding:0 16px;font-size:14px;color:#000}
.pagehead{padding-block:34px 40px}
.pagehead h1{font-size:clamp(40px,6.4vw,76px);letter-spacing:-1px}
.pagehead .lead{color:#C9C9C2;font-size:19px;max-width:38em;margin:14px 0 0}
.crumbs{font-size:14.5px;color:var(--muted);margin:0 0 12px}.crumbs a{color:var(--muted)}
.byline{color:var(--muted);font-size:15px;margin:14px 0 0}
.article{max-width:760px}
.article h2{font-size:clamp(28px,4vw,38px);margin-top:44px}
.article h3{margin-top:26px}
.article .cover{height:220px;border-radius:6px;margin:0 0 30px}
.guides{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}.guides .cover{height:190px}.guides .cover .word{font-size:28px}
.temario h2{margin-top:36px}
.temario ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.temario li a{display:flex;gap:10px;align-items:center;background:var(--panel);border-radius:10px;padding:10px 12px;color:var(--ink);text-decoration:none;font-size:16px}
.temario li a:hover{outline:2px solid var(--accent)}
/* pie (diseño original) */
.site-footer{background:var(--panel2);border-top:1px solid var(--line);padding:70px 40px 40px}
.footer-content{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px}
.footer-brand{flex:1;min-width:260px}.footer-links{flex:1;min-width:190px}.footer-newsletter{flex:1.5;min-width:280px}
.footer-logo{font:700 45px/1 var(--display);text-transform:uppercase;letter-spacing:-2px;margin:0 0 5px;color:var(--ink)}
.footer-logo span{color:var(--accent)}
.footer-slogan{font-size:16px;color:var(--muted);margin:0 0 25px;font-weight:600}
.social-icons{display:flex;gap:15px}
.social-icons a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#222;border-radius:50%;color:var(--ink);transition:all .3s}
.social-icons a svg{width:20px;height:20px;fill:currentColor}
.social-icons a:hover{background:var(--accent);color:#000}
.footer-links h3,.footer-newsletter h3{font-size:20px;margin:0 0 20px;letter-spacing:1px}
.footer-links ul{list-style:none;padding:0;margin:0}
.footer-links li{margin-bottom:12px}
.footer-links a{color:var(--muted);text-decoration:none;font-size:15px}
.footer-links a:hover{color:var(--accent)}
.footer-newsletter p{color:var(--muted);font-size:15px;margin:0 0 20px}
.newsletter-form{display:flex;gap:10px;width:100%}
.newsletter-form input{flex:1;min-width:0;padding:12px 15px;background:#000;border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:15px;outline:none}
.newsletter-form input:focus{border-color:var(--accent)}
.newsletter-form button{background:var(--accent);color:#000;border:none;border-radius:8px;padding:0 25px;font:700 16px var(--display);text-transform:uppercase;cursor:pointer}
.footer-bottom{max-width:1200px;margin:50px auto 0;padding-top:20px;border-top:1px solid #2A2A2A;text-align:center;color:#666;font-size:13px}
/* animación del logo (original) */
.neon-ignite{animation:neon-flash 1.5s forwards}.neon-ignite span{animation:neon-flash-span 1.5s forwards}
@keyframes neon-flash{0%,4%,8%{color:transparent;-webkit-text-stroke:1px #333;text-shadow:none}2%,6%{color:#000;-webkit-text-stroke:2px #D2FF00;text-shadow:0 0 5px #D2FF00}10%,60%{color:#000;-webkit-text-stroke:2px #D2FF00;text-shadow:0 0 10px #D2FF00,0 0 20px #D2FF00,0 0 40px #D2FF00}100%{color:#F2F2F2;-webkit-text-stroke:0 transparent;text-shadow:none}}
@keyframes neon-flash-span{0%,4%,8%{color:transparent;-webkit-text-stroke:1px #333;text-shadow:none}2%,6%{color:#000;-webkit-text-stroke:2px #D2FF00;text-shadow:0 0 5px #D2FF00}10%,60%{color:#000;-webkit-text-stroke:2px #D2FF00;text-shadow:0 0 10px #D2FF00,0 0 20px #D2FF00,0 0 40px #D2FF00}100%{color:#D2FF00;-webkit-text-stroke:0 transparent;text-shadow:none}}
@media (max-width:768px){
  .home-head{padding:25px 15px 0}
  .cta-button-corner{top:20px;right:15px;font-size:11px;padding:8px 12px}
  .cta-circle-left{top:10px;left:15px;width:110px;height:110px;font-size:11.5px}
  .cta-circle-left small{display:none}
  .wordmark{font-size:55px;letter-spacing:-2px;margin-top:100px}
  p.slogan{font-size:16px}
  .home-lead{font-size:16px}
  .search-container input{padding:12px 20px;font-size:16px}
  .home-nav{gap:12px}.home-nav a{font-size:13px}
  .carrusel-viewport{--cw:min(78vw,310px)}
  .carrusel-item{width:var(--cw)}
  .carrusel-item:hover,.carrusel-item:focus-visible{transform:none}
  .cover{height:210px}.cover .lvl{font-size:150px}.cover .word{font-size:26px}
  .carrusel-texto{padding:18px 15px}.carrusel-texto h3{font-size:19px}.carrusel-texto p{font-size:14px}
  .carrusel-wrapper::before,.carrusel-wrapper::after{width:22px}
  .btn-left{left:2px;width:36px;height:36px;font-size:14px}.btn-right{right:2px;width:36px;height:36px;font-size:14px}
  .carrusel-btn{background:rgba(0,0,0,.72);border-color:rgba(255,255,255,.35);color:#fff}
  .site-footer{padding:40px 20px 30px}
  .footer-content{gap:30px;flex-direction:column}
  .footer-brand,.footer-links,.footer-newsletter{min-width:100%;text-align:center}
  .social-icons{justify-content:center}
  .newsletter-form{flex-direction:column}.newsletter-form button{padding:15px 0}
  body{font-size:17px}
  .top .mark{font-size:36px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* páginas About Us (diseño original) */
.page-title{font:700 clamp(40px,6vw,56px)/1.1 var(--display);letter-spacing:-2px;text-transform:uppercase}
.page-title span{color:var(--accent)}
.manifesto{font-size:clamp(18px,2.1vw,21.6px);font-weight:700;letter-spacing:-.3px;line-height:1.6;max-width:1100px}
.manifesto p{margin:0 0 1.6rem}
.manifesto .highlight{color:var(--accent)}
.manifesto .logo-inline{font-family:var(--display);text-transform:uppercase}
.manifesto .white-text{color:var(--ink);text-shadow:none}
.roles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:2rem;margin:1rem 0 4rem}
.role-card{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--accent);padding:2.2rem;border-radius:8px;transition:transform .3s,border-color .3s}
.role-card:hover{transform:translateY(-5px);border-color:#555}
.role-card h3{font-size:30px;margin-bottom:1rem}
.role-card p{color:var(--muted);margin:0 0 1.2rem}
.role-card ul{list-style:none;padding:0;margin:0}
.role-card li{margin-bottom:.8rem;padding-left:1.5rem;position:relative}
.role-card li::before{content:'⚡';position:absolute;left:0;font-size:.9rem}
.application-section{background:#0A0A0A;border:1px solid #1F1F1F;border-radius:6px;padding:clamp(1.6rem,4vw,3.5rem);margin-bottom:3rem}
.application-section h2 span{color:var(--accent)}
.application-section .subtitle{color:var(--muted);margin:0 0 2.2rem}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1.6rem}
.form-group{display:flex;flex-direction:column;min-width:0}
.form-group.full-width{grid-column:1/-1}
.form-group label{font:700 15px var(--display);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem}
.form-group input,.form-group select{background:#000;border:1px solid var(--line);color:var(--ink);font:16px var(--body);padding:1rem;border-radius:6px;outline:none}
.form-group input:focus,.form-group select:focus{border-color:var(--accent)}
.submit-btn{grid-column:1/-1;background:var(--accent);color:#000;font:700 19px var(--display);text-transform:uppercase;letter-spacing:1px;padding:1.2rem;border:none;border-radius:6px;cursor:pointer;transition:background .3s,transform .2s}
.submit-btn:hover{background:#b5db00;transform:translateY(-2px)}

/* ---- Plataforma: clips en marco de celular, filas de funciones, biblioteca musical ---- */
.phone{width:min(290px,76vw);aspect-ratio:390/780;border-radius:36px;border:9px solid #1b1b1b;box-shadow:0 0 0 2px #3a3a3a,0 28px 60px rgba(0,0,0,.65);overflow:hidden;background:#000;flex:none;justify-self:center}
.phone video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.feat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px 64px;align-items:center}
.feat.flip{grid-template-columns:auto minmax(0,1fr)}
.feat.flip .feat-txt{order:2}
.feat-txt p{color:#C9C9C2;max-width:34em}
.feat-txt h2{margin-top:0}
@media(max-width:820px){.feat,.feat.flip{grid-template-columns:1fr}.feat.flip .feat-txt{order:0}}
.feat.first{padding-bottom:56px}
.feat-txt.article{max-width:none;margin:0}
.clips3{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.clipcard{display:grid;gap:8px;justify-items:center;text-align:center;color:inherit;text-decoration:none;align-content:start}
.clipcard .phone{width:min(240px,70vw);margin-bottom:8px}
.clipcard h3{margin:0}
.clipcard p{margin:0;color:var(--muted);font-size:16px;max-width:22em}
.clipcard:hover h3{color:var(--accent)}
.perk{display:inline-block;font:700 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:999px;margin-bottom:10px}
.perk.on{background:var(--accent);color:#000}
.perk.soon{border:1px solid var(--muted);color:var(--muted)}
.songtools{display:grid;gap:12px}
.songtools input{width:100%;max-width:520px;height:50px;border-radius:999px;border:2px solid #2a2a2a;background:#0d0d0d;color:var(--ink);padding:0 20px;font:400 17px var(--body)}
.songtools input:focus{border-color:var(--accent);outline:none}
.lvchips{display:flex;gap:8px;flex-wrap:wrap}
.lvchips button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font:600 15px var(--body);cursor:pointer}
.lvchips button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.lvb{display:inline-grid;place-items:center;min-width:34px;height:24px;padding:0 6px;border-radius:6px;font:700 13px/1 var(--display);color:#000;background:#888;flex:none}
.lvb.lv-A1{background:var(--a1)}.lvb.lv-A2{background:var(--a2)}.lvb.lv-B1{background:var(--b1);color:#fff}.lvb.lv-B2{background:var(--b2)}.lvb.lv-C1{background:var(--c1);color:#fff}
.songs{list-style:none;padding:0;margin:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.songs li{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid #1f1f1f;border-radius:6px;padding:10px 12px;min-width:0}
.songs li[hidden]{display:none}
.songs .st{display:grid;min-width:0}
.songs b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.songs small{color:var(--muted);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:700px){.top nav{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:6px;scrollbar-width:none}.top nav::-webkit-scrollbar{display:none}.top nav a{white-space:nowrap;flex:none}}

.screen{max-width:960px;aspect-ratio:960/600;border-radius:14px;border:1px solid #3a3a3a;box-shadow:0 0 0 6px #151515,0 28px 60px rgba(0,0,0,.65);overflow:hidden;background:#111}
.screen video{width:100%;height:100%;object-fit:cover;display:block}

/* ---- Vitrina "Así se ve en la app": computador + celular, una función por pestaña ---- */
.show{padding-block:56px 64px;border-top:1px solid var(--line);background:var(--bg)}
.show h2{margin:0 0 22px;font-size:clamp(34px,5.2vw,68px);line-height:1.02;max-width:16em}
.show h2 em{font-style:normal;color:var(--accent)}
.show-tabs{display:flex;gap:10px;flex-wrap:wrap}
.show-tab{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border-radius:999px;border:2px solid var(--line);background:var(--panel);color:var(--ink);font:600 17px/1 var(--display);letter-spacing:.03em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.show-tab span{color:var(--muted);font-size:14px}
.show-tab:hover{border-color:var(--ink)}
.show-tab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:#000}
.show-tab[aria-selected="true"] span{color:#000}
.show-tab i{position:absolute;left:0;bottom:0;height:4px;width:0;background:#000;opacity:.55}
.show.auto .show-tab[aria-selected="true"] i{animation:showbar var(--show-dur,9000ms) linear forwards}
@keyframes showbar{from{width:0}to{width:100%}}
.show-stage{margin-top:26px}
.show-panel{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:20px 56px;align-items:center}
.show-panel[hidden]{display:none}
.show-vis{position:relative;padding:0 9% 6% 0}
.laptop{position:relative;border-radius:16px 16px 0 0;border:11px solid #1b1b1b;border-bottom-width:13px;background:#000;box-shadow:0 0 0 2px #3a3a3a,0 40px 90px rgba(0,0,0,.7)}
.laptop:after{content:"";position:absolute;left:-7%;right:-7%;bottom:-27px;height:16px;border-radius:0 0 16px 16px;background:linear-gradient(#3b3b3b,#151515);box-shadow:0 18px 30px rgba(0,0,0,.6)}
.laptop img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:4px}
.show-vis .show-phone{position:absolute;right:0;bottom:-2%;width:27%;min-width:150px;border-width:7px;border-radius:26px}
.show-txt .show-n{margin:0 0 10px;font:700 14px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.show-txt h3{margin:0 0 12px;font:700 clamp(28px,3.1vw,46px)/1.04 var(--display);text-transform:uppercase}
.show-txt p{margin:0 0 18px;color:#C9C9C2;font-size:19px;max-width:24em}
.show-foot{margin:34px 0 0;color:var(--muted);font-size:15px}
@media(max-width:900px){
  .show{padding-block:40px 48px}
  .show-tabs{flex-wrap:nowrap;overflow-x:auto;margin-inline:-20px;padding-inline:20px;scrollbar-width:none;padding-bottom:4px}.show-tabs::-webkit-scrollbar{display:none}
  .show-tab{flex:none;min-height:44px;padding:0 14px;font-size:15px}
  .show-panel{grid-template-columns:1fr;justify-items:center;text-align:center}
  .show-vis{padding:0;display:grid;justify-items:center;width:100%}
  .laptop{display:none}
  .show-vis .show-phone{position:static;width:min(250px,68vw);border-width:9px;border-radius:36px}
  .show-txt{display:grid;justify-items:center;order:-1}.show-txt p{font-size:17px;margin-bottom:12px}.show-txt .btn{display:none}.show-txt h3{margin-bottom:8px}
}