/* ============================================
   racowski.com: sistema "consola del operador"
   CSS no critico (below the fold). Tokens en :root (index.html).
   ============================================ */

/* ===== ROUTER DE DOLORES ===== */
.offers{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(282px,1fr));
  gap:20px;margin-top:44px
}
.offer{
  display:flex;flex-direction:column;gap:14px;height:100%;
  background:var(--card);border:1px solid var(--line);padding:32px;
  transition:border-color .2s ease,transform .2s ease
}
.offer:hover{border-color:var(--gold);transform:translateY(-4px)}
/* Lleva el nombre del producto, no una categoría: "low ticket" o "membresía"
   son jerga de infoproductos que el lector no usa. Tracking bajo porque va en
   caja normal; el 0.1em anterior estaba calibrado para mayúsculas. */
.offer-idx{font-family:var(--mono);font-size:13px;letter-spacing:0.01em;color:var(--gold);line-height:1.35}
.offer-pain{font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-0.01em;color:var(--t1)}
.offer-sol{font-size:15px;line-height:1.6;color:var(--muted)}
.offer-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px}
.offer-price{font-family:var(--mono);font-size:14px;color:var(--t-high)}
.offer .arrow{font-size:20px;color:var(--faint);transition:color .2s ease,transform .2s ease}
.offer:hover .arrow{color:var(--gold);transform:translateX(4px)}
.offer-anchor{grid-column:1/-1;border-color:rgba(201,162,62,.45)}
.offer-anchor .offer-pain{font-size:21px}
.router-note{margin-top:28px;font-size:15px;color:var(--muted)}
.router-note a{color:var(--gold);border-bottom:1px solid rgba(201,162,62,.4);transition:border-color .15s ease}
.router-note a:hover{border-color:var(--gold)}

/* ===== LA ESCADA ===== */
.ladder{list-style:none;margin-top:44px;border-top:1px solid var(--line)}
.rung{
  display:grid;grid-template-columns:44px 1fr auto;gap:24px;align-items:center;
  padding:22px 4px;border-bottom:1px solid var(--line)
}
.rung-n{font-family:var(--mono);font-size:15px;color:var(--faint)}
.rung-body{display:grid;gap:4px;min-width:0}
.rung-title{font-size:18px;font-weight:700;letter-spacing:-0.01em;color:var(--t1)}
.rung-desc{font-size:14.5px;color:var(--muted);line-height:1.55}
.rung-price{font-family:var(--mono);font-size:14px;color:var(--t-high);white-space:nowrap}
@media(max-width:540px){
  .rung{grid-template-columns:32px 1fr;gap:14px;row-gap:6px}
  .rung-price{grid-column:2;justify-self:start;color:var(--gold)}
}

/* ===== QUIEN SOY ===== */
.autor-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:start}
.autor-photo img{width:100%;border:1px solid var(--line);object-fit:cover}
.autor-bio .section-title{margin-bottom:24px}
.autor-bio p{font-size:17px;line-height:1.75;color:var(--t-high);margin-bottom:18px}
.autor-bio p:last-child{margin-bottom:0}
.autor-bio strong{color:var(--gold);font-weight:700}
@media(min-width:900px){
  .autor-grid{grid-template-columns:0.8fr 1fr;gap:56px}
  .autor-photo{position:sticky;top:96px}
}

/* ===== CONTENIDO GRATUITO + CAPTURA ===== */
.free-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;margin-top:44px
}
.free-card{
  display:flex;flex-direction:column;gap:10px;
  background:var(--ink);border:1px solid var(--line);padding:28px;
  transition:border-color .2s ease,transform .2s ease
}
.free-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.free-k{font-family:var(--mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold)}
.free-t{font-size:18px;font-weight:700;letter-spacing:-0.01em;color:var(--t1)}
.free-d{font-size:14.5px;color:var(--muted);line-height:1.55}

.capture{
  margin-top:40px;background:var(--ink);border:1px solid var(--line);
  padding:clamp(28px,4vw,40px);display:grid;gap:22px
}
.capture-title{display:block;font-size:clamp(20px,2.4vw,24px);font-weight:800;letter-spacing:-0.01em;margin-bottom:6px}
.capture-sub{display:block;font-size:15px;color:var(--muted);line-height:1.6;max-width:52ch}
.capture-row{display:flex;flex-wrap:wrap;gap:10px}
.field{
  flex:1;min-width:220px;background:var(--ink);color:var(--t1);
  border:1px solid var(--line);padding:15px 16px;font-size:16px;font-family:var(--sans);
  transition:border-color .15s ease
}
.field::placeholder{color:var(--faint)}
.field:focus{border-color:var(--gold);outline:2px solid var(--gold);outline-offset:3px}
/* El estado vive debajo del campo y solo ocupa lugar cuando dice algo, para que
   la caja no salte al aparecer el mensaje. */
.capture-status{font-size:14px;line-height:1.5;margin-top:12px}
.capture-status:empty{display:none}
.capture-status[data-estado="ok"]{color:var(--gold)}
.capture-status[data-estado="error"]{color:#F08B7A}
.capture[data-enviando="1"] .field,
.capture[data-enviando="1"] .cta{opacity:.6;pointer-events:none}

@media(min-width:760px){
  .capture{grid-template-columns:1fr auto;align-items:center;gap:32px}
  .capture-row{flex-wrap:nowrap}
  .capture-status{grid-column:1/-1;margin-top:0}
}

/* ===== B2B / EMPRESAS ===== */
.b2b{background:var(--raised);border:1px solid var(--line);padding:clamp(32px,5vw,56px)}
.b2b .section-title{max-width:20ch}
.b2b-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px;margin:36px 0 8px;background:var(--line);border:1px solid var(--line)
}
.b2b-item{background:var(--raised);padding:28px}
.b2b-t{display:block;font-size:18px;font-weight:700;letter-spacing:-0.01em;margin-bottom:10px;color:var(--t1)}
.b2b-item p{font-size:15px;color:var(--muted);line-height:1.6}
.cta-b2b{margin-top:32px}

