/* =========================================================
   Palco Futbolero · página "Cómo funciona"
   ========================================================= */
.guide{display:grid;gap:64px}

/* ---------- portada ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center;padding-top:12px}
@media (max-width:860px){.hero{grid-template-columns:minmax(0,1fr)}}
.hero-text{display:grid;gap:16px}
.hero h1{font-size:clamp(44px,7.5vw,88px)}
.hero h1 span{color:var(--ambar)}
.hero p{font-size:18px;color:var(--niebla);max-width:52ch}
.jump{display:flex;gap:10px;flex-wrap:wrap}

/* maqueta de la sala */
.mock{position:relative;aspect-ratio:16/10;max-width:100%;border-radius:10px;overflow:hidden;border:1px solid var(--linea);
  box-shadow:0 30px 60px rgba(0,0,0,.45);background:#000}
.mock .pitch{inset:0}
.mock .bug{font-size:clamp(11px,1.6vw,18px)}
.mock-react{position:absolute;bottom:9%;left:12%;font-family:var(--display);font-weight:800;font-size:clamp(15px,2vw,22px);
  background:rgba(11,15,13,.9);border:1px solid var(--linea);padding:.1em .5em;border-radius:4px}
.mock-react.r2{left:auto;right:16%;bottom:22%}
.mock-react small{font-family:var(--body);font-weight:500;font-size:.5em;color:var(--niebla);margin-left:.5em}
.mock-chat{position:absolute;right:3%;top:22%;width:38%;display:grid;gap:6px}
.mock-chat div{background:rgba(11,15,13,.88);border:1px solid var(--linea);border-radius:5px;padding:6px 8px;font-size:clamp(10px,1.2vw,13px);line-height:1.35}
.mock-chat b{color:var(--ambar);font-weight:600}

/* ---------- secciones ---------- */
.sec{display:grid;gap:24px}
.sec-head{display:grid;gap:10px;max-width:62ch}
.sec-head h2{font-size:clamp(34px,5vw,54px)}
.sec-head p{color:var(--niebla);font-size:17px}

/* requisitos */
.needs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.need{display:grid;gap:8px}
.need svg{width:28px;height:28px;color:var(--ambar)}
.need h3{font-size:24px}
.need p{color:var(--niebla);font-size:14.5px}

/* pasos: línea de banda */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:paso}
.step{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;padding-bottom:34px}
.step:last-child{padding-bottom:0}
.step::before{counter-increment:paso;content:counter(paso);display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--noche);border:2px solid var(--ambar);color:var(--ambar);font-family:var(--digits);font-weight:700;font-size:22px;z-index:1}
.step::after{content:"";position:absolute;left:25px;top:52px;bottom:0;width:2px;background:repeating-linear-gradient(180deg,var(--linea) 0 8px,transparent 8px 14px)}
.step:last-child::after{display:none}
.step-body{display:grid;gap:10px;padding-top:6px;min-width:0}
.step-body h3{font-size:28px}
.step-body p{color:var(--niebla);max-width:64ch}
.step-body p b{color:var(--cal);font-weight:600}
@media (max-width:520px){.step{grid-template-columns:44px minmax(0,1fr);gap:14px}.step::before{width:40px;height:40px;font-size:18px}.step::after{left:19px;top:40px}}

/* chip que imita un botón de la sala */
.ui{display:inline-block;font-weight:600;font-size:.92em;padding:1px 8px;border-radius:4px;background:var(--cesped-2);border:1px solid var(--linea);color:var(--cal);white-space:nowrap}
.ui.on{background:var(--ambar);border-color:var(--ambar);color:var(--tinta)}

