/* ═══════════════════════════════════════════════════════
   MOBILE-FIRST REFACTOR — Dra. Lorena Almagro
   Target: 360-414px · Objective: -40% scroll height
   Decisions: Acordeón en Metodología, Tabs en Áreas,
              Pills en Obras Sociales, 2-col en Contacto
   ═══════════════════════════════════════════════════════ */

/* ── SECTION PADDING GLOBAL ── */
@media (max-width: 767px) {
  section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  .section-divider { margin: 0 !important; }
  .container { padding: 0 16px !important; }

  /* Section headers spacing */
  .section-header { margin-bottom: 1.25rem !important; }
}

/* ── Metodología: desktop muestra contenido normal ── */
@media (min-width: 768px) {
  /* En desktop, el JS oculta trigger y muestra desktop-only
     Pero como precaución CSS también lo garantiza */
  .step-card-trigger { display: none !important; }
  .step-card-body { display: none !important; }
  .step-desktop-only {
    display: flex !important;
    flex-direction: column !important;
  }
  .step-card-chevron { display: none !important; }

  /* Restaurar estructura horizontal de step-card en desktop */
  .step-card {
    flex-direction: row !important;
    gap: 24px !important;
    padding: 32px !important;
  }

  /* Paneles: en desktop ambos visibles */
  .servicio-panel { display: block !important; }
  .servicios-tabs-mobile { display: none !important; }
}

/* ─────────────────────────────────────────────
   §2  ESPECIALIDADES — Grid 2×2 en mobile
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .especialidades-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    border: 1px solid #E8DCC8 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
  }

  .especialidad-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
    padding: 18px 12px !important;
    border-radius: 0 !important;
    border: none !important;
    border-right: 1px solid #E8DCC8 !important;
    border-bottom: 1px solid #E8DCC8 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* Columna derecha: sin borde derecho */
  .especialidad-card:nth-child(2n) {
    border-right: none !important;
  }

  /* Fila inferior: sin borde abajo */
  .especialidad-card:nth-last-child(-n+2) {
    border-bottom: none !important;
  }

  .especialidad-icon-wrap {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    margin: 0 0 4px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }
  .especialidad-icon-wrap svg { width: 20px !important; height: 20px !important; }

  .especialidad-card h3 {
    font-size: 0.82rem !important;
    margin-bottom: 2px !important;
    line-height: 1.3 !important;
  }
  .especialidad-card p {
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    color: #6B5344 !important;
  }
}

/* ─────────────────────────────────────────────
   §3  OBRAS SOCIALES — Pills compactas
   ───────────────────────────────────────────── */
.os-pills-mobile {
  display: none;
}

@media (max-width: 767px) {
  #obras-sociales {
    padding: 32px 0 !important;
  }

  /* Ocultar grid grande de botones */
  .os-cards-grid { display: none !important; }

  /* Mostrar pills */
  .os-pills-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 0 auto 1.5rem;
  }
}

.os-pill {
  background: #FFFFFF;
  border: 1.5px solid #C8B8A8;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #3D2817;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  line-height: 1;
}

.os-pill:hover {
  background: #3D2817;
  color: #FFFFFF;
  border-color: #3D2817;
}

