/* ============================================================================
   Adaptación a tablet y móvil
   El diseño solo estaba resuelto a 1440 px. Esto sigue la guía del README:
   gutter a 24 px, rejillas de dos columnas a una, hero apilado con la foto
   arriba, navegación desplegable, titulares a ~60 % y secciones de 88 a 48 px.
   Zonas pulsables nunca por debajo de 44 px.
   Se carga después de base.css, sitio.css y tratamiento.css.
   ============================================================================ */

/* ══════════════════════════════════════════════ hasta 1200 px · holgura ══ */
@media (max-width:1200px){
  :root{--gutter:36px}
  .cab{gap:40px}
  .quees,.como .arriba,.destacado,.tec,.direccion{gap:40px}
}

/* ═══════════════════════════════════════════ hasta 1040 px · una columna ══ */
@media (max-width:1040px){
  :root{--gutter:24px;--seccion:48px}

  .contenedor{padding:0 var(--gutter)}

  /* ---------------------------------------------------------- titulares --- */
  .cab h2{font-size:32px}
  .cab--centro h2{font-size:36px}
  .cab p{font-size:17px;padding-top:8px}
  .cab{grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:28px}
  .cab--centro{grid-template-columns:minmax(0,1fr)}

  /* -------------------------------------------- navegación desplegable --- */
  .menu-boton{
    display:inline-flex;align-items:center;gap:10px;
    min-height:44px;padding:10px 18px;background:none;cursor:pointer;
    border:1.5px solid var(--borde-boton);border-radius:var(--r-pildora);
    font-family:var(--display);font-size:15px;font-weight:700;color:var(--teal-oscuro);
  }
  .menu-boton::after{content:'▾';color:var(--teal-brillante);font-size:13px}
  .menu-boton[aria-expanded="true"]::after{content:'▴'}

  .nav-clinica .enlaces,.nav-sitio .enlaces{
    display:none;flex-direction:column;align-items:stretch;gap:0;
    order:3;width:100%;margin:0 0 4px;border-top:1px solid var(--borde);
  }
  .nav-clinica .enlaces.abierto,.nav-sitio .enlaces.abierto{display:flex}
  .nav-clinica .enlaces > a,.nav-sitio .enlaces > a{
    display:flex;align-items:center;min-height:48px;padding:6px 2px;
    border-bottom:1px solid var(--borde);
  }
  .nav-sitio .enlaces > a.cta{
    justify-content:center;margin-top:14px;border-bottom:0;
    border-radius:var(--r-pildora);padding:13px 22px;
  }

  .nav-clinica .fila,.nav-sitio{
    flex-wrap:wrap;align-items:center;gap:14px;
    min-height:0;height:auto;padding:16px var(--gutter);
  }
  .nav-clinica .menu-boton,.nav-sitio .menu-boton{margin-left:auto}
  .nav-clinica .cta-nav{order:2}

  /* Menú de la portada: fila que envuelve, sin desplegable */
  .nav-menu{flex-wrap:wrap;justify-content:flex-start;gap:10px 18px}
  .nav-menu a{min-height:44px;display:inline-flex;align-items:center}

  /* --------------------------------------------------- hero de portada --- */
  /* La foto pasa a estar en el flujo y lo que iba encima suyo cae debajo,
     salvo la marca y el rótulo de sedes, que siguen sobre la imagen. */
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-foto{min-height:0;aspect-ratio:auto;overflow:hidden;background:var(--blanco)}
  /* Vertical, para que el retrato del hero no quede descabezado */
  .hero-foto > img{position:static;width:100%;height:auto;aspect-ratio:4/5;object-position:50% 6%}
  .hero-foto .capsula{
    position:static;margin:20px var(--gutter) 0;padding:16px 20px;
    box-shadow:none;border:1px solid var(--borde);
  }
  .hero-ventajas{
    position:static;left:auto;right:auto;bottom:auto;
    grid-template-columns:minmax(0,1fr);gap:12px;margin:16px 0 0;padding:0 var(--gutter);
  }
  .hero-texto{padding:28px var(--gutter) 40px}
  .hero-texto h1{font-size:40px;margin-top:22px}
  .hero-texto .sub{font-size:16.5px;max-width:none}
  .hero-chips{margin-top:24px}
  .hero-hueco{display:none}
  .hero-abajo{flex-direction:column;align-items:stretch;gap:20px;margin-top:32px}
  .mini-tarjeta{width:100%}

  /* ------------------------------------------------------------ cifras --- */
  .cifras .fila{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cifras .c{padding:24px var(--gutter);border-bottom:1px solid var(--borde)}
  .cifras .c:nth-child(2n){border-right:0}
  .cifras .c:not(:first-child){padding-left:var(--gutter)}
  .cifras .c .n{font-size:34px}

  /* -------------------------------------------------- rejillas a una/dos --- */
  .clinicas .rejilla,.destacado,.direccion,.tec,.horarios,.llegar,.cita,
  .quien,.quien-dos .rejilla,.quees,.como .arriba,.como .abajo,
  .donde .rejilla,.faq .par{grid-template-columns:minmax(0,1fr)}
  .numeradas,.pasos,.trio,.tratamientos,.galeria,.galeria--2,.equipo,.equipo--4{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .casos{grid-template-columns:minmax(0,1fr)}
  .casos a:not(:nth-child(3n)){border-right:0;padding-right:0}
  .casos a:not(:nth-child(3n+1)){padding-left:0}
  .casos a:not(:nth-child(3n+1)):hover{padding-left:8px}

  .destacado .caja{grid-template-columns:minmax(0,1fr)}
  .destacado .caja img{max-width:200px}

  /* ------------------------------------------------- páginas de clínica --- */
  .phero{grid-template-columns:minmax(0,1fr)}
  /* La foto sube por encima del texto */
  .phero-foto{order:-1;min-height:0;aspect-ratio:4/3}
  .phero-txt{padding:28px var(--gutter) 40px}
  .phero h1{font-size:38px}
  .phero .sub{max-width:none}
  .phero .datos{margin-top:32px;padding-top:26px;gap:20px 28px}

  .tec h2{font-size:32px}
  .llegar .foto{min-height:240px}
  .llegar .bd{padding:28px 24px 32px}
  .llegar h2{font-size:30px}

  .cita form{padding:26px 24px 30px}
  .cita .lado{padding:30px 24px 32px}
  .campo--dos{grid-template-columns:minmax(0,1fr)}

  .cierre{padding:56px 0}
  .cierre h2{font-size:32px}
  .cierre p{font-size:17px}
  .cierre .muela{display:none}

  .pie{padding:48px 0 28px}
  .pie .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;padding-bottom:36px}

  /* --------------------------------------------- páginas de tratamiento --- */
  .thero{grid-template-columns:minmax(0,1fr);min-height:0}
  .thero .foto{order:-1;aspect-ratio:4/3}
  .thero .txt{padding:26px var(--gutter) 36px}
  .thero h1{font-size:38px;margin-top:20px}
  .thero .sub{font-size:17px;max-width:none}
  .thero .hueco{display:none}
  .thero .distintivos{margin-top:26px}

  .intro-trat{padding:40px var(--gutter) 28px}
  .intro-trat p{font-size:22px;max-width:none}

  .quien{padding:8px var(--gutter) 48px;gap:24px}
  .quien .marco img,.quien .marco--vacio{height:380px}
  .quien .marco--vacio{font-size:48px}
  .quien h2{font-size:32px}
  .quien p{max-width:none}

  .quien-dos{padding:8px var(--gutter) 48px}
  .quien-dos h2{font-size:32px}
  .quien-dos .cabecera{margin-bottom:24px}
  .quien-dos .rejilla{gap:24px}
  .quien-dos .marco img{height:320px}

  .quees{padding:0 var(--gutter) 48px;gap:24px}
  .quees h2{font-size:30px}
  .quees figure .marco{height:280px}

  .como{padding:48px var(--gutter)}
  .como .arriba{gap:24px;align-items:start}
  .como h2{font-size:32px}
  .como .duo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .como .abajo{gap:28px;margin-top:32px}
  .como .prosa-larga h3{font-size:24px}
  .resumen{padding:26px 24px}

  .faq{padding:48px var(--gutter)}
  .faq h2{font-size:32px}
  .faq .cabecera{margin-bottom:28px}
  .faq .par{gap:10px;padding:24px 0}
  .faq h3{font-size:20px}

  .donde{padding:48px var(--gutter)}
  .donde h2{font-size:32px}
  .donde .rejilla{gap:20px;margin-top:32px}
  .donde .rejilla--una{max-width:none}

  .dudas{padding:48px var(--gutter)}
  .dudas h2{font-size:32px}

  .pie-sitio{padding:48px var(--gutter) 28px}
  .pie-sitio .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .pie-sitio .legal{flex-direction:column;gap:14px;margin-top:32px}
}

/* ═══════════════════════════════════════════════ hasta 640 px · móvil ══ */
@media (max-width:640px){
  :root{--gutter:20px}

  .cab h2,.cab--centro h2{font-size:28px}
  .hero-texto h1,.phero h1,.thero h1{font-size:32px}
  .phero-foto,.thero .foto{aspect-ratio:1/1}
  .hero-foto > img{aspect-ratio:3/4}
  /* A este ancho la marca y el rótulo de sedes no caben en la misma línea */
  .hero-foto .marca-sup{left:var(--gutter);top:18px;font-size:14px}
  .hero-foto .lugar{left:var(--gutter);right:auto;top:48px;font-size:14px;padding:9px 14px}

  .cifras .fila{grid-template-columns:minmax(0,1fr)}
  .cifras .c{border-right:0}

  .numeradas,.pasos,.trio,.tratamientos,.galeria,.galeria--2,.equipo,.equipo--4,
  .quien-dos .rejilla,.como .duo{grid-template-columns:minmax(0,1fr)}

  .ficha .marco,.ficha .marco--vacio{height:260px}
  .quien .marco img,.quien .marco--vacio{height:300px}
  .quien-dos .marco img{height:280px}
  .quees figure .marco{height:220px}
  .como .duo .marco{height:220px}

  .intro-trat p{font-size:20px}
  .quien h2,.quien-dos h2,.quees h2,.como h2,.faq h2,.donde h2,.dudas h2,
  .tec h2,.llegar h2,.cierre h2{font-size:26px}

  .horario{padding:24px 22px}
  .horario table{font-size:15.5px}

  .pie .cols,.pie-sitio .cols{grid-template-columns:minmax(0,1fr);gap:28px}

  /* Los botones de acción a ancho completo, más fáciles de acertar */
  .thero .acciones .boton-flecha,.thero .acciones .boton-linea,
  .phero .acciones .boton-flecha,.phero .acciones .boton-linea,
  .cierre .acc .boton-flecha,.cierre .acc .boton-linea{
    width:100%;justify-content:space-between;
  }
  .cierre .acc .boton-linea,.phero .acciones .boton-linea,.thero .acciones .boton-linea{
    text-align:center;justify-content:center;
  }
  .tarjeta-clinica .acciones a{flex:1 1 auto;text-align:center}
}

/* ══════════════════════════════════════════════════ zonas pulsables ══ */
/* Todo enlace que sea un elemento por sí mismo —listas del pie, datos de
   contacto del hero, logotipos, enlaces subrayados— llega a 44 px de alto.
   Los enlaces que van dentro de una frase se quedan como están: agrandarlos
   rompería el interlineado del párrafo. */
@media (max-width:1040px){
  /* Con padding y no con flex: dentro de estos enlaces hay <br> y espacios que
     un contenedor flex se comería. */
  .pie ul a,.pie-sitio ul a,.phero .datos a,.enlace-sub,
  .nav-sitio .marca,.phero .crumb a,.thero .crumb a{
    display:inline-block;min-height:44px;padding-top:12px;padding-bottom:12px;
  }
  .pie ul,.pie-sitio ul{gap:0}
  .nav-clinica .fila > a{display:inline-flex;align-items:center;min-height:44px}
  .phero .crumb,.thero .crumb{display:flex;align-items:center;flex-wrap:wrap;gap:0 8px}
  .consiento input{width:24px;height:24px;margin-top:0}
  .consiento{align-items:center}
}

/* Ningún texto de cuerpo por debajo de 16 px en pantallas pequeñas */
@media (max-width:1040px){
  .galeria figcaption,.quees figcaption,.consiento label,.ficha .cargo,
  .aviso-envio,.cita .lado .otro,.pie .legal,.pie-sitio .legal,
  .resumen .nota,.numeradas .t p,.trio p{font-size:16px}
  .phero .crumb,.thero .crumb,.distintivo{font-size:15px}
}

/* ══════════════════════════════════════ barra fija en móvil ══ */
@media (max-width:1040px){
  html{scroll-padding-top:84px}
  /* La barra de la portada deja solo la marca y el botón de cita: los enlaces
     de sección ya están en el hero y aquí no caben sin apretujarlo todo. */
  .nav-flotante{height:64px;gap:12px}
  .nav-flotante .enlaces a:not(.cta){display:none}
  .nav-flotante .marca{font-size:15px}
  .nav-flotante .enlaces a.cta{padding:10px 18px;font-size:14px}
}
@media (max-width:640px){
  .nav-flotante{padding:0 var(--gutter)}
  .nav-flotante .marca{font-size:14px}
}