/* Complemento de la plantilla de la clínica (template.css). Aquí SOLO van las piezas que su
   web no tiene porque era una única página: las páginas de tratamiento, el blog y los
   legales. Todo se apoya en sus mismas variables, tipografías y colores. */

/* Su cabecera es transparente porque en la home siempre tiene el slider detrás. En las
   páginas nuevas no hay slider, así que se le pone el mismo verde del pie: el logo y los
   teléfonos son blancos y ahí sí se leen. */
/* El verde de la cabecera de las interiores. Era var(--colorPrincipal) (#91AAA4) y el texto
   del menú es blanco: 2,2:1, que es el motivo de que la cabecera se leyera mal. Con su verde
   cerrado (el mismo del velo de antes/después y del fondo de las piezas) sube a 6,9:1 sin
   salirse de su paleta. */
.header.page-interior { background: #4c5f59; }
.header.page-interior .contenedor-telefonos { border-bottom: 1px solid rgba(255,255,255,.25); }

/* Y un respiro entre la cabecera y la foto de la página. */
.separador-cabecera { height: 0; }

/* SU PLANTILLA ESCONDE EL MENÚ ENTERO (.menu-principal{display:none}), porque con una sola
   página no había nada que enlazar. Aquí hay catorce, así que se enseña: el desplegable ya
   lo trae la plantilla (li:hover > ul), solo hay que darle colores, porque los suyos pintan
   texto blanco sobre fondo blanco y no se ve nada. */
.menu-principal { display: block; }
@media (min-width: 768px) {
  .logo-menu { justify-content: space-between; gap: 3rem; }
}
#navigation .sf-menu ul {
  background: #fff;
  margin-top: 0;
  border-radius: 0 0 1rem 1rem;
  box-shadow: 0 1rem 2.5rem rgba(20, 40, 35, .18);
  padding: .8rem 0;
  overflow: hidden;
}
#navigation .sf-menu ul a { color: #3a3a3a; padding: .9rem 2rem; text-transform: none; }
#navigation .sf-menu ul a:hover { background: var(--color3); color: #1c1c1c; border-bottom: 0; }
#navigation .sf-menu ul li.selected > a { color: var(--colorPrincipal); border-bottom: 0; }
/* El submenú se abre al pasar por encima: sin hueco, o se cierra al bajar el ratón. */
#navigation .sf-menu > li > ul { top: 100%; }

/* Cabecera sobre foto en interiores: la plantilla la tiene pensada para media pantalla,
   aquí se recorta para que no ocupe un scroll entero. */
.main-content.interior > .inferior .texto-inferior { padding: 12% 10% 12% 8%; }
@media (min-width: 768px) { .main-content.interior > .inferior .texto-inferior { padding: 10% 12% 10% 8%; } }


/* Las tarjetas de la plantilla llevan padding en porcentaje (20 %), así que a más ancho
   más altas. En su home caen de tres en tres (480 px) y quedan cuadradas; en las páginas
   nuevas, con dos bloques, se estiraban. Se les fija el mismo ancho que en la home. */
@media (min-width: 768px) {
  .main-content.interior .contenedor-servicios-cards {
    grid-template-columns: repeat(auto-fit, minmax(30rem, 48rem));
    justify-content: center;
  }
}

