/* ==========================================================================
   FisioXperience Child | 17. FOTOS REALES EN LOS HUECOS
   --------------------------------------------------------------------------
   Hasta la 1.14 los .fx-ph eran huecos: fondo rayado, borde discontinuo y el
   texto del data-ph pintado con ::after. Al meter una foto dentro hay que
   apagar las tres cosas, o la foto sale con un marco de andamio alrededor.

   Se hace por partida doble a proposito:
   - .fx-ph--llena  : clase que lleva cada figure que ya tiene imagen. Funciona
                      en cualquier navegador.
   - .fx-ph:has(img): red de seguridad por si alguien mete una foto y se olvida
                      de poner la clase.
   ========================================================================== */

.fx-ph--llena,
.fx-ph:has(img),
.fx-ph:has(video){
  background:none;
  border:0;
  min-height:0;
}
.fx-ph--llena::after,
.fx-ph:has(img)::after,
.fx-ph:has(video)::after{ content:none; }

/* La foto manda sobre la proporcion del hueco. */
.fx-ph--llena img,
.fx-ph--llena video,
.fx-ph img,
.fx-ph video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* --------------------------------------------------------------------------
   Video en un hueco. Va mudo y en bucle: es decoracion, no contenido que
   alguien vaya a "ver". Sin controles, sin sonido y sin descarga previa mas
   alla del poster, que es la propia foto del hueco: quien entre con datos
   moviles ve la foto y no se le van 1,3 MB sin pedirlo.
   -------------------------------------------------------------------------- */
.fx-ph video{ background:var(--fx-verde-osc); }

@media (prefers-reduced-motion: reduce){
  .fx-ph video{ display:none; }
  .fx-ph--video{ background-size:cover; background-position:center; }
}

/* --------------------------------------------------------------------------
   Logo en cabecera y pie. La cabecera es clara (verde niebla) y el pie es
   verde noche, asi que son dos archivos distintos: el de trazo oscuro y el
   blanco. La altura la fija el CSS y no el atributo, para que en movil no
   robe sitio a la barra.
   -------------------------------------------------------------------------- */
.fx-logo__img{
  display:block;
  height:52px;
  width:auto;
  max-width:none;
}
.fx-logo--pie .fx-logo__img{ height:50px; }

/* SUBIDO EN 1.23.1: el logotipo nuevo no lleva la linea "Clinica de
   Fisioterapia" debajo, asi que a 44 px se quedaba pequeno y dejaba mucho
   aire muerto a la izquierda de la barra. A 52 px la marca vuelve a pesar
   lo que pesaba, y la cabecera solo crece 6 px porque el relleno vertical
   no se toca.

   En movil sube a 40 px y la barra NO crece ni un pixel: ahi la altura la
   marcan los dos botones de contacto, que miden 44 px. El logotipo estaba
   desaprovechando un hueco que ya estaba pagado. */

@media (max-width:600px){
  .fx-logo__img{ height:40px; }
  .fx-logo--pie .fx-logo__img{ height:38px; }
}

/* --------------------------------------------------------------------------
   18. LAS DOS PUERTAS, YA CON FOTO DETRAS
   --------------------------------------------------------------------------
   El velo de la puerta se penso para un degradado verde de relleno: oscurece
   mucho abajo, donde vive el titulo, y casi nada arriba. Con una foto real
   detras eso deja de funcionar, porque el epigrafe de la esquina superior
   ("PUERTA 1 | VAS TU") cae sobre lo que toque; en la foto de la fachada le
   toco pared blanca y desaparecio.

   Es el mismo problema que un cartel escrito en rotulador claro sobre un
   cristal: se lee o no se lee segun lo que pase por detras. La solucion no es
   subir el brillo del texto, es poner algo detras que no cambie.
   -------------------------------------------------------------------------- */
.fx-puerta::after{
  background:
    linear-gradient(to top,
      rgba(8,32,25,.93) 12%,
      rgba(8,32,25,.52) 60%,
      rgba(8,32,25,.52) 100%),
    linear-gradient(to bottom,
      rgba(8,32,25,.45) 0%,
      rgba(8,32,25,0) 34%);
}

/* Y el epigrafe pasa de verde vivo a blanco: el verde sobre foto se pierde. */
.fx-puerta .fx-eyebrow{
  color:rgba(255,255,255,.9);
}

