/* primeras-10-llamadas.css — Oferta inicial (gallmur.com/es/primeras-10-llamadas/)
   Design system: carbon #030608 / cyan #00B8E6 / off-white #EDE9E1 (site.css tokens)
   Rules: external CSS only (Camoufox swallows inline <style>), zero inline style,
   CSP style-src 'self' safe, no SaaS look, header near-opaque like fa-page,
   scroll-padding for anchors under sticky header, explicit mobile gaps.
   Copy: ES neutro LatAm, diccionario dueño, cero em dash, precio público verificado,
   sin resultados inventados. La revisión abre la puerta; el sistema continuo es nivel 2. */
:root{--wfa-card:#0b1115;--wfa-card-2:#0e171c;--wfa-line:#22333c;--wfa-line-hi:#36515e;--wfa-warm:#c88b70}

.wfa-page .topbar{background:rgba(3,6,8,.97)}

html{scroll-padding-top:88px}

/* Breadcrumb — franja integrada al sistema */
.wfa-breadcrumb{max-width:var(--max);margin:0 auto;padding:.9rem 24px;display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;border-bottom:1px solid var(--wfa-line);font:650 .72rem var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.wfa-breadcrumb a{color:var(--cyan-hi);text-decoration:none;transition:color .15s var(--ease)}
.wfa-breadcrumb a:hover{color:var(--text-strong)}
.wfa-breadcrumb i{font-style:normal;color:var(--wfa-line-hi)}
.wfa-breadcrumb span{color:var(--muted-2)}

.wfa-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:2.2rem;align-items:stretch;min-height:0;padding:2.75rem 24px 3.25rem;max-width:var(--max);margin:0 auto}
.wfa-hero-copy{flex:1 1 58%;max-width:640px}
.wfa-hero-copy h1{font:800 clamp(2rem,4.4vw,3.2rem)/1.06 var(--display);letter-spacing:-.025em;margin:.65rem 0 1rem;color:var(--text-strong);text-wrap:balance}
.wfa-hero-copy h1 em{color:var(--cyan-hi)}
.wfa-lede{font:400 1.12rem/1.65 var(--body);color:#aebdc5;margin:0 0 1.6rem;max-width:56ch}
.wfa-outcome{font:700 1rem/1.45 var(--body);color:var(--text-strong);margin:-.55rem 0 1.45rem;padding-left:1rem;border-left:2px solid var(--cyan-hi);max-width:52ch}
.wfa-hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:2.2rem}
.wfa-hero-actions .button{font-size:.78rem;letter-spacing:.045em;padding:.95rem 1.15rem}
.wfa-hero-proof{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;border-top:1px solid var(--wfa-line);padding-top:1.1rem}
.wfa-hero-proof span{font:700 .78rem var(--body);letter-spacing:.025em;color:var(--text-strong)}

.wfa-hero-visual{position:relative;min-height:440px;overflow:hidden;border-left:1px solid var(--wfa-line-hi);background:#071014}
.wfa-hero-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,6,8,.38),transparent 36%),linear-gradient(0deg,rgba(3,6,8,.95),transparent 48%);pointer-events:none}
.wfa-hero-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 26%;filter:saturate(.86) contrast(1.04)}
.wfa-hero-note{position:absolute;z-index:1;left:1.35rem;right:1.35rem;bottom:1.3rem;padding-left:1rem;border-left:2px solid var(--cyan-hi)}
.wfa-hero-note .micro{font-size:.72rem;letter-spacing:.055em;color:var(--text-strong)}
.wfa-hero-note p{font:600 1rem/1.42 var(--body);color:var(--text-strong);margin:.45rem 0 0;max-width:35ch}

/* Encuadre — cinco límites del sprint */
.wfa-band{background:var(--panel);border-top:1px solid var(--wfa-line);border-bottom:1px solid var(--wfa-line)}
.wfa-constraints{max-width:var(--max);margin:0 auto;padding:3rem 24px;display:grid;grid-template-columns:repeat(5,1fr);gap:1.6rem}
.wfa-constraints>div{border-left:1px solid var(--wfa-line-hi);padding-left:1.1rem}
.wfa-constraints b{display:block;font:800 1.1rem/1 var(--mono);color:var(--cyan-hi)}
.wfa-constraints span{display:block;font:700 .62rem/1.35 var(--mono);letter-spacing:.08em;color:var(--text-strong);margin:.5rem 0 .4rem;text-transform:uppercase}
.wfa-constraints p{font:400 .84rem/1.5 var(--body);color:var(--muted-2);margin:0}

.wfa-sec{max-width:var(--max);margin:0 auto;padding:4.5rem 24px;scroll-margin-top:88px}
.wfa-sec-head{max-width:780px;margin-bottom:2.4rem}
.wfa-sec-head h2{font:800 clamp(1.6rem,3vw,2.15rem)/1.15 var(--display);letter-spacing:-.02em;color:var(--text-strong);margin:.6rem 0 .8rem}
.wfa-sec-head p{font:400 1.05rem/1.6 var(--body);color:var(--muted);margin:0}
.wfa-sec.inverted{background:var(--panel);border-top:1px solid var(--wfa-line);border-bottom:1px solid var(--wfa-line);max-width:none;padding-left:24px;padding-right:24px}
.wfa-sec.inverted>.wfa-sec-head,.wfa-sec.inverted>.wfa-steps,.wfa-sec.inverted>.wfa-grid,.wfa-sec.inverted>.wfa-anti{max-width:var(--max);margin-left:auto;margin-right:auto}

