/* Estilos propios del tema IXA.
   Lo que se puede decir en theme.json se dice allí; aquí van sólo las piezas
   que los bloques de core no cubren: buscador del héroe, tarjetas de
   apartamento, iconos de equipamiento, formulario, mapa diferido y aviso de
   cookies. Móvil primero: los puntos de corte son 768 px y 1024 px. */

/* Reset mínimo: sin esto, cualquier caja con relleno y una altura o anchura en
   porcentaje mide de más y se sale de su celda. Es lo que hacía que las fichas
   de reseña se solaparan 20 px —justo su relleno vertical— y que los campos del
   buscador se pisaran entre columnas. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --ixa-radio-tarjeta: var(--wp--custom--radio--tarjeta, 14px);
  --ixa-radio-campo: var(--wp--custom--radio--campo, 10px);
  --ixa-transicion: var(--wp--custom--transicion, all 200ms ease);
}

/* ---------- Utilidades ---------- */

/* Los iconos son SVG en línea sin atributos de tamaño: si no se les da uno,
   el navegador los pinta a 300×150. Se dimensionan aquí, en un solo sitio. */
.ixa-boton svg,
.ixa-contacto svg,
.ixa-distancias svg,
.ixa-mapa__aviso svg {
  width: 1.2em;
  height: 1.2em;
  flex: none;
}

.ixa-mapa__aviso svg { width: 2rem; height: 2rem; color: var(--wp--preset--color--gris-medio); }

.ixa-oculto-visualmente {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* El pie se pega abajo en las páginas cortas (404, aviso legal): si no, queda
   una franja de fondo vacía debajo. */
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.wp-site-blocks > main,
.wp-site-blocks > .wp-block-group:not(.ixa-cabecera):not(.ixa-pie) { flex: 1 0 auto; }

/* ---------- Cabecera ---------- */

.ixa-cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(247, 242, 231, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--wp--preset--color--gris-suave);
}

/* La cabecera no se parte en dos filas. Con `wrap` —que es lo que trae el
   layout flex de WordPress— a 768 px el menú caía debajo del logo, alineado a la
   izquierda, y en móvil bajaban la hamburguesa, el selector y el teléfono: dos
   franjas y el doble de alto para lo mismo. Va en una fila a cualquier ancho, y
   lo que no cabe se resuelve encogiendo piezas, no apilándolas. */
.ixa-cabecera__fila { flex-wrap: nowrap; }

/* El envoltorio del bloque `ixa/logo` va en flex, no en bloque. Siendo bloque
   monta una caja de línea alrededor del enlace —que es `inline-flex`— y le añade
   por debajo el hueco del descendente de la fuente: 8,2 px que no se ven pero
   cuentan. El enlace se apoyaba en la línea base, o sea arriba del todo de su
   propio div, ese div pasaba a ser el elemento más alto de la fila y el menú, el
   selector y el teléfono se centraban respecto a él: el logo y el nombre
   quedaban 4 px por encima de todo lo demás. */
.ixa-logo-bloque { display: flex; align-items: center; }

/* El logo cede espacio antes que las acciones: si algún idioma alargara la
   barra, se recorta el nombre con puntos suspensivos en vez de desbordar. */
.ixa-cabecera__fila > .ixa-logo-bloque { min-width: 0; }
.ixa-cabecera__acciones { flex: none; }

.ixa-telefono {
  font-weight: 600;
  white-space: nowrap;
}

.ixa-telefono a { display: inline-flex; align-items: center; gap: .4rem; }
.ixa-telefono svg { display: none; }   /* el auricular sólo asoma en móvil */

/* ---------- Selector de idioma ---------- */

/* Un `<details>` y nada más: sin JavaScript, sin banderas (siete PNG que no
   hacen falta) y con el desplegable cerrándose al pulsar fuera gracias al
   `::backdrop`… que no existe en `details`, así que se cierra al pulsar otra vez
   en el resumen o al navegar. Es el compromiso aceptable para no meter JS. */
.ixa-idiomas { position: relative; }

.ixa-idiomas > summary {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .5rem;
  border-radius: 999px;
  cursor: pointer;
  list-style: none;                /* la flechita por defecto de Firefox */
  font-weight: 600;
  font-size: .875rem;
  color: var(--wp--preset--color--contrast);
}
.ixa-idiomas > summary::-webkit-details-marker { display: none; }
.ixa-idiomas > summary:hover { background: var(--wp--preset--color--gris-suave); }
.ixa-idiomas > summary svg { width: 1.05em; height: 1.05em; opacity: .7; }

