/* FlowProp V2 Editorial — estilos compartidos (home + servicios + casos + blog) */

body { background: #fff; color: var(--text-body); font-family: var(--font-sans); }

/* Nav compartido */
.fp-nav {
  position: sticky; top: 0; z-index: 50;
  height: 64px; display: flex; align-items: center; padding: 0 40px;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid var(--gray-900);
}
.fp-logo { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; display: flex; align-items: center; }
.fp-logo img { height: 40px; width: auto; display: block; }
.fp-logo .mark { background: var(--accent-500); color: #fff; padding: 2px 6px; margin: 0 2px; }
.fp-nav-links { margin-left: auto; display: flex; gap: 32px; font-size: 13px; font-family: var(--font-mono); color: var(--text-body); text-transform: uppercase; letter-spacing: 0.05em; align-items: center; }
.fp-nav-links a { color: inherit; }
.fp-nav-links a:hover { color: var(--accent-500); }
.fp-nav-links .cta { color: var(--accent-500); font-weight: 600; }

/* Sección base */
.fp-section { padding: 120px 40px; border-bottom: 1px solid var(--border); }
.fp-section-sm { padding: 80px 40px; border-bottom: 1px solid var(--border); }
.fp-container { max-width: 1200px; margin: 0 auto; }
.fp-container-narrow { max-width: 820px; margin: 0 auto; }

/* Eyebrow editorial */
.fp-eye { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-primary); }
.fp-eye-accent { color: var(--accent-500); }

/* Serif italic utility (ideal para editorial) */
.fp-serif { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; }

/* Titulares editoriales */
.fp-h1 { font-size: clamp(56px, 9vw, 128px); line-height: 0.92; letter-spacing: -0.05em; font-weight: 600; color: var(--text-primary); }
.fp-h2 { font-size: clamp(36px, 5vw, 72px); line-height: 0.98; letter-spacing: -0.04em; font-weight: 600; color: var(--text-primary); }
.fp-h3 { font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; color: var(--text-primary); }

/* Botones */
.fp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; border: none; border-radius: 0; }
.fp-btn-primary { background: var(--accent-500); color: #fff; }
.fp-btn-primary:hover { background: var(--accent-600); }
.fp-btn-ghost { background: transparent; color: var(--text-primary); border-bottom: 1px solid var(--text-primary); padding-left: 2px; padding-right: 2px; }

/* Breadcrumb */
.fp-crumbs { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; display: flex; gap: 10px; align-items: center; }
.fp-crumbs a { color: inherit; }
.fp-crumbs a:hover { color: var(--accent-500); }

/* Prose para body de artículos/servicios */
.fp-prose { font-size: 18px; line-height: 1.65; color: var(--text-body); max-width: 680px; }
.fp-prose h2 { font-size: clamp(28px, 3vw, 40px); margin: 64px 0 16px; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.15; }
.fp-prose h3 { font-size: 22px; margin: 40px 0 12px; color: var(--text-primary); letter-spacing: -0.01em; }
.fp-prose p { margin: 0 0 20px; }
.fp-prose ul, .fp-prose ol { margin: 0 0 20px 0; padding-left: 22px; }
.fp-prose li { margin-bottom: 8px; }
.fp-prose a { color: var(--accent-500); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fp-prose code { font-family: var(--font-mono); font-size: 15px; background: var(--gray-100); padding: 2px 6px; border-radius: 3px; }
.fp-prose blockquote { border-left: 3px solid var(--accent-500); margin: 32px 0; padding: 4px 0 4px 24px; font-style: italic; font-family: Georgia, serif; font-size: 22px; line-height: 1.4; color: var(--text-primary); }

/* Footer */
.fp-footer { background: var(--gray-1000); color: var(--gray-400); padding: 80px 40px 32px; }
.fp-footer-title { font-size: clamp(56px, 10vw, 148px); font-weight: 600; color: #fff; letter-spacing: -0.05em; line-height: 1; }
.fp-footer-title span { color: var(--accent-500); }
.fp-footer-bottom { display: flex; justify-content: space-between; margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.1); font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.fp-footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 48px; }
.fp-footer-cols h4 { color: #fff; font-size: 12px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; font-weight: 500; }
.fp-footer-cols ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.fp-footer-cols a { color: var(--gray-400); font-size: 14px; }
.fp-footer-cols a:hover { color: var(--accent-500); }

/* FAQ */
.fp-faq-item { border-top: 1px solid var(--gray-900); }
.fp-faq-item button { width: 100%; background: none; border: none; padding: 24px 0; display: grid; grid-template-columns: 60px 1fr 40px; align-items: center; cursor: pointer; font-family: var(--font-sans); text-align: left; gap: 24px; }
.fp-faq-item .n { font-family: var(--font-mono); font-size: 12px; color: var(--accent-500); }
.fp-faq-item .q { font-size: 22px; font-weight: 500; color: var(--text-primary); letter-spacing: -0.01em; }
.fp-faq-item .toggle { color: var(--text-muted); font-size: 24px; justify-self: end; transition: transform 180ms; font-weight: 300; }
.fp-faq-item.open .toggle { transform: rotate(45deg); }
.fp-faq-item .a { padding: 0 0 24px 84px; font-size: 16px; color: var(--text-body); line-height: 1.6; max-width: 680px; display: none; }
.fp-faq-item.open .a { display: block; }

/* Tags técnicos */
.fp-tag { font-family: var(--font-mono); font-size: 11px; padding: 3px 8px; border: 1px solid var(--border); color: var(--text-muted); background: var(--gray-50); }

/* Métrica grande */
.fp-metric { }
.fp-metric .k { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.fp-metric .v { font-size: 48px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.04em; line-height: 1; margin-top: 8px; font-variant-numeric: tabular-nums; }
.fp-metric .u { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); margin-left: 6px; }

/* === MODAL DIAGNÓSTICO (popup flotante compacto) === */
.fp-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; }
.fp-modal[hidden] { display: none; }
.fp-modal-backdrop { position: absolute; inset: 0; background: rgba(9, 9, 11, 0.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fpFade 240ms var(--ease-out, cubic-bezier(0.2,0,0,1)); }
.fp-modal-card {
  position: relative; background: #fff;
  border-radius: 16px;
  width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto;
  box-shadow: 0 32px 64px rgba(0,0,0,0.28), 0 12px 24px rgba(0,0,0,0.16);
  animation: fpRise 280ms var(--ease-out, cubic-bezier(0.2,0,0,1));
}
.fp-modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gray-100); border: none; color: var(--text-muted);
  font-size: 18px; line-height: 1; cursor: pointer; z-index: 1;
  transition: background 140ms, color 140ms; font-family: var(--font-sans);
}
.fp-modal-close:hover { background: var(--gray-200); color: var(--text-primary); }

.fp-modal-head { padding: 24px 28px 12px; }
.fp-modal-eye { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-500); margin-bottom: 10px; }
.fp-modal-title { font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 6px; font-weight: 700; }
.fp-modal-sub { font-size: 13px; color: var(--text-body); line-height: 1.45; margin: 0; }

