/* ============================================================
   mobile-polish.css
   Overrides de pulido mobile compartidos entre todas las páginas.
   Solo reglas específicas de breakpoints pequeños — no toca
   el design system ni las reglas desktop.
   ============================================================ */

/* ---------- tablet & mobile (≤900px) ---------- */
@media (max-width: 900px){
  /* asegurar que nav horizontal oculte labels largos */
  .nav .nav-links{display:none !important}
  .nav{gap:16px}
  .brand-text b{font-size:14px; white-space:nowrap}
  .brand-text span{font-size:9.5px; white-space:nowrap}

  /* botones del nav: min touch target */
  .nav .btn{padding:10px 14px; font-size:13px; min-height:42px}

  /* mejora del hero de la homepage */
  .hero-visual{aspect-ratio: 4/4.6; max-height:560px}
  .hero-badge.br{min-width:auto; right:14px; bottom:14px; padding:12px 14px}
  .hero-badge.br .name{font-size:18px}
  .hero-badge.tl{top:14px; left:14px; padding:10px 12px}
  .hero-badge.tl b{font-size:12px}
  .hero-badge.tl div{font-size:10.5px}

  /* hero meta de la homepage: 2 columnas para que los números respiren */
  .hero-meta{grid-template-columns: repeat(2, 1fr) !important; gap:20px 16px}
  .hero-meta b{font-size:30px}

  /* Dr-Castillo dh-meta: ya está en flex-wrap, ajustar el gap */
  .dh-meta{gap:24px 32px}
  .dh-meta b{font-size:28px}
}

/* ---------- phone small (≤560px) ---------- */
@media (max-width: 560px){
  /* wrapper más estrecho */
  .wrap{padding:0 18px !important}

  /* headlines gigantes: bajar el mínimo del clamp */
  h1{letter-spacing:-0.02em}
  .hero h1, .dh h1, .ph-headline, .page-hero h1{
    font-size: clamp(40px, 10vw, 54px) !important;
    line-height: 1.04 !important;
  }
  h2{letter-spacing:-0.015em}
  .doc-body h2, .philo-grid h2, .tl-head h2, .aud-head h2, .proc-head h2,
  .areas h2, .cta-band h2{
    font-size: clamp(32px, 8vw, 44px) !important;
  }

  /* textos body: mínimo legible con más aire */
  body{line-height:1.6}
  .hero-kicker, .dh .tag, .philo-grid p, .aud-head p, .proc-head p{
    font-size:15.5px !important;
    line-height:1.6 !important;
  }

  /* secciones: menos padding vertical para rhythm compacto */
  section{padding:56px 0 !important}
  .hero, .dh, .page-hero{padding:32px 0 48px !important}
  .timeline, .philo, .audience, .process{padding:64px 0 !important}
  .cta-band{padding:64px 0 !important}

  /* header más corto */
  .nav{height:60px !important}
  .nav-root .btn{font-size:12.5px; padding:9px 14px}

  /* CTAs: full-width y centrados para tap fácil */
  .hero-ctas, .cta-band .btns, .btns{flex-direction:column !important; width:100%}
  .hero-ctas .btn, .cta-band .btns .btn{
    width:100%; justify-content:center;
    min-height:52px; padding:14px 20px;
    font-size:15px;
  }

  /* chips y tags: mejor touch */
  .cred-chip, .tag-chip{font-size:11px; padding:6px 10px; min-height:28px; display:inline-flex; align-items:center}

  /* Dr-Castillo: timeline en mobile */
  .tl-item{padding:22px 0 !important}
  .tl-year{font-size:18px !important}
  .tl-title{font-size:16.5px !important}

  /* hospital strip: 2 col sigue siendo razonable */
  .hosp{padding:16px 12px}
  .hosp b{font-size:12.5px}
  .hosp .hmark{width:36px; height:36px; font-size:18px}

  /* Dr-Castillo: badges flotantes — ocultar en pantallas muy chicas para evitar clutter */
  .cred-badge.cb-fmf, .cred-badge.cb-cmgo{
    position:static; margin-top:14px; display:inline-flex;
    box-shadow:none; border-color:var(--line-2);
  }
  .dh-photo-wrap{display:flex; flex-direction:column; align-items:flex-start; gap:8px}
  .dh-photo{width:100%; max-width:100%; margin:0}

  /* principles: stackear con menos separación */
  .principles{gap:10px !important; margin-top:24px !important}
  .principle{padding:18px 18px !important}

  /* proceso: cards más compactas */
  .step{padding:22px 20px !important}
  .step .sn{font-size:34px !important}

  /* footer mobile: columnas en 2, brand full-width */
  .foot-grid{grid-template-columns: 1fr 1fr !important; gap:28px !important}
  .foot-brand{grid-column: span 2 !important}
  .foot-col a{padding:6px 0; font-size:13px}
  .foot-bottom{flex-direction:column !important; gap:10px !important; align-items:flex-start !important; font-size:11.5px !important}

  /* pull quote mas chico */
  .pull{font-size:20px !important; padding:24px 22px !important; line-height:1.4 !important}

  /* contacto: touch targets grandes */
  .channel{padding:16px !important; min-height:64px}

  /* articulo: byline wrap */
  .byline{flex-wrap:wrap; gap:10px !important}

  /* FMF highlight card en Dr-Castillo */
  .fmf-cert{padding:22px !important; gap:16px !important}
  .fmf-cert .crest{width:52px; height:52px; font-size:18px}
  .fmf-cert h3{font-size:16px !important}
  .fmf-cert p{font-size:13px !important}
  .fmf-cert .since b{font-size:26px !important}

  /* WhatsApp flotante: no tapar el footer */
  .wa-float{bottom:16px; right:16px; padding:14px !important}
  .wa-float .txt{display:none}
}