.ixa-idiomas__lista {
  position: absolute;
  z-index: 50;
  inset-inline-end: 0;
  inset-block-start: calc(100% + .35rem);
  margin: 0;
  padding: .35rem;
  list-style: none;
  min-width: 11rem;
  background: var(--wp--preset--color--blanco);
  border: 1px solid var(--wp--preset--color--gris-suave);
  border-radius: var(--ixa-radio-tarjeta);
  box-shadow: var(--wp--preset--shadow--elevada);
}
.ixa-idiomas__lista li { margin: 0; }
.ixa-idiomas__lista a {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .4rem .55rem;
  border-radius: .375rem;
  text-decoration: none;
  font-size: .875rem;
  color: var(--wp--preset--color--contrast);
}
.ixa-idiomas__lista a:hover { background: var(--wp--preset--color--gris-suave); }
.ixa-idiomas__lista a[aria-current] { font-weight: 700; }
.ixa-idiomas__codigo {
  font-variant-numeric: tabular-nums;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--wp--preset--color--gris-texto);
  min-width: 1.6rem;
}
.ixa-idiomas__lista a[aria-current] .ixa-idiomas__codigo { color: inherit; }

/* Dentro del menú desplegado en móvil el desplegable no puede ir flotando:
   se pinta en flujo, que es lo único que cabe. */
.wp-block-navigation__responsive-container.is-menu-open .ixa-idiomas__lista {
  position: static;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Logo y nombre en un solo enlace (bloque `ixa/logo`). El azul del logo se
   queda en el logo: el nombre va en tinta, que sobre lino cumple AA. */
.ixa-logo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--wp--preset--color--contrast);
}
.ixa-logo:hover .ixa-logo__nombre { text-decoration: underline; }
.ixa-logo__svg { flex: none; display: block; }
.ixa-logo__nombre {
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- La cabecera por debajo de 1024 px ---------- */

/* El menú entero —cinco rótulos, casi 500 px— más el selector y el teléfono no
   caben junto al logo hasta los ~900 px de ventana. El bloque de navegación de
   WordPress cambia a hamburguesa en 600 px, así que entre 600 y 1024 pintaba el
   menú completo y no cabía. Se reubica ese umbral en 1024, deshaciendo las dos
   reglas de core que lo fijan en 600. */
@media (min-width: 37.5rem) and (max-width: 63.9375rem) {
  .ixa-cabecera .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
    position: fixed;
    width: auto;
  }
  .ixa-cabecera .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
}

/* Móvil: caben el logo con su nombre, la hamburguesa, el idioma y la llamada,
   pero sólo si cada pieza ocupa lo justo. El teléfono pasa a botón redondo con
   el auricular —el número entero se lo queda el `aria-label`—, el selector se
   queda en el globo y los huecos se estrechan. Las cuentas a 375 px: 40+9+133
   del logo, 8 de hueco y 24+10+30+10+40 de las acciones; 304 de los 335
   disponibles. */
@media (max-width: 37.4375rem) {
  .ixa-cabecera__fila { gap: .5rem; }
  .ixa-cabecera__acciones { gap: .625rem; }

  .ixa-logo__nombre { font-size: .95rem; }

  .ixa-idiomas > summary { padding: .3rem; }
  .ixa-idiomas > summary .ixa-idiomas__codigo { display: none; }

  .ixa-telefono__numero { display: none; }
  .ixa-telefono svg { display: block; width: 1.25rem; height: 1.25rem; }
  .ixa-telefono a {
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--wp--preset--color--blanco);
    background: var(--wp--preset--color--accent);
    border-radius: 999px;
  }
}

/* Por debajo de 340 px ya no da: manda el logo y el nombre se va. */
@media (max-width: 21.25rem) {
  .ixa-logo__nombre { display: none; }
}

/* El `backdrop-filter` de la cabecera crea un bloque de contención: cualquier
   `position: fixed` de dentro se ancla a la cabecera en lugar de a la ventana,
   y el desplegable salía recortado a la altura de la barra. Mientras el menú
   está abierto, la cabecera renuncia al desenfoque. */
.ixa-cabecera:has(.wp-block-navigation__responsive-container.is-menu-open) {
  backdrop-filter: none;
  z-index: 100000;                 /* si no, los botones flotantes y el aviso de
                                      cookies se pintan sobre el desplegable */
}

/* Menú desplegado en móvil. El tema no da por hecho el CSS del bloque de core:
   fija aquí la pantalla completa, el fondo opaco y la columna de enlaces. Sin
   esto el desplegable salía como una franja con los enlaces en fila, cortados
   por el borde y con el contenido de la página leyéndose por detrás. */
