/* ════════════════════════════════════════════════════════════════════════════
   SONRISA VIVA — MOBILE REDESIGN
   Carga DESPUÉS de todo lo demás. Reescribe la web entera en pantallas <769px.
   Filosofía: limpio, simple, alto contraste, una sola columna, una jerarquía
   clara por sección. NADA decorativo que no comunique. Mobile ≠ Desktop.
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

/* ──────────────────────────────────────────────────────────
   1. RESET + ESCALA TIPOGRÁFICA
   ────────────────────────────────────────────────────────── */
:root {
  --m-space-1: 4px;
  --m-space-2: 8px;
  --m-space-3: 12px;
  --m-space-4: 16px;
  --m-space-5: 24px;
  --m-space-6: 32px;
  --m-space-7: 48px;
  --m-space-8: 64px;
  --m-radius-sm: 8px;
  --m-radius-md: 12px;
  --m-radius-lg: 16px;
  --m-radius-pill: 100px;
  --m-text-1: clamp(13px, 3.6vw, 14px);
  --m-text-2: clamp(15px, 4vw, 16px);
  --m-text-3: clamp(17px, 4.4vw, 18px);
  --m-h3: clamp(20px, 5.5vw, 24px);
  --m-h2: clamp(26px, 7vw, 32px);
  --m-h1: clamp(30px, 8vw, 38px);
}

html, body { overflow-x: hidden; max-width: 100vw; }
body { font-size: var(--m-text-2); line-height: 1.55; }

/* ──────────────────────────────────────────────────────────
   2. OCULTAR DECORATIVO INNECESARIO EN MÓVIL
   Marquee, partículas, dots, sticky pill — todo fuera.
   En desktop se queda intacto.
   ────────────────────────────────────────────────────────── */
.h-marquee, .h-marquee-track,
.h-particles, .h-hero-particles,
.h-hero-floating, .h-hero-floating-1, .h-hero-floating-2,
.h-hero-rating-divider,
.h-sticky-cta,
.h-cinema-video,
.sv-cursor, .sv-cursor-dot, .sv-cursor-ring,
.h-bento-num + .h-bento-pill,
.h-press::before, .h-press::after,
.h-hero::before, .h-hero::after,
.h-banner::before, .h-banner::after,
[class*="floating"]:not(.fab-trigger):not(.fab-option) {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────
   3. CONTENEDORES — padding y ancho consistente
   ────────────────────────────────────────────────────────── */
.h-container, .container, .nav-inner {
  padding-left: var(--m-space-4) !important;
  padding-right: var(--m-space-4) !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
section { overflow: hidden; }

/* ──────────────────────────────────────────────────────────
   4. NAV / HEADER — limpio, 56px, sticky
   ────────────────────────────────────────────────────────── */
nav {
  height: 56px !important;
  background: var(--off-white) !important;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.06));
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
:root:not([data-theme="light"]) nav {
  background: rgba(7, 8, 15, 0.92) !important;
  border-bottom-color: rgba(255,255,255,.06);
}
.nav-inner {
  height: 56px !important;
  align-items: center;
  gap: var(--m-space-2);
}
.nav-logo { flex: 1; min-width: 0; }
.nav-logo-name, .nav-logo-text, [class*="logo-name"] {
  font-size: 17px !important;
  letter-spacing: 0.01em;
}
.nav-logo-tagline { display: none !important; }
.nav-right { gap: 8px !important; align-items: center; }
.nav-cta, .nav-tel { display: none !important; }
.sv-theme-toggle {
  width: 40px !important; height: 40px !important;
  flex-shrink: 0;
}
.nav-hamburger {
  width: 44px !important; height: 44px !important;
  flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────
   5. HERO — limpio, foto arriba, 1 CTA primario
   ────────────────────────────────────────────────────────── */
.h-hero {
  padding: 24px 0 40px !important;
  min-height: auto !important;
}
.h-hero-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--m-space-5) !important;
}
/* Foto/video del hero PRIMERO en móvil */
.h-hero-visual {
  order: -1;
  width: 100% !important;
  height: clamp(220px, 55vw, 300px) !important;
  border-radius: var(--m-radius-lg);
  overflow: hidden;
  margin: 0 !important;
  align-self: stretch;
  background: rgba(0,0,0,.05);
}
.h-hero-visual video,
.h-hero-visual img,
.h-hero-visual picture {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.h-hero-content { display: flex; flex-direction: column; gap: var(--m-space-4); }
.h-hero h1 {
  font-size: var(--m-h1) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em;
  margin: 0 !important;
}
.h-hero-desc, .h-hero p {
  font-size: var(--m-text-2) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}
.h-hero-pill, .h-pill {
  display: inline-flex !important;
  align-self: flex-start;
  font-size: 12px !important;
  padding: 6px 12px !important;
  margin: 0 !important;
}
.h-hero-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--m-space-3) !important;
  margin: var(--m-space-2) 0 0 !important;
}
.h-hero-actions .h-btn,
.h-hero-actions .btn,
.h-hero-actions a[class*="btn"] {
  width: 100% !important;
  min-height: 52px !important;
  font-size: var(--m-text-2) !important;
  padding: 14px 20px !important;
  border-radius: var(--m-radius-pill) !important;
  white-space: normal !important;
  text-overflow: clip !important;
  overflow: visible !important;
  line-height: 1.2 !important;
}
.h-hero-rating {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin-top: var(--m-space-3) !important;
}
.h-hero-rating-text { font-size: 13px !important; line-height: 1.4 !important; }
.h-hero-rating-stars { font-size: 14px; }

