/* ------------------------------------------------------------------
   Capa propia: correcciones de UX, componentes nuevos y responsive.
   Se carga DESPUÉS de styles.css, que se conserva intacto.
   ------------------------------------------------------------------ */

/* ============ Correcciones generales ============ */

/* El atributo hidden no surtía efecto: .ok y .stack declaran
   display:grid, que gana a [hidden]{display:none} del navegador. */
[hidden] { display: none !important; }

/* Cabecera sticky: los anclajes dejaban el título tapado. Se suma la
   altura de la franja de demostración. */
[id] { scroll-margin-top: 112px; }
@media (min-width: 1024px) { [id] { scroll-margin-top: 120px; } }


/* ============ Franja de demostración ============ */

/* Va fija junto a la cabecera para que también la vea quien aterrice a
   media página, no solo quien llegue al pie. */
.demo-bar {
  position: sticky; top: 0; z-index: 45;
  background: var(--tinta); color: rgba(255,255,255,.82);
  font: 500 11.5px/1 var(--fb); letter-spacing: .02em;
  text-align: center; padding: 8px 16px;
}
.hdr { top: 27px; }
.demo-corta { display: none; }
@media (max-width: 640px) {
  .demo-larga { display: none; }
  .demo-corta { display: inline; }
}

body { overflow-wrap: break-word; }

/* .alert es flex, así que el enlace del teléfono se convertía en una
   columna aparte y partía la frase en tres bloques. El texto va ahora
   envuelto en un span y ocupa una sola columna. */
.alert > span { flex: 1; }


/* ============ Marca ============ */