.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  padding: 4rem 1.5rem 2rem;
  overflow: auto;
  background-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--blanco);
}

.wp-block-navigation__responsive-container.is-menu-open :is(a, button) { color: inherit; }

.wp-block-navigation__responsive-container.is-menu-open
:is(.wp-block-navigation__responsive-container-content, .wp-block-navigation__container) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  width: 100%;
  font-size: 1.25rem;
}

.wp-block-navigation__responsive-container-close {
  position: absolute;
  top: 1rem;
  inset-inline-end: 1rem;
  padding: .5rem;
}

/* ---------- Héroe con buscador ---------- */

.ixa-heroe {
  position: relative;
  /* Alto del héroe: casi pantalla completa, pero con tope. El buscador tiene que
     caber sobre el pliegue a 360 px, y en un monitor muy alto un héroe de 72svh
     deja la página siguiente demasiado lejos. */
  min-height: clamp(28rem, 72svh, 46rem);
  display: flex;
  align-items: flex-end;
  /* El relleno va aquí y no en el patrón porque tiene que escalar: en un
     monitor son 4 rem de aire, pero a 360 px esos mismos 4 rem arriba y abajo
     empujaban el buscador fuera del héroe, y el requisito es que quepa sobre el
     pliegue. Cableado en el patrón sería un estilo en línea, imposible de
     ajustar por consulta de medios. */
  padding-block: clamp(1.25rem, 5vh, 4rem);
}

/* Móvil: el titular y la entradilla se comprimen para dejar sitio al buscador. */
@media (max-width: 599px) {
  .ixa-heroe h1 { font-size: 1.85rem; }
  .ixa-heroe p { font-size: .9375rem; line-height: 1.5; }
  .ixa-heroe .wp-block-group { gap: 1rem; }
}

.ixa-heroe::after {                /* velo para que el texto blanco tenga contraste */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(42,38,34,.20) 0%, rgba(42,38,34,.48) 38%, rgba(42,38,34,.78) 68%, rgba(42,38,34,.92) 100%);
  pointer-events: none;
  /* 0, no 1: el propio core del bloque cover mete un z-index:1 al contenedor
     interior con una especificidad altísima (`body:not(...) .wp-block-cover:not(
     .wp-block-cover:has(.wp-block-cover__background + .wp-block-cover__inner-container))
     .wp-block-cover__inner-container`) en cuanto detecta una <img> entre el
     fondo y el contenedor, que es justo nuestra maqueta. Eso pisa el z-index:2
     de más abajo y empata el contenedor con el velo; en el empate gana el orden
     del DOM, y el velo —al ser la última caja generada— tapaba el buscador. Con
     0 el velo queda por debajo pase lo que pase, sin pelear esa especificidad. */
  z-index: 0;
}

/* Las tres capas del héroe, ordenadas a mano. Antes esto era
   `.ixa-heroe > * { z-index: 1 }`, que subía **también la foto** al mismo nivel
   que el velo: el velo quedaba debajo de la imagen y no oscurecía nada, así que
   el texto blanco se sostenía sólo con su sombra y sobre los claros de la foto
   no llegaba al contraste. La foto va al fondo, el velo encima, el texto arriba. */
.ixa-heroe > :is(.wp-block-cover__background, img.wp-block-cover__image-background) {
  z-index: 0;
}
.ixa-heroe > .wp-block-cover__inner-container { position: relative; z-index: 2; }

/* El titular a todo el ancho del contenido queda en una línea larga y fina. Con
   el tope entra en dos, que es como se leen los titulares.

   El `!important` no es pereza: el layout `constrained` de WordPress centra a
   todo hijo más estrecho que el contenedor con `margin-left/right: auto
   !important`, así que al ponerle tope al texto el titular y la entradilla se
   iban al medio mientras el buscador —que ocupa el ancho entero— se quedaba a la
   izquierda. Eso era la desalineación del héroe. Sacar el grupo de `constrained`
   tampoco vale: entonces pierde la columna de contenido y el buscador se va a
   los bordes, desalineado de la cabecera. Para ganarle a un `!important` hace
   falta otro. */
/* El contenedor del cover es `is-layout-flow`, no `constrained`: el grupo salía a
   todo el ancho del héroe y era el buscador —hijo constrained— el que se
   colocaba en la columna de contenido. De ahí que el texto y el buscador
   empezaran en sitios distintos. El grupo pasa a ser la columna, y así todo
   arranca en la misma vertical que el logo de la cabecera. */