/* --------------------------------------------------------------------------
   19. SELLO DEL COLEGIO DE FISIOTERAPEUTAS
   --------------------------------------------------------------------------
   Va en el pie, sobre verde noche. El sello trae su propio fondo verde agua,
   asi que no se funde con el pie ni hace falta que lo haga: un sello es una
   acreditacion, y se lee mejor como una pieza aparte, igual que un sello de
   lacre sobre un sobre. Solo se le redondea la esquina para que hable el
   mismo idioma que las tarjetas del resto de la web.
   -------------------------------------------------------------------------- */
.fx-sello{
  display:block;
  width:152px;
  height:auto;
  margin-top:1.4rem;
  border-radius:18px;
}
@media (max-width:600px){
  .fx-sello{ width:124px; }
}


/* --------------------------------------------------------------------------
   20. EL NOMBRE DEL SERVICIO, DENTRO DE LA H1
   --------------------------------------------------------------------------
   Las H1 de la web son titulares de copy: "Duele. Y llevas demasiado tiempo
   aguantandolo." Funcionan para enganchar, pero ninguna decia de que va la
   pagina, y la H1 es —despues del <title>— la senal mas fuerte de tema que
   lee un buscador.

   La solucion no es cambiar el titular, que esta bien escrito: es meter el
   epigrafe que ya vivia justo encima DENTRO de la H1, y darle como texto el
   nombre del servicio con su ciudad. Antes decia "Cordoba | en su casa", que
   situa pero no nombra; ahora dice "Fisioterapia neurologica a domicilio en
   Cordoba".

   Visualmente no cambia nada: es la misma linea, en el mismo sitio, con la
   misma tipografia. Lo unico que cambia es de quien es hija. Es la diferencia
   entre el cartel que cuelga al lado de la puerta y el que va grabado en ella:
   se lee igual, pero uno forma parte de la casa y el otro no.

   `.fx-eyebrow` es `inline-flex` porque fuera de la H1 convive con otras
   cosas en la misma linea. Dentro de la H1 tiene que ocupar su propio
   renglon, y `flex` a secas lo consigue sin tocar el `::before` ni el `gap`
   que ya trae.
   -------------------------------------------------------------------------- */
h1 > .fx-eyebrow{
  display:flex;
}


/* --------------------------------------------------------------------------
   21. BANDA DE RESENAS DE GOOGLE
   --------------------------------------------------------------------------
   Va entre los precios y las preguntas frecuentes, que es el punto exacto
   donde alguien acaba de leer cuanto cuesta y todavia no ha decidido. Ahi la
   pregunta que tiene en la cabeza no es "que hacen" sino "me puedo fiar", y
   esa la contestan otros, no nosotros.

   Reutiliza `.fx-banda` —la franja verde noche a sangre que ya usa la seccion
   de sintomas— para no inventar un color ni un ritmo nuevos. Lo unico propio
   es la retícula de dos columnas: la nota a la izquierda, grande, y el texto
   con el enlace a la derecha.

   La nota va en la fuente de titulares y a tamano de titular a proposito. Un
   "5,0" pequeno es un dato; un "5,0" grande es un argumento. Debajo, las
   estrellas dibujadas en SVG y no con caracteres, para que no dependan de la
   fuente de emoji del telefono ni cambien de color solas.

   En movil las dos columnas se apilan y la nota se pone en fila —cifra,
   estrellas y cuenta en la misma linea— porque apilada se comia media
   pantalla para decir tres cosas cortas.
   -------------------------------------------------------------------------- */