.fp-modal-form { padding: 4px 28px 22px; display: flex; flex-direction: column; gap: 12px; }
.fp-honey { position: absolute; left: -9999px; visibility: hidden; }

.fp-field { display: flex; flex-direction: column; gap: 5px; }
.fp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fp-field-label { font-size: 12px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.005em; }
.fp-field-hint { color: var(--text-muted); font-weight: 400; font-size: 11px; margin-left: 4px; }
.fp-field input[type="text"], .fp-field input[type="email"], .fp-field input[type="tel"], .fp-field select, .fp-field textarea {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: #fff; font-family: var(--font-sans); font-size: 13px; color: var(--text-primary);
  transition: border-color 120ms, box-shadow 120ms; box-sizing: border-box;
}
.fp-field input:hover, .fp-field select:hover, .fp-field textarea:hover { border-color: var(--border-strong); }
.fp-field input:focus, .fp-field select:focus, .fp-field textarea:focus { outline: none; border-color: var(--accent-500); box-shadow: 0 0 0 3px rgba(255,106,0,0.18); }
.fp-field textarea { resize: none; min-height: 52px; font-family: var(--font-sans); line-height: 1.4; }
.fp-field select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' width='12' height='8'><path fill='%2371717a' d='M6 8L0 0h12z'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }

.fp-check-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fp-check {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); cursor: pointer; font-size: 12.5px; color: var(--text-body);
  transition: border-color 140ms, background 140ms; user-select: none;
  line-height: 1.25;
}
.fp-check:hover { border-color: var(--gray-700); background: var(--gray-50); }
.fp-check input { accent-color: var(--accent-500); width: 13px; height: 13px; margin: 0; cursor: pointer; flex-shrink: 0; }
.fp-check:has(input:checked) { border-color: var(--accent-500); background: var(--accent-50); color: var(--text-primary); font-weight: 500; }