/* Fix: texto de las os-card-btn era color crema (invisible) */
.os-card-btn span { color: #3D2817 !important; }

/* ─────────────────────────────────────────────
   §4  TALLERES — Texto corto en mobile
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .taller-card .taller-desc-short {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 1rem !important;
    font-size: 0.88rem !important;
  }
  .taller-card { padding: 1.25rem !important; }
  .talleres { padding: 32px 0 !important; }
}

/* ─────────────────────────────────────────────
   §5  METODOLOGÍA — Acordeón en mobile
   ───────────────────────────────────────────── */

/* Desktop: estructura de dos columnas se mantiene */
@media (min-width: 768px) {
  .step-card-chevron { display: none !important; }
  .step-card-body { display: block !important; }
  .step-card-trigger { cursor: default; pointer-events: none; }
}

/* Mobile: acordeón */
@media (max-width: 767px) {
  #como-trabajo { padding: 32px 0 !important; }

  .container-metodologia {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 0 !important;
  }

  .metodologia-left {
    position: relative !important;
    top: auto !important;
    text-align: center !important;
  }

  .metodologia-desc { font-size: 0.88rem !important; }

  .metodologia-right { width: 100% !important; }

  .metodologia-steps {
    gap: 0 !important;
    border: 1px solid #E8DCC8 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  /* Quitar sticky y márgenes enormes */
  .step-card.sticky-card {
    position: relative !important;
    top: auto !important;
    margin-bottom: 0 !important;
  }

  .step-card {
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid #E8DCC8 !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .step-card:last-child { border-bottom: none !important; }

  /* Trigger (título clicable) */
  .step-card-trigger {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    cursor: pointer !important;
    width: 100% !important;
    user-select: none !important;
  }

  /* Body colapsable */
  .step-card-body {
    overflow: hidden !important;
    max-height: 0 !important;
    transition: max-height 0.32s ease, padding 0.32s ease !important;
    padding: 0 16px !important;
  }

  .step-card.accordion-open .step-card-body {
    max-height: 260px !important;
    padding: 0 16px 14px !important;
  }

  /* Chevron del acordeón */
  .step-card-chevron {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    color: #8B6355 !important;
    transition: transform 0.3s ease !important;
    display: block !important;
  }

  .step-card.accordion-open .step-card-chevron {
    transform: rotate(180deg) !important;
  }

  /* Ícono y texto trigger compactos */
  .step-icon-wrap {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }
  .step-icon-wrap svg { width: 18px !important; height: 18px !important; }

  .step-num { font-size: 0.65rem !important; margin-bottom: 2px !important; }
  .step-content h3 { font-size: 0.95rem !important; margin: 0 !important; }
  .step-content > p { font-size: 0.85rem !important; margin: 0 0 8px !important; }

  .step-resultado {
    margin: 8px 0 !important;
    font-size: 0.8rem !important;
  }
  .step-frase { font-size: 0.8rem !important; margin-top: 6px !important; }

  .metodologia-final-cta {
    margin-top: 16px !important;
    padding: 20px 16px !important;
  }
}

/* Texto del trigger (encapsula num+h3) */
.step-trigger-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ─────────────────────────────────────────────
   §6  ÁREAS DE ATENCIÓN — Tabs en mobile
   ───────────────────────────────────────────── */

/* Tab switcher: oculto en desktop */
.servicios-tabs-mobile { display: none; }

@media (max-width: 767px) {
  #estudios { padding: 32px 0 !important; }

  /* Mostrar tabs */
  .servicios-tabs-mobile {
    display: flex !important;
    background: #F5EDE4 !important;
    border-radius: 100px !important;
    padding: 4px !important;
    margin: 0 auto 1.5rem !important;
    width: fit-content !important;
  }

  /* Paneles */
  .servicio-panel { display: none; }
  .servicio-panel.active { display: block; }

  /* Card compacta */
  .servicio-card { padding: 1.25rem !important; }

  /* Imagen más pequeña en mobile */
  .servicio-card-img-wrap {
    height: 140px !important;
    margin-bottom: 1rem !important;
  }

  /* Checklist → 2 columnas chip */
  .servicio-items-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 1rem !important;
  }

  .servicio-items-list li {
    font-size: 0.8rem !important;
    background: #F5EDE4 !important;
    border-radius: 8px !important;
    padding: 6px 8px !important;
    gap: 5px !important;
    line-height: 1.3 !important;
    align-items: flex-start !important;
  }

  /* Ocultar grid de 2 columnas, mostrar stack de paneles */
  .servicios-cards-grid {
    display: block !important;
  }
}

/* Botón de tab — selector más específico para vencer el reset global de botones
   (el reset tiene especificidad 0,2,1; este selector tiene 0,2,1 + carga posterior) */
.servicios-tabs-mobile button.servicio-tab-btn {
  background: transparent !important;
  background-image: none !important;
  color: #5C2A18 !important;        /* marrón cálido, legible sobre crema */
  border: none !important;
  border-radius: 100px !important;
  padding: 8px 22px !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background 0.2s ease, color 0.2s ease !important;
  min-height: 44px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.servicios-tabs-mobile button.servicio-tab-btn.active {
  background: #3D1C0A !important;
  background-image: none !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

.servicios-tabs-mobile button.servicio-tab-btn:hover:not(.active) {
  background: rgba(61, 26, 0, 0.07) !important;
  color: #3D1A00 !important;
}

/* ─────────────────────────────────────────────
   §11  CONTACTO — Grid 2 columnas en mobile
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  #contacto { padding: 32px 0 !important; }

  .contacto-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .contacto-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .contacto-card-item {
    padding: 12px 8px !important;
    border-radius: 12px !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 6px !important;
    min-height: 80px !important;
    justify-content: center !important;
  }

  .card-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 8px !important;
  }

  .card-info h4 {
    font-size: 0.8rem !important;
    margin: 0 !important;
    font-weight: 700 !important;
  }

  .card-info p {
    font-size: 0.7rem !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    color: inherit !important;
  }

  .contacto-promo-strip {
    font-size: 0.75rem !important;
    padding: 10px !important;
    text-align: center !important;
  }

  .mapa-wrapper { margin-top: 0 !important; }
}

/* ─────────────────────────────────────────────
   §12  MAPA — Altura reducida en mobile
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .mapa-wrapper iframe {
    height: 240px !important;
  }
}

/* ─────────────────────────────────────────────
   §8  SOBRE MÍ — Bio compacta
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  #sobre-mi .sobre-mi-image img {
    max-height: 260px !important;
    object-fit: cover !important;
    object-position: center top !important;
    width: 100% !important;
  }

  #sobre-mi .sobre-mi-text > p {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }
}

/* ─────────────────────────────────────────────
   FAQ — Reducir margin-bottom del header
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  #faq .container > .reveal:first-child {
    margin-bottom: 1.5rem !important;
  }

  .faq-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
}

/* ─────────────────────────────────────────────
   STICKY BAR — safe-area + no tapa contenido
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Garantizar safe-area para iPhone con home indicator */
  .fab-sticky,
  #sticky-mobile-cta {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }

  footer {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 24px) !important;
  }
}

/* ─────────────────────────────────────────────
   PHONAK TEASER — Mobile compacto
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .phonak {
    margin: 0 !important;
    padding: 32px 16px !important;
    border-radius: 0 !important;
  }

  .phonak-teaser-grid {
    flex-direction: column !important;
    gap: 20px !important;
  }

  .phonak-blockquote {
    font-size: 0.9rem !important;
    margin: 12px 0 !important;
  }

  .phonak-teaser-right-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
}

/* ─────────────────────────────────────────────
   HERO — Eliminar padding extra innecesario
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .hero-ctas { gap: 0 !important; }

  .hero-trust-micro { margin-top: 8px !important; }

  /* El link de talleres no necesita tanto margen */
  .hero-talleres-link { margin-top: 12px !important; }
}