/* ---------- phone extra small (≤380px) ---------- */
@media (max-width: 380px){
  .wrap{padding:0 14px !important}
  .hero h1, .dh h1{font-size:38px !important}
  .brand-mark{width:34px; height:34px}
  .brand-text b{font-size:13px}
  .dh-meta b, .hero-meta b{font-size:26px !important}
}

/* ============================================================
   TELÉFONO VISIBLE EN MOBILE (nav header)
   ============================================================ */
.nav-tel{
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  white-space: nowrap;
  transition: background .15s;
}
.nav-tel:hover{ background: var(--bg-soft); }
.nav-tel svg{ flex-shrink: 0; }

@media (max-width: 900px){
  .nav-tel{ display: flex; }
}
@media (max-width: 480px){
  .nav-tel .nav-tel-num{ display: none; }
  .nav-tel{ padding: 9px 10px; }
}

/* ============================================================
   LOGO DE MARCA
   ============================================================ */
.brand-logo{
  height: 44px;
  width: auto;
  display: block;
  object-fit: contain;
}
@media (max-width: 560px){
  .brand-logo{ height: 36px; }
}

/* ============================================================
   HAMBURGER BUTTON
   ============================================================ */
.hamburger{
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--line-2, oklch(0.84 0.010 240));
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .15s;
  flex-shrink: 0;
}
.hamburger:hover{ background: var(--bg-soft, oklch(0.965 0.010 240)); }
.hamburger span{
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink, oklch(0.20 0.03 250));
  transition: transform .25s ease, opacity .2s ease;
  transform-origin: center;
}
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity: 0; transform: scaleX(0); }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px){
  .hamburger{ display: flex; }
  .nav-end{ display: flex; align-items: center; gap: 10px; }
  /* homepage uses nav-cta instead of nav-end */
  .nav-cta{ display: flex; align-items: center; gap: 10px; }
  /* hide lang toggle on small screens */
  .lang{ display: none !important; }
}

/* ============================================================
   MOBILE NAV OVERLAY + DRAWER
   ============================================================ */
.mobile-overlay{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 30, .45);
  backdrop-filter: blur(3px);
  z-index: 80;
  opacity: 0;
  transition: opacity .28s ease;
}
.mobile-overlay.open{
  display: block;
  opacity: 1;
}