.fp-modal-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.fp-modal-submit {
  width: 100%; justify-content: center; padding: 12px 22px;
  background: var(--accent-500); color: #fff; border: none; border-radius: 10px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
  cursor: pointer; transition: background 140ms;
}
.fp-modal-submit:hover { background: var(--accent-600); }
.fp-modal-submit:disabled { opacity: 0.6; cursor: wait; }
.fp-modal-legal { font-size: 11px; color: var(--text-muted); text-align: center; margin: 0; line-height: 1.4; }
.fp-modal-legal a { color: var(--accent-500); text-decoration: underline; text-underline-offset: 2px; }

.fp-modal-success { text-align: center; padding: 20px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fp-modal-success[hidden] { display: none; }
.fp-modal-success-eye { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-500); }
.fp-modal-success h3 { font-size: 22px; letter-spacing: -0.02em; margin: 0; color: var(--text-primary); font-weight: 700; }
.fp-modal-success p { font-size: 13px; color: var(--text-body); margin: 0; max-width: 360px; line-height: 1.5; }
.fp-modal-success .fp-btn-ghost { margin-top: 4px; padding: 8px 18px; border-radius: 8px; border: 1px solid var(--border); font-size: 12px; background: transparent; cursor: pointer; }
.fp-modal-success .fp-btn-ghost:hover { border-color: var(--gray-900); }