/* ===== FAQ ===== */
.faq{margin-top:40px;display:grid;gap:8px}
.faq-item{background:var(--ink);border:1px solid var(--line);transition:border-color .2s ease}
.faq-item[open]{border-color:var(--gold)}
.faq-q{
  position:relative;padding:22px 60px 22px 26px;font-size:17px;font-weight:600;
  cursor:pointer;list-style:none;user-select:none;color:var(--t1)
}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{
  content:"+";position:absolute;right:24px;top:50%;transform:translateY(-50%);
  font-size:28px;font-weight:400;color:var(--gold);transition:transform .2s ease
}
.faq-item[open] .faq-q::after{content:"\2212"}
.faq-a{padding:0 26px 24px}
.faq-a p{color:var(--muted);line-height:1.7}

/* ===== CTA FINAL ===== */
.final{text-align:center;padding:clamp(80px,12vw,128px) 0}
.final-title{font-size:clamp(30px,5vw,52px);font-weight:800;line-height:1.08;letter-spacing:-0.02em;margin-bottom:16px;text-wrap:balance}
.final-lead{font-size:clamp(17px,2vw,20px);color:var(--muted);margin-bottom:34px;max-width:46ch;margin-left:auto;margin-right:auto}
.cta-large{padding:22px 48px;font-size:18px}

/* ===== FOOTER ===== */
.footer{border-top:1px solid var(--dim);padding:40px 0 30px}
.footer-grid{display:grid;gap:18px;align-items:center}
.footer-brand{font-size:16px;font-weight:700;letter-spacing:-0.02em}
.footer-brand .dot{color:var(--gold)}
.footer-meta{display:flex;flex-wrap:wrap;gap:18px;font-size:14px;color:var(--muted)}
.footer-meta a{transition:color .15s ease}
.footer-meta a:hover{color:var(--gold)}
.footer-legal{margin-top:22px;font-size:13px;color:var(--faint)}
@media(min-width:700px){
  .footer-grid{grid-template-columns:1fr auto}
  .footer-meta{justify-content:flex-end}
}

/* ===== PÁGINAS LEGALES =====
   Texto largo para leer, no para escanear: medida corta, interlineado alto y
   cuerpo en el tono claro (no el apagado), que sobre fondo negro es lo que
   sostiene el contraste en párrafos largos. */
.legal{padding:120px 0 96px}
.legal-head{border-bottom:1px solid var(--line);padding-bottom:28px;margin-bottom:36px}
.legal h1{font-size:clamp(28px,4vw,42px);font-weight:800;line-height:1.12;letter-spacing:-0.02em;text-wrap:balance}
.legal-meta{margin-top:14px;font-family:var(--mono);font-size:13px;color:var(--faint)}
.legal-lang{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.legal-lang a{border:1px solid var(--line);padding:7px 14px;font-size:13px;font-weight:600;color:var(--muted);transition:border-color .15s ease,color .15s ease}
.legal-lang a:hover{border-color:var(--gold);color:var(--t1)}
.legal-lang a[aria-current="true"]{border-color:var(--gold);color:var(--t1)}

.legal-toc{border:1px solid var(--line);padding:24px 26px;margin-bottom:44px}
.legal-toc h2{font-size:13px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.legal-toc ol{list-style:none;counter-reset:toc;display:grid;gap:7px}
.legal-toc li{counter-increment:toc;font-size:14.5px}
.legal-toc li::before{content:counter(toc,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--faint);margin-right:12px}
.legal-toc a{color:var(--muted);border-bottom:1px solid transparent;transition:color .15s ease,border-color .15s ease}
.legal-toc a:hover{color:var(--gold);border-bottom-color:var(--gold)}

.legal-body{max-width:72ch}
.legal-body h2{font-size:clamp(20px,2.4vw,26px);font-weight:800;letter-spacing:-0.01em;line-height:1.2;margin:48px 0 16px;scroll-margin-top:96px}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{font-size:20px;font-weight:700;letter-spacing:-0.01em;margin:30px 0 10px;color:var(--t1)}
.legal-body p{font-size:16px;line-height:1.75;color:var(--t-high);margin-bottom:16px;text-wrap:pretty}
.legal-body ul,.legal-body ol{margin:0 0 18px 0;padding-left:22px;display:grid;gap:9px}
.legal-body li{font-size:16px;line-height:1.7;color:var(--t-high)}
.legal-body strong{color:var(--t1);font-weight:700}
.legal-body a{color:var(--gold);border-bottom:1px solid rgba(201,162,62,.4);transition:border-color .15s ease}
.legal-body a:hover{border-color:var(--gold)}
.legal-body table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:14.5px}
.legal-body th,.legal-body td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top;color:var(--t-high)}
.legal-body th{background:var(--card);color:var(--t1);font-weight:700;font-size:13.5px}
.legal-scroll{overflow-x:auto}
.legal-note{border:1px solid var(--line);background:var(--card);padding:20px 22px;margin:0 0 22px}
.legal-note p:last-child{margin-bottom:0}
.legal-body .updated{font-family:var(--mono);font-size:13px;color:var(--faint)}

@media(max-width:560px){
  .legal{padding:104px 0 72px}
  .legal-body table{font-size:13.5px}
  .legal-body th,.legal-body td{padding:9px 10px}
}

/* ===== ACCESIBILIDAD: REDUCED MOTION ===== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important
  }
}