/* mobile-fix.css v4 — fixes basados en screenshots reales del usuario */

/* ============ BASE GLOBAL ============ */
@media (max-width: 880px) {
  *, *::before, *::after {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  p, h1, h2, h3, h4, h5, h6, li, a, span, strong, em, blockquote, figcaption {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
}

/* ============ FIX A: HEADER PILL FORZADO position:fixed SIEMPRE ============ */
@media (max-width: 880px) {
  header.nav,
  .site-header,
  header.site-header,
  body > header {
    position: fixed !important;
    top: 1rem !important;
    left: 1rem !important;
    right: 1rem !important;
    width: auto !important;
    max-width: calc(100vw - 2rem) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: #FFFFFF !important;  /* SOLIDO, no transparente */
    border-radius: 999px !important;
    box-shadow: 0 8px 24px rgba(15, 138, 130, 0.15), 0 2px 8px rgba(0,0,0,0.06) !important;
    z-index: 9999 !important;
    /* Sin backdrop-filter — algunos moviles lo renderizan mal */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .nav-pill {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }
  body { padding-top: 95px !important; }
  section[id] { scroll-margin-top: 115px !important; }
  /* Brand text del header oculto */
  .site-header .brand-text { display: none !important; }
}

/* ============ FIX B: .direct-list a 1 columna (TEXTO CORTADO) ============ */
@media (max-width: 880px) {
  .direct-list,
  .contact-direct,
  .contact-methods {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 1.5rem !important;
  }
  .direct-list > *,
  .direct-list a,
  .contact-direct > *,
  .contact-direct a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-column: 1 / -1 !important;
    text-align: left !important;
    word-break: break-word !important;
  }
  .direct-list a small,
  .contact-direct small {
    display: block !important;
    margin-top: 0.3rem !important;
    width: 100% !important;
  }
  /* Emails largos con break-all si hace falta */
  .direct-list a[href^="mailto:"] {
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
  }
}

/* ============ FIX C: FAB WhatsApp mas pequeño y mejor posicionado ============ */
@media (max-width: 880px) {
  .fab, .whatsapp-fab {
    position: fixed !important;
    right: 1rem !important;
    left: auto !important;
    bottom: 1.5rem !important;
    width: auto !important;
    max-width: 60px !important;
    z-index: 999 !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .fab a, .whatsapp-fab a {
    max-width: 60px !important;
    min-width: 60px !important;
    width: 60px !important;
    height: 60px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    text-indent: -9999px !important;  /* ocultar el texto "WHATSAPP" */
    overflow: hidden !important;
  }
  .fab svg, .whatsapp-fab svg {
    max-width: 28px !important;
    width: 28px !important;
    height: 28px !important;
    text-indent: 0 !important;
  }
}

/* ============ FIX D: padding-bottom MAS para barra URL navegador ============ */
@media (max-width: 880px) {
  body { padding-bottom: 0 !important; }
  main, .page-main { padding-bottom: 0 !important; }
  footer, .site-footer { padding-bottom: 2rem !important; }
}

/* ============ FIX E: imagenes rotas no muestran alt + caja verde fea ============ */
@media (max-width: 880px) {
  /* Cuando la img no carga, ocultar el alt text */
  img {
    color: transparent !important;
    font-size: 0 !important;
  }
  img[src=""], img:not([src]) {
    display: none !important;
  }
  /* Para imgs con error, fondo transparente */
  img:-moz-broken,
  img:-moz-loading {
    background: transparent !important;
  }
}

/* ============ FIX F: TODOS los bloques con MISMA ANCHURA ============ */
@media (max-width: 880px) {
  section, .page-main > section, main > section,
  .container, .wrap,
  .t-hero, .t-split, .t-numbers, .t-pricing, .t-cta,
  .about, .services, .team, .heritage, .calc, .locations,
  .cita, .faq, .brands, .reviews,
  .hero, .home-hero {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-inline: 1.25rem !important;
    box-sizing: border-box !important;
  }
  section > .container,
  section > .wrap,
  .container > .container,
  .wrap > .wrap {
    padding-inline: 0 !important;
  }
}

/* ============ FIX G: cards iguales en ancho ============ */
@media (max-width: 880px) {
  .doctor-card, .team-card, .service-feature,
  .t-feature, .brand-tile, .location, .review-card,
  .faq-item, .price-card, .loc-card,
  .t-split-figure, figure {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ============ FIX H: ocultar sticky-toc en movil ============ */
@media (max-width: 880px) {
  .sticky-toc, .toc-sticky, .treatment-toc,
  body.treatment-page .toc,
  [class*="sticky-toc"], [class*="treatment-toc"] {
    display: none !important;
  }
}

/* ============ FIX I: grids tratamientos colapsan a 1 columna ============ */
@media (max-width: 880px) {
  .t-split-grid, .t-hero-grid, .t-cta-grid, .t-pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .t-split.reverse .t-split-grid { direction: ltr !important; }
  .t-numbers-grid, .stat-grid, .numbers-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .t-feature-grid, .feature-grid { grid-template-columns: 1fr !important; }
  .cita-grid, .loc-grid, .reviews-grid,
  .footer-grid, .about-grid, .services-layout, .team-grid {
    grid-template-columns: 1fr !important;
  }
  .brands-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .brand-tile { padding: 1.5rem !important; }
}

/* ============ FIX J: padding-block secciones ============ */
@media (max-width: 880px) {
  section, .page-main > section,
  .t-hero, .t-split, .t-numbers, .t-pricing, .t-cta,
  .about, .services, .team, .heritage, .calc, .locations,
  .cita, .faq, .brands, .reviews {
    padding-block: 3.5rem !important;
  }
  .home-hero, .hero { padding-block: 4rem !important; }
}

/* ============ FIX K: cards sin min-height ============ */
@media (max-width: 880px) {
  .service-feature, .doctor-card, .team-card, .location, .t-feature {
    min-height: auto !important;
  }
  .doctor-card { padding: 1.5rem !important; }
}

/* ============ FIX L: imagenes responsive ============ */
@media (max-width: 880px) {
  img, picture, figure img {
    max-width: 100% !important;
    height: auto !important;
  }
  .t-split-figure img, .with-photo img {
    width: 100% !important;
    max-width: 100% !important;
  }
  .feature-render {
    position: static !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 1rem auto !important;
  }
}

/* ============ FIX M: tipografia ============ */
@media (max-width: 880px) {
  h1 { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important; line-height: 1.2 !important; }
  h3 { font-size: clamp(1.15rem, 4.5vw, 1.4rem) !important; line-height: 1.25 !important; }
  h4 { font-size: clamp(1rem, 4vw, 1.2rem) !important; }
  p, li { font-size: 1rem !important; line-height: 1.55 !important; }
  .eyebrow { font-size: 0.85rem !important; letter-spacing: 0.14em !important; }
  .lede { font-size: 1rem !important; }
}

/* ============ FIX N: inputs/forms ============ */
@media (max-width: 880px) {
  input, textarea, select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  button#navToggle,
  button.nav-toggle,
  input[type="radio"],
  input[type="checkbox"] {
    width: auto !important;
  }
  form, .cita-form, form.cita-form {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
  }
  .cita-form .row { grid-template-columns: 1fr !important; }
}

/* ============ FIX O: brand-mark, brand-tag, logos ============ */
@media (max-width: 880px) {
  .brand-mark-cell, .brand-mark,
  .brand-tag, .brand, .brand-text {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .brand-mark-cell { width: auto !important; }
  .brand-tag { font-size: 0.85rem !important; }
  header.nav svg, .site-header svg {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ============ FIX P: cita-side, direct-list y sus hijos ============ */
@media (max-width: 880px) {
  .cita-side {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
}

/* ============ FIX Q: tablas/iframes/mapas/video ============ */
@media (max-width: 880px) {
  table, iframe, .loc-map-frame, .t-map, video {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ============ FIX R: timeline ============ */
@media (max-width: 720px) {
  .timeline-track { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
}

/* ============ FIX S: imgs ai-placeholders ============ */
img[src*="ai-placeholders/"] {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: 480px !important;
  height: auto !important;
}

/* ============ FIX T: nav-menu open ============ */
@media (max-width: 880px) {
  nav.primary.open, .nav-menu.open {
    z-index: 9998 !important;
    top: 80px !important;
  }
}

/* ============ FIX U: footer alineado ============ */
@media (max-width: 880px) {
  footer, .site-footer {
    width: 100% !important;
    padding: 2.5rem 1.25rem !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }
  .foot-bottom, .footer-bottom {
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: flex-start !important;
  }
}

/* ============ FIX V: margenes negativos eliminados ============ */
@media (max-width: 880px) {
  [class*="negative-margin"],
  .t-hero::before, .t-hero::after,
  .about-image::after {
    margin: 0 !important;
    inset: auto !important;
    position: static !important;
  }
}

/* ===== v6 APPEND: Dr Florencio, logo home, FAB, cookie banner, gap ===== */
@media (max-width: 880px) {
  header.nav .brand-mark, .nav-pill .brand-mark, header .brand-mark {
    max-width: 175px !important;
    max-height: 50px !important;
    width: auto !important;
    height: auto !important;
  }
  .fab, .whatsapp-fab, a.whatsapp-fab, div.fab {
    width: 60px !important; height: 60px !important;
    min-width: 60px !important; max-width: 60px !important;
    border-radius: 50% !important; padding: 0 !important;
    overflow: hidden !important; display: flex !important;
    align-items: center !important; justify-content: center !important;
  }
  .fab > *:not(svg), .whatsapp-fab > *:not(svg) {
    font-size: 0 !important; color: transparent !important;
    text-indent: -9999px !important; overflow: hidden !important;
    max-width: 60px !important;
  }
  .fab svg, .whatsapp-fab svg {
    width: 28px !important; height: 28px !important;
    color: white !important;
  }
  .t-hero-visual .t-hero-visual-inner,
  .t-hero-visual-inner { display: none !important; }
  .t-hero-visual.with-photo img {
    position: relative !important;
    width: 100% !important; height: auto !important;
    border-radius: 12px !important; display: block !important;
  }
  body { padding-top: 110px !important; }
  section[id] { scroll-margin-top: 120px !important; }
  section + section, .page-main > * + * { margin-top: 0 !important; }
  #fp-cookie-banner {
    position: fixed !important; bottom: 0 !important;
    left: 0 !important; right: 0 !important;
    width: 100% !important; max-width: 100vw !important;
    padding: 1.5rem 1rem !important; background: white !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.15) !important;
    z-index: 10000 !important; box-sizing: border-box !important;
  }
  #fp-cookie-banner .fp-cb-inner { max-width: 100% !important; margin: 0 !important; }
  #fp-cookie-banner p {
    font-size: 0.85rem !important; line-height: 1.5 !important;
    margin: 0 0 1rem 0 !important; color: #333 !important;
  }
  #fp-cookie-banner .fp-cb-actions {
    display: flex !important; flex-direction: column !important;
    gap: 0.5rem !important; margin-bottom: 0.5rem !important;
  }
  #fp-cookie-banner .fp-cb-btn {
    width: 100% !important; padding: 0.85rem !important;
    border-radius: 999px !important; font-size: 0.9rem !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    cursor: pointer !important; box-sizing: border-box !important;
  }
  #fp-cookie-banner .fp-cb-primary {
    background: #0F8A82 !important; color: white !important;
    border-color: #0F8A82 !important;
  }
  #fp-cookie-banner .fp-cb-secondary {
    background: white !important; color: #0F8A82 !important;
  }
  #fp-cookie-banner .fp-cb-legal {
    margin: 0.5rem 0 0 !important; font-size: 0.75rem !important;
    text-align: center !important;
  }
  #fp-cookie-banner .fp-cb-legal a { color: #0F8A82 !important; }
}

/* ===== v6.1 — FIX TRANSFORM header.nav en home ===== */
@media (max-width: 880px) {
  header.nav, header.site-header, body > header, .site-header {
    transform: none !important;
    -webkit-transform: none !important;
    translate: 0 0 !important;
  }
}