/* ──────────────────────────────────────────────────────────
   5b. QUICK ACCESS — 4 botones grandes tras hero
       Para que el usuario con dolor / urgencia / cita pueda
       llegar en UN solo tap. Mobile-first design crítico.
   ────────────────────────────────────────────────────────── */
.h-quick {
  padding: 16px 0 24px !important;
  background: transparent;
}
.h-quick-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
.h-quick-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  text-align: center;
  text-decoration: none !important;
  padding: 16px 8px !important;
  min-height: 96px;
  border-radius: var(--m-radius-md) !important;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: inherit;
  transition: transform .15s ease;
}
.h-quick-btn:active { transform: scale(.97); }
.h-quick-ico {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.h-quick-label {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}
.h-quick-sub {
  font-size: 11px;
  opacity: .7;
  letter-spacing: 0.04em;
}
/* Urgencias — rojo cálido pero no agresivo */
.h-quick-urgent {
  background: linear-gradient(135deg, rgba(220,38,38,.14), rgba(220,38,38,.06)) !important;
  border-color: rgba(220,38,38,.30) !important;
  color: #EF4444 !important;
}
.h-quick-urgent .h-quick-ico { background: rgba(220,38,38,.16); }
.h-quick-urgent .h-quick-sub { color: #EF4444; opacity: .85; }
/* Pedir cita — gold (acción primaria) */
.h-quick-primary {
  background: linear-gradient(135deg, #C9A86C, #B8965A) !important;
  border-color: #C9A86C !important;
  color: #07080F !important;
}
.h-quick-primary .h-quick-ico { background: rgba(7,8,15,.12); }
.h-quick-primary .h-quick-sub { color: rgba(7,8,15,.7); }
/* WhatsApp — verde marca */
.h-quick-wa {
  background: linear-gradient(135deg, rgba(37,211,102,.14), rgba(37,211,102,.06)) !important;
  border-color: rgba(37,211,102,.30) !important;
  color: #25D366 !important;
}
.h-quick-wa .h-quick-ico { background: rgba(37,211,102,.16); }
.h-quick-wa .h-quick-sub { color: #25D366; opacity: .85; }
/* Mapa — neutral */
.h-quick-map {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* Light theme overrides */
:root[data-theme="light"] .h-quick-btn {
  background: #FFF;
  border-color: rgba(14,18,32,.08);
  color: #0E1220;
  box-shadow: 0 2px 8px rgba(14,18,32,.04);
}
:root[data-theme="light"] .h-quick-ico { background: rgba(14,18,32,.06); }
:root[data-theme="light"] .h-quick-urgent { background: #FFF5F5 !important; }
:root[data-theme="light"] .h-quick-primary { color: #07080F !important; }
:root[data-theme="light"] .h-quick-wa { background: #F0FDF4 !important; }
:root[data-theme="light"] .h-quick-map { background: #FFF !important; }

/* ──────────────────────────────────────────────────────────
   6. SECCIONES — padding consistente 60px
   ────────────────────────────────────────────────────────── */
section,
.h-stats, .h-services, .h-process, .h-feature, .h-testi, .h-team,
.h-faq, .h-cta-final, .h-bento, .h-banner, .h-press, .h-compare,
.h-cinema, .h-hero-quote, .sv-trust {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

/* H2 de sección estandarizado */
section h2, .h-section-title, [class*="-header"] h2 {
  font-size: var(--m-h2) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
  margin: 0 0 var(--m-space-4) 0 !important;
}
.h-overline, [class*="overline"] {
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  margin-bottom: var(--m-space-3) !important;
}

/* ──────────────────────────────────────────────────────────
   7. BENTO / GRIDS — TODOS en columna 1fr
   ────────────────────────────────────────────────────────── */
.h-bento-grid,
.h-services-grid,
.h-team-grid,
.h-testi-grid,
.h-process-steps,
.h-stats-grid,
.h-features-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--m-space-4) !important;
}
.h-bento-cell,
.h-bento-cell--lg,
.h-bento-cell--md,
.h-bento-cell--tall,
.h-svc,
.h-team-card,
.h-testi-card,
.h-stat {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: var(--m-space-5) !important;
  border-radius: var(--m-radius-lg) !important;
}

/* Cards: tipografía interior limpia */
.h-bento-cell h3, .h-svc h3, .h-team-card h3, .h-testi-card h3 {
  font-size: var(--m-h3) !important;
  line-height: 1.25 !important;
  margin: 0 0 var(--m-space-3) 0 !important;
}
.h-bento-cell p, .h-svc p, .h-team-card p, .h-testi-card p {
  font-size: var(--m-text-1) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}
.h-bento-num { font-size: 38px !important; line-height: 1; margin-bottom: var(--m-space-2) !important; }
.h-bento-icon, .h-svc-icon {
  width: 48px !important; height: 48px !important;
  margin-bottom: var(--m-space-3) !important;
}
.h-bento-pill {
  display: inline-flex !important;
  font-size: 11px !important;
  padding: 5px 10px !important;
  margin-top: var(--m-space-3) !important;
}

/* Foto del tratamiento DENTRO de cada card de servicio.
   AUDIT: las fotos originales son 1536×1024 = ratio 3:2 (1.50).
   Si pongo 16:9 aquí (1.78), object-fit:cover recorta arriba/abajo
   PERDIENDO contenido importante. Por eso aspect-ratio: 3/2 → encaja
   exacto, NO hay recorte, la foto se ve COMPLETA. */
.h-svc-img {
  width: calc(100% + var(--m-space-5) * 2);
  margin: calc(var(--m-space-5) * -1) calc(var(--m-space-5) * -1) var(--m-space-4) calc(var(--m-space-5) * -1);
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: var(--m-radius-lg) var(--m-radius-lg) 0 0;
  background: rgba(0,0,0,.05);
}
.h-svc-img picture,
.h-svc-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center;
  display: block !important;
}
/* Odontopediatría: foto en formato portrait 1024×1536 (ratio 0.67).
   Forzada a 3:2 horizontal seguirá recortando. Usamos object-position
   center top para que se vea la parte ALTA de la imagen (cara del niño).
   El 5º article es la card "Niños — Odontopediatría". */
.h-services-grid > .h-svc:nth-child(5) .h-svc-img img,
.h-services-grid > .h-svc:nth-child(5) .h-svc-img picture {
  object-position: center top;
}
.h-svc { padding-top: 0 !important; }
.h-svc > .h-svc-num,
.h-svc > .h-svc-icon,
.h-svc > .h-svc-name,
.h-svc > .h-svc-desc,
.h-svc > .h-svc-meta {
  padding-left: var(--m-space-5);
  padding-right: var(--m-space-5);
}
.h-svc > .h-svc-num { margin-top: var(--m-space-4); }
.h-svc > .h-svc-meta { padding-bottom: var(--m-space-5); }
/* Ocultar el icono SVG en móvil (la foto ya identifica el tratamiento) */
.h-svc > .h-svc-icon { display: none !important; }

/* ──────────────────────────────────────────────────────────
   8. SERVICES CARDS — precios y CTA limpios
   ────────────────────────────────────────────────────────── */
.h-svc-num, .h-svc-overline { font-size: 11px !important; }
.h-svc-price-label { font-size: 11px !important; }
.h-svc-price { font-size: 28px !important; }
.h-svc-link {
  font-size: 14px !important;
  padding: 8px 0 !important;
  min-height: 44px;
}

/* ──────────────────────────────────────────────────────────
   9. EQUIPO — foto encima, info debajo, sin grids
   ────────────────────────────────────────────────────────── */
.h-team-card {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--m-space-3) !important;
}
.h-team-card img, .h-team-card picture {
  width: 100% !important;
  aspect-ratio: 1 / 1;
  object-fit: cover !important;
  border-radius: var(--m-radius-md) !important;
}
.h-team-name { font-size: var(--m-h3) !important; }
.h-team-role { font-size: 11px !important; letter-spacing: 0.12em !important; }
.h-team-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.h-team-tag { font-size: 11px !important; padding: 4px 10px !important; }

/* ──────────────────────────────────────────────────────────
   10. BANNER "Tratamos personas no dientes" — limpio
   ────────────────────────────────────────────────────────── */
.h-banner-text {
  font-size: var(--m-h2) !important;
  line-height: 1.2 !important;
  animation: none !important;
}
.h-banner-sub {
  font-size: var(--m-text-2) !important;
  margin-top: var(--m-space-4) !important;
}

/* ──────────────────────────────────────────────────────────
   11. PRESS LOGOS — fila 2 cols simple, sin marquee
   ────────────────────────────────────────────────────────── */
.h-press { padding: 40px 0 !important; }
.h-press-track {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--m-space-4) !important;
  animation: none !important;
  transform: none !important;
  width: 100% !important;
}
.h-press-logo {
  font-size: 14px !important;
  opacity: .7;
  text-align: center;
}

/* ──────────────────────────────────────────────────────────
   12. COMPARE TABLE — cards limpios en lugar de tabla
   ────────────────────────────────────────────────────────── */
.h-compare-table { margin: 0 !important; }
.h-compare-row {
  display: grid !important;
  grid-template-columns: 1.6fr 0.7fr 0.7fr !important;
  gap: var(--m-space-2) !important;
  font-size: 13px !important;
}
.h-compare-row > div {
  padding: var(--m-space-3) var(--m-space-2) !important;
  font-size: 13px !important;
}

/* ──────────────────────────────────────────────────────────
   13. FAQ — clean accordion
   ────────────────────────────────────────────────────────── */
.faq-item, .h-faq-item { padding: var(--m-space-3) 0 !important; }
.faq-question, .h-faq-question {
  font-size: var(--m-text-3) !important;
  padding: var(--m-space-3) 0 !important;
  min-height: 48px;
  line-height: 1.4 !important;
}
.faq-answer, .h-faq-answer { font-size: var(--m-text-1) !important; line-height: 1.55 !important; }

/* ──────────────────────────────────────────────────────────
   14. CTA FINAL — bloque destacado
   ────────────────────────────────────────────────────────── */
.h-cta-final, .cta-final {
  padding: 60px var(--m-space-4) !important;
}
.h-cta-final-card {
  padding: var(--m-space-6) var(--m-space-5) !important;
  border-radius: var(--m-radius-lg) !important;
}
.h-cta-final h2 {
  font-size: var(--m-h2) !important;
  line-height: 1.2 !important;
}

/* ──────────────────────────────────────────────────────────
   15. CINEMA SECTION — sin video, poster como bg
   ────────────────────────────────────────────────────────── */
.h-cinema {
  padding: 80px var(--m-space-4) !important;
  background-image: url('../img/implantes-hero-new.webp');
  background-size: cover;
  background-position: center;
  background-color: #000;
}
.h-cinema-title { font-size: var(--m-h2) !important; line-height: 1.2 !important; }
.h-cinema-sub { font-size: var(--m-text-2) !important; line-height: 1.55 !important; }
.h-cinema-meta { gap: var(--m-space-4) !important; }

/* ──────────────────────────────────────────────────────────
   16. FOOTER — apilado limpio
   ────────────────────────────────────────────────────────── */
footer {
  padding: 48px var(--m-space-4) 24px !important;
}
footer .footer-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--m-space-5) !important;
  padding-bottom: var(--m-space-5) !important;
}
.footer-col h4 { font-size: 12px !important; letter-spacing: 0.14em !important; margin-bottom: 10px !important; }
.footer-col a { font-size: 15px !important; padding: 8px 0 !important; line-height: 1.5 !important; }
.footer-bottom { font-size: 12px !important; opacity: .7; }

/* ──────────────────────────────────────────────────────────
   17. STICKY MOBILE CTA BAR — limpio y consistente
   ────────────────────────────────────────────────────────── */
#mobile-cta-bar {
  padding: 10px var(--m-space-3) !important;
  gap: 10px !important;
  background: var(--off-white) !important;
  border-top: 1px solid var(--border, rgba(0,0,0,.08)) !important;
  backdrop-filter: none !important;
}
:root:not([data-theme="light"]) #mobile-cta-bar {
  background: rgba(7, 8, 15, 0.95) !important;
  border-top-color: rgba(255,255,255,.08) !important;
}
#mobile-cta-bar > a,
#mobile-cta-bar > button {
  flex: 1 !important;
  min-height: 48px !important;
  font-size: 15px !important;
  padding: 12px !important;
  border-radius: var(--m-radius-pill) !important;
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────
   18. CHAT BUBBLE — encima de sticky bar, sin solapar
   ────────────────────────────────────────────────────────── */
.chat-toggle, .fab-trigger {
  bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  right: var(--m-space-3) !important;
  width: 52px !important;
  height: 52px !important;
}

/* ──────────────────────────────────────────────────────────
   19. EXIT POPUP — mismo tratamiento
   ────────────────────────────────────────────────────────── */
#exit-popup, .exit-popup {
  width: calc(100% - 32px) !important;
  max-width: 100% !important;
  left: 16px !important;
  right: 16px !important;
  border-radius: var(--m-radius-lg) !important;
}