.fx-resenas__cab{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(1.8rem,5vw,4rem);
  align-items:center;
}
.fx-resenas__nota{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  text-align:center;
  flex:0 0 auto;
}
.fx-resenas__cifra{
  font-family:var(--fx-display, inherit);
  font-size:clamp(3.4rem,8vw,5.4rem);
  line-height:.9;
  color:#fff;
  font-weight:700;
}
.fx-estrellas{
  display:flex;
  gap:.22em;
  color:var(--fx-verde-vivo);
}
.fx-estrellas svg{
  width:1.15rem;
  height:1.15rem;
  fill:currentColor;
}
.fx-resenas__cuenta{
  font-family:var(--fx-mono);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.fx-resenas__texto h2{ margin-bottom:.6rem; }
.fx-resenas__texto .fx-btn{ margin-top:1.4rem; }

@media (max-width:760px){
  .fx-resenas__cab{
    grid-template-columns:1fr;
    gap:1.6rem;
  }
  .fx-resenas__nota{
    flex-direction:row;
    align-items:baseline;
    gap:.9rem;
    text-align:left;
  }
  .fx-resenas__cifra{ font-size:3.2rem; }
  .fx-estrellas{ align-self:center; }
  .fx-resenas__cuenta{ align-self:center; }
}

/* ============================================================
   22. Carrusel de resenas de Google dentro de la banda verde
   ============================================================ */

/* Las estrellas del resumen usan el dorado de Google para que
   coincidan con las de las tarjetas del carrusel. */
.fx-resenas .fx-estrellas{ color:#fb8e28; }

.fx-resenas__slider{
  margin-top:clamp(2rem,4vw,3rem);
  padding:0 clamp(0px,3vw,2.4rem);
}

/* Tarjeta blanca: radio del sistema y sombra suave para que
   despegue del verde oscuro de la banda. */
.fx-resenas__slider .grw-review-inner{
  border-radius:var(--fx-radio-m, 14px) !important;
  box-shadow:0 10px 26px rgba(0,0,0,.20) !important;
}

/* Flechas del plugin: blancas y con sombra, legibles sobre verde. */
.fx-resenas__slider .rpi-ltgt{
  background:#fff !important;
  box-shadow:0 4px 14px rgba(0,0,0,.24) !important;
}

/* El bloque del plugin no debe heredar el color claro de la banda. */
.fx-resenas__slider .wp-google-text,
.fx-resenas__slider .wp-google-time{ color:#222; }

/* Zonas de toque comodas en movil: las flechas del plugin miden
   34px y los puntos 5-8px; se amplian con pseudoelementos sin
   tocar el tamano visible. */
@media (max-width:900px){
  .fx-resenas__slider .rpi-ltgt::after{
    content:"";
    position:absolute;
    inset:-7px;
  }
  .fx-resenas__slider .rpi-dot{ position:relative; }
  .fx-resenas__slider .rpi-dot::after{
    content:"";
    position:absolute;
    inset:-15px -9px;
  }
}

@media (max-width:760px){
  .fx-resenas__slider{ padding:0; margin-top:1.8rem; }
}

/* ============================================================
   23. Accesos directos de contacto
   ============================================================ */

/* Dos formas distintas del mismo par de acciones, telefono y WhatsApp,
   porque el gesto no es el mismo en cada sitio.

   En movil suben a la cabecera, que es pegajosa y siempre esta a la
   vista, y sustituyen a la barra fija de abajo que habia hasta la
   1.20.1. En escritorio no hay cabecera pegajosa util para esto, asi
   que van flotando en la esquina inferior derecha, donde todo el mundo
   los busca y donde ya estaban en fisiocordoba.com.

   Los dos juegos comparten el mismo tamano de toque y la misma
   iconografia; lo unico que cambia es donde se sientan. */

/* --- 23.a Movil: en la cabecera, junto a la hamburguesa --- */

.fx-cab-acciones{ display:none; }

.fx-cab-accion{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:999px;
  text-decoration:none;
  color:#fff;
  flex:0 0 auto;
  transition:transform .2s ease, box-shadow .2s ease;
}
.fx-cab-accion svg{ width:21px; height:21px; }
.fx-cab-accion:hover{ transform:translateY(-2px); }
.fx-cab-accion--tel{ background:var(--fx-verde-osc); }
.fx-cab-accion--wa{ background:#25d366; }

@media (max-width:900px){
  /* `margin-left:auto` los empuja a la derecha para que el
     `space-between` del contenedor no los deje flotando en mitad de la
     cabecera: logotipo a la izquierda, estos dos y la hamburguesa
     juntos a la derecha. */
  .fx-cab-acciones{
    display:flex;
    gap:.5rem;
    margin-left:auto;
  }
}

/* --- 23.b Escritorio: flotantes abajo a la derecha --- */

.fx-flotantes{ display:none; }

@media (min-width:901px){
  .fx-flotantes{
    display:flex;
    flex-direction:column;
    gap:.75rem;
    position:fixed;
    right:clamp(1.1rem,2vw,2.2rem);
    bottom:clamp(1.1rem,2vw,2rem);
    z-index:70;
  }
  .fx-flotante{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:58px;
    height:58px;
    border-radius:999px;
    color:#fff;
    text-decoration:none;
    box-shadow:0 10px 26px rgba(8,32,25,.28);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .fx-flotante svg{ width:27px; height:27px; }
  .fx-flotante:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 32px rgba(8,32,25,.34);
  }
  .fx-flotante--tel{ background:var(--fx-verde-osc); }
  .fx-flotante--wa{ background:#25d366; }
}

@media (prefers-reduced-motion:reduce){
  .fx-cab-accion, .fx-flotante{ transition:none; }
  .fx-cab-accion:hover, .fx-flotante:hover{ transform:none; }
}


/* ============================================================
   24. Cuadro de horarios de Pilates
   ============================================================ */

/* Un horario es una tabla, pero una tabla de cinco columnas no cabe en
   390 px sin empujar la pagina de lado. Asi que en vez de encoger la
   tabla, cambia de forma: en escritorio son cinco columnas de dia; en
   movil cada dia se convierte en una fila, con su nombre a la izquierda
   y sus horas en fichas que se reparten por el ancho.

   Se escriben solo las horas de inicio, no los tramos, porque todas las
   clases duran lo mismo y eso se dice una vez encima del cuadro. Cinco
   columnas con «17:00 a 18:00» dentro no se leen; con «17:00» sí. */

.fx-horario{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(.55rem,1.1vw,.9rem);
  margin-top:1.6rem;
}
.fx-horario__dia{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.fx-horario__nombre{
  margin:0;
  font-family:var(--fx-mono);
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  text-align:center;
  color:#fff;
  background:var(--fx-verde-osc);
  border-radius:var(--fx-radio);
  padding:.75rem .4rem;
}
.fx-horario__horas{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.fx-horario__horas li{
  background:var(--fx-carta);
  border:1px solid var(--fx-linea);
  border-radius:16px;
  padding:.8rem .4rem;
  text-align:center;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.fx-horario__dia--cerrado .fx-horario__nombre{ background:var(--fx-verde); }
.fx-horario__cerrado{
  flex:1;
  margin:0;
  display:grid;
  place-items:center;
  text-align:center;
  background:transparent;
  border:1px dashed var(--fx-linea);
  border-radius:16px;
  padding:1rem .6rem;
  font-family:var(--fx-mono);
  font-size:.76rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fx-texto-suave, #5b6660);
}
.fx-horario__nota{
  margin-top:1.2rem;
  font-size:.9rem;
  color:var(--fx-texto-suave, #5b6660);
}

/* En movil las cuatro horas de un dia tienen que caber en UN renglon. Con
   `flex-wrap` no cabian: la cuarta ficha se caia sola a una segunda linea y
   cada dia ocupaba el doble, con la ficha suelta descolgada.

   Tres cosas lo arreglan a la vez:

   1. Las horas pasan de flex a una rejilla de CUATRO columnas iguales. Una
      rejilla no envuelve: reparte lo que hay entre cuatro huecos y punto.
   2. La pildora del dia tiene ANCHO FIJO (6.1rem, lo que mide "MIERCOLES"),
      no `min-width`. Con ancho variable cada fila empezaba sus horas en un
      sitio distinto y la tabla salia dentada.
   3. El tamano de la hora es fluido, `clamp(.8rem,3.8vw,.95rem)`. A 320 px
      se queda en 12,8 px, que sigue por encima del suelo de 12 px de la web
      y deja que "20:00" quepa en una ficha de 39 px.

   Es la diferencia entre colocar cuatro sillas donde quepan y marcar cuatro
   sitios en la mesa: en el segundo caso nadie se queda de pie. */

@media (max-width:760px){
  .fx-horario{
    grid-template-columns:1fr;
    gap:.6rem;
  }
  .fx-horario__dia{
    display:grid;
    grid-template-columns:6.1rem 1fr;
    align-items:center;
    gap:.5rem;
  }
  .fx-horario__nombre{
    min-width:0;
    padding:.7rem .3rem;
    letter-spacing:.06em;
  }
  .fx-horario__horas{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:.35rem;
  }
  .fx-horario__horas li{
    flex:none;
    min-width:0;
    padding:.62rem .15rem;
    font-size:clamp(.8rem,3.8vw,.95rem);
  }
  .fx-horario__cerrado{ padding:.7rem .5rem; }
}