/* maqueta del cuadro de compartir de Chrome */
.dialog{background:#202124;color:#e8eaed;border-radius:10px;max-width:520px;width:100%;padding:18px;display:grid;gap:14px;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:13.5px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.dialog .dt{font-size:15px;font-weight:600}
.dialog .tabs{display:flex;gap:18px;border-bottom:1px solid #3c4043;overflow-x:auto}
.dialog .tabs span{padding-bottom:8px;color:#9aa0a6;white-space:nowrap}
.dialog .tabs span.sel{color:#8ab4f8;border-bottom:2px solid #8ab4f8}
.dialog .list{display:grid;gap:4px}
.dialog .item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;color:#bdc1c6}
.dialog .item i{width:14px;height:14px;border-radius:3px;background:#5f6368;flex:none}
.dialog .item.sel{background:#394457;color:#e8eaed;outline:2px solid var(--ambar);outline-offset:1px}
.dialog .item.sel i{background:#4fd18b}
.dialog .audio{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border-radius:6px;outline:2px solid var(--ambar);outline-offset:1px}
.dialog .toggle{width:34px;height:18px;border-radius:9px;background:#8ab4f8;position:relative;flex:none}
.dialog .toggle::after{content:"";position:absolute;right:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#202124}
.dialog .acts{display:flex;justify-content:flex-end;gap:8px}
.dialog .acts span{padding:7px 16px;border-radius:16px;border:1px solid #5f6368;color:#8ab4f8}
.dialog .acts span.go{background:#8ab4f8;color:#202124;border-color:#8ab4f8}
.callout{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--ambar)}
.callout svg{width:18px;height:18px;flex:none;margin-top:1px}

/* invitados */
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.trio .card{gap:10px}
.trio .n{font-family:var(--digits);font-weight:700;color:var(--ambar);font-size:14px;letter-spacing:.1em}
.trio h3{font-size:26px}
.trio p{color:var(--niebla);font-size:14.5px}

/* controles */
.controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden}
.control{background:var(--cesped);padding:16px 18px;display:grid;gap:6px;align-content:start}
.control h3{font-size:22px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.control p{color:var(--niebla);font-size:14.5px}
.who{font-family:var(--body);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:2px 6px;border-radius:3px;background:var(--cesped-2);color:var(--niebla)}
.who.h{background:var(--ambar);color:var(--tinta)}

/* preguntas */
.faq{display:grid;gap:8px}
.faq details{background:var(--cesped);border:1px solid var(--linea);border-radius:var(--r)}
.faq summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:600;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--digits);color:var(--ambar);font-size:20px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details>div{padding:0 16px 16px;color:var(--niebla);display:grid;gap:8px;max-width:72ch}

/* cierre */
.final{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;background:var(--cesped);border:1px solid var(--linea);
  border-radius:var(--r);padding:28px;border-top:3px solid var(--ambar)}
@media (max-width:640px){.final{grid-template-columns:minmax(0,1fr)}}
.final h2{font-size:clamp(30px,4.5vw,44px)}
.final p{color:var(--niebla)}
footer.site-foot{margin-top:48px;padding-top:18px;border-top:1px solid var(--linea);color:var(--niebla);font-size:13px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:900px){.controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.controls{grid-template-columns:minmax(0,1fr)}}

/* estilo Tribuna en la maqueta */
.mock{border-radius:0;border:0;padding:0;box-shadow:8px 8px 0 rgba(0,0,0,.45)}
.mock-react{background:var(--ambar);color:var(--tinta);border:0;transform:rotate(-3deg);box-shadow:4px 4px 0 rgba(0,0,0,.45)}
.mock-react.r2{background:var(--cal);transform:rotate(2deg)}
.mock-react small{color:var(--tinta);font-family:var(--marker)}
.mock-chat div{background:var(--cal);color:var(--tinta);border:0;border-radius:0;font-weight:600;transform:rotate(-1deg);box-shadow:3px 3px 0 rgba(0,0,0,.4)}
.mock-chat div:nth-child(2){transform:rotate(1deg)}
.mock-chat b{color:var(--rojo-osc);font-family:var(--marker);font-weight:400}
.step::before{border-radius:0;background:var(--ambar);color:var(--tinta);border:0;font-family:var(--display);box-shadow:3px 3px 0 #111}
.faq details{border-radius:0}
.final{border-radius:0;border-top:6px solid var(--rojo)}