/* VOXEO · componentes de las páginas interiores */

/* ---------- cabecera de página ---------- */
.phero{background:radial-gradient(110% 70% at 82% 22%,rgba(33,72,229,.07),transparent 60%),var(--paper);
  padding-block:clamp(40px,5vw,72px) clamp(46px,6vw,84px)}
.phero .inner{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(26px,4vw,64px);align-items:center}
.phero h1{margin-top:18px;font-size:clamp(34px,4.4vw,60px)}
.phero .lead{margin-top:20px}
.phero .cta{margin-top:30px;display:flex;gap:11px;flex-wrap:wrap}
.phero.solo .inner{grid-template-columns:1fr;max-width:880px}
@media (max-width:900px){.phero .inner{grid-template-columns:1fr}}

/* ---------- fila de cifras ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r-m);overflow:hidden;margin-top:38px}
.stats div{background:var(--white);padding:22px 22px 24px}
.stats b{display:block;font-family:var(--serif);font-size:clamp(26px,3vw,38px);letter-spacing:-.03em;line-height:1.05}
.stats span{display:block;margin-top:7px;font-size:14px;color:var(--ink-3);line-height:1.45}
.band.ink .stats{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.18)}
.band.ink .stats div{background:var(--navy)}
.band.ink .stats b{color:#fff}.band.ink .stats span{color:#9AA6C0}
@media (max-width:900px){.stats{grid-template-columns:1fr 1fr}}

/* ---------- bloque alterno: texto + visual ---------- */
.alt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:clamp(28px,4.5vw,72px);align-items:center;
  padding-block:clamp(44px,5.5vw,80px);border-top:1px solid var(--rule)}
.alt:first-of-type{border-top:0}
.alt.flip>*:first-child{order:2}
.alt h3{margin:14px 0 0;font-size:clamp(24px,2.7vw,34px)}
.alt p{margin-top:15px;color:var(--ink-3);font-size:16.5px;line-height:1.6;max-width:56ch}
.alt .tick{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:9px}
.alt .tick li{position:relative;padding-left:26px;font-size:15.5px;color:var(--ink-2)}
.alt .tick li::before{content:"";position:absolute;left:2px;top:7px;width:12px;height:7px;
  border-left:2px solid var(--ai);border-bottom:2px solid var(--ai);transform:rotate(-45deg)}
@media (max-width:900px){.alt{grid-template-columns:1fr}.alt.flip>*:first-child{order:0}}

/* ---------- maqueta de teléfono (WhatsApp) ---------- */
.phone{width:min(300px,100%);margin:0 auto;border-radius:38px;background:var(--ink);padding:11px;
  box-shadow:0 2px 4px rgba(18,16,14,.08),0 26px 50px -22px rgba(18,16,14,.5),0 60px 90px -60px rgba(18,16,14,.5)}
