/*
 * responsive.css — Dra. Ana Calderón
 * Correcciones globales de diseño adaptable: móvil · tablet · escritorio
 * Incluir en TODAS las páginas justo antes de </head>
 */

/* ══════════════════════════════════════════════════
   BASE — Previene desbordamiento horizontal global
══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; }
img, video, iframe { max-width: 100%; height: auto; }

/* ══════════════════════════════════════════════════
   WHATSAPP FLOTANTE — visible en todos los tamaños
══════════════════════════════════════════════════ */
.whatsapp-float {
  position: fixed !important;
  z-index: 9999 !important;  /* sobre cualquier overlay */
}

@media (max-width: 768px) {
  .whatsapp-float {
    width: 52px !important;
    height: 52px !important;
    bottom: 16px !important;
    right: 16px !important;
    font-size: 1.5rem !important;
  }
  /* Ocultar tooltip en touch (hover no funciona en móvil) */
  .whatsapp-float__tooltip { display: none !important; }
}

@media (max-width: 480px) {
  .whatsapp-float {
    width: 48px !important;
    height: 48px !important;
    bottom: 12px !important;
    right: 12px !important;
    font-size: 1.35rem !important;
  }
}

/* ══════════════════════════════════════════════════
   CONTENEDOR — padding lateral en móvil
══════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .container { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ══════════════════════════════════════════════════
   TIPOGRAFÍA — escala fluida en móvil
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  h1 { font-size: clamp(1.8rem, 7vw, 2.6rem) !important; }
  h2 { font-size: clamp(1.4rem, 5.5vw, 2rem) !important; }
  h3 { font-size: clamp(1.1rem, 4.5vw, 1.4rem) !important; }
  .section-title, .section__title { font-size: clamp(1.5rem, 6vw, 2.2rem) !important; }
  .hero__title { font-size: clamp(1.8rem, 7.5vw, 2.8rem) !important; }
  .hero__subtitle, .hero__description { font-size: 0.95rem !important; line-height: 1.65 !important; }
}

@media (max-width: 480px) {
  h1 { font-size: clamp(1.6rem, 8vw, 2.2rem) !important; }
  h2 { font-size: clamp(1.25rem, 6vw, 1.7rem) !important; }
  .hero__badge, .section__tag, .section-tag { font-size: 0.72rem !important; }
}

/* ══════════════════════════════════════════════════
   NAVBAR — menú hamburguesa en móvil
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .navbar__links:not(.open) { display: none !important; }
  .navbar__burger { display: flex !important; }
  .navbar__inner { position: relative; }
}

/* ══════════════════════════════════════════════════
   BOTONES — apilados verticalmente en móvil pequeño
══════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .hero__ctas,
  .cta-group,
  .btn-group {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .hero__ctas .btn,
  .cta-group .btn,
  .btn-group .btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .btn-lg { padding: 13px 20px !important; font-size: 0.92rem !important; }
}

/* ══════════════════════════════════════════════════
   HERO — ajustes en móvil
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero__card--1,
  .hero__card--2 { display: none !important; } /* tarjetas flotantes — fuera en móvil */
  .hero__image-frame { width: 280px !important; height: 320px !important; margin: 0 auto !important; }
  .hero__tags { justify-content: center !important; flex-wrap: wrap !important; gap: 8px !important; }
}

@media (max-width: 480px) {
  .hero__image-frame { width: 220px !important; height: 260px !important; }
  .hero__tag { font-size: 0.72rem !important; padding: 4px 10px !important; }
}

/* ══════════════════════════════════════════════════
   GRIDS — una columna en móvil
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .procedures__grid,
  .testimonials__grid,
  .blog__grid,
  .blog-list__grid,
  .related-grid,
  .specs__grid,
  .benefits__grid,
  .team__grid,
  .gallery__grid,
  .packages__grid,
  .stats__grid,
  .features__grid,
  .col-row { grid-template-columns: 1fr !important; }

  /* Dos columnas en tablet intermedio */
  @media (min-width: 540px) {
    .blog__grid,
    .blog-list__grid,
    .related-grid { grid-template-columns: repeat(2, 1fr) !important; }
  }
}