.migas {
  font-family: var(--fuenteParrafos);
  font-size: 1.4rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  opacity: .85;
  margin-bottom: 1.5rem;
}
.migas a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }
.migas a:hover { border-color: #fff; }

/* Tratamientos con página propia */
.tratamientos-area { padding: 6rem 0; }
.titulo-area {
  font-family: var(--fuenteTitulos);
  font-size: 3.4rem;
  text-align: center;
  margin: 0 0 4rem;
  /* Sin esto hereda el #C0D1D8 de la plantilla, que sobre blanco da 1,4:1 y sobre el arena
     1,2:1: el titular no se ve. Afecta a los tres sitios que usan esta clase: el equipo,
     "Tratamientos de esta área" de las páginas de servicio y "Cómo contactar". */
  color: #3f5f56;
}
.rejilla-tratamientos {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .rejilla-tratamientos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .rejilla-tratamientos { grid-template-columns: repeat(3, 1fr); } }

.tarjeta-tratamiento {
  display: block;
  padding: 3rem 2.5rem;
  background: #fff;
  border: 1px solid rgba(145, 170, 164, .35);
  border-radius: 2rem;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.tarjeta-tratamiento:hover {
  border-color: var(--colorPrincipal);
  box-shadow: 0 1.2rem 3rem rgba(20, 40, 35, .12);
  transform: translateY(-.4rem);
}
.tarjeta-tratamiento h3 {
  font-family: var(--fuenteTitulos);
  font-size: 2.4rem;
  font-weight: 600;
  margin: 0 0 1rem;
  /* El h3 de la plantilla es el verde salvia claro: 2,5:1 sobre el blanco de la tarjeta, que
     es el titular de la tarjeta y hay que poder leerlo. Sale en "Nuestras áreas", en
     "Tratamientos de esta área" de las páginas de servicio y en las tarjetas de contacto. */
  color: #3f5f56;
}
.tarjeta-tratamiento p { margin: 0; font-size: 1.6rem; color: #4a4a4a; }
.tarjeta-tratamiento .mas {
  display: inline-block;
  margin-top: 2rem;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--colorPrincipal);
}
.tarjeta-tratamiento:hover .mas { text-decoration: underline; }

.volver-area { text-align: center; font-size: 1.6rem; color: #4a4a4a; }
.volver-area a { color: var(--colorPrincipal); }

/* Cabecera sin foto: legales y artículos */
.cabecera-simple {
  background: var(--color3);
  padding: 8rem 0 4rem;
  text-align: center;
}
.cabecera-simple h1 { font-family: var(--fuenteTitulos); font-size: 4rem; margin: 0; }
.cabecera-post { text-align: left; }

/* Las migas del artículo van sobre fondo claro, no sobre foto, así que ahí sí son oscuras.
   OJO con el selector: sin `.cabecera-post` delante esto pinta de gris TODAS las migas del
   sitio, incluidas las de las 11 páginas de tratamiento, que van encima de la foto de
   cabecera y se quedan ilegibles. */
.cabecera-post .migas { color: #4a4a4a; }
.cabecera-post .migas a { border-color: rgba(0,0,0,.25); }

/* Texto largo: legales y cuerpo del artículo */
.pagina-texto { padding: 5rem 0 7rem; max-width: 90rem; }
.pagina-texto p, .pagina-texto li { font-size: 1.7rem; line-height: 1.75; }
.pagina-texto h2 { font-family: var(--fuenteTitulos); font-size: 2.8rem; margin: 4rem 0 1.5rem; }
.pagina-texto h3 { font-family: var(--fuenteTitulos); font-size: 2.2rem; margin: 3rem 0 1rem; }
.pagina-texto a { color: var(--colorPrincipal); }

/* Blog */
.foto-post { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; margin-bottom: 1.5rem; border-radius: 1.4rem; }
.foto-post-grande { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; margin-bottom: 3rem; border-radius: 1.4rem; }
.categoria-post {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 1.2rem;
  color: var(--colorPrincipal);
  margin: 0 0 .6rem;
}
.fecha-post { font-size: 1.3rem; color: #6b6b6b; margin-top: 1.2rem; }
.tarjeta-post { padding: 2rem; }
.tags-post { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid rgba(145,170,164,.35); font-size: 1.4rem; color: #6b6b6b; }

/* Los botones del bloque de contacto, que en su web los ponía el formulario de Proximedia */
.cta-banner-datos { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; margin-top: 2.5rem; }

/* El menú lateral del móvil. Su plantilla lo deja al 70 % de negro, pero como ella nunca
   llegó a enseñarlo, nadie vio que sobre foto clara no se lee. Se sube la opacidad. */
.menu-wrap { background: rgb(0 0 0 / .9); }

/* Y los hijos, un paso adentro */
.mobile-menu li.hijo a { padding-left: 3rem; opacity: .85; font-size: .9em; }

/* ---- Cambios pedidos por la clínica el 20/08/2026 ---- */

/* EL CÍRCULO DE LA HOME. Su archivo (gallery/14/big/24.jpg) es un WebP sin transparencia:
   la foto venía recortada en círculo, pero al guardarse en un formato sin alfa el fondo
   transparente se aplastó a negro y el borde perdió el suavizado, de ahí la caja negra y los
   dientes de sierra. Es un defecto que ya arrastra su web actual (el archivo es idéntico).
   No hace falta rehacer la foto: medido, el círculo quemado tiene el centro en (711,720) y
   un radio de ~722 px sobre un lienzo de 1422x1440, o sea que lo desborda; lo único negro
   son las cuatro esquinas. Recortando el círculo por CSS sobre una caja cuadrada, el borde
   cae ~11 px POR DENTRO del quemado: se van las esquinas y el dentado de una vez, y el borde
   nuevo lo dibuja el navegador, que se ve limpio a cualquier tamaño. */
.foto-mitad-derecha.foto-circular {
  background-size: cover;   /* su plantilla trae contain */
  border-radius: 50%;       /* su plantilla trae 2rem */
  aspect-ratio: 1;
  min-height: 0;            /* anula los 450 px de la plantilla, manda la proporción */
  /* De 768 px para arriba esta sección es un flex y las dos mitades van a `flex: 1 1 50%`,
     así que por defecto el navegador estira la foto a lo alto de la columna de texto y el
     círculo sale ovalado. Centrándola deja de estirarse y manda la proporción, que es lo que
     lo hace redondo de verdad a cualquier ancho. */
  align-self: center;
  /* Por debajo de 768 ya no es flex: ahí manda esto y queda centrada. */
  width: min(100%, 46rem);
  margin-inline: auto;
}

/* LOS TÍTULOS DE ANTES Y DESPUÉS. Su plantilla pinta el h2 en blanco
   (template.css, .titulo-seccion h2), pero el título es un enlace y el color no le llegaba:
   el <a> se quedaba con el azul por defecto del navegador. */
.titulo-seccion h2 a { color: inherit; text-decoration: none; }
.titulo-seccion h2 a:hover { text-decoration: underline; }

/* Y el velo de esa sección, un punto más profundo. Su plantilla lo deja en
   rgb(180 212 204 / 80%), y sobre ese verde tan claro el título blanco se queda en 1.8:1 de
   contraste, por debajo del 3:1 que se pide para un título grande. Con el mismo verde suyo
   más cerrado sube a 4.7:1, se lee sin esfuerzo y, de paso, las fotos de antes y después
   destacan mucho más, que es de lo que va la sección. */
.antes-despues .overlay { background: rgb(96 122 114 / 82%); }

/* Y los enlaces del cuerpo, por lo mismo: var(--colorPrincipal) sobre blanco da 2,2:1, y en
   los legales el enlace al correo es justo por donde se ejercen los derechos. Subrayados,
   además, para que se distingan del texto sin depender solo del color. */
.pagina-texto a { color: #3f5f56; text-decoration: underline; }

/* Los títulos de las páginas de texto (legales y artículos) salían en el azul grisáceo claro
   de su paleta (#C0D1D8) sobre blanco: 1.4:1 de contraste, prácticamente no se veían. En su
   web no se notaba porque los legales venían con los epígrafes puestos como párrafos. Se
   pasan al mismo verde suyo, cerrado hasta que se lea (7,7:1). */
.pagina-texto h2, .pagina-texto h3 { color: #4c5f59; }

/* LA PORTADA, ya con la foto real de la recepción (21/08/2026).
   La foto llegó vertical (720x1280, hecha con el móvil), y la cabecera es apaisada, así que
   por cover solo cabe una franja. Con el centrado por defecto el recorte partía por la mitad
   el logo de la pared, que es justo lo mejor de la foto. Subiendo el encuadre entra el panel
   de madera entero con el logo, y el titular cae encima de la madera, donde el blanco se lee.
   En móvil la foto es casi de la misma proporción que la cabecera, así que ahí no recorta. */
.diy-slideshow figure img { object-position: 50% 30%; }

/* Y un velo degradado. Su cabecera es transparente porque la foto de antes era oscura por
   arriba; la recepción es blanca (pared y techo), y sobre ese blanco el logo y el menú, que
   son blancos, se perdían: 1,6:1 de contraste. Con el degradado suben a 3,6-4:1, que es lo
   que daba su foto anterior, y por abajo ayuda al titular. Se nota como sombra del techo,
   no como una barra. */
.diy-slideshow figure.show::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(20, 28, 26, .78) 0,
    rgba(20, 28, 26, .72) 14%,
    rgba(20, 28, 26, 0) 36%,
    rgba(20, 28, 26, 0) 55%,
    rgba(20, 28, 26, .45) 100%
  );
}

/* LAS PIEZAS DE ANTES Y DESPUÉS. Desde el 21/08/2026 cada bloque enseña una sola pieza ya
   montada (el antes y el después juntos, con su logo y su nombre) en vez de dos fotos
   sueltas, así que ocupa el bloque entero. */
.grid-antes-despues .card-antes-despues:only-child { grid-column: 1 / -1; }

/* Y se ve ENTERA. La pieza se genera a 16:10, así que fijando esa misma proporción en la
   tarjeta no se recorta nada a ningún ancho, ni en escritorio ni en móvil. Importa: una
   comparación recortada deja de comparar lo mismo en las dos mitades. La plantilla fija
   350 px de alto (320 en móvil), y hay que anularlo en los dos sitios. */
.card-antes-despues .imagen.pieza { height: auto; aspect-ratio: 16 / 10; }
@media (min-width: 768px) { .card-antes-despues .imagen.pieza { height: auto; } }
@media (max-width: 767px) { .card-antes-despues .imagen.pieza { height: auto; } }

/* En el pie, ni los días ni las horas se parten por dentro: el corte cae entre los dos. Si no,
   el navegador parte por el guion (puede cortar tras un guion aunque el espacio sea duro) y
   deja un «20:00» suelto en su propia línea. */
.footer .horario .dias, .footer .horario .horas { white-space: nowrap; }

/* El usuario de Instagram en el pie. Es largo y se partía del icono, dejándolo suelto en su
   línea. Se baja el cuerpo lo justo para que entre entero al lado del icono. */
.footer .contacto-redes .telefono a[href*="instagram"] { font-size: 1.5rem; white-space: nowrap; }

/* ---- El equipo de la clínica (28/08/2026) ---- */

/* Va sobre el arena de su paleta, que es el mismo fondo de las cabeceras de los legales: así
   se separa de las dos franjas con foto que tiene encima y debajo sin meter un color nuevo. */
.equipo { background: var(--color3); padding: 7rem 0; }
.equipo .titulo-area { margin-bottom: 1.5rem; }
.entradilla-equipo {
  max-width: 62rem;
  margin: 0 auto 5rem;
  text-align: center;
  font-size: 1.7rem;
  line-height: 1.7;
  color: #4a4a4a;
}

/* Tres fichas hoy y cuatro cuando llegue David: con auto-fit no hay que tocar nada, y en
   cualquiera de los dos casos quedan centradas y del mismo ancho. */
.rejilla-equipo {
  display: grid;
  gap: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(26rem, 32rem));
  justify-content: center;
}

.ficha-equipo {
  background: #fff;
  border-radius: 2rem;
  overflow: hidden;
  padding-bottom: 3rem;
  text-align: center;
  box-shadow: 0 1rem 2.5rem rgba(20, 40, 35, .08);
}

/* El retrato manda la proporción: las tres fotos se igualaron a 3:4 al prepararlas, así que
   aquí no recorta nada, solo asegura que las fichas casen aunque una llegue distinta. */
.retrato-equipo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 35%;
}

.ficha-equipo h3 {
  font-family: var(--fuenteTitulos);
  font-size: 2.6rem;
  margin: 2.5rem 2rem .6rem;
  /* Por lo mismo: el h3 de la plantilla es el verde salvia claro, 2,5:1 sobre blanco. */
  color: #3f5f56;
}
.puesto-equipo {
  margin: 0 2rem;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #4c5f59;
}
.credenciales-equipo { margin: .8rem 2rem 0; font-size: 1.5rem; color: #6b6b6b; }

.frase-equipo {
  margin: 2rem 2.5rem 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(145, 170, 164, .35);
  font-size: 1.6rem;
  line-height: 1.7;
  font-style: italic;
  color: #4a4a4a;
}
.frase-equipo::before { content: '\201C'; }
.frase-equipo::after  { content: '\201D'; }

/* ---- Cabecera pegajosa (28/08/2026) ---- */

/* Su plantilla ya traía preparado el sitio para esto (el id #pegajoso en el marcado, y las
   clases .menu-sticky y .logosticky en template.css), pero se quedó sin la lógica que las
   activaba: era de Proximedia y no vino con el diseño. Aquí va lo que falta, con sus mismas
   clases para no inventar un sistema paralelo. */

/* La cabecera entera se queda arriba. Va en el <header>, que es hijo directo del body, así
   que la posición pegajosa vale para toda la página; puesta en .contenedor-menu solo pegaría
   dentro de la altura del propio header, que es lo mismo que no pegar. */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
}

/* Al bajar, la barra de teléfonos se recoge: la cabecera fija tiene que ocupar poco. */
.header .contenedor-telefonos {
  overflow: hidden;
  transition: max-height .35s ease, opacity .25s ease;
  max-height: 12rem;
  opacity: 1;
}
.header.bajado .contenedor-telefonos { max-height: 0; opacity: 0; }

/* Y la barra del menú pasa a fondo claro con letra oscura, que es donde se lee de verdad:
   sobre su verde el blanco se queda en 2,2:1, y sobre la foto de la portada depende de lo que
   haya detrás. Así el menú se lee igual en toda la página, pase lo que pase debajo. */
.header.bajado .contenedor-menu,
.header.bajado.page-interior .contenedor-menu {
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 .4rem 2rem rgba(20, 40, 35, .14);
  backdrop-filter: blur(6px);
}
.header.bajado #navigation .sf-menu > li > a { color: #2f3a36; }
/* El de la página activa y el hover, en el verde cerrado: el --colorPrincipal de su paleta
   sobre blanco se queda en 2,5:1 y el enlace de "dónde estoy" es justo el que hay que ver. */
.header.bajado #navigation .sf-menu > li > a:hover,
.header.bajado #navigation .sf-menu > li.selected > a { color: #4c5f59; }

/* Su plantilla anima el fondo de la barra en 2 segundos (.contenedor-menu.menu-sticky).
   En una cabecera que aparece al bajar eso se ve como si fuera con retraso: se acorta. */
.header .contenedor-menu,
.header .contenedor-menu.menu-sticky { transition: background-color .3s ease, box-shadow .3s ease; }

/* El logo es blanco (pensado para ir sobre foto), así que sobre el fondo claro hay que
   teñirlo del verde oscuro de su paleta o desaparece. */
.header.bajado .logo img {
  filter: brightness(0) saturate(100%) invert(33%) sepia(12%) saturate(560%) hue-rotate(118deg) brightness(94%);
}

/* Un poco más pequeño al bajar. Su .logosticky lo dejaba en 45 px, que para esta cabecera se
   queda en un sello; 92 px mantiene el logo reconocible y deja la barra en ~70 px de alto. */
.header.bajado .logo img.logosticky { width: 92px !important; }
.header .logo-menu { transition: padding .3s ease; }
.header.bajado .logo-menu { padding: .6rem 0; }

/* El icono de hamburguesa del móvil, por lo mismo. */
.header.bajado .mobile-nav a { color: #2f3a36; }

/* En móvil la plantilla apila el logo y la hamburguesa en columna, y con la cabecera fija eso
   se come media pantalla. Al bajar se ponen en fila y el logo se recoge más. */
@media (max-width: 767px) {
  .header.bajado .logo-menu {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 0;
  }
  .header.bajado .logo img.logosticky { width: 62px !important; }
  .header.bajado .menu-principal { margin: 0; }
}

/* Y el subrayado del enlace activo, que la plantilla pinta con --colorSecundario (#C0D1D8):
   sobre el fondo blanco de la barra fija apenas se distingue de la propia barra. */
.header.bajado #navigation .sf-menu li.selected > a { border-bottom-color: #4c5f59; }

/* El enlace del bloque de equipo de la home a la página "sobre nosotros". */
.mas-equipo { margin-top: 4rem; font-size: 1.7rem; }
.mas-equipo a { color: #3f5f56; text-decoration: underline; }