/* ──────────────────────────────────────────────────────────
   20. ASEGURAR QUE NADA QUEDE INVISIBLE
   GSAP en móvil está DESACTIVADO (premium.js bootstrap salta initReveals),
   pero por si algún elemento tiene inline style="opacity:0" antiguo o
   transformaciones residuales → forzamos visibilidad.
   ────────────────────────────────────────────────────────── */
[data-reveal], [data-split-reveal], [data-fade-in],
.h-fade-in, .h-reveal-mask,
.h-team-card, .h-svc, .h-bento-cell, .h-testi-card,
.h-process-step, .h-feature, .h-faq-item, .h-cta-final {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}
.sv-word-anim {
  display: inline !important;
  opacity: 1 !important;
  transform: none !important;
  background: inherit !important;
}
/* Si algún elemento aún quedara con inline opacity 0, lo forzamos visible */
section *, article *, main * {
  visibility: visible;
}

/* ──────────────────────────────────────────────────────────
   21. IMÁGENES — fail-safe global
   ────────────────────────────────────────────────────────── */
img, picture, picture img, video {
  max-width: 100% !important;
  height: auto;
  display: block;
}
img[hidden], picture[hidden] { display: none !important; }

/* ──────────────────────────────────────────────────────────
   22. TYPOGRAPHY BODY — Geist sans en móvil para legibilidad
   ────────────────────────────────────────────────────────── */