/* ══════════════════════════════════════════════════
   TARJETAS DE BLOG — sin contenido cortado
══════════════════════════════════════════════════ */
.blog__card,
.blog-card,
.related-card,
.blog-list__card {
  overflow: visible !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

.blog__card-excerpt,
.blog-card__excerpt,
.related-card__excerpt,
.card-excerpt {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.blog__card-img,
.blog-card__img,
.related-card__img,
.card-img {
  width: 100% !important;
  object-fit: cover !important;
}

@media (max-width: 768px) {
  .blog__card-img,
  .blog-card__img { height: 180px !important; }

  .blog__card-title,
  .blog-card__title,
  .related-card__title { font-size: 1rem !important; line-height: 1.4 !important; }

  .blog__card-excerpt,
  .blog-card__excerpt { font-size: 0.875rem !important; }
}

/* ══════════════════════════════════════════════════
   SIDEBAR Y ARTÍCULOS DE BLOG
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .article-layout,
  .blog-layout,
  .page-layout {
    grid-template-columns: 1fr !important;
  }
  .sidebar { order: 2 !important; }
  .article-content { order: 1 !important; }
  .sidebar-card { margin-bottom: 16px !important; }

  /* Tablas dentro de artículos */
  table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
}

/* ══════════════════════════════════════════════════
   FORMULARIOS — prevenir zoom en iOS
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important; /* iOS no hace zoom si font-size >= 16px */
  }
  .form-row { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════
   SECCIONES — spacing en móvil
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .section,
  section { padding: 56px 0 !important; }
  .hero { padding: 48px 0 40px !important; }
}

@media (max-width: 480px) {
  .section,
  section { padding: 44px 0 !important; }
  .hero { padding: 36px 0 32px !important; }
}

/* ══════════════════════════════════════════════════
   FOOTER — apilado en móvil
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .footer__grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer__bottom { flex-direction: column !important; text-align: center !important; gap: 8px !important; }
  .footer__legal { flex-direction: column !important; align-items: center !important; gap: 6px !important; }
  .footer__social { justify-content: center !important; }
}

/* ══════════════════════════════════════════════════
   NAVBAR LOGO — tamaño en móvil
══════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .navbar__logo img { max-width: 160px !important; height: 40px !important; }
}

/* ══════════════════════════════════════════════════
   TABLAS DE COMPARACIÓN — scroll horizontal
══════════════════════════════════════════════════ */
.comparison-table,
.savings__table,
.comp-table {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  display: block !important;
}

/* ══════════════════════════════════════════════════
   TARJETAS DE PROCEDIMIENTOS
══════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .procedure__card,
  .proc-card,
  .specialty-card { padding: 20px 16px !important; }
  .procedure__title,
  .proc-title { font-size: 1rem !important; }
}

/* ══════════════════════════════════════════════════
   INTERNACIONAL — paquetes y precios
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .packages__grid,
  .pricing-grid,
  .intl-packages { grid-template-columns: 1fr !important; }
  .package-card__price { font-size: 1.8rem !important; }
}

/* ══════════════════════════════════════════════════
   BREADCRUMBS — wrap en móvil
══════════════════════════════════════════════════ */
.breadcrumb {
  flex-wrap: wrap !important;
  gap: 4px !important;
}

/* ══════════════════════════════════════════════════
   IMÁGENES DE PERFIL / MARCOS — responsivos
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .about__inner,
  .profile__inner,
  .doctor-section__inner { grid-template-columns: 1fr !important; }
  .about__image-frame,
  .profile__image-frame { max-width: 320px !important; margin: 0 auto !important; height: auto !important; aspect-ratio: 3/4 !important; }
}