.mobile-nav{
  position: fixed;
  top: 0; right: 0;
  height: 100%;
  width: min(340px, 88vw);
  background: var(--bg-card, #ffffff);
  z-index: 90;
  display: flex;
  flex-direction: column;
  padding: 0 0 32px;
  box-shadow: -12px 0 48px rgba(10,14,30,.18);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
  border-left: 1px solid var(--line, oklch(0.90 0.008 240));
}
.mobile-nav.open{
  transform: translateX(0);
}

.mobile-nav-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 68px;
  border-bottom: 1px solid var(--line, oklch(0.90 0.008 240));
  flex-shrink: 0;
}
.mobile-nav-head .brand-logo{ height: 36px; }

.mobile-close{
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--line-2, oklch(0.84 0.010 240));
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink, oklch(0.20 0.03 250));
  transition: background .15s;
}
.mobile-close:hover{ background: var(--bg-soft, oklch(0.965 0.010 240)); }

.mobile-links{
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  flex: 1;
  overflow-y: auto;
}
.mobile-links a{
  font-size: 17px;
  font-weight: 400;
  color: var(--ink-2, oklch(0.40 0.02 250));
  padding: 15px 28px;
  border-bottom: 1px solid var(--line, oklch(0.90 0.008 240));
  transition: color .15s, background .15s;
  display: block;
}
.mobile-links a:hover{
  color: var(--ink, oklch(0.20 0.03 250));
  background: var(--bg-soft, oklch(0.965 0.010 240));
}
.mobile-links a.active{
  color: var(--ink, oklch(0.20 0.03 250));
  font-weight: 600;
}

.mobile-cta{
  margin: 20px 24px 0;
  width: calc(100% - 48px) !important;
  justify-content: center;
  min-height: 52px;
  font-size: 15px;
}

/* ============================================================
   NAV-END (wrapper for CTA + hamburger in non-homepage pages)
   ============================================================ */
.nav-end{
  display: flex;
  align-items: center;
  gap: 10px;
}
/* hide desktop CTA on mobile, keep hamburger */
@media (max-width: 900px){
  .nav-end > .btn{ display: none; }
  .nav-cta > .btn-wa{ display: none; }
}

/* ---------- misc fixes que aplican a todos los tamaños ---------- */

/* prevenir overflow horizontal por transforms / scale */
html, body{overflow-x:hidden}

/* asegurar scroll-smooth al clicar anchors */
html{scroll-behavior:smooth}

/* focus states visibles para accesibilidad */
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:2px solid var(--accent, #3A5A8C);
  outline-offset:3px;
  border-radius:8px;
}

/* ============================================================
   TELÉFONO VISIBLE EN MOBILE NAV
   ============================================================ */
.nav-phone{ display: none; }
@media (max-width: 900px){
  .nav-phone{
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 500;
    color: var(--ink, oklch(0.20 0.03 250));
    padding: 9px 13px; border-radius: 999px;
    border: 1px solid var(--line-2, oklch(0.84 0.010 240));
    background: transparent; white-space: nowrap;
    transition: background .15s; text-decoration: none;
  }
  .nav-phone:hover{ background: var(--bg-soft, oklch(0.965 0.010 240)); }
  .nav-phone svg{ flex-shrink: 0; }
}
@media (max-width: 400px){
  .nav-phone-num{ display: none !important; }
  .nav-phone{ padding: 10px; }
}

/* drawer footer: teléfono y ubicación */
.mobile-footer{
  padding: 16px 24px;
  border-top: 1px solid var(--line, oklch(0.90 0.008 240));
}
.mobile-footer a{
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--ink-2, oklch(0.40 0.02 250));
  padding: 10px 0; text-decoration: none; transition: color .15s;
  border-bottom: 1px solid var(--line, oklch(0.90 0.008 240));
}
.mobile-footer a:last-child{ border-bottom: none; }
.mobile-footer a:hover{ color: var(--ink, oklch(0.20 0.03 250)); }
.mobile-footer a svg{ color: var(--ink-3, oklch(0.60 0.015 250)); flex-shrink: 0; }