body, p, li, button, input, textarea, select, a {
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
}
h1, h2, h3, .h-banner-text, .h-cinema-title {
  font-family: 'Fraunces', Georgia, serif;
}

/* ──────────────────────────────────────────────────────────
   23. LIGHT THEME — refinos para móvil
   ────────────────────────────────────────────────────────── */
:root[data-theme="light"] {
  --off-white: #FFFFFF;
}
:root[data-theme="light"] body {
  background: #FFFFFF;
  color: #0E1220;
}
:root[data-theme="light"] section { background: transparent; }
:root[data-theme="light"] .h-bento-cell,
:root[data-theme="light"] .h-svc,
:root[data-theme="light"] .h-team-card,
:root[data-theme="light"] .h-testi-card {
  background: #FAF7F2 !important;
  border: 1px solid rgba(14,18,32,.06) !important;
  box-shadow: 0 2px 8px rgba(14,18,32,.03);
}
:root[data-theme="light"] .h-overline, :root[data-theme="light"] [class*="overline"] {
  color: #1B4B3A !important;
}

/* ──────────────────────────────────────────────────────────
   24. PÁGINAS DE TRATAMIENTO (subpages)
   Cubre patrones específicos que NO están en index.html pero sí
   en /tratamientos/*.html y otras subpáginas.
   ────────────────────────────────────────────────────────── */

