/* ═══════════════════════════════════════════════════════════════════
   Vie Belle — AJUSTES SOLO MÓVIL
   Todo aquí vive dentro de @media (max-width: 700px) (o aplica a
   elementos que solo existen en móvil), para no tocar la versión web.
   ═══════════════════════════════════════════════════════════════════ */

/* (1) Menú hamburguesa: ocultar el botón "Agendar consulta".
   .vb-nav-mobile solo se renderiza en el menú móvil, así que esto
   nunca afecta a escritorio (que usa .vb-nav-cta aparte). */
.vb-nav-mobile .btn-gold,
.vb-nav-mobile .btn.btn-gold {
  display: none !important;
}

@media (max-width: 700px) {

  /* (2) Resultados reales — Antes y Después uno al lado del otro,
     más pequeños, en lugar de apilados. */
  .vb-ba-pair {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
  }
  .vb-ba-divider { display: none; }
  .vb-ba-side img {
    aspect-ratio: 3 / 4;
    max-height: none;
  }
  .vb-ba-chip {
    top: 8px; left: 8px;
    padding: 4px 9px;
    font-size: 8px; letter-spacing: 0.14em;
  }

  /* (3) Botones de casos (Lipo 360, Rinoplastia, …) más compactos. */
  .vb-ba-tabs { gap: 7px; }
  .vb-ba-tab {
    padding: 7px 13px;
    font-size: 12px;
  }
  .vb-ba-tab-progress { width: 18px; height: 3px; }

  /* (4) Testimonios de pacientes — scroll horizontal en vez de
     una columna larga hacia abajo. */
  .vb-testi-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    /* sangrado a los bordes para sugerir que hay más */
    margin-inline: calc(-1 * var(--pad-x));
    padding-inline: var(--pad-x);
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .vb-testi-grid::-webkit-scrollbar { display: none; }
  .vb-testi {
    flex: 0 0 80%;
    scroll-snap-align: start;
    padding: 32px 26px;
  }

  /* (5) Productos destacados — scroll horizontal. */
  .vb-products-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    margin-inline: calc(-1 * var(--pad-x));
    padding-inline: var(--pad-x);
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .vb-products-grid::-webkit-scrollbar { display: none; }
  .vb-products-grid .vb-product {
    flex: 0 0 64%;
    scroll-snap-align: start;
  }

  /* (6) Formulario de contacto — todas las casillas en una sola
     columna (apiladas hacia abajo), nada entrecortado.
     minmax(0,1fr): evita que el select ancho desencuadre el grid. */
  .vb-form {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px 20px;
    gap: 16px;
  }
  .vb-form label { min-width: 0; }
  .vb-form input, .vb-form select, .vb-form textarea { width: 100%; min-width: 0; box-sizing: border-box; }
  .vb-form textarea { min-height: 84px; }
  /* Consentimiento: cuadradito y texto en la MISMA línea */
  .vb-form label.vb-form-consent { flex-direction: row; align-items: flex-start; gap: 10px; }
  .vb-form label.vb-form-consent input {
    width: 16px; min-width: 16px; max-width: 16px; height: 16px;
    flex: 0 0 16px; margin-top: 1px;
  }
  .vb-form button { justify-self: stretch; width: 100%; }
  .vb-form label:nth-child(1),
  .vb-form label:nth-child(2) {
    grid-column: 1 / -1;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   AUDITORÍA UX MÓVIL — encuadre, escala y ritmo (jul 2026)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

  /* (7) Encuadre — nada se sale del ancho de pantalla.
     (las animaciones de entrada desplazan elementos y creaban
     scroll lateral; clip no rompe la nav sticky) */
  html, body { overflow-x: clip; }

  /* (8) Nav compacta ~56px, logo pequeño y hamburguesa a la derecha */
  .vb-nav { padding: 8px var(--pad-x); gap: 12px; grid-template-columns: auto 1fr; }
  .vb-nav[data-scrolled="true"] { padding-block: 6px; }
  .vb-nav .vb-logo-img, .vb-nav-logo img { height: 34px !important; width: auto !important; }
  .vb-nav-burger { justify-self: end; }

  /* (8b) Menú desplegable — textos más contenidos, buen alto táctil */
  .vb-nav-mobile a {
    font-size: 17px !important;
    padding: 11px 0;
    line-height: 1.2;
  }

  /* (9) Ritmo vertical — secciones más compactas */
  :root { --section-y: 44px; }
  .nos-espacio, .nos-doctor, .nos-filosofia, .nos-equipo,
  .nos-awards, .nos-cta,
  .res-galeria, .res-metodo, .res-cita { padding-block: 48px; }
  .res-cta { padding-block: 44px; }
  .res-hero-content { padding-block: 56px; }

  /* (10) Hero del inicio — que quepa en ~una pantalla */
  .lux-hero-title { font-size: 27px; }
  .lux-features {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 12px; margin-block: 16px 20px;
  }
  .lux-feature { width: auto; gap: 8px; }
  .lux-feature-ic { width: 52px; height: 52px; }
  .lux-feature-ic svg { width: 20px; height: 20px; }
  .lux-feature-tx strong { font-size: 12.5px; }
  .lux-feature-tx span { font-size: 11px; }
  .lux-hero-img { aspect-ratio: 16/10; }
  .lux-hero-cards { margin-top: 10px; }
  .lux-panel { gap: 12px; padding: 16px; }
  /* video + miniatura lado a lado también en pantallas pequeñas */
  .lux-panel-video { grid-template-columns: 1.1fr 1fr; }
  .lux-card-video-tx h3 { font-size: 15px; }
  .lux-ba-pair { padding-right: 20px; }
  .lux-ba-pair img { max-height: 170px; object-fit: cover; }

  /* (10b) Página de servicio (pl-) — misma compactación que el inicio */
  /* hero: un solo CTA (WhatsApp redundante con Agendar) */
  .pl-hero-cta a[href*="wa.me"], .pl-hero-cta a[href*="whatsapp"] { display: none; }
  .pl-features {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 12px; margin-bottom: 20px;
  }
  .pl-feature { width: auto; gap: 8px; }
  .pl-feature-ic { width: 52px; height: 52px; }
  .pl-feature-ic svg { width: 20px; height: 20px; }
  .pl-feature strong { font-size: 12.5px; }
  .pl-feature span { font-size: 11px; }

  /* (11) Cabeceras de Servicios / Productos — menos aire
     (!important: en Servicios el padding viene inline) */
  .vb-page-hero { padding: 40px var(--pad-x) 36px !important; }
  .vb-page-hero p { font-size: 15px; }

  /* (11b) Catálogo — pestañas Quirúrgicos / No quirúrgicos lado a lado */
  .vb-tabs { display: flex; flex-wrap: nowrap; gap: 24px; margin-bottom: 32px; }
  .vb-tab { padding: 12px 0; gap: 8px; flex: 0 0 auto; }
  .vb-tab-label { font-size: 17px; white-space: nowrap; }
  .vb-tab-num { font-size: 11px; }
  .vb-servicios-summary { margin-bottom: 36px; font-size: 15px; }

  /* (12) Lipo 360 — aside compacto, sin sticky en móvil */
  .pl-aside { position: static; gap: 14px; }
  .pl-aside-img { aspect-ratio: 4/3; }
  .pl-card { padding: 18px; }

  /* (13) Footer compacto — 2 columnas, menos aire */
  .vb-footer { padding-block: 44px 20px; }
  .vb-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .vb-footer-grid > *:first-child,
  .vb-footer-grid > *:last-child { grid-column: 1 / -1; }
  .vb-footer-brand p { font-size: 18px; margin-top: 14px; }
  .vb-footer-bottom { margin-top: 28px; }

  /* (14) Legibilidad — eyebrows y botones un punto más grandes */
  .eyebrow { font-size: 11px; }
  .btn { font-size: 13px; padding: 14px 26px; }
  .vb-nav-mobile .btn { font-size: 13px; }

  /* (15) Sin saltos de línea forzados — el texto fluye natural
     (los <br/> de títulos/textos son composición de escritorio) */
  h1 br, h2 br, h3 br, blockquote br, p br { display: none; }
  h1, h2, h3 { text-wrap: balance; }
  p, blockquote { text-wrap: pretty; }

  /* (16) Antes y después — filtros en UNA fila deslizable, compactos */
  .vb-ba-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    margin-inline: calc(-1 * var(--pad-x));
    padding-inline: var(--pad-x);
  }
  .vb-ba-tabs::-webkit-scrollbar { display: none; }
  .vb-ba-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 11.5px;
    padding: 6px 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   AUDITORÍA UX TABLET — franja 701–900px (iPad vertical)
   Misma lógica que móvil: encuadre, escala y ritmo, con más aire.
   No afecta ni a móvil (≤700) ni a escritorio (>900).
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 701px) and (max-width: 900px) {

  /* Encuadre — nada se sale del ancho de pantalla */
  html, body { overflow-x: clip; }

  /* Nav compacta ~60px, logo contenido, hamburguesa a la derecha */
  .vb-nav { padding: 10px var(--pad-x); gap: 14px; grid-template-columns: auto 1fr; }
  .vb-nav[data-scrolled="true"] { padding-block: 8px; }
  .vb-nav .vb-logo-img, .vb-nav-logo img { height: 40px !important; width: auto !important; }
  .vb-nav-burger { justify-self: end; }
  .vb-nav-mobile a { font-size: 19px !important; padding: 12px 0; line-height: 1.2; }

  /* Ritmo vertical — menos aire que escritorio */
  :root { --section-y: 56px; }
  .vb-page-hero { padding: 56px var(--pad-x) 44px !important; }
  .nos-espacio, .nos-doctor, .nos-filosofia, .nos-equipo,
  .nos-awards, .nos-cta,
  .res-galeria, .res-metodo, .res-cita { padding-block: 56px; }

  /* Hero del inicio — imagen más baja, iconos contenidos */
  .lux-hero-title { font-size: 34px; }
  .lux-hero-img { aspect-ratio: 16/9; max-height: 46vh; }
  .lux-features { gap: 16px; margin-block: 18px 22px; }
  .lux-feature-ic { width: 56px; height: 56px; }
  .lux-feature-ic svg { width: 22px; height: 22px; }
  .lux-feature-tx strong { font-size: 13px; }
  .lux-feature-tx span { font-size: 11.5px; }
  .lux-panel { gap: 14px; padding: 18px; }
  .lux-ba-pair img { max-height: 190px; object-fit: cover; }

  /* Página de servicio (pl-) — mismos ajustes */
  .pl-hero-img { aspect-ratio: 16/9; max-height: 46vh; }
  .pl-features { gap: 16px; margin-bottom: 22px; }
  .pl-feature-ic { width: 56px; height: 56px; }
  .pl-feature-ic svg { width: 22px; height: 22px; }
  .pl-feature strong { font-size: 13px; }
  .pl-feature span { font-size: 11.5px; }
  /* aside: de columna 1112px a grid de 2 columnas */
  .pl-aside { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  .pl-aside-img { aspect-ratio: 4/3; }
  .pl-card { padding: 20px; }

  /* Hero de Nosotros — foto más contenida */
  .nos-hero { min-height: 0; padding-block: 48px 56px; }
  .nos-hero-photo img, .nos-hero-img img { max-height: 440px; object-fit: cover; }
  .nos-hero-art, .nos-hero-art .imgph { max-height: 440px !important; aspect-ratio: auto; overflow: hidden; height: 440px; }

  /* Servicios destacados — una sola fila con scroll a la derecha */
  .vb-svc-cards {
    display: flex; flex-wrap: nowrap;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    gap: 16px;
    margin-inline: calc(-1 * var(--pad-x)); padding-inline: var(--pad-x);
    padding-bottom: 8px;
  }
  .vb-svc-cards::-webkit-scrollbar { display: none; }
  .vb-svc-card { flex: 0 0 46%; scroll-snap-align: start; }

  /* Productos destacados — scroll a la derecha */
  .vb-products-grid {
    display: flex; flex-wrap: nowrap;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    gap: 16px;
    margin-inline: calc(-1 * var(--pad-x)); padding-inline: var(--pad-x);
    padding-bottom: 8px;
  }
  .vb-products-grid::-webkit-scrollbar { display: none; }
  .vb-products-grid .vb-product { flex: 0 0 34%; scroll-snap-align: start; }

  /* Resultados reales y Pacientes — menos aire arriba/abajo.
     Las secciones usan min-height:100vh (diseño de escritorio);
     en tablet vertical eso crea enormes vacíos — se desactiva. */
  .vb-resultados, .vb-testimonios, .vb-servicios, .vb-productos,
  .vb-nosotros-teaser, .nos-equipo, .nos-doctor, .nos-filosofia,
  .nos-espacio, .nos-cta, .res-hero, .res-galeria, .res-metodo,
  .res-cita, .res-cta, .proc-hero, .proc-section, .proc-cta,
  .vb-contacto.is-min-vh {
    min-height: 0;
  }
  .vb-resultados { padding-block: 36px 44px; }
  .vb-testimonios { padding-block: 44px; }

  /* Página Resultados — primer bloque más contenido */
  .res-hero-content { padding-block: 44px; }
  .res-hero { min-height: 0; }

  /* Footer compacto */
  .vb-footer { padding-block: 56px 20px; }
  .vb-footer-grid { gap: 32px 24px; }
  .vb-footer-bottom { margin-top: 32px; }

  /* Texto fluye natural, sin saltos forzados de escritorio */
  h1 br, h2 br { display: none; }
  h1, h2, h3 { text-wrap: balance; }
  p, blockquote { text-wrap: pretty; }
}