.hdr .logo .wm, .ftr .logo .wm { white-space: nowrap; }
.ftr .logo-ftr { color: #fff; }
.ftr .logo-ftr img { width: 44px; height: 44px; }
/* El descriptor del logotipo iba alineado a la izquierda bajo el
   nombre. El text-indent compensa el espaciado entre letras, que si no
   deja el texto ligeramente escorado. */
.logo .mc { text-align: center; text-indent: .3em; }

@media (max-width: 400px) {
  .hdr .logo .wm { font-size: 17px; }
  .hdr .logo img { width: 32px; height: 32px; }
}


/* Entre 1024 y 1199 la cabecera no cabe: el nombre nuevo es más ancho
   que el anterior y logo + nav + botones sumaban 949px en 849 útiles.
   Se recupera espacio del margen, del interlineado del nav y del
   tamaño del logotipo. */
@media (min-width: 1024px) and (max-width: 1199px) {
  :root { --gutter: 48px; }
  .hdr .nav { gap: 22px; font-size: 14px; }
  .hdr .logo .wm { font-size: 21px; }
  .hdr .logo img { width: 38px; height: 38px; }
  .hdr-cta { gap: 8px; }

  /* El hero de escritorio usa una columna fija de 560px que a 1024 no
     entra: la columna de texto no puede encoger por debajo de su
     contenido mínimo y el conjunto desbordaba 42px. */
  .hero-d { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 40px; padding: 48px 0 64px; }
  .hero-d .ph { height: 540px; }
  .hero-d .txt h1 { font-size: 46px; }

  /* /servicios: columna lateral de 320px + 80 de hueco dejaban 528px
     para tres tarjetas, que no caben. */
  .fam-grid { grid-template-columns: 260px 1fr; gap: 40px; }
  .fam-grid .grid3 { grid-template-columns: 1fr 1fr; }

  /* /pacientes: con la nav lateral de 260 y 80 de hueco, más el relleno
     nuevo del panel, las tarjetas de paso bajaban a 244px. */
  .wrap.pac-grid { grid-template-columns: 230px 1fr; gap: 40px; }
  .pac-grid .pac-sec { padding: 32px 28px 36px; }
}


/* ============ Botón flotante de WhatsApp ============ */

.wa-zona {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.wa {
  position: relative; right: auto; bottom: auto;
  background: #25D366; box-shadow: 0 8px 22px rgba(37, 211, 102, .38);
}
.wa:hover { background: #1FB855; filter: none; color: #fff; }
.wa svg { width: 30px; height: 30px; }
body.has-sticky .wa { bottom: auto; }
body.has-sticky .wa-zona { bottom: 92px; }
@media (min-width: 1024px) {
  .wa-zona { right: 32px; bottom: 32px; }
  .wa svg { width: 32px; height: 32px; }
  body.has-sticky .wa-zona { bottom: 32px; }
}

.wa-globo {
  position: relative; width: min(288px, calc(100vw - 44px));
  background: #fff; border: 1px solid var(--linea-s); border-radius: 16px;
  padding: 16px 18px 18px; box-shadow: 0 14px 36px rgba(46, 53, 56, .18);
  display: grid; gap: 6px; animation: wa-entra .28s ease-out;
}
.wa-globo::after {
  content: ""; position: absolute; right: 22px; bottom: -7px;
  width: 13px; height: 13px; background: #fff;
  border-right: 1px solid var(--linea-s); border-bottom: 1px solid var(--linea-s);
  transform: rotate(45deg);
}
.wa-globo-x {
  position: absolute; top: 7px; right: 7px; width: 28px; height: 28px;
  border: 0; background: transparent; border-radius: 8px;
  display: grid; place-items: center; color: var(--gris-700); cursor: pointer;
}
.wa-globo-x:hover { background: var(--hueso); }
.wa-globo-x svg { width: 15px; height: 15px; }
.wa-globo-t { font: 600 15px/1.3 var(--fd); color: var(--tinta); padding-right: 26px; }
.wa-globo-p { font-size: 13px; line-height: 1.45; color: var(--gris-700); }
.wa-globo-cta {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 8px; min-height: 40px; border-radius: 9px;
  background: #25D366; color: #fff; font: 700 13px/1 var(--fb);
}
.wa-globo-cta:hover { background: #1FB855; color: #fff; }
@keyframes wa-entra { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .wa-globo { animation: none } }


/* ============ Pie con iconos ============ */

.ftr .k { display: flex; align-items: center; gap: 8px; }
.ftr .k svg { width: 15px; height: 15px; color: #8FD0D7; flex: none; }
.ftr .soc { flex-wrap: wrap; }
.ftr .soc a { display: inline-flex; align-items: center; gap: 7px; }
.ftr .soc svg { width: 17px; height: 17px; flex: none; }


/* Crédito de autoría */
.ftr .credito {
  border-top: 1px solid rgba(255,255,255,.14); margin-top: 16px; padding-top: 16px;
  display: grid; gap: 6px; font-size: 12.5px; color: rgba(255,255,255,.5);
}
.ftr .credito a { color: rgba(255,255,255,.72); text-decoration: underline; }
.ftr .credito a:hover { color: #8FD0D7; }
@media (min-width: 1024px) { .ftr .credito { grid-template-columns: 1fr auto; } }


/* ============ Iconos en pasos, tarjetas y credenciales ============ */

.step .txt h3 { display: flex; align-items: center; gap: 9px; }
.step .txt h3 svg { width: 19px; height: 19px; color: var(--turq); flex: none; }

/* Sellos de sociedades médicas */
.sello {
  height: 76px; border-radius: 10px; background: var(--hueso);
  display: grid; place-items: center; gap: 5px; align-content: center;
  border: 1px solid var(--linea-s);
}
.sello svg { width: 21px; height: 21px; color: var(--turq); }
.sello b { font: 700 20px/1 var(--fd); color: var(--turq); letter-spacing: .04em; }

/* Logotipos reales. Las alturas no son iguales a propósito: los tres
   lockups tienen proporciones muy distintas (ISAPS 1.8, CMP 2.8,
   FILACP 3.4) y a igual altura FILACP se veía el doble de grande. Se
   igualan por peso óptico, no por píxeles. */
.sello img { max-width: 100%; object-fit: contain; }
.sello-spcp img   { max-height: 58px; }
.sello-isaps img  { max-height: 54px; }
.sello-cmp img    { max-height: 44px; }
.sello-filacp img { max-height: 40px; }


/* Retrato de /especialista: a 3/4 en una columna de 600px salía de
   800px de alto y desbordaba con creces al texto de al lado. */
@media (min-width: 1024px) {
  /* Se anula el aspect-ratio en vez de acotar la altura: acotándola,
     el ancho encogía con ella y dejaba un hueco en la columna. */
  .ph-retrato { aspect-ratio: auto !important; height: 520px; }
  /* La foto es 3:4 y la caja queda apaisada, así que el recorte
     centrado se comía la cabeza por arriba. Se ancla al tercio
     superior, que es donde está el rostro. */
  .ph-retrato img { object-position: 50% 8%; }
}


/* ============ /pacientes: más aire entre bloques ============ */

.pac-sec .steps { margin-top: 4px; }
.pac-nota {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px; border-radius: 10px; background: #fff;
  border: 1px solid var(--linea-s); font-size: 15px; color: var(--tinta-700);
  margin-top: 8px;
}
.pac-nota svg { width: 19px; height: 19px; color: var(--turq); flex: none; margin-top: 2px; }
@media (min-width: 1024px) {
  .pac-sec .card { background: var(--hueso) !important; }
  /* El número quedaba centrado sobre un texto alineado a la izquierda */
  .step .rail { justify-items: start; }

  /* Los paneles con fondo salían sin relleno: el título tocaba el borde
     superior y el texto los laterales. La regla original los quería
     transparentes en escritorio, pero .sec.hueso gana por especificidad
     y el fondo se quedaba. Se les da aire y esquinas redondeadas.
     Selector con .pac-grid delante porque el <style> de la página va
     después de esta hoja y ganaría por orden. */
  .pac-grid .pac-sec {
    padding: 40px 40px 44px;
    margin-bottom: 28px;
    border-radius: var(--r);
  }
  .pac-grid .pac-sec:last-child { margin-bottom: 0; }
}
.llevar .tick-li { align-items: flex-start; }


/* ==================================================================
   MÓVIL  (< 768px)
   ================================================================== */
@media (max-width: 767px) {

  .kicker, h1, h2 { text-align: center; }
  .head { justify-items: center; text-align: center; }
  .sec .lead, .sec > .wrap > .stack > .muted { text-align: center; }
  .crumbs { justify-content: center; }

  .hero-m .box { text-align: center; justify-items: center; }
  .hero-m .st { text-align: center; }

  .cred {
    border-left: 0; padding-left: 0; text-align: center;
    border-top: 2px solid var(--turq); padding-top: 12px;
  }

  .card { text-align: center; justify-items: center; }
  .card .ico { justify-self: center; }
  .card .link { justify-content: center; }

  .testi { text-align: center; }
  .testi .who { flex-direction: column; gap: 4px; align-items: center; }

  .sec .link { justify-content: center; }

  .cta { text-align: center; justify-items: center; }
  .cta .btns { width: 100%; }
  .empty { text-align: center; }

  /* El carrusel de filtros sangra con márgenes negativos y acababa
     pisando al contador de casos. Se le da línea propia. */
  .chips[style] { flex: 1 1 100% !important; }
  #conteo { width: 100%; text-align: center; margin-top: 4px; }

  .grid3 { grid-template-columns: 1fr; }
  .caso .meta { justify-content: center; gap: 10px; }

  .ficha .r { grid-template-columns: 1fr; gap: 2px; text-align: center; }
  .ficha .r b { text-align: center; }

  .vlist a { flex-direction: column; text-align: center; gap: 8px; }
  .vlist .th { width: 100%; height: 168px; }

  /* Los pasos tenían el número a la izquierda con su raíl vertical y
     el texto centrado: quedaba descuadrado. En móvil cada paso pasa a
     ser una tarjeta centrada, con el número arriba y sin raíl. */
  .steps { gap: 14px; }
  .step {
    grid-template-columns: 1fr; justify-items: center; gap: 10px;
    background: #fff; border: 1px solid var(--linea-s);
    border-radius: var(--r); padding: 22px 18px;
  }
  .step .rail { grid-template-rows: auto; }
  .step .rail b { display: none; }
  .step .txt { padding: 0; text-align: center; }
  .step .txt h3 { justify-content: center; }
  .pac-nota { flex-direction: column; align-items: center; text-align: center; gap: 8px; }

  /* El globo tapaba demasiado en pantallas pequeñas */
  .wa-globo { width: min(250px, calc(100vw - 88px)); padding: 13px 15px 15px; }
  .wa-globo-t { font-size: 14px; }
  .wa-globo-p { font-size: 12px; }
  .wa-globo-cta { min-height: 36px; font-size: 12px; margin-top: 6px; }

  /* Pie: logo a lo ancho y centrado, dirección y horario en dos
     columnas, contacto y legal de nuevo a lo ancho. */
  .ftr .cols4 { grid-template-columns: 1fr 1fr; gap: 28px 16px; text-align: center; }
  .ftr .cols4 > div:first-child { grid-column: 1 / -1; display: grid; justify-items: center; }
  .ftr .cols4 > div:first-child p { margin-left: auto; margin-right: auto; }
  .ftr .cols4 > div:last-child { grid-column: 1 / -1; }
  .ftr .k { justify-content: center; margin-bottom: 6px; }
  .ftr .soc { justify-content: center; gap: 18px; }
  .ftr .legal { text-align: center; justify-items: center; }
}


/* ==================================================================
   TABLET  (768px – 1023px)
   ================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {

  :root { --gutter: 40px; --section: 64px; }

  .wrap { max-width: 768px; }

  /* Sin !important a propósito, para respetar los style= puntuales
     del diseño (las tres cifras de /especialista). */
  .grid3 { grid-template-columns: 1fr 1fr; gap: 20px; }
  .grid4 { grid-template-columns: 1fr 1fr; gap: 28px 24px; }

  .hero-m { padding-top: 24px; }
  .hero-m .ph { height: 420px; }
  .hero-m .box { margin: -120px 40px 0; text-align: center; justify-items: center; }
  .hero-m .box h1 { font-size: 38px; }

  .head { justify-items: center; text-align: center; }
  .kicker, h1, h2 { text-align: center; }
  .sec .lead { text-align: center; margin-left: auto; margin-right: auto; }

  .cta { text-align: center; justify-items: center; }
  .caso .meta { justify-content: space-between; }

  /* Con la columna acotada los filtros ya no sangran hasta el borde. */
  .chips { margin: 0; }
  .chips .row { flex-wrap: wrap; padding: 0; }
  .chips .fade, .chips .row::after { display: none; }

  .ftr .cols4 { grid-template-columns: 1fr 1fr; gap: 28px 40px; }
  .ftr .cols4 > div:first-child,
  .ftr .cols4 > div:last-child { grid-column: 1 / -1; }
  .ftr .legal { grid-template-columns: 1fr; }
}