/* hero-proof: 3 estadísticas (Mismo día / 60€ / sin recargo) que
   en desktop son 3 cols. En móvil deben apilarse 1 col grande. */
.hero-proof {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--m-space-3) !important;
  border-top: none !important;
  padding-top: var(--m-space-4) !important;
}
.proof-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border-radius: var(--m-radius-md) !important;
  background: rgba(201,168,108,.06);
  border: 1px solid rgba(201,168,108,.15);
}
.proof-num {
  font-size: 22px !important;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.proof-label {
  font-size: 13px !important;
  line-height: 1.35 !important;
  opacity: .8;
}

/* hero-img-wrap: imagen lateral del hero de subpáginas. En móvil
   debe ocupar todo el ancho con aspect-ratio adecuado. */
.hero-img-wrap {
  width: 100% !important;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--m-radius-lg) !important;
  margin: var(--m-space-4) 0 0 0 !important;
  box-shadow: none !important;
}
.hero-img-wrap picture,
.hero-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center;
  display: block !important;
  border-radius: 0 !important;
}

/* fit-section, fit-grid, fit-card → 1 columna */
.fit-section, .fit-content, .fit-symptoms {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
.fit-grid, .fit-symptoms-grid, .related-grid, .timeline-grid {
  grid-template-columns: 1fr !important;
  gap: var(--m-space-3) !important;
}
.fit-card, .symptom-card, .related-card, .timeline-step {
  padding: var(--m-space-4) !important;
  width: 100% !important;
}

/* Hero subpages texto: tamaño legible */
.hero-h1, .hero-title, h1.t-hero-title {
  font-size: clamp(26px, 7.5vw, 34px) !important;
  line-height: 1.15 !important;
}
.hero-sub, .t-hero-sub {
  font-size: var(--m-text-2) !important;
  line-height: 1.55 !important;
}

/* Si algún hero subpage tiene grid de 2 cols (texto + visual),
   forzar 1 col en móvil con visual debajo. */
.hero-grid, .t-hero-grid, [class*="hero-grid"] {
  grid-template-columns: 1fr !important;
  gap: var(--m-space-5) !important;
}

/* CTAs de subpáginas */
.btn-primary, .btn-ghost, .btn-fill, .btn-fill-white, .btn-outline-white,
.btn-line, a.btn, button.btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 18px !important;
  font-size: var(--m-text-2) !important;
  border-radius: var(--m-radius-pill) !important;
  text-decoration: none;
  white-space: normal !important;
  line-height: 1.2;
}

