/* Gauss House Academy — «Cómo funciona» (con las preguntas frecuentes en #preguntas) y contacto.
   Solo tokens de site.css; todas las clases con prefijo i-. */

/* ---------- método · cabecera partida (asym) ---------- */
.i-hero{padding:clamp(32px,5vw,72px) 0 clamp(48px,6vw,88px);border-bottom:1px solid var(--line)}
.i-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,80px);align-items:center}
.i-hero h1{max-width:13ch}
.i-hero .lede{margin-bottom:0}
.i-jump{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:1.3rem 0 0}
.i-jump .link-arrow::after{content:" ↓"}
.i-jump span{font:500 .85rem/1.4 var(--mono);color:var(--muted)}
.i-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:clamp(28px,4vw,48px) 0 0;border-top:1.5px solid var(--ink)}
.i-facts div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;padding:16px 16px 0 0}
.i-facts dt{font-size:.88rem;line-height:1.35;color:var(--muted)}
.i-facts dd{margin:0;font:700 clamp(1.6rem,2.6vw,2.3rem)/1 var(--mono);letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.i-hero-media{position:relative;margin:0}
.i-hero-media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);background:var(--tile-2)}
.i-chip{position:absolute;left:16px;bottom:16px;margin:0;padding:.5rem .7rem;background:var(--lime);border:1.5px solid var(--ink);border-radius:8px;font:500 .8rem/1.2 var(--mono);color:var(--ink)}
@media(max-width:1020px){.i-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.i-facts div{padding-bottom:12px}}
@media(max-width:860px){.i-hero-grid{grid-template-columns:1fr}.i-hero-media img{aspect-ratio:4/3}}

/* ---------- método · pasos con columna fija (asym, B08) ---------- */
.i-steps{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.i-side{position:sticky;top:104px}
.i-side h2{max-width:12ch}
.i-prog{display:flex;align-items:center;gap:14px;margin:1.6rem 0 0;font:500 .85rem/1 var(--mono);color:var(--muted)}
.i-prog b{color:var(--ink);font-weight:700}
.i-bar{flex:1;max-width:220px;height:6px;background:var(--tile-2);border-radius:99px;overflow:hidden}
.i-bar i{display:block;height:100%;background:var(--cobalt);transform-origin:0 50%;transform:scaleX(.2);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.i-step-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.i-step{display:grid;grid-template-columns:clamp(64px,8vw,120px) minmax(0,1fr);gap:0 clamp(16px,3vw,40px);padding:clamp(24px,3.4vw,44px) 0;border-top:1px solid var(--line)}
.i-step:first-child{border-top:1.5px solid var(--ink)}
.i-step-n{font:700 clamp(2.2rem,4.6vw,4rem)/.9 var(--mono);letter-spacing:-.05em;color:var(--muted);transition:color .35s ease}
.i-step.is-on .i-step-n{color:var(--cobalt)}
.i-step h3{font-size:clamp(1.3rem,2vw,1.65rem);margin:.15rem 0 .5rem}
.i-step p{margin:0;max-width:56ch}
@media(max-width:860px){.i-steps{grid-template-columns:1fr}.i-side{position:static}.i-prog{display:none}}

/* ---------- método · lo que no vas a encontrar (lista sobre reglas) ---------- */
.i-limits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,6vw,96px)}
.i-limits li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;align-content:start;padding:clamp(22px,3vw,34px) 0;border-top:1px solid var(--line)}
.i-limits li:nth-child(-n+2){border-top:1.5px solid var(--ink)}
.i-limits h3,.i-limits p{grid-column:2}
.i-limits h3{margin:0}
.i-limits p{margin:0;max-width:56ch}
.i-no{grid-row:span 2;align-self:start;margin-top:.1rem;padding:.3rem .45rem;border:1.5px solid var(--ink);border-radius:5px;font:700 .78rem/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}
.i-limits-note{margin:clamp(20px,3vw,32px) 0 0;padding-top:18px;border-top:1px solid var(--line);color:var(--muted)}
@media(max-width:760px){.i-limits{grid-template-columns:minmax(0,1fr)}.i-limits li:nth-child(2){border-top:1px solid var(--line)}}