.ixa-heroe .ixa-heroe__texto {
  max-width: var(--wp--style--global--content-size);
  margin-inline: auto;
  padding-inline: 0;
}

.ixa-heroe__texto :is(h1, p) {
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
  text-wrap: balance;
}
.ixa-heroe__texto h1 { max-width: 24ch; }
.ixa-heroe__texto p  { max-width: 46ch; text-wrap: pretty; }

/* Crédito de la foto del héroe. Es de Wikimedia Commons con CC BY, que obliga a
   citar autor y licencia donde se usa: va visible, debajo del buscador y a la
   derecha, en un cuerpo que cumple pero no compite con el lema. */
.ixa-heroe .ixa-heroe__credito {
  margin: .75rem 0 0;
  text-align: end;
  font-size: .6875rem;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .72);
  text-shadow: 0 1px 2px rgba(42, 38, 34, .6);
}

/* La foto se encuadra un poco por encima del centro: abajo casi siempre hay
   suelo, y arriba es donde está la estancia. */
.ixa-heroe img.wp-block-cover__image-background { object-position: center 42%; }

/* La foto del héroe es clara en la mitad superior: el velo no basta y el texto
   necesita sombra propia para cumplir el contraste. */
.ixa-heroe :is(h1, p) { text-shadow: 0 1px 3px rgba(42, 38, 34, .55), 0 8px 28px rgba(42, 38, 34, .45); }
.ixa-heroe p { font-weight: 500; }

/* ---------- Buscador ---------- */

/* En móvil van en dos columnas (fechas arriba, ocupación debajo) para que el
   botón de buscar quepa sobre el pliegue a 360 px, que es el requisito. */
.ixa-buscador {
  display: grid;
  gap: .6rem .5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--wp--preset--color--blanco);
  padding: 1rem;
  border-radius: var(--ixa-radio-tarjeta);
  box-shadow: var(--wp--preset--shadow--elevada);
}

.ixa-buscador__campo { display: flex; flex-direction: column; gap: .25rem; }

@media (max-width: 479px) {
  .ixa-buscador__campo:has(input[type="date"]) { grid-column: 1 / -1; }
}

.ixa-buscador__campo label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--gris-medio);
}

.ixa-buscador input,
.ixa-buscador select,
.ixa-formulario input,
.ixa-formulario select,
.ixa-formulario textarea {
  width: 100%;
  min-width: 0;                    /* si no, los campos de fecha desbordan la rejilla */
  padding: .7rem .8rem;
  font: inherit;
  line-height: 1.4;                /* iguala la altura de date y select, que la calculan distinto */
  color: var(--wp--preset--color--contrast);
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--gris-borde);
  border-radius: var(--ixa-radio-campo);
}

/* El campo de fecha nativo trae altura y relleno propios del navegador: se
   neutralizan para que mida lo mismo que un select. */
.ixa-buscador input[type="date"],
.ixa-formulario input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  height: auto;
}

.ixa-buscador input:focus-visible,
.ixa-formulario :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 1px;
}

.ixa-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.6rem;
  font-weight: 600;
  color: var(--wp--preset--color--blanco);
  background: var(--wp--preset--color--accent);
  border: 0;
  border-radius: var(--wp--custom--radio--boton, 999px);
  cursor: pointer;
  transition: var(--ixa-transicion);
}

.ixa-buscador .ixa-boton { grid-column: 1 / -1; }

.ixa-boton:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--blanco); }
.ixa-boton--secundario { background: transparent; color: var(--wp--preset--color--contrast); border: 1px solid var(--wp--preset--color--contrast); }
.ixa-boton--secundario:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--blanco); }

/* Las cuatro columnas no son iguales: con `1fr` cada una, a 768 px el campo se
   queda en 124 px y la fecha se pinta «08/24/202» —el icono del calendario le
   come el año—. Las dos fechas pesan más que los dos desplegables, que con dos
   dígitos van sobrados. */
@media (min-width: 768px) {
  .ixa-buscador {
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1.15fr)) repeat(2, minmax(0, .85fr)) auto;
    align-items: end;
  }
  .ixa-buscador .ixa-boton { grid-column: auto; }
}

/* ---------- Por qué reservar directo ---------- */

/* Con `auto-fit` los cuatro motivos caían 3+1 en tabletas, con el cuarto solo en
   una fila. Las columnas van fijadas por tramo: 1, 2 y 4. */
.ixa-motivos {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  color: var(--wp--preset--color--blanco);
}