/* Animaciones */
@keyframes fpFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fpRise { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Responsive modal */
@media (max-width: 640px) {
  .fp-modal { padding: 10px; }
  .fp-modal-card { max-height: calc(100vh - 20px); border-radius: 12px; }
  .fp-modal-head { padding: 20px 20px 10px; }
  .fp-modal-title { font-size: 20px; }
  .fp-modal-form { padding: 4px 20px 18px; gap: 10px; }
  .fp-field-row { grid-template-columns: 1fr; gap: 10px; }
  .fp-check-grid { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   MOBILE / TABLET — Optimización global
   Ataca patrones de style inline (grids, paddings, fonts) por substring,
   evita tocar los 22 HTML. Orden: tablet (≤900) → mobile (≤640) → xs (≤380).
   ===================================================================== */

/* TABLET ≤ 900px */
@media (max-width: 900px) {
  .fp-section { padding: 80px 24px; }
  .fp-section-sm { padding: 56px 24px; }
  .fp-nav { padding: 0 20px; }
  .fp-footer { padding: 64px 24px 28px; }
  .fp-footer-cols { grid-template-columns: repeat(2, 1fr); gap: 28px; }

  /* Sidebar de sección (eyebrow 260px + content 1fr) → stack */
  [style*="grid-template-columns:260px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  [style*="grid-template-columns: 260px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Banda de métricas / cards 4 col → 2x2 */
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Cards 3 col → stack */
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Hero / ROI / CTA 1fr 1fr → stack */
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  [style*="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Cards de servicios (80px / 260px / 1fr / 280px) → stack vertical */
  [style*="grid-template-columns:80px 260px 1fr 280px"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 24px 0 !important;
  }

  /* Subhero alineado con margen lateral grande → 0 en mobile */
  [style*="margin-left:340px"] { margin-left: 0 !important; }

  /* Gaps masivos */
  [style*="gap:80px"] { gap: 32px !important; }

  /* Paddings inline grandes en cards / secciones */
  [style*="padding:48px 40px"] { padding: 32px 24px !important; }
  [style*="padding:40px 32px"] { padding: 28px 20px !important; }
  [style*="padding:48px 40px;border-top"] { padding: 32px 24px !important; }
  [style*="padding:64px 40px"] { padding: 40px 24px !important; }

  /* Números gigantes en cards */
  [style*="font-size:64px"] { font-size: 48px !important; }

  /* Cards de casos altura mínima desktop */
  [style*="min-height:320px"] { min-height: 0 !important; }

  /* Header bar superior del hero (mono span con flex space-between) */
  .fp-section > .fp-container > div[style*="justify-content:space-between"][style*="font-family:var(--font-mono)"] {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
}

/* MOBILE ≤ 640px */
@media (max-width: 640px) {
  .fp-section { padding: 56px 18px; }
  .fp-section-sm { padding: 40px 18px; }

  /* Nav: solo logo + CTA, los enlaces medios se ocultan */
  .fp-nav { padding: 0 16px; height: 56px; }
  .fp-nav-links { gap: 12px; font-size: 12px; }
  .fp-nav-links a:not(.cta) { display: none; }
  .fp-nav-links .cta {
    padding: 8px 14px;
    border: 1px solid var(--accent-500);
    border-radius: 4px;
    font-size: 11px;
  }
  .fp-logo img { height: 32px; }

  /* Tipografía body */
  .fp-h3 { font-size: 22px; line-height: 1.15; }
  .fp-prose { font-size: 16px; line-height: 1.6; }
  .fp-prose h2 { font-size: 26px; margin: 40px 0 12px; }
  .fp-prose h3 { font-size: 19px; margin: 28px 0 10px; }
  .fp-prose blockquote {
    font-size: 18px; padding: 4px 0 4px 16px; margin: 24px 0;
  }

  /* Crumbs */
  .fp-crumbs { font-size: 11px; gap: 6px; flex-wrap: wrap; }

  /* Botones tap-target ≥44px */
  .fp-btn { padding: 14px 20px; min-height: 44px; }

  /* FAQ */
  .fp-faq-item button {
    grid-template-columns: 32px 1fr 24px; gap: 12px; padding: 18px 0;
  }
  .fp-faq-item .q { font-size: 16px; line-height: 1.3; }
  .fp-faq-item .a { padding: 0 0 18px 44px; font-size: 14px; }

  /* Métricas */
  .fp-metric .v { font-size: 36px !important; }

  /* Footer 2 col → mantener pero más compacto, bottom en columna */
  .fp-footer { padding: 48px 18px 24px; }
  .fp-footer-cols { grid-template-columns: 1fr 1fr; gap: 20px; }
  .fp-footer-bottom {
    flex-direction: column; gap: 8px; align-items: flex-start;
  }
  .fp-footer-cols a { font-size: 13px; }

  /* Inline overrides — más fuertes que en tablet */
  [style*="font-size:64px"] { font-size: 40px !important; }
  [style*="gap:80px"] { gap: 24px !important; }
  [style*="padding:48px 40px"] { padding: 24px 18px !important; }
  [style*="padding:40px 32px"] { padding: 24px 18px !important; }

  /* Banda métricas 4 col en mobile sigue siendo 2x2 (legible) */

  /* Subhero del hero servicios alineado con padding interior */
  [style*="margin-left:340px"] { margin-left: 0 !important; }

  /* Hero párrafos largos: limitar font-size */
  p[style*="font-size:22px"] { font-size: 18px !important; line-height: 1.45 !important; }
  p[style*="font-size:20px"] { font-size: 17px !important; }
  p[style*="font-size:19px"] { font-size: 17px !important; }
  p[style*="font-size:18px"] { font-size: 16px !important; }
  h2[style*="font-size:clamp(22px,2.6vw,32px)"] { font-size: 20px !important; }

  /* Foto perfil sobre-flowprop: ancho completo para verla bien */
  img[alt*="Raúl Yuste"] {
    width: 180px !important; height: 180px !important;
  }

  /* CTA finales naranjas: párrafo + botón en columna */
  section[style*="background:var(--accent-500)"] > .fp-container > div[style*="display:flex"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  /* Bloque trayectoria: tags wrap con menos gap */
  .fp-tag { font-size: 10px; padding: 2px 6px; }

  /* Imágenes: nunca overflow */
  img { max-width: 100%; height: auto; }

  /* Tablas / blocks que pueden desbordar (code samples) */
  pre, .code, table { overflow-x: auto; max-width: 100%; }
}

/* MOBILE XS ≤ 380px */
@media (max-width: 360px) {
  .fp-section { padding: 48px 14px; }
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  .fp-footer-cols { grid-template-columns: 1fr; }
  .fp-h3 { font-size: 20px; }
  [style*="font-size:64px"] { font-size: 36px !important; }
  .fp-metric .v { font-size: 32px !important; }
  /* H1 y H2 más conservadores en pantallas pequeñas */
  .fp-h1 { font-size: clamp(40px, 11vw, 64px); }
  .fp-h2 { font-size: clamp(28px, 8vw, 44px); }
}

/* =====================================================================
   ANTI-ZOOM-OUT · OVERFLOW HORIZONTAL · STICKY CTA MOBILE
   ===================================================================== */

/* Red de seguridad: ningún elemento puede forzar scroll horizontal */
html, body {
  max-width: 100vw;
  overflow-x: clip; /* clip mantiene position:sticky funcionando, hidden lo rompe */
}

/* Wrapping conservador en titulares con <br/> y palabras largas */
@media (max-width: 640px) {
  .fp-h1, h1.fp-h1 {
    font-size: clamp(40px, 10vw, 64px) !important;
    line-height: 1;
    letter-spacing: -0.04em;
  }
  .fp-h2, h2.fp-h2 {
    font-size: clamp(28px, 7vw, 44px) !important;
    line-height: 1.05;
  }
  .fp-h1, .fp-h2, h1, h2 {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }
  /* Evita que grids con contenido largo bloqueen el shrink */
  .fp-container, .fp-container-narrow,
  .fp-section > div, main > section > div {
    min-width: 0;
  }
  img, video, iframe { max-width: 100%; height: auto; }
  /* Padding inferior para el sticky CTA, evita tapar el footer */
  body { padding-bottom: 72px; }
}

/* Sticky CTA bottom — solo mobile, siempre visible */
.fp-sticky-cta {
  display: none; /* desktop: oculto */
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: var(--accent-500);
  color: #fff !important;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 16px 20px;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 140ms;
  /* Safe area iOS notch */
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.fp-sticky-cta:hover, .fp-sticky-cta:active { background: var(--accent-600); }
.fp-sticky-cta::after { content: " →"; }

@media (max-width: 640px) {
  .fp-sticky-cta { display: block; }
}

/* Cuando el modal está abierto, ocultamos el sticky CTA */
body:has(.fp-modal:not([hidden])) .fp-sticky-cta { display: none; }

/* Cuando un CTA naranja in-page está visible, ocultamos el sticky para evitar duplicación */
.fp-sticky-cta--hidden {
  transform: translateY(120%);
  pointer-events: none;
}
.fp-sticky-cta { transition: transform 220ms var(--ease-out, cubic-bezier(0.2,0,0,1)); }

/* =====================================================================
   FIXES MOBILE V2 — root causes identificadas
   ===================================================================== */

/* FIX 1 · Hero del index.html (y similares) usa inline
   style="padding-top:80px;padding-bottom:40px" que pisa el shorthand
   `.fp-section { padding: 56px 18px }` en mobile, dejando left/right
   sin definir → texto pegado al borde / a 0. Restauramos padding lateral. */
@media (max-width: 900px) {
  section[style*="padding-top:80px"][style*="padding-bottom:40px"],
  section.fp-section[style*="padding-top:80px"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
@media (max-width: 640px) {
  section[style*="padding-top:80px"][style*="padding-bottom:40px"],
  section.fp-section[style*="padding-top:80px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 48px !important;
    padding-bottom: 24px !important;
  }
}

/* FIX 2 · Tipografía hero · NO romper palabras a media palabra.
   word-break: break-word es demasiado agresivo en H1/H2 con <br/>
   ya estructurados. Sustituimos por overflow-wrap solo y limitamos
   font-size con un clamp aún más conservador. */
@media (max-width: 640px) {
  .fp-h1, h1.fp-h1, .fp-h2, h2.fp-h2, h1, h2 {
    word-break: normal !important;
    overflow-wrap: break-word;
    hyphens: manual; /* no auto-hyphens; demasiado feo en titulares */
  }
  .fp-h1, h1.fp-h1 {
    font-size: clamp(36px, 11vw, 56px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.035em !important;
  }
}
@media (max-width: 360px) {
  .fp-h1, h1.fp-h1 {
    font-size: clamp(32px, 11vw, 44px) !important;
  }
  .fp-h2, h2.fp-h2 { font-size: clamp(24px, 8vw, 36px) !important; }
}

/* FIX 3 · Banda métricas con padding inline 24px 28px (NO matcheado
   antes). En mobile reducimos para que .v de 36px no rompa la celda. */
@media (max-width: 640px) {
  [style*="padding:24px 28px"] {
    padding: 18px 14px !important;
  }
  [style*="padding:28px 24px"] {
    padding: 18px 14px !important;
  }
  /* .v gigante en cards de métricas / casos */
  [style*="font-size:48px"] { font-size: 32px !important; }
  [style*="font-size:32px"] { font-size: 24px !important; }
  /* unit text "semanas", "% RGPD" — en 2x2 estrecho hay que reducirlo */
  .fp-metric .u { font-size: 11px; margin-left: 4px; }
}

/* FIX 4 · Cards de servicios (80px 260px 1fr 280px → 1 col) ya colapsan,
   pero las tags al final pueden desbordar. Forzamos wrap y full-width. */
@media (max-width: 900px) {
  [style*="grid-template-columns:80px 260px 1fr 280px"] > div[style*="display:flex"][style*="flex-wrap:wrap"] {
    width: 100% !important;
  }
  [style*="grid-template-columns:80px 260px 1fr 280px"] > p {
    max-width: 100% !important;
  }
  /* El número 01-06 + título en la misma línea para ahorrar verticalidad */
  [style*="grid-template-columns:80px 260px 1fr 280px"] {
    gap: 8px !important;
  }
}

/* FIX 5 · CTA final naranja: el flex con space-between debe colapsar.
   El selector previo era frágil (anidación profunda). Reforzamos. */
@media (max-width: 640px) {
  section[style*="background:var(--accent-500)"] div[style*="justify-content:space-between"][style*="flex-wrap:wrap"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }
  section[style*="background:var(--accent-500)"] a[data-diagnostico] {
    width: 100%;
    text-align: center;
  }
}

/* FIX 6 · ROI section (gray-900 oscura) usa minmax(0,1fr) minmax(0,1fr)
   ya colapsado. Reforzamos que los inputs range no desborden. */
@media (max-width: 640px) {
  .roi-row { grid-template-columns: 1fr auto !important; }
  .roi-row input[type="range"] { max-width: 100%; }
  #v-ano { font-size: clamp(48px, 14vw, 80px) !important; }
}

/* FIX 7 · Footer title ("FlowProp" gigante) puede romper en xs.
   Es responsive con clamp pero forcemos line-height seguro. */
@media (max-width: 640px) {
  .fp-footer-title {
    font-size: clamp(48px, 16vw, 96px);
    line-height: 0.95;
    word-break: normal;
  }
}

/* FIX 8 · El bloque header del hero (mono span con dos textos) ya colapsa
   a column en tablet (línea 251), pero el selector requiere
   `.fp-section > .fp-container > div`. En el hero del index hay esa
   estructura → OK. Reforzamos con menos requisitos. */
@media (max-width: 640px) {
  div[style*="justify-content:space-between"][style*="font-family:var(--font-mono)"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-bottom: 32px !important;
  }
}

/* FIX 9 · Min-width 0 en TODOS los descendientes de grid/flex en mobile.
   Bloquea el "min-content" implícito que impide a un grid encogerse
   cuando un hijo (p.ej. una palabra larga, un input, un número grande)
   se niega a achicarse. Ésta es la cura más universal del overflow. */
@media (max-width: 900px) {
  main * { min-width: 0; }
  main img, main video, main iframe, main svg { max-width: 100%; height: auto; }
}

/* FIX 10 · Sticky CTA: el body tiene padding-bottom:72px en mobile, pero
   el sticky CTA con safe-area puede ser >72px en iPhone con notch.
   Aumentamos margen y usamos calc seguro. */
@media (max-width: 640px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* =====================================================================
   SELECTOR DE IDIOMA EN/ES
   ===================================================================== */
.fp-nav-links .lang-switch {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  color: var(--text-muted) !important;
  margin-left: 8px;
  letter-spacing: 0.06em;
  transition: border-color 140ms, color 140ms;
}
.fp-nav-links .lang-switch:hover {
  border-color: var(--accent-500);
  color: var(--accent-500) !important;
}
.m-overlay nav a.lang {
  color: var(--text-muted) !important;
  font-size: 14px !important;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

/* =====================================================================
   FILAS DE SERVICIOS CLICABLES (HOME · SOLO DESKTOP/TABLET)
   Hover limpio · sin padding expand ni pseudo-elementos que rompen
   la alineación con el resto del contenido.
   ===================================================================== */
@media (min-width: 641px) {
  a.fp-service-row {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 220ms var(--ease-out, ease) !important;
  }
  a.fp-service-row:hover {
    background-color: var(--accent-50);
  }
  /* Sólo se intensifican: el título h3 y el número del lateral */
  a.fp-service-row:hover h3 { color: var(--accent-700); }
  a.fp-service-row:hover > div:first-child { color: var(--accent-700) !important; }
}