.phone .screen{background:#ECE4DB;border-radius:29px;overflow:hidden;height:520px;display:flex;flex-direction:column}
.phone .bar{background:#0F5A50;color:#fff;padding:13px 14px 12px;display:flex;align-items:center;gap:9px;font-size:13.5px}
.phone .bar .av{width:30px;height:30px;border-radius:50%;background:#12100E;display:grid;place-items:center;
  color:#fff;font-size:10px;font-weight:800;letter-spacing:.03em}
.phone .bar small{display:block;opacity:.72;font-size:11px}
.phone .thread{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.wa{max-width:82%;padding:8px 11px;border-radius:12px;font-size:13.5px;line-height:1.42;box-shadow:0 1px 1px rgba(0,0,0,.08);
  opacity:0;transform:translateY(8px);transition:opacity 900ms ease,transform 900ms cubic-bezier(.2,.8,.2,1)}
.wa.in{opacity:1;transform:none}
.wa.them{background:#fff;align-self:flex-start;border-top-left-radius:4px}
.wa.me{background:#D6F5C3;align-self:flex-end;border-top-right-radius:4px}
.wa time{display:block;text-align:right;font-size:10px;color:#7A8A76;margin-top:3px}
.wa .aud{display:flex;align-items:center;gap:7px}
.wa .aud .pl{width:22px;height:22px;border-radius:50%;background:#0F5A50;color:#fff;display:grid;place-items:center;font-size:8px;flex:none}
.wa .aud .wv{display:flex;gap:2px;align-items:center;height:16px;flex:1}
.wa .aud .wv i{width:2px;border-radius:1px;background:#0F5A50;height:30%;animation:bar 1s ease-in-out infinite}

/* ---------- maqueta de panel ---------- */
.panel{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-m);box-shadow:var(--sh-3);overflow:hidden}
.panel .top{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--rule);background:var(--paper-2)}
.panel .top i{width:9px;height:9px;border-radius:50%;background:var(--rule);display:block}
.panel .top b{font-size:12.5px;font-weight:600;color:var(--ink-3);margin-left:6px}
.panel .body{padding:16px 18px 20px}
.prow{display:grid;grid-template-columns:1fr 92px 58px;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--rule);font-size:14px}
.prow:first-child{border-top:0}
.prow .nm{font-weight:600}
.prow .nm small{display:block;font-weight:400;color:var(--ink-4);font-size:12px}
.meter{height:7px;border-radius:4px;background:var(--rule);overflow:hidden}
.meter u{display:block;height:100%;width:0;border-radius:4px;background:var(--ai);transition:width 1000ms cubic-bezier(.2,.8,.2,1)}
.meter.warn u{background:var(--hot)}
.tagp{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:999px;
  background:var(--ai-wash);color:#1A2E7A;text-align:center}
.tagp.warn{background:var(--hot-wash);color:#8E2E1B}
.tagp.good{background:#E7F2EB;color:#1F5B39}

/* ---------- aula de 30 ---------- */
.room{position:relative;width:100%;aspect-ratio:5/4;max-width:640px;margin-inline:auto}
.desk{position:absolute;left:50%;top:0;transform:translateX(-50%);width:23%;height:9%;border-radius:10px;
  background:var(--ink);color:#fff;display:grid;place-items:center;font-size:12.5px;font-weight:600;z-index:3}
.seat{position:absolute;width:11%;height:11%;border-radius:11px;background:var(--paper-2);border:1px solid var(--rule);
  display:grid;place-items:center;transition:background 900ms,border-color 900ms,box-shadow 900ms}
.seat .wv{display:flex;gap:2.5px;align-items:center;height:15px;opacity:0;transition:opacity 700ms}
.seat .wv i{width:2.5px;background:var(--ai);border-radius:2px;height:30%;animation:bar .95s ease-in-out infinite}
.seat.on{background:var(--ai-wash);border-color:var(--ai-line);box-shadow:0 0 0 4px rgba(33,72,229,.14),0 12px 24px -14px rgba(33,72,229,.55)}
.seat.on .wv{opacity:1}
.roomstat{position:absolute;right:0;top:0;background:var(--white);border:1px solid var(--rule);border-radius:12px;
  padding:10px 14px;font-size:13px;color:var(--ink-3);box-shadow:var(--sh-2);z-index:5;min-width:150px}
.roomstat b{display:block;font-family:var(--serif);font-size:27px;letter-spacing:-.03em;color:var(--ink);line-height:1.1;transition:color 700ms}
.roomstat b.bad{color:var(--hot)}.roomstat b.good{color:var(--good)}
.roomnote{margin-top:18px;text-align:center;font-size:14.5px;color:var(--ink-3);min-height:44px;transition:opacity 700ms}

/* ---------- cita del profesor ---------- */
.quote{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-l);padding:clamp(28px,4vw,52px);
  box-shadow:var(--sh-2);display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,40px);align-items:start}
.quote .av{width:76px;height:76px;border-radius:50%;background:var(--ai-wash);border:1px solid var(--ai-line);
  display:grid;place-items:center;font-family:var(--serif);font-size:27px;color:var(--ai)}
.quote blockquote{margin:0;font-family:var(--serif);font-size:clamp(20px,2.3vw,29px);line-height:1.32;letter-spacing:-.02em}
.quote cite{display:block;margin-top:18px;font-style:normal;font-size:14.5px;color:var(--ink-3)}
.quote cite b{color:var(--ink);font-weight:600}
@media (max-width:700px){.quote{grid-template-columns:1fr}}

/* ---------- preguntas frecuentes ---------- */
.faq{max-width:840px;margin-top:36px}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:20px 34px 20px 0;position:relative;
  font-family:var(--serif);font-size:19.5px;letter-spacing:-.015em;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:29px;width:9px;height:9px;
  border-right:2px solid var(--ink-4);border-bottom:2px solid var(--ink-4);transform:rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{padding:0 0 22px;color:var(--ink-3);font-size:16px;line-height:1.62;max-width:70ch}

/* ---------- retrato del fundador ---------- */
.portrait{position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--paper-2);
  border:1px solid var(--rule);aspect-ratio:4/5;display:grid;place-items:center;box-shadow:var(--sh-2)}
.portrait .ph{text-align:center;color:var(--ink-4);font-size:13.5px;padding:26px;line-height:1.5}
.portrait .ph b{display:block;font-family:var(--serif);font-size:19px;color:var(--ink-3);margin-bottom:8px}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 16%}
.langs{display:grid;gap:11px;margin-top:26px}
.langs div{display:flex;align-items:baseline;gap:12px;border-top:1px solid var(--rule);padding-top:11px}
.langs b{font-family:var(--serif);font-size:21px;min-width:112px}
.langs span{font-size:14.5px;color:var(--ink-3)}

/* ---------- ruta del fundador ---------- */
.route{position:relative;width:100%;margin-top:44px}
.route svg{width:100%;height:auto;overflow:visible;display:block}
.route .bg{stroke:var(--rule);stroke-width:1}
.route .arc{fill:none;stroke:var(--ai);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1000ms linear}
.route .arc.on{stroke-dashoffset:0}
.route .arc.dash{stroke-dasharray:6 7;stroke-dashoffset:0;opacity:0;transition:opacity 1000ms}
.route .arc.dash.on{opacity:1}
.route .node{fill:var(--paper);stroke:var(--ai);stroke-width:2.5;opacity:0;transition:opacity 700ms}
.route .node.on{opacity:1}
.route .nlab{font:700 11px var(--sans);letter-spacing:.11em;text-transform:uppercase;fill:var(--ink-4);opacity:0;transition:opacity 900ms}
.route .nname{font:600 21px var(--serif);letter-spacing:-.02em;fill:var(--ink);opacity:0;transition:opacity 900ms}
.route .ndesc{font:14px var(--sans);fill:var(--ink-3);opacity:0;transition:opacity 900ms}
.route .on{opacity:1}
@media (max-width:820px){.route .nname{font-size:15px}.route .ndesc{font-size:11px}.route .nlab{font-size:8.5px}}

/* ---------- formulario de demo ---------- */
.formwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(30px,5vw,80px);align-items:start;margin-top:8px}
@media (max-width:940px){.formwrap{grid-template-columns:1fr}}
.vform{display:grid;gap:18px}
.field{display:grid;gap:7px}
.field label{font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--ink-2)}
.field label span{color:var(--ink-4);font-weight:400}
.field input,.field select,.field textarea{
  font:inherit;font-size:16px;color:var(--ink);background:var(--white);
  border:1px solid var(--rule);border-radius:8px;padding:12px 14px;width:100%;
  transition:border-color .18s,box-shadow .18s;appearance:none}
.field textarea{min-height:104px;resize:vertical;line-height:1.5}
.field select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236B6156' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:38px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ai);box-shadow:0 0 0 3px rgba(33,72,229,.14)}
.field input:user-invalid,.field textarea:user-invalid{border-color:var(--hot)}
.field .err{font-size:12.5px;color:var(--hot);display:none}
.field.bad .err{display:block}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--hot)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:620px){.row2{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.vform .send{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.vform .send small{font-size:13px;color:var(--ink-4);line-height:1.45;max-width:34ch}
.btn[disabled]{opacity:.55;pointer-events:none}
.formnote{margin-top:20px;padding-top:18px;border-top:1px solid var(--rule);font-size:13.5px;color:var(--ink-4);line-height:1.55}
.formnote a{color:var(--ai);font-weight:600;text-decoration:none}

.formside{background:var(--white);border:1px solid var(--rule);border-radius:3px;padding:clamp(24px,3vw,34px)}
.formside h3{font-size:21px;margin-bottom:4px}
.formside ol{list-style:none;counter-reset:s;margin:20px 0 0;padding:0;display:grid;gap:0}
.formside li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;column-gap:13px;padding:15px 0;border-top:1px solid var(--rule)}
.formside li::before{content:counter(s,decimal-leading-zero);grid-column:1;grid-row:1 / span 2;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ai);padding-top:3px}
.formside li b{grid-column:2;font-size:15.5px;margin-bottom:3px}
.formside li span{grid-column:2;font-size:14.5px;color:var(--ink-3);line-height:1.5}
.formside .rule{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);font-size:14px;color:var(--ink-3);line-height:1.6}
.formside .rule b{color:var(--ink)}

.done{display:none;background:var(--white);border:1px solid var(--ai-line);border-radius:3px;padding:clamp(28px,4vw,44px)}
.done.on{display:block}
.done .tick{width:46px;height:46px;border-radius:50%;background:var(--ai-wash);border:1px solid var(--ai-line);
  display:grid;place-items:center;color:var(--ai);font-size:20px;margin-bottom:18px}
.done h3{font-size:clamp(22px,2.6vw,30px)}
.done p{margin-top:14px;color:var(--ink-3);font-size:16px;line-height:1.6;max-width:52ch}
.formfail{display:none;margin-top:14px;background:var(--hot-wash);border:1px solid rgba(194,69,44,.3);border-radius:8px;
  padding:13px 15px;font-size:14.5px;line-height:1.5;color:#8E2E1B}
.formfail.on{display:block}
.formfail a{color:#8E2E1B;font-weight:700}

/* el cierre necesita aire entre el titular y el texto */
.close .lead{margin-top:34px}
.close .cta{margin-top:38px}