@media (min-width: 600px)  { .ixa-motivos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ixa-motivos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ixa-motivo { display: grid; gap: .5rem; justify-items: start; align-content: start; }
.ixa-motivo strong { font-size: 1.0625rem; }
.ixa-motivo__texto { font-size: .9375rem; opacity: .88; }

.ixa-motivo__icono {
  display: flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
}

/* ---------- Franja de confianza ---------- */

.ixa-confianza {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}

/* El dato ya no es siempre una cifra corta («Garaje privado» ocupa lo suyo):
   escala con el ancho y equilibra las dos líneas en vez de partirlas mal. */
.ixa-confianza__dato {
  font-size: clamp(1.125rem, 1rem + 1.1vw, 1.625rem);
  font-weight: 700;
  color: var(--wp--preset--color--contrast);
  line-height: 1.15;
  text-wrap: balance;
}
.ixa-confianza__pie { font-size: .8125rem; color: var(--wp--preset--color--gris-texto); text-wrap: pretty; }

/* `auto-fit` y no cuatro columnas fijas: si un apartamento se queda sin precio
   la franja pinta tres casillas y no debe dejar un hueco al final. */
@media (min-width: 768px) { .ixa-confianza { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.5rem; } }

/* ---------- Tarjeta de apartamento ---------- */

.ixa-tarjeta {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--wp--preset--color--blanco);
  border-radius: var(--ixa-radio-tarjeta);
  box-shadow: var(--wp--preset--shadow--tarjeta);
  transition: var(--ixa-transicion);
}

.ixa-tarjeta:hover { transform: translateY(-3px); box-shadow: var(--wp--preset--shadow--elevada); }
/* La foto manda el ritmo de la rejilla: todas las tarjetas, mismo recorte 4:3,
   vengan las fotos como vengan (las hay 3:2 y 4:3). El recorte lo hace la
   figura, no la imagen, que es lo único que no depende de cómo el navegador
   combine `aspect-ratio` con los atributos width/height del `img`. */
.ixa-tarjeta > a { display: block; }
.ixa-tarjeta figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.ixa-tarjeta figure img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  border-radius: 0 !important;
}
.ixa-tarjeta__cuerpo { display: flex; flex-direction: column; flex: 1; gap: .6rem; padding: 1.1rem 1.2rem 1.3rem; }
.ixa-tarjeta__cuerpo > * { margin: 0; }

/* Precio y botón se van al fondo de la tarjeta. Sin esto cada tarjeta los pone
   donde acabe su contenido, y como IXA-3 no tiene distintivos su botón subía una
   fila entera respecto a los otros tres: cuatro tarjetas de la misma altura con
   las llamadas a la acción a cuatro alturas distintas. */
.ixa-tarjeta__cuerpo .ixa-precio { margin-top: auto; padding-top: .2rem; }

/* El botón de la tarjeta no es el botón del buscador: en la rejilla de cuatro
   columnas la tarjeta deja unos 195 px libres y «Ver disponibilidad» con el
   relleno de 1,6 rem no cabía en una línea, así que el texto se partía en dos y
   el botón crecía hasta parecer un cartel. Ocupa el ancho de la tarjeta —que es
   lo que se quiere de una llamada a la acción—, con el relleno y el cuerpo
   justos para que el rótulo entre de una línea también en alemán. */
.ixa-tarjeta .ixa-boton {
  display: flex;
  width: 100%;
  padding: .7rem 1rem;
  font-size: .9375rem;
  text-align: center;
  text-wrap: balance;
}

.ixa-datos {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  font-size: .875rem;
  color: var(--wp--preset--color--gris-texto);
}

.ixa-datos span { display: inline-flex; align-items: center; gap: .35rem; }
.ixa-datos svg { width: 1.05em; height: 1.05em; flex: none; }

.ixa-datos--iconos { gap: .75rem; color: var(--wp--preset--color--gris-medio); }
.ixa-datos--iconos svg { width: 1.3em; height: 1.3em; }

.ixa-precio { font-size: 1.125rem; font-weight: 700; color: var(--wp--preset--color--contrast); }
.ixa-precio small { font-size: .75rem; font-weight: 400; color: var(--wp--preset--color--gris-medio); }

/* Distintivos: parking, terraza, balcón — los tres diferenciadores reales */
.ixa-distintivos { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }

.ixa-distintivo {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .6rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--wp--preset--color--sobre-secundario);
  background: var(--wp--preset--color--secundario);
  border-radius: 999px;
}

.ixa-distintivo svg { width: .9em; height: .9em; }

/* Rejilla de tarjetas: las cuatro unidades caben en una fila a partir de
   1024 px; por debajo, dos columnas y luego una. */
