/* ============================================================
   MOBILE.CSS · Optimización móvil (capa aditiva)
   Sindicato v8 — se carga DESPUÉS de styles.css.
   No reescribe nada: afina layout, legibilidad, tap targets
   y form en pantallas ≤768px. Adaptado a la versión paper real.
   ============================================================ */

/* 0 · Guard anti-scroll-horizontal + tap highlight */
@media (max-width:768px){
  html, body{ max-width:100%; overflow-x:hidden; }
  *{ -webkit-tap-highlight-color: rgba(232,93,60,0.18); }
  img, video, svg, table, .cmp-table, .cc-window{ max-width:100%; }
  :target{ scroll-margin-top:78px; }
  section[id]{ scroll-margin-top:70px; }
}

/* 1 · Tipografía e interlínea más legibles en celular */
@media (max-width:560px){
  .hero-headline{ font-size:clamp(28px,8.4vw,40px); line-height:1.04; letter-spacing:-0.02em; }
  .hero-sub{ font-size:16px; line-height:1.55; }
  .hero-eyebrow{ font-size:10.5px; gap:8px; flex-wrap:wrap; }
  .sec-head h2{ line-height:1.02; }
  .lead-mixed, .dn-text, .ext-copy{ font-size:15px; line-height:1.6; }
}

/* 2 · Tap targets ≥44px (accesibilidad táctil) */
@media (max-width:768px){
  .btn{ min-height:48px; }
  .btn-sm{ min-height:44px; }
  .hero-ctas{ width:100%; gap:10px; }
  .hero-ctas .btn{ flex:1 1 100%; justify-content:space-between; }
  .nav-links a{ display:block; padding:10px 0; font-size:15px; }
  .nav-toggle{ width:44px; height:44px; }
  .dn-consent{ padding:6px 0; }
  .dn-consent input{ width:20px; height:20px; }
}

/* 3 · Ritmo vertical: secciones menos aireadas en móvil */
@media (max-width:560px){
  .cmp-sec, .ext-sec, .cc-sec, .setup-sec, .price-sec, .faq-sec{
    padding-top:64px; padding-bottom:64px;
  }
  .sec-head{ margin-bottom:24px; }
  .hero{ padding:44px 0 56px; }
}

/* 4 · Form (demo): una columna, inputs cómodos, sin zoom iOS */
@media (max-width:560px){
  .dn-grid{ grid-template-columns:1fr; gap:12px; }
  .dn-form .lf input, .dn-form .lf textarea{ font-size:16px; padding:13px 14px; }
  .dn-form .lf textarea{ min-height:96px; }
}

/* 5 · Control Center: la ventana densa, contenida */
@media (max-width:560px){
  .cc-main{ padding:18px 16px; }
  .cc-kpis{ grid-template-columns:1fr 1fr !important; gap:12px; }
  .cc-table-head, .cc-row{ font-size:11px; }
}

/* 6 · Comparador y extensiones: respiro al apilar */
@media (max-width:560px){
  .cmp-row .cmp-cell{ padding:11px 16px; }
  .cmp-cell.cmp-v{ font-size:13.5px; }
}

/* 7 · Pricing custom: sin desbordes */
@media (max-width:560px){
  .price-card.custom{ text-align:left; }
}

/* 8 · Hero background word: que no genere scroll lateral */
@media (max-width:768px){
  .hero-bgword{ font-size:clamp(120px,40vw,220px); }
}