*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font:var(--text-body);font-size:var(--fs-body-lg);-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none}a:hover{color:var(--text-link-hover)}
img{display:block;max-width:100%}
h1,h2,h3,h4,p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.display{font:var(--text-display-lg);font-family:var(--font-display);font-style:italic;text-transform:uppercase;letter-spacing:var(--ls-display);line-height:.96}
.display-xl{font-size:clamp(48px,7vw,92px)}
.display-md{font:var(--text-display-md);font-family:var(--font-display);font-style:italic;text-transform:uppercase}
.eyebrow{font:var(--text-eyebrow);font-size:12px;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--orange-400)}
.lead{font-size:20px;line-height:1.5;color:var(--text-secondary);max-width:640px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 26px;border-radius:999px;font:var(--fw-bold) 16px/1 var(--font-core);border:0;cursor:pointer;transition:background 140ms cubic-bezier(.16,1,.3,1),transform 140ms;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-green{background:var(--green-500);color:var(--navy-900)}.btn-green:hover{background:var(--green-600);color:var(--navy-900)}
.btn-orange{background:var(--orange-400);color:#fff}.btn-orange:hover{background:var(--orange-500);color:#fff}
.btn-navy{background:var(--navy-700);color:#fff}.btn-navy:hover{background:var(--navy-800);color:#fff}
.btn-ghost{background:transparent;color:var(--navy-700);border:2px solid var(--navy-200)}.btn-ghost:hover{background:var(--neutral-100);color:var(--navy-700)}
.btn-ghost-w{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.35)}.btn-ghost-w:hover{background:rgba(255,255,255,.1);color:#fff}
.btn-sm{height:42px;padding:0 20px;font-size:14px}
/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);backdrop-filter:saturate(150%) blur(14px);border-bottom:1px solid var(--border-subtle)}
.nav .wrap{display:flex;align-items:center;gap:32px;height:76px}
.nav .logo img{height:40px}
.nav ul{display:flex;gap:28px;list-style:none;margin:0 auto;padding:0}
.nav ul a{white-space:nowrap;font:var(--fw-semibold) 15px/1 var(--font-core);color:var(--navy-700);padding:6px 0;border-bottom:3px solid transparent}
.nav ul a:hover{color:var(--navy-900)}.nav ul a.on{border-color:var(--green-500)}
.nav .cta{display:flex;gap:10px}
/* hero */
.hero{position:relative;overflow:hidden;background:var(--navy-900) url(assets/textures/chalkboard-navy-clean.png) center/cover no-repeat;color:#fff;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,26,56,.72),rgba(0,26,56,.32));z-index:-1}
.hero::after{content:"";position:absolute;top:0;right:0;bottom:0;width:38%;background:var(--orange-400);clip-path:polygon(28% 0,100% 0,100% 100%,0 100%);z-index:-1;opacity:.96}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;min-height:640px;padding-top:72px;padding-bottom:72px}
.hero .eyebrow{color:var(--green-300)}
.hero p.lead{color:var(--navy-100)}
.hero .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
/* credential card in hero */
.cred{width:360px;margin-left:auto;background:#fff;color:var(--navy-900);border-radius:28px;padding:22px;box-shadow:0 14px 34px rgba(0,26,56,.35);transform:rotate(-3deg)}
.cred .top{display:flex;justify-content:space-between;align-items:center}
.cred .top img{height:26px}
.cred .status{display:inline-flex;align-items:center;gap:6px;background:var(--green-50);color:var(--green-800);border-radius:8px;padding:4px 10px;font:var(--fw-bold) 11px/1 var(--font-core);letter-spacing:.08em}
.cred .status i{width:8px;height:8px;border-radius:50%;background:var(--green-500);display:inline-block}
.cred .body{display:grid;grid-template-columns:110px 1fr;gap:16px;margin-top:20px;align-items:center}
.cred .photo:has(img){padding:0}.cred .photo img{width:100%;height:100%;object-fit:cover;display:block}
.cred .photo{aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:repeating-linear-gradient(135deg,var(--navy-100) 0 8px,var(--navy-50) 8px 16px);display:flex;align-items:flex-end;justify-content:center;padding:8px;font:500 10px/1.3 var(--font-mono);color:var(--navy-500);text-align:center}
.cred .num{font:var(--fw-black) 64px/1 var(--font-core);color:var(--orange-400)}
.cred .name{font:var(--fw-extrabold) 20px/1.15 var(--font-core);text-transform:uppercase;margin-top:6px}
.cred .meta{font-size:13px;color:var(--text-secondary);margin-top:4px}
.cred .foot{display:grid;grid-template-columns:1fr 1fr;margin:18px -22px -22px;border-top:1px solid var(--border-subtle)}
.cred .foot div{padding:12px 22px;font:var(--fw-bold) 12px/1.3 var(--font-core)}
.cred .foot div:first-child{color:var(--green-700);border-right:1px solid var(--border-subtle)}.cred .foot div:last-child{color:var(--orange-400)}
.cred .foot small{display:block;font:var(--fw-bold) 10px/1.2 var(--font-core);letter-spacing:.12em;color:var(--text-muted);margin-bottom:3px}
/* sections */
section{padding:96px 0}
.head{max-width:720px;margin-bottom:48px}.head h2{margin:10px 0 16px}
.center{text-align:center;margin-left:auto;margin-right:auto}
.grid{display:grid;gap:20px}.c2{grid-template-columns:repeat(2,1fr)}.c3{grid-template-columns:repeat(3,1fr)}.c4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:16px;padding:28px;box-shadow:0 2px 6px rgba(0,26,56,.08)}
.card h3{font:var(--text-h3);margin-bottom:10px}
.card p{color:var(--text-secondary);font-size:15px}
.card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;background:var(--navy-50);color:var(--navy-700)}
.card .ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.navy{background:var(--navy-700);color:#fff}.navy .card{background:var(--navy-800);border-color:rgba(255,255,255,.1);box-shadow:none;color:#fff}.navy .card p{color:var(--navy-200)}.navy .card .ic{background:rgba(255,255,255,.08);color:var(--green-300)}.navy .lead{color:var(--navy-100)}.navy .eyebrow{color:var(--green-300)}
.yard{position:relative;isolation:isolate;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 24px)}
.yard.navy{background:var(--navy-700) url(assets/textures/chalkboard-navy-clean.png) center/cover no-repeat}
.yard.navy::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 2px,transparent 2px 9.5%),repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 1px,transparent 1px 1.9%),linear-gradient(180deg,rgba(0,26,56,.55),rgba(0,26,56,.75))}
.yard.navy .wrap{position:relative}
.yard.navy::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.32;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='420' viewBox='0 0 760 420' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='120' cy='310' r='16'/%3E%3Ccircle cx='180' cy='310' r='16'/%3E%3Ccircle cx='240' cy='310' r='16'/%3E%3Ccircle cx='300' cy='310' r='16'/%3E%3Ccircle cx='360' cy='310' r='16'/%3E%3Ccircle cx='470' cy='350' r='16'/%3E%3Ccircle cx='640' cy='310' r='16' stroke='%23ffa06a'/%3E%3Cpath d='M120 294V190l30-30' stroke-dasharray='9 9'/%3E%3Cpath d='M360 294V200l80-50' stroke-dasharray='9 9'/%3E%3Cpath d='M240 294V150c0-50 70-50 70-100' stroke-dasharray='9 9' stroke='%23ffa06a'/%3E%3Cpath d='M640 294V230h80' stroke-dasharray='9 9' stroke='%23ffa06a'/%3E%3Cpath d='M470 334V250' stroke-dasharray='9 9'/%3E%3Cpath d='M140 168l10-8v14M430 154l10-4v14M304 62l8-12 6 14M712 222l8 8-8 8'/%3E%3Cpath d='M120 100l16 28h-32zM240 80l16 28h-32zM360 100l16 28h-32zM480 120l16 28h-32zM600 100l16 28h-32z' stroke-width='2.5'/%3E%3C/svg%3E") right 4% bottom 6%/min(760px,80vw) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='260' viewBox='0 0 360 260' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='60' cy='210' r='14'/%3E%3Ccircle cx='120' cy='210' r='14'/%3E%3Ccircle cx='180' cy='210' r='14'/%3E%3Cpath d='M120 196V110l60-40' stroke-dasharray='8 8' stroke='%23ffa06a'/%3E%3Cpath d='M170 74l10-4v14'/%3E%3Cpath d='M60 60l14 24H46zM180 40l14 24h-28zM300 70l14 24h-28z' stroke-width='2.5'/%3E%3C/svg%3E") left 3% top 8%/300px no-repeat}
.deep{background:var(--navy-900)}
/* app screens */
.app{color:#fff;background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(247,80,0,.35),transparent 70%),var(--navy-900)}
.screens{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;align-items:start}
.screens figure{margin:0;display:flex;flex-direction:column;gap:18px}
.screens img{width:100%;height:auto;border-radius:7%/3.2%;box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}
.screens figcaption b{display:block;font:var(--fw-bold) 17px/1.25 var(--font-core);color:#fff;margin-bottom:6px}
.screens figcaption span{display:block;font-size:14px;line-height:1.5;color:var(--navy-200)}
@media (max-width:1150px){.screens{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 32px}}@media (max-width:560px){.screens{grid-template-columns:1fr;max-width:340px;margin-left:auto;margin-right:auto}}
.screens.three{grid-template-columns:repeat(3,minmax(0,1fr));max-width:960px;margin-left:auto;margin-right:auto}
.navy .screens figcaption b{color:#fff}.navy .screens figcaption span{color:var(--navy-200)}
section:not(.navy):not(.deep):not(.app) .screens figcaption b{color:var(--navy-900)}section:not(.navy):not(.deep):not(.app) .screens figcaption span{color:var(--text-secondary)}
/* admin shots */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
.shots figure{margin:0;display:flex;flex-direction:column;gap:14px}
.shots img{width:100%;height:auto;border-radius:12px;border:1px solid var(--border-subtle);box-shadow:0 18px 40px rgba(0,26,56,.16)}
.shots figcaption b{display:block;font:var(--fw-bold) 16px/1.25 var(--font-core);color:var(--navy-900);margin-bottom:4px}
.shots figcaption span{display:block;font-size:14px;line-height:1.5;color:var(--text-secondary)}
/* photo slots */
.photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.photos figure{margin:0;display:flex;flex-direction:column;gap:12px}
.photos image-slot{display:block;width:100%;aspect-ratio:16/9;height:auto;border-radius:16px;color:currentColor}
.photos figcaption{font:var(--fw-bold) 12px/1.3 var(--font-core);letter-spacing:.1em;text-transform:uppercase;color:var(--orange-400)}
@media (max-width:900px){.shots,.photos,.screens.three{grid-template-columns:1fr}}
/* two faces */
.faces{grid-template-columns:1fr 1fr;gap:24px}
.face{border-radius:16px;padding:40px;color:#fff;min-height:360px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
.face.a{background:var(--navy-700)}.face.b{background:var(--orange-400)}
.face .tag{position:absolute;top:28px;left:40px;font:var(--fw-bold) 12px/1 var(--font-core);letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.face h3{font:var(--text-display-md);font-family:var(--font-display);font-style:italic;text-transform:uppercase;margin-bottom:12px}
.face p{opacity:.92;max-width:460px}
.face ul{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.face li{border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:6px 12px;font:var(--fw-semibold) 13px/1 var(--font-core)}
/* steps */
.steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.step{position:relative;padding:32px 28px 28px;background:#fff;border-radius:16px;border:1px solid var(--border-subtle)}
.step .n{font:var(--fw-black) 15px/1 var(--font-core);letter-spacing:.12em;color:var(--orange-400);margin-bottom:14px}
.step h3{font:var(--text-display-md);font-family:var(--font-display);font-style:italic;text-transform:uppercase;color:var(--navy-700);margin-bottom:12px;font-size:clamp(26px,2.8vw,40px);overflow-wrap:anywhere}
.step p{color:var(--text-secondary);font-size:15px}
.step.reg h3{color:var(--green-700)}
/* timeline (día de juego) */
.tl{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;margin-top:16px}
.tl::before{content:"";position:absolute;left:8%;right:8%;top:22px;height:2px;background:rgba(255,255,255,.18)}
.tl li{list-style:none;padding:0 20px;text-align:center}
.tl .dot{width:46px;height:46px;border-radius:50%;background:var(--green-500);color:var(--navy-900);margin:0 auto 20px;display:grid;place-items:center;font:var(--fw-black) 18px/1 var(--font-core);position:relative}
.tl h4{font:var(--fw-bold) var(--fs-h4)/var(--lh-snug) var(--font-core);margin-bottom:8px}.tl p{font-size:14px;color:var(--navy-200)}
/* roles */
.roles{grid-template-columns:repeat(4,1fr)}
.role{padding:22px;border-radius:16px;background:#fff;border:1px solid var(--border-subtle)}
.role b{display:block;font:var(--fw-extrabold) 16px/1.2 var(--font-core);margin-bottom:6px}.role p{font-size:14px;color:var(--text-secondary)}
/* faq */
details{border-bottom:1px solid var(--border-default);padding:20px 0}
summary{cursor:pointer;font:var(--fw-bold) 18px/1.3 var(--font-core);list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::after{content:"+";color:var(--orange-400);font-weight:900;font-size:24px;line-height:1}
details[open] summary::after{content:"–"}
details p{margin-top:12px;color:var(--text-secondary);max-width:680px}
/* CTA band */
.band{background:var(--orange-400);color:#fff;text-align:center;padding:96px 0;position:relative;overflow:hidden}
.band::before{content:"1";position:absolute;right:-40px;top:-120px;font:900 620px/1 var(--font-display);font-style:italic;color:var(--orange-100);opacity:.28;pointer-events:none}
.band .wrap{position:relative}
.band p{color:#fff;opacity:.92;margin:16px auto 32px;max-width:600px;font-size:19px}
.band .btns{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
/* footer */
footer{background:var(--navy-900);color:var(--navy-200);padding:56px 0 32px;font-size:14px}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
footer img{height:40px;margin-bottom:16px}
footer h4{color:#fff;font:var(--fw-bold) 12px/1 var(--font-core);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}footer a{color:var(--navy-200)}footer a:hover{color:var(--green-300)}
footer .legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.1);padding-top:20px;margin-top:16px;display:flex;justify-content:space-between;color:var(--navy-300);font-size:13px}
/* page hero (interior) */
.phero{background:var(--navy-700);color:#fff;padding:80px 0 72px;position:relative;overflow:hidden}
.phero.orange{background:var(--orange-400)}.phero.orange .eyebrow{color:#fff}
.phero .eyebrow{color:var(--green-300)}
.phero h1{margin:12px 0 18px}.phero .lead{color:var(--navy-100)}.phero.orange .lead{color:#fff;opacity:.92}
.phero::after{content:"";position:absolute;right:-8%;top:0;bottom:0;width:34%;background:var(--navy-900);clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);opacity:.55}
.phero.orange::after{background:var(--orange-600)}
/* features list */
.feat{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start;padding:56px 0;border-top:1px solid var(--border-default)}
.feat:first-of-type{border-top:0}
.feat h3{font:var(--text-h1);margin:8px 0 14px}
.feat ul{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.feat li{display:grid;grid-template-columns:22px 1fr;gap:12px;color:var(--text-secondary);font-size:16px}
.feat li::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--green-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001a38' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/13px no-repeat;margin-top:2px}
.feat li b{color:var(--navy-900)}
/* forms */
.form{display:grid;gap:18px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tel{display:grid;grid-template-columns:118px 1fr;gap:10px}.tel select{padding:0 10px}
label{display:grid;gap:8px;font:var(--text-label);color:var(--navy-700)}
input,select,textarea{width:100%;height:50px;border:1px solid var(--border-default);border-radius:12px;padding:0 16px;font:400 15px/1.4 var(--font-core);color:var(--navy-900);background:#fff}
textarea{height:130px;padding:14px 16px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--green-500);box-shadow:var(--focus-ring)}
.seg{display:flex;gap:8px}.seg span{flex:1;text-align:center;border:1px solid var(--border-default);border-radius:999px;padding:12px;font:var(--fw-semibold) 14px/1 var(--font-core);cursor:pointer;color:var(--navy-700)}
.seg span.on{background:var(--green-500);border-color:var(--green-500);color:var(--navy-900)}
.note{font-size:13px;color:var(--text-muted)}
@media (max-width:1000px){.nav ul{gap:18px}.nav .cta .btn-ghost{display:none}}@media (max-width:900px){.wrap{padding:0 16px}.nav ul{display:none}.hero .wrap{grid-template-columns:1fr;min-height:0}.hero::after{display:none}.cred{margin:0 auto;width:min(360px,100%)}.c2,.c3,.c4,.faces,.steps,.roles,.feat,.form .row,footer .wrap{grid-template-columns:1fr}.tl{grid-template-columns:1fr;gap:24px}.tl::before{display:none}.tl li{text-align:left;display:grid;grid-template-columns:46px 1fr;gap:16px;padding:0}.tl .dot{margin:0}section{padding:64px 0}.display-xl{font-size:44px}}

/* --- estado de envío de formularios (agregado al publicar) --- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin:12px 0 0;padding:12px 14px;border-radius:10px;font-size:15px;
  background:#FDECEC;color:#8A1C1C;border:1px solid #F3C9C9}
.form-status a{color:#8A1C1C;text-decoration:underline}
.form button[type=submit][disabled]{opacity:.6;cursor:progress}

/* --- menú móvil (agregado al publicar: el diseño no traía hamburguesa) --- */
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;
  margin-left:auto;padding:0;border:2px solid var(--navy-200);border-radius:var(--radius-control);
  background:transparent;color:var(--navy-700);cursor:pointer}
.nav-toggle:hover{border-color:var(--navy-400)}
.nav-toggle:focus-visible{outline:3px solid var(--green-500);outline-offset:2px}
.nav-toggle-bars{display:block;width:20px}
.nav-toggle-bars i{display:block;height:2px;border-radius:2px;background:currentColor;
  transition:transform var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}
.nav-toggle-bars i+i{margin-top:5px}
.nav[data-menu-open=true] .nav-toggle-bars i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav[data-menu-open=true] .nav-toggle-bars i:nth-child(2){opacity:0}
.nav[data-menu-open=true] .nav-toggle-bars i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .nav .wrap{display:flex;align-items:center;gap:14px}
  /* Panel OPACO a propósito: el .nav ya tiene backdrop-filter, y un segundo
     backdrop-filter anidado más alfa <1 dejaba ver el hero a través del menú. */
  .nav[data-menu-open=true] ul{display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:100%;z-index:2;margin:0;padding:8px 16px 16px;
    background:#fff;box-shadow:var(--shadow-lg)}
  .nav[data-menu-open=true] ul li{list-style:none}
  .nav[data-menu-open=true] ul a{display:block;padding:14px 4px;font-size:17px;
    border-bottom:1px solid var(--border-subtle);border-left:3px solid transparent}
  .nav[data-menu-open=true] ul a.on{border-bottom-color:var(--border-subtle);
    border-left-color:var(--green-500);padding-left:12px}
  /* .btn-ghost se oculta bajo 1000px; dentro del menú sí cabe */
  /* Apilados, no lado a lado: los .btn son white-space:nowrap, y con dos por fila
     cada uno recibe (ancho-42)/2 — 166px en un iPhone de 375px. "Descarga Brochure
     PDF" necesita 211px, así que se desbordaba en todo teléfono común. Apilados
     tienen el ancho completo. */
  .nav[data-menu-open=true] .cta{position:absolute;left:0;right:0;top:100%;z-index:2;
    display:flex;flex-direction:column;gap:10px;margin-top:var(--menu-cta-offset,0);
    padding:0 16px 18px;background:#fff;border-bottom:1px solid var(--border-subtle);
    box-shadow:var(--shadow-lg)}
  .nav[data-menu-open=true] .cta .btn{flex:none;width:100%}
  .nav[data-menu-open=true] .cta .btn-ghost{display:inline-flex}
}
@media (prefers-reduced-motion:reduce){.nav-toggle-bars i{transition:none}}

/* --- redes en el pie (agregado al publicar: el diseño no las traía) --- */
footer .social{display:flex;gap:10px;margin-top:20px;padding:0;list-style:none}
footer .social li{margin:0}
footer .social a{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:999px;background:rgba(255,255,255,.09);
  color:#fff;transition:background var(--dur-fast) var(--ease-out),
  color var(--dur-fast) var(--ease-out)}
footer .social a:hover{background:var(--green-500);color:var(--navy-900)}
footer .social a:focus-visible{outline:3px solid var(--green-500);outline-offset:2px}
footer .social svg{width:21px;height:21px;fill:currentColor}
@media (prefers-reduced-motion:reduce){footer .social a{transition:none}}

/* --- línea de tiempo "De la puerta al correo de resultados" en móvil --- */
/* Bajo 900px el diseño hace `.tl li{display:grid;grid-template-columns:46px 1fr}`,
   pero el li tiene TRES hijos (.dot, h4, p). El autoplacement manda el <p> a la
   fila 2 columna 1 — la de 46px del número — así que el párrafo se renderizaba a
   46px de ancho contra los 264px del h4. Medido en producción antes de corregir. */
@media (max-width:900px){
  .tl li>.dot{grid-column:1;grid-row:1}
  .tl li>h4{grid-column:2;grid-row:1}
  .tl li>p{grid-column:2;grid-row:2;margin:0}
  .tl li{column-gap:16px;row-gap:6px}
}

/* --- títulos con width/height fijos en px (ediciones directas en Claude Design) --- */
/* El h1 del hero de Inicio trae width:773px;height:363px (y max-width:767px) y el h2
   "Automatiza las tareas pesadas…" de Cómo funciona, width:871px;height:109px. Con .wrap
   a su ancho máximo (1200px) se ven igual que en el diseño y ahí se respetan. Más angosto
   no caben: el h1 se sale de su columna hacia la credencial y en móvil lo corta el
   overflow:hidden del hero; el h2 empuja la página a scroll horizontal. Bajo 1200px se
   liberan. Los selectores piden ";width:" o "height:" para no tocar un max-width. */
@media (max-width:1199px){
  :is(h1,h2,h3)[style^="width:"],:is(h1,h2,h3)[style*=";width:"],:is(h1,h2,h3)[style*="; width:"],
  :is(h1,h2,h3)[style^="height:"],:is(h1,h2,h3)[style*=";height:"],:is(h1,h2,h3)[style*="; height:"]{
    width:auto!important;max-width:100%!important;height:auto!important}
}

/* --- /registro en móvil: el formulario quedaba medio fuera de la pantalla --- */
/* El .wrap del hero de registro trae style="grid-template-columns:1fr 1fr". Ese estilo en
   línea le gana a la regla del diseño que pone los heroes a una columna bajo 900px: en un
   teléfono el texto quedaba en ~180px y el formulario, recortado a la derecha. Pasaba igual
   en el diseño y en el sitio publicado hasta el 2026-09-15. */
@media (max-width:900px){
  .hero .wrap[style*="grid-template-columns"]{grid-template-columns:1fr!important}
}

/* --- botones largos en teléfono --- */
/* Los .btn son white-space:nowrap. "Solicita una demostración para tu liga o torneo" (el
   diseño le sumó "o torneo" el 2026-09-15) mide ~430px y no cabe en 360-390px: en el diseño
   se sale de la pantalla y en /ligas ensancha la columna del hero y recorta el título. Bajo
   600px los botones de .btns pueden partirse en dos renglones; los que caben no cambian. */
@media (max-width:600px){
  .btns .btn{white-space:normal;height:auto;min-height:52px;max-width:100%;
    padding-top:12px;padding-bottom:12px;line-height:1.2;text-align:center}
}