.ixa-rejilla {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) { .ixa-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* `auto-fit` para que las cuatro unidades vayan en fila, y las tres de «los
   otros apartamentos» ocupen el ancho en lugar de dejar un hueco. */
@media (min-width: 1024px) { .ixa-rejilla { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } }

/* ---------- Equipamiento con iconos ---------- */

.ixa-equipamiento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; align-items: start; list-style: none; margin: 0; padding: 0; }
.ixa-equipamiento li { display: flex; align-items: center; gap: .55rem; font-size: .9375rem; line-height: 1.35; }
.ixa-equipamiento svg { width: 1.35rem; height: 1.35rem; flex: none; color: var(--wp--preset--color--azul-logo); }

@media (min-width: 768px) { .ixa-equipamiento { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Ficha ---------- */

.ixa-galeria {
  display: grid;
  gap: .75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 600px)  { .ixa-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ixa-galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Listas de datos: distancias en la ficha, contacto en el pie y en el lateral. */
.ixa-distancias,
.ixa-contacto {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}

.ixa-distancias li {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--wp--preset--color--gris-suave);
}

/* El bloque es el propio <ul> y el `margin: 0` de arriba anula el blockGap del
   contenedor: sin esto la lista queda pegada al titular de la sección. */
.ixa-distancias { margin-top: 1.25rem; }

.ixa-distancias li span { display: inline-flex; gap: .5rem; align-items: center; }
.ixa-distancias li:last-child { border-bottom: 0; }

.ixa-contacto li > *,
.ixa-contacto li { display: flex; gap: .6rem; align-items: flex-start; }
.ixa-contacto svg { margin-top: .15em; }

.ixa-otas {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}

.ixa-otas > span { font-size: .8125rem; color: var(--wp--preset--color--gris-medio); }

.ixa-ficha { display: grid; gap: var(--wp--preset--spacing--40); align-items: start; }

@media (min-width: 1024px) {
  .ixa-ficha { grid-template-columns: minmax(0, 1fr) 360px; }
  .ixa-ficha__lateral { position: sticky; top: 5.5rem; }
}

.ixa-galeria img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--ixa-radio-tarjeta);
}