/* ---------- método · CTA en tinta con curva (bleed) ---------- */
.i-cta{background:var(--ink);color:#D5D7DC;padding:clamp(56px,8vw,112px) 0;overflow:hidden}
.i-cta-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,80px);align-items:center}
.i-cta h2{color:#fff;max-width:18ch}
.i-cta p{max-width:52ch}
.i-cta .eyebrow{color:#C9CBD1}
.i-cta .btn:hover{box-shadow:0 5px 0 -1px var(--lime)}
.i-cta .btn-lime:hover{color:var(--ink)}
.i-btn-ghost{border-color:#fff;color:#fff}
.i-cta .i-btn-ghost:hover{background:#fff;color:var(--ink)}
.i-cta-fig{margin:0;color:var(--lime)}
.i-cta-fig svg{display:block;width:100%;height:auto}
.i-cta-fig line{stroke:rgba(255,255,255,.3);stroke-width:1.5}
.i-cta-fig figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.2);font:500 .85rem/1.4 var(--mono);color:#C9CBD1}
.i-cta .formula{color:#fff}
@media(max-width:820px){.i-cta-grid{grid-template-columns:minmax(0,1fr)}.i-cta-fig{max-width:440px}}

/* ---------- método · preguntas frecuentes (#preguntas, asym): acordeón sobre reglas + columna fija a la derecha.
   En el HTML la columna va primero (el h2 antes de las preguntas); la rejilla la coloca a la derecha,
   al revés que los pasos, para que las dos secciones con columna fija no se lean iguales. ---------- */
.i-faq-sec{border-top:1px solid var(--line);scroll-margin-top:24px}
.i-faq{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr);gap:clamp(32px,6vw,96px);align-items:start}
.i-qs{grid-column:1;grid-row:1;border-bottom:1px solid var(--line)}
.i-aside{grid-column:2;grid-row:1;position:sticky;top:104px;padding-left:clamp(20px,2.4vw,32px);border-left:1.5px solid var(--ink)}
.i-aside h2{max-width:12ch}
.i-aside-link{margin:0}
.i-mail{font:600 clamp(1rem,1.6vw,1.2rem)/1.3 var(--mono);overflow-wrap:anywhere}
.i-tabnote{padding-top:1rem;border-top:1px solid var(--line);font-size:.95rem;color:var(--muted)}
.i-tabnote b{color:var(--ink);font-weight:600}
.i-q{border-top:1px solid var(--line);scroll-margin-top:96px}
.i-q:first-child{border-top:1.5px solid var(--ink)}
.i-q summary{display:grid;grid-template-columns:3rem minmax(0,1fr) 30px;gap:12px;align-items:start;padding:22px 0;cursor:pointer;list-style:none;color:var(--ink);font-weight:600;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.35}
.i-q summary::-webkit-details-marker{display:none}
.i-q summary:hover .i-q-t{color:var(--cobalt)}
.i-q summary:focus-visible{outline-offset:4px;border-radius:4px}
.i-q-n{font:500 .88rem/1.6 var(--mono);color:var(--muted);padding-top:.1rem}
.i-q-ico{position:relative;width:30px;height:30px;border:1.5px solid var(--ink);border-radius:6px;background:var(--tile);transition:background-color .25s ease}
.i-q-ico::before,.i-q-ico::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--ink);transition:transform .25s ease}
.i-q-ico::after{transform:rotate(90deg)}
.i-q[open] .i-q-ico{background:var(--lime)}
.i-q[open] .i-q-ico::after{transform:rotate(0)}
.i-q[open] .i-q-n{color:var(--cobalt);font-weight:700}
.i-q-a{padding:0 42px 26px calc(3rem + 12px)}
.i-q-a p{margin:0;max-width:66ch}
@media(max-width:860px){
  .i-faq{grid-template-columns:minmax(0,1fr)}
  .i-qs,.i-aside{grid-column:auto;grid-row:auto}
  .i-aside{position:static;padding-left:0;border-left:0}
}
@media(max-width:560px){.i-q summary{grid-template-columns:2.2rem minmax(0,1fr) 30px;gap:10px}.i-q-a{padding:0 0 22px}}

/* ---------- contacto ---------- */
.i-contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.i-contact h1{font-size:clamp(2.35rem,4.6vw,4rem)}
.i-mail-big{display:inline;font:700 clamp(1.05rem,2.3vw,1.85rem)/1.3 var(--mono);letter-spacing:-.03em;color:var(--ink);text-decoration:none;overflow-wrap:anywhere;background:linear-gradient(var(--lime),var(--lime)) 0 90%/100% .4em no-repeat}
.i-mail-big:hover{color:var(--cobalt)}
.i-meta{margin:clamp(24px,4vw,40px) 0 0;border-top:1.5px solid var(--ink)}
.i-meta div{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:4px 20px;padding:14px 0;border-bottom:1px solid var(--line)}
.i-meta dt{font:500 .8rem/1.7 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.i-meta dd{margin:0;color:var(--ink)}
.i-form{background:var(--tile);border:1.5px solid var(--ink);border-radius:var(--r);overflow:hidden;scroll-margin-top:96px}
.i-form-h{margin:0;padding:12px 18px;background:var(--grid),var(--tile-2);border-bottom:1.5px solid var(--ink);font:500 .88rem/1.3 var(--mono);color:var(--ink)}
.i-form-h b{color:var(--cobalt);font-weight:700}
.i-form form{padding:clamp(18px,3vw,32px)}
.i-form .notice{margin:0 0 18px}
.i-form #cf-msg{margin:18px 0 0}
.i-opt{font-weight:400;color:var(--muted)}
.i-send{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:18px}
.i-priv{flex:1 1 240px;margin:0;font-size:.9rem;color:var(--muted)}
.i-pre-sec{border-top:1px solid var(--line)}
.i-pre-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);gap:16px}
.i-pre{display:flex;flex-direction:column;min-height:240px;color:var(--text);text-decoration:none}
.i-pre:hover{color:var(--text)}
.i-pre-k{padding-bottom:28px;font:500 .8rem/1.3 var(--mono);color:var(--muted)}
.i-pre h3{margin:auto 0 .4rem}
.i-pre p{margin:0 0 1.1rem}
.i-pre .link-arrow{align-self:flex-start}
.i-pre:hover .link-arrow{background-size:100% 2px}
@media(max-width:900px){.i-contact{grid-template-columns:minmax(0,1fr)}.i-pre-grid{grid-template-columns:minmax(0,1fr)}.i-pre{min-height:0}.i-pre h3{margin-top:0}}
@media(max-width:560px){.i-meta div{grid-template-columns:minmax(0,1fr)}}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .i-bar i,.i-step-n,.i-q-ico,.i-q-ico::before,.i-q-ico::after{transition:none}
}