.wfa-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.wfa-cell{background:var(--wfa-card);border:1px solid var(--wfa-line);border-radius:12px;padding:1.5rem 1.6rem}
.wfa-cell h3{font:700 1.15rem/1.25 var(--display);color:var(--text-strong);margin:.4rem 0 .6rem}
.wfa-cell p{font:400 .95rem/1.55 var(--body);color:var(--muted);margin:0 0 1rem}
.wfa-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.wfa-list li{font:400 .92rem/1.5 var(--body);color:var(--muted);padding-left:1.15rem;position:relative}
.wfa-list li::before{content:"";position:absolute;left:0;top:.55rem;width:.45rem;height:.45rem;background:var(--cyan);border-radius:1px}
.wfa-list li b{color:var(--text-strong);font-weight:700}

/* Proceso — pasos del sprint */
.wfa-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1.1rem}
.wfa-step{background:var(--wfa-card-2);border:1px solid var(--wfa-line);border-radius:12px;padding:1.3rem 1.2rem}
.wfa-step h3{font:700 1rem/1.3 var(--display);color:var(--text-strong);margin:.45rem 0 .5rem}
.wfa-step p{font:400 .86rem/1.55 var(--body);color:var(--muted);margin:0}

/* Módulo ejemplo */
.wfa-module{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.wfa-module>div{background:var(--wfa-card);border:1px solid var(--wfa-line);border-radius:12px;padding:1.5rem 1.6rem}
.wfa-module h3{font:700 1.1rem/1.3 var(--display);color:var(--text-strong);margin:0 0 .6rem}
.wfa-module p{font:400 .93rem/1.6 var(--body);color:var(--muted);margin:0 0 .4rem}
.wfa-module .text-link{margin-top:1rem}

.wfa-anti{background:rgba(200,139,112,.08);border:1px solid rgba(200,139,112,.35);border-radius:10px;padding:.9rem 1.1rem;margin-top:2rem;max-width:var(--max)}
.wfa-anti b{display:block;color:var(--wfa-warm);margin-bottom:.25rem;font:700 .72rem var(--mono);letter-spacing:.05em;text-transform:uppercase}
.wfa-anti p{font:400 .9rem/1.55 var(--body);color:var(--muted);margin:0}

.wfa-cta{max-width:var(--max);margin:0 auto;padding:5rem 24px;text-align:center;scroll-margin-top:88px}
.wfa-cta h2{font:800 clamp(1.7rem,3.4vw,2.4rem)/1.2 var(--display);letter-spacing:-.02em;color:var(--text-strong);margin:.8rem auto 1rem;max-width:24ch}
.wfa-cta p{font:400 1rem/1.6 var(--body);color:var(--muted);max-width:620px;margin:0 auto 1.6rem}
.wfa-cta-actions{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}
.wfa-cta .button{font-size:1.02rem;padding:1rem 1.6rem}

/* ---------- MÓVIL ---------- */
@media (max-width:1100px){
  .wfa-steps{grid-template-columns:repeat(3,1fr)}
  .wfa-constraints{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .wfa-hero{grid-template-columns:1fr;gap:2rem;padding:2.5rem 24px 3.5rem}
  .wfa-hero-copy{max-width:none}
  .wfa-hero-visual{min-height:520px;border-left:0;border-top:1px solid var(--wfa-line-hi)}
  .wfa-grid{grid-template-columns:1fr}
  .wfa-module{grid-template-columns:1fr}
  .wfa-sec{padding:3.5rem 24px}
  .wfa-sec.inverted{padding-top:3.5rem;padding-bottom:3.5rem}
  .wfa-cta{padding:4rem 24px}
}
@media (max-width:600px){
  .wfa-hero{padding:2.5rem 20px 3.5rem}
  .wfa-page .eyebrow{font-size:.62rem;line-height:1.5;letter-spacing:.065em}
  .wfa-hero-copy h1{font-size:clamp(2.15rem,10vw,2.65rem);line-height:1.07}
  .wfa-hero-proof{display:none}
  .wfa-constraints{grid-template-columns:1fr 1fr;gap:1.2rem;padding:2.4rem 20px}
  .wfa-steps{grid-template-columns:1fr}
  .wfa-sec{padding:3rem 20px}
  .wfa-sec.inverted{padding-top:3rem;padding-bottom:3rem}
  .wfa-cta{padding:3.5rem 20px}
  .wfa-hero-actions{flex-direction:column;margin-bottom:0}
  .wfa-hero-actions .button{width:100%;text-align:center;font-size:.76rem;letter-spacing:.035em;padding:1rem .8rem}
  .wfa-hero-visual{min-height:460px}
  .wfa-cta-actions{flex-direction:column}
  .wfa-cta-actions .button{width:100%;text-align:center}
}