.ixa-normas { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ixa-normas li { display: flex; gap: .6rem; align-items: baseline; }
.ixa-normas li::before { content: "·"; color: var(--wp--preset--color--secundario); font-weight: 700; }

.ixa-hut {
  font-size: .8125rem;
  color: var(--wp--preset--color--gris-medio);
  border-top: 1px solid var(--wp--preset--color--gris-suave);
  padding-top: .75rem;
}

/* ---------- Formulario de solicitud ---------- */

.ixa-formulario { display: grid; gap: .85rem; background: var(--wp--preset--color--blanco); padding: 1.25rem; border-radius: var(--ixa-radio-tarjeta); box-shadow: var(--wp--preset--shadow--tarjeta); }
.ixa-formulario > * { min-width: 0; }                 /* si no, la fila de dos campos desborda la tarjeta */
.ixa-formulario__fila { display: grid; gap: .85rem; }
.ixa-formulario__fila > * { min-width: 0; }
.ixa-formulario p { margin: 0; }

/* Casilla de consentimiento: la casilla y su texto en la misma línea. */
.ixa-consentimiento {
  display: flex !important;
  gap: .5rem;
  align-items: flex-start;
  font-weight: 400;
  font-size: .8125rem;
  line-height: 1.5;
}

.ixa-consentimiento input { width: auto; margin-top: .15rem; }
.ixa-formulario label { font-size: .8125rem; font-weight: 600; color: var(--wp--preset--color--contrast); display: block; margin-bottom: .25rem; }
.ixa-formulario textarea { min-height: 7rem; resize: vertical; }
.ixa-formulario__legal { font-size: .75rem; color: var(--wp--preset--color--gris-medio); }
.ixa-formulario__trampa { position: absolute; inset-inline-start: -9999px; }  /* honeypot */

@media (min-width: 600px) { .ixa-formulario__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ixa-aviso { padding: .8rem 1rem; border-radius: var(--ixa-radio-campo); font-size: .9375rem; }
.ixa-aviso--ok { background: #e6f7ee; color: #0b5d34; }
.ixa-aviso--error { background: #fdeaec; color: #8a1020; }

/* ---------- Mapa diferido (no carga nada de fuera hasta que se pide) ---------- */

.ixa-mapa { position: relative; border-radius: var(--ixa-radio-tarjeta); overflow: hidden; background: var(--wp--preset--color--gris-suave); }
.ixa-mapa__marco { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; }
.ixa-mapa__aviso { display: grid; gap: .75rem; place-items: center; text-align: center; padding: 2.5rem 1.25rem; aspect-ratio: 16 / 10; align-content: center; }
.ixa-mapa__aviso p { margin: 0; font-size: .875rem; color: var(--wp--preset--color--gris-texto); max-width: 40ch; }

/* ---------- Rejilla de fichas (atractivos y restaurantes) ----------
   La misma tarjeta cuadrada para las dos secciones de la página de Manresa: el
   nombre siempre visible abajo y el resto al pasar por encima. Los atractivos
   llevan foto; los restaurantes, que no tienen, un fondo de la casa con los
   cubiertos en marca de agua. */

.ixa-rejilla { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.ixa-rejilla figure { position: relative; margin: 0; border-radius: var(--ixa-radio-tarjeta); overflow: hidden; }
/* `height: auto` no es decorativo: los atributos width/height del `img` cuentan
   como estilo de presentación, y con un alto fijado el navegador ignora
   `aspect-ratio` y la foto sale deformada. Vale para todas las de aquí. */
.ixa-rejilla img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0 !important; }
/* `overflow: hidden` y no `auto`: con `auto`, un navegador de barras clásicas
   pinta las flechas del ascensor en todas las tarjetas aunque estén cerradas.
   El texto cabe —30 palabras los atractivos, 25 los restaurantes—, así que si
   algún día no cabe, lo que se recorta es el texto, no la tarjeta. */
.ixa-rejilla figcaption { position: absolute; inset: auto 0 0 0; max-height: 100%; overflow: hidden; }

/* El fondo de las tarjetas sin foto. El icono es decorativo y se queda muy
   apagado: la tarjeta la tiene que leer el nombre, no el dibujo. */
.ixa-sinfoto {
  display: grid; place-items: center; aspect-ratio: 1 / 1;
  background: linear-gradient(150deg, var(--wp--preset--color--gris-medio), var(--wp--preset--color--contrast) 70%);
}
.ixa-sinfoto svg { width: 38%; height: auto; color: #fff; opacity: .18; stroke-width: 1.1; }

@media (min-width: 600px) { .ixa-rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ixa-rejilla { grid-template-columns: repeat(4, 1fr); } }

/* ---------- El panel de la tarjeta ----------
   Se abre **al pasar por encima** de la tarjeta y se cierra al salir: lo que se
   está mirando es la foto, y un panel que se queda abierto la tapa. Ni una línea
   de JavaScript: el texto está en el DOM y lo enseña `:hover` sobre la figura, o
   `:focus-within` sobre el botón, que es lo que cubre el teclado y el dedo —al
   tocar, el botón recibe el foco—.

   La altura se anima con el truco de `grid-template-rows: 0fr → 1fr`, que es la
   única forma de ir de cero a «lo que ocupe» sin fijar un alto a mano; por eso el
   cuerpo lleva dentro un `__interior` con `overflow: hidden`. */

.ixa-flyout__resumen {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  width: 100%; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; font-weight: 600; font-size: .9375rem; text-align: start; cursor: pointer;
}
.ixa-flyout__signo { position: relative; flex: 0 0 auto; width: .75rem; height: .75rem; transition: transform 200ms ease; }
.ixa-flyout__signo::before,
.ixa-flyout__signo::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px; background: currentColor; border-radius: 2px; }
.ixa-flyout__signo::after { transform: rotate(90deg); }

.ixa-flyout__interior > p { margin: .6rem 0 0; font-weight: 400; font-size: .875rem; line-height: 1.5; }
.ixa-flyout__tipo { text-transform: uppercase; letter-spacing: .06em; font-size: .6875rem; font-weight: 600; color: var(--wp--preset--color--secundario); }
.ixa-flyout__pie { display: flex; align-items: center; gap: .4rem; font-size: .8125rem; opacity: .85; }
.ixa-flyout__pie svg { flex: 0 0 auto; width: 1rem; height: 1rem; }
/* Crédito de la foto: obligatorio por la licencia CC, pero no es información
   de viaje. Va al final del panel, pequeño y apagado, sin robarle sitio. */

/* El degradado deja leer el nombre sobre la foto, y al abrirse el panel se
   vuelve opaco para que el texto no compita con la imagen. */
.ixa-flyout {
  color: #fff; padding: 2.5rem .9rem .8rem;
  background: linear-gradient(180deg, transparent, rgba(42,38,34,.85));
  transition: background 200ms ease, padding 200ms ease;
}
.ixa-flyout__resumen:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ixa-flyout__cuerpo {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows 220ms ease, opacity 160ms ease;
}
.ixa-flyout__interior { min-height: 0; overflow: hidden; }

.ixa-rejilla figure:hover .ixa-flyout,
.ixa-flyout:focus-within { padding-top: .9rem; background: rgba(42,38,34,.94); }
.ixa-rejilla figure:hover .ixa-flyout__cuerpo,
.ixa-flyout:focus-within .ixa-flyout__cuerpo { grid-template-rows: 1fr; opacity: 1; }
.ixa-rejilla figure:hover .ixa-flyout__signo,
.ixa-flyout:focus-within .ixa-flyout__signo { transform: rotate(45deg); }

/* Grupos con título y lema: los comparten las cuatro familias de atractivos y
   las tres categorías de restaurantes. */
.ixa-grupos { display: grid; gap: 2.5rem; }
.ixa-grupo { display: grid; gap: .5rem; }
.ixa-grupo h3 { margin: 0; font-size: 1.25rem; }
.ixa-grupo__lema { margin: 0 0 .5rem; max-width: 60ch; color: var(--wp--preset--color--gris-texto); font-size: .9375rem; }

@media (prefers-reduced-motion: reduce) {
  .ixa-flyout,
  .ixa-flyout__signo,
  .ixa-flyout__cuerpo { transition: none; }
}

/* ---------- Reseñas ---------- */

.ixa-resenas {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 600px)  { .ixa-resenas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ixa-resenas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ixa-resena { display: flex; flex-direction: column; gap: .75rem; height: 100%; background: var(--wp--preset--color--blanco); padding: 1.25rem; border-radius: var(--ixa-radio-tarjeta); box-shadow: var(--wp--preset--shadow--tarjeta); }
.ixa-resena blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--wp--preset--color--contrast); }
.ixa-resena cite { font-style: normal; font-size: .8125rem; color: var(--wp--preset--color--gris-medio); margin-top: auto; }
.ixa-estrellas { color: var(--wp--preset--color--secundario); letter-spacing: .1em; font-size: .9rem; }

/* ---------- Botón flotante (persiste al desplazar) ---------- */

/* Los botones flotantes no aparecen sobre el héroe: ahí ya está el buscador y
   el teléfono de la cabecera. Salen al desplazar, que es cuando hacen falta.
   Sin JavaScript quedan visibles, que es el comportamiento seguro. */
.ixa-flotante[data-oculto="1"] {
  opacity: 0;
  transform: translateY(1rem);
  pointer-events: none;
}

.ixa-flotante {
  transition: opacity 200ms ease, transform 200ms ease;
  position: fixed;
  inset-inline-end: 1rem;
  bottom: 1rem;
  z-index: 50;
  display: flex;
  gap: .5rem;
}

.ixa-flotante a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem 1.1rem;
  font-size: .875rem;
  font-weight: 600;
  color: #fff;
  background: var(--wp--preset--color--accent);
  border-radius: 999px;
  box-shadow: var(--wp--preset--shadow--elevada);
}

.ixa-flotante a.ixa-flotante--whatsapp { background: #25d366; }

/* Mientras el aviso de cookies está a la vista, los botones suben. */
body:has(.ixa-cookies[data-visible="1"]) .ixa-flotante { bottom: 8.5rem; }

@media (min-width: 600px) {
  body:has(.ixa-cookies[data-visible="1"]) .ixa-flotante { bottom: 6rem; }
}
.ixa-flotante svg { width: 1.1em; height: 1.1em; }
.ixa-flotante span { display: none; }

@media (min-width: 600px) { .ixa-flotante span { display: inline; } }

/* ---------- Aviso de cookies ---------- */

.ixa-cookies {
  position: fixed;
  inset: auto .75rem .75rem;
  z-index: 60;
  display: none;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
  max-width: 46rem;
  margin-inline: auto;
  padding: .75rem .9rem;
  font-size: .75rem;
  background: var(--wp--preset--color--blanco);
  border-radius: var(--ixa-radio-tarjeta);
  box-shadow: var(--wp--preset--shadow--elevada);
}

.ixa-cookies[data-visible="1"] { display: flex; }
.ixa-cookies p { margin: 0; flex: 1 1 18rem; }

/* ---------- Pie ---------- */

.ixa-pie { font-size: .9375rem; }

/* Las listas del pie son navegación, no prosa: sin viñetas, como en el resto. */
.ixa-pie ul:not(.ixa-contacto) { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.ixa-pie a { color: inherit; }
.ixa-pie h2, .ixa-pie h3 { font-size: .875rem; text-transform: uppercase; letter-spacing: .06em; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .ixa-tarjeta:hover { transform: none; }
}