/* ──────────────────────────────────────────────────────────
   25. FIX OPACITY FANTASMA — headings con opacity:0 residual
   GSAP en móvil está OFF, pero por si acaso algún h2/h3 quedó
   con opacity inline o transform, los forzamos visibles.
   ────────────────────────────────────────────────────────── */
section h1, section h2, section h3, section h4,
.h-process-name, .h-svc-name, .h-team-name, .h-bento-cell h3,
.h-feature-content h2, .h-banner-text, .h-cinema-title {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
/* También forzar visibilidad de párrafos y cards comunes */
section p, .h-svc-desc, .h-team-bio, .h-bento-cell p {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ──────────────────────────────────────────────────────────
   26. CONTENEDORES CON OVERFLOW HIDDEN PARA NO SACAR CONTENIDO
   Cualquier sección debe contener sus hijos visualmente.
   ────────────────────────────────────────────────────────── */
section, .h-pricing-strip, .h-feature, .h-banner,
.h-cinema, .h-workflow, .h-founder, .h-live {
  overflow: hidden !important;
}

/* Visuales laterales en secciones tipo feature/process: cualquier
   imagen/video que sobresalga del contenedor padre se contiene. */
.h-feature-visual, .h-process-visual, .h-workflow-visual {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--m-radius-lg);
  margin: 0 0 var(--m-space-4) 0;
}
.h-feature-visual img, .h-feature-visual video, .h-feature-visual picture,
.h-process-visual img, .h-workflow-visual img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ══════════════════════════════════════════════════════════
   28. INLINE STYLES OVERRIDE — CRÍTICO
   El HTML del proyecto tiene MUCHOS inline styles con grids
   2-col, videos de altura fija, etc. Los inline styles tienen
   mayor especificidad que CSS externo, pero `!important` con
   un selector de atributo puede ganarles.
   Esto fija TODOS los inline grid 2-col + videos hardcoded.
   ══════════════════════════════════════════════════════════ */

/* Cualquier elemento con grid-template-columns inline 2-col → 1 col */
[style*="grid-template-columns:1fr 1fr"],
[style*="grid-template-columns: 1fr 1fr"],
[style*="grid-template-columns:1fr 2fr"],
[style*="grid-template-columns: 1fr 2fr"],
[style*="grid-template-columns:2fr 1fr"],
[style*="grid-template-columns: 2fr 1fr"],
[style*="grid-template-columns:repeat(2"],
[style*="grid-template-columns: repeat(2"],
[style*="grid-template-columns:repeat(3"],
[style*="grid-template-columns: repeat(3"],
[style*="grid-template-columns:repeat(4"],
[style*="grid-template-columns: repeat(4"] {
  grid-template-columns: 1fr !important;
  gap: var(--m-space-4) !important;
}

/* Videos con height fijo inline → altura responsiva */
video[style*="height:520px"], video[style*="height: 520px"],
video[style*="height:480px"], video[style*="height: 480px"],
video[style*="height:600px"], video[style*="height: 600px"],
video[style*="height:560px"], video[style*="height: 560px"],
video[style*="height:500px"], video[style*="height: 500px"],
video[style*="height:420px"], video[style*="height: 420px"],
video[style*="height:400px"], video[style*="height: 400px"] {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4/3 !important;
  max-height: 60vh;
  object-fit: cover !important;
  border-radius: var(--m-radius-lg) !important;
}

/* Imágenes con height fijo inline → mismo tratamiento */
img[style*="height:520px"], img[style*="height: 520px"],
img[style*="height:480px"], img[style*="height: 480px"],
img[style*="height:600px"], img[style*="height: 600px"],
img[style*="height:560px"], img[style*="height: 560px"],
img[style*="height:500px"], img[style*="height: 500px"] {
  height: auto !important;
  max-height: 60vh;
  aspect-ratio: 4/3 !important;
  object-fit: cover !important;
}

/* Gap inline excesivo en móvil → reducir */
[style*="gap:5rem"], [style*="gap: 5rem"],
[style*="gap:4rem"], [style*="gap: 4rem"],
[style*="gap:6rem"], [style*="gap: 6rem"] {
  gap: var(--m-space-5) !important;
}

/* Padding inline excesivo → razonable en móvil */
[style*="padding:5rem"], [style*="padding: 5rem"],
[style*="padding:6rem"], [style*="padding: 6rem"] {
  padding: var(--m-space-5) !important;
}

/* min-width inline que rompe móvil → 0 */
[style*="min-width:400"], [style*="min-width: 400"],
[style*="min-width:500"], [style*="min-width: 500"],
[style*="min-width:600"], [style*="min-width: 600"] {
  min-width: 0 !important;
}

/* width fijo inline excesivo → 100% */
[style*="width:500px"], [style*="width: 500px"],
[style*="width:600px"], [style*="width: 600px"],
[style*="width:800px"], [style*="width: 800px"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* ──────────────────────────────────────────────────────────
   27. h-pricing-strip — ya está 1 col en home.css mobile,
   pero refuerzo aquí con !important por si la cascada falla.
   ────────────────────────────────────────────────────────── */
.h-pricing-strip-grid {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}
.h-ps-cell {
  border-right: none !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  padding: var(--m-space-4) !important;
}
:root[data-theme="light"] .h-ps-cell {
  border-bottom-color: rgba(14,18,32,.06) !important;
}

} /* end @media max-width: 768px */