/* ==========================================================================
   Tour (GTour) · nuestros ajustes
   --------------------------------------------------------------------------
   La plantilla se carga entera y sin tocar: todo lo que cambia va aquí, que es
   la última hoja. Así el día que se actualice el paquete comprado basta con
   sustituir assets/tour/css/ y esta hoja sigue valiendo.

   Lo que hay, por orden:
     · accesibilidad (saltar al contenido, foco visible)
     · barra de idiomas
     · cabecera
     · piezas nuestras que la plantilla no trae (antetítulos, amenidades,
       distancias, migas, opiniones, formularios)
     · el buscador de fechas del hero
     · franja de foto
     · las bandas de color de la portada
     · pie
     · los botones flotantes de contacto
   ========================================================================== */

/* --- Lo básico --------------------------------------------------------- */

/* El panel del menú móvil se aparca fuera de pantalla por la derecha
   (right:-10px y un translate de 360 px). Sin esto, esos 360 px cuentan y toda
   la web se puede desplazar en horizontal, también en escritorio. */
html,
body {
    overflow-x: hidden;
}

/* --- Accesibilidad ---------------------------------------------------- */

.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Salta la cabecera entera. Invisible hasta que el tabulador lo alcanza. */
.saltar-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    background: #ffffff;
    color: #000000;
    padding: 12px 20px;
    font-family: Poppins, Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.saltar-contenido:focus {
    left: 0;
}

/* La plantilla quita el contorno del foco en varios sitios. Sin foco visible
   no se puede navegar con teclado, así que vuelve. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #f8504c;
    outline-offset: 2px;
}

/* --- Barra de idiomas -------------------------------------------------- */

.above_top_bar {
    padding: 0 30px;
    font-size: 12px;
}

.above_top_bar .standard_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 38px;
}

#top_menu {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#top_menu li {
    margin: 0;
    padding: 0;
}

#top_menu li a {
    font-family: Poppins, Helvetica, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.02em;
    opacity: 0.75;
}

#top_menu li a:hover,
#top_menu li.current-menu-item a {
    opacity: 1;
}

#top_menu li.current-menu-item a {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.top_contact_info {
    font-size: 12px;
}

/* Por debajo de 768 la franja de arriba estorba: siete idiomas y un correo no
   caben en una línea y se comen el hero. Los idiomas están repetidos al final
   del menú móvil, así que aquí se esconde entera. */
@media (max-width: 767px) {
    .above_top_bar {
        display: none;
    }
}

.top_contact_info span {
    margin: 0 6px 0 16px;
}

.top_contact_info span:first-child {
    margin-left: 0;
}

/* El panel del menú móvil, opaco.
   La plantilla lo deja en rgba(255,255,255,.85) porque cuenta con desenfocar la
   página que queda detrás (el efecto "blur" de tg_sidemenu_overlay_effect). Ese
   efecto está desactivado a propósito —un filter de 20 px sobre toda la página
   es caro en un móvil—, así que el panel tiene que taparla él mismo: con la foto
   del hero nítida detrás, el menú no se leía. */
body .mobile_menu_wrapper {
    background: #ffffff;
}

/* Las entradas del menú móvil.
   La plantilla las pone a 24 px, pensadas para rótulos de una palabra. Con
   "Nuestros Apartamentos" o "Descubre Benidorm" no caben en los 190 px útiles
   del panel, parten en dos líneas y, con el interlineado de 2em de la
   plantilla, las dos mitades acaban más separadas entre sí que de la entrada
   siguiente: se leen ocho opciones donde hay siete. Menos cuerpo, la línea
   ceñida y el aire por fuera del enlace. Estuvieron en 17 px y el cliente las
   vio grandes (31/08/2026); a 15 caben en una línea más rótulos. */
.mobile_menu_wrapper .mobile_main_nav li a {
    font-size: 15px;
    line-height: 1.35;
}

.mobile_menu_wrapper .mobile_main_nav li {
    margin-bottom: 18px;
}

/* Los idiomas repetidos al final del menú móvil: la franja de arriba no se ve
   por debajo de 768 px. */
.mobile_idiomas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 30px 0 0;
    padding: 24px 0 0;
    list-style: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.mobile_idiomas li {
    margin: 0;
}

.mobile_idiomas a {
    font-family: Poppins, Helvetica, Arial, sans-serif;
    font-size: 13px;
    opacity: 0.7;
}

.mobile_idiomas a.activo {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 4px;
}

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

/* La cabecera va SIEMPRE sobre negro translúcido y desenfocado.

   Antes era transparente encima de la foto (`.top_bar.hasbg`) y el menú salía
   en blanco; en las páginas cuyo `#page_caption` tiene una foto clara —cielo,
   arena, fachadas al sol— el texto blanco desaparecía. Y al hacer scroll la
   plantilla lo pasaba a negro sobre fondo transparente, con el mismo problema
   al revés.

   **Negro al 60 %** desde el 31/08/2026, que es lo que pidió el cliente: menos
   transparencia. Estuvo al 20 % desde el 05/08 —entonces quería ver bien la foto
   a través—, y a esa opacidad el color por sí solo NO garantizaba el contraste
   sobre una foto clara: lo sostenían entre los tres el negro, el desenfoque y la
   sombra del texto de más abajo. Al 60 % el contraste ya lo da el fondo, y el
   desenfoque se queda porque separa la cabecera de la foto. Si se vuelve a bajar
   esta opacidad, hay que compensar con la sombra. */
.header_style_wrapper {
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(18px) saturate(115%) brightness(0.82);
    backdrop-filter: blur(18px) saturate(115%) brightness(0.82);
}

/* El respaldo para navegadores sin backdrop-filter: sin desenfoque que apague
   la foto hace falta algo más de negro para llegar al mismo sitio. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

    .header_style_wrapper {
        background: rgba(0, 0, 0, 0.75);
    }
}

/* La cabecera de móvil, más alta (31/08/2026). El logo mide 51 px de alto y
   empieza a los 20, así que en los 64 px que trae la plantilla se salía 7 px por
   debajo del panel oscuro. Con 90 px queda con 20 de aire arriba y 19 abajo.

   Va como `height` y no como `padding`: la barra tiene sus hijos flotando, no
   levantan la caja, y el relleno de abajo no cambia nada de lo que se ve. */
@media (max-width: 767px) {

    .top_bar {
        height: 90px;
    }

    /* El icono del menú, más grande: a 13 px las tres rayas casi no se veían.
       `top` porque el enlace es `position: relative` y así se centra en la barra
       nueva sin tocar el flotado de la plantilla: 15 px lo bajan a su mitad. */
    #mobile_nav_icon {
        font-size: 24px;
        top: 15px;
    }
}

/* El color lo pone ahora el envoltorio. Las dos franjas van transparentes para
   que se lea como un solo panel y no como dos negros distintos. */
.above_top_bar,
.top_bar,
.top_bar.hasbg,
.top_bar.scroll {
    background: transparent;
}

.top_bar,
.top_bar.scroll {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* El menú, blanco en los dos estados. La plantilla solo lo pinta en blanco
   mientras no hay scroll (`.top_bar:not(.scroll)`, y con !important), así que
   hay que repetirlo aquí para el estado con scroll. */
#wrapper.transparent .top_bar #menu_wrapper div .nav > li > a,
#wrapper.transparent .top_bar.scroll #menu_wrapper div .nav > li > a,
#menu_wrapper div .nav > li > a {
    color: #ffffff !important;
}

/* Con la cabecera al 20 % el fondo ya no asegura el contraste por sí solo: la
   sombra es la que mantiene el texto legible si debajo pasa una zona clara.
   Es sombra, no contorno, para que no se note sobre las zonas oscuras. */
#menu_wrapper div .nav > li > a,
#top_menu li a,
.top_contact_info {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 12px rgba(0, 0, 0, 0.5);
}

/* El botón de Reserva tiene fondo propio y no necesita la sombra. */
#menu_wrapper div .nav li.menu-item-reserva > a {
    text-shadow: none;
}

/* El logotipo claro en cualquier estado: el normal es oscuro y sobre este
   panel no se vería. La plantilla los intercambia al hacer scroll. */
#custom_logo {
    display: none !important;
}

#custom_logo_transparent {
    display: inline-block !important;
}

/* El icono del menú móvil, blanco también con scroll. */
.top_bar #mobile_nav_icon,
.top_bar.scroll #mobile_nav_icon {
    color: #ffffff;
    border-color: #ffffff;
}

/* --- Dónde empieza el menú de hamburguesa ------------------------------- */

/* La plantilla pasa al menú de hamburguesa solo entre 768 y 960 px, y de 961
   en adelante enseña el menú de escritorio. Con nuestras siete entradas más el
   botón de Reserva y un logotipo de 240 px, entre 961 y 1199 no cabe todo en
   una fila: el menú se descolgaba debajo del logotipo y quedaba fatal.

   Aquí se estira el modo hamburguesa hasta 1199 px, repitiendo lo mismo que
   hace la plantilla en su tramo de 768-960 (que es camino ya probado). A 1200
   coincide con el punto en el que `grid.css` le da al contenido su ancho
   máximo, así que el menú completo aparece justo cuando tiene sitio. */
@media (min-width: 961px) and (max-width: 1279px) {

    #menu_wrapper {
        width: 100%;
    }

    #menu_border_wrapper {
        height: auto;
        display: none;
    }

    #menu_wrapper .nav ul,
    #menu_wrapper div .nav {
        display: none;
    }

    #mobile_nav_icon {
        display: inline-block !important;
        position: relative;
        top: -1px;
    }
}

/* El botón de la derecha abre el menú lateral, que aquí no se usa: solo hace
   falta como acceso al menú móvil, así que se esconde cuando el menú completo
   está a la vista, es decir de 1200 para arriba. */
@media (min-width: 1280px) {
    #logo_right_button {
        display: none !important;
    }
}

/* La barra, más alta que los 74 px de la plantilla, para que quepa el logotipo
   grande con aire por arriba y por abajo. custom.js mide la cabecera y le pasa
   ese alto al #wrapper como padding, así que no hay que tocar nada más. */
@media (min-width: 768px) {
    .top_bar .standard_wrapper {
        height: 92px;
    }
}

/* El logotipo en móvil: 240 px se comen la fila entera junto al icono del menú
   en una pantalla estrecha. */
@media (max-width: 767px) {
    .logo_wrapper img {
        width: 200px;
        height: auto;
    }
}

/* La página activa, marcada en el menú. */
#menu_wrapper div .nav li.current-menu-item > a {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
}

/* Los enlaces del menú se centran en la barra con su propio relleno: la
   plantilla trae 26 px, que llenaban los 74 px de antes; con la barra a 92 hacen
   falta 35. Y hay que cambiarlo AQUÍ, no solo en el botón: custom.js lee este
   valor al cargar y luego lo reescribe como estilo en línea en cada enlace. */
@media (min-width: 1280px) {
    #menu_wrapper div .nav li > a {
        padding-top: 35px;
        padding-bottom: 35px;
    }
}

/* "Reserva" es la acción principal: va como botón, no como un enlace más.
   El relleno vertical va con !important porque custom.js lo escribe en línea en
   todos los enlaces del menú, y un estilo en línea gana a cualquier hoja: sin
   esto el botón sale como un bloque de punta a punta de la cabecera.
   Se centra con el margen que sobra: (92 - 40) / 2 = 26. */
#menu_wrapper div .nav li.menu-item-reserva > a {
    color: #ffffff;
    /* En rojo, y no en el verde del resto de botones (31/08/2026): es la única
       llamada a la acción de la cabecera y ahí interesa que cante. */
    background: #f8504c;
    border-radius: 3px;
    padding: 9px 20px !important;
    margin: 26px 0 0 14px;
    line-height: 22px;
    height: auto;
}

#menu_wrapper div .nav li.menu-item-reserva > a:hover {
    color: #ffffff;
    background: #c0392b;
}

/* --- Botones ----------------------------------------------------------- */

/* Todos los botones de la web en el verde azulado de la marca (#0b8791, pedido
   el 31/08/2026). La plantilla los trae en negro (#222) con turquesa al pasar
   por encima; esto pisa las dos cosas de una vez, así que vale para los botones
   de las fichas, los de los formularios, el del buscador de la portada y
   cualquiera que aparezca luego sin tener que acordarse.

   Los selectores repiten los de `screen.css` para empatar en especificidad y
   ganar por orden de carga —`ajustes.css` va después—, sin recurrir a
   `!important`, que después estorba para las excepciones. */
input[type=submit],
input[type=button],
a.button,
.button {
    background: #0b8791;
    border-color: #0b8791;
    color: #ffffff;
}

input[type=button]:hover,
input[type=submit]:hover,
a.button:hover,
.button:hover,
.button.submit,
a.button.white:hover,
.button.white:hover,
a.button.white:active,
.button.white:active {
    background: #096e76;
    border-color: #096e76;
    color: #ffffff;
}

/* `.ghost` es el botón sin relleno de la plantilla: se queda transparente, solo
   se le cambia el color de la línea y del texto. */
.button.ghost,
.button.ghost:hover,
.button.ghost:active {
    border-color: #0b8791;
    color: #0b8791;
}

#menu_wrapper div .nav li.menu-item-reserva > a:hover {
    background: #e23b37;
}

/* --- Las tres fotos de la bienvenida ----------------------------------- */

.foto_bienvenida img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

@media (max-width: 767px) {
    .foto_bienvenida {
        margin-bottom: 20px;
    }

    .foto_bienvenida img {
        height: 220px;
    }
}

/* --- El visor de fotos -------------------------------------------------- */

/* iLightBox calcula el hueco disponible con el ancho de la ventana incluyendo
   la barra de desplazamiento, así que se pasa unos píxeles y saca una barra
   horizontal dentro del propio visor. El tope evita que la foto se salga.
   `html, body { overflow-x: hidden }` (que hace falta para el menú móvil) no lo
   corrige: el visor está posicionado como fijo. */
.ilightbox-holder {
    max-width: 100vw;
}

.ilightbox-holder img {
    max-width: 100%;
    height: auto;
}

/* --- Párrafos justificados --------------------------------------------- */

/* Todo el texto corrido va justificado, en los siete idiomas, y **ninguna
   palabra se parte** (pedido el 31/08/2026). Antes llevaba `hyphens: auto`, que
   es el acompañamiento habitual del justificado —sin partir, una columna
   estrecha abre calles de espacio entre palabras—, pero el guion a final de
   línea se lee mal en una web de alojamiento y en alemán y ruso saltaba a la
   vista. */
#page_content_wrapper p,
.prosa p,
.post_content p,
.entrada_cuerpo p,
.guia_lugar p,
.ppb_text p {
    text-align: justify;
    hyphens: none;
    -webkit-hyphens: none;
}

/* Nada de partir palabras en ninguna parte de la web. Va sobre `*` a propósito:
   hoy la plantilla no pide `hyphens` en ninguna hoja, pero es un paquete
   comprado que se actualiza sustituyendo `css/` entero, y así el día que lo
   traiga no hay que volver a buscarlo.
   `overflow-wrap: break-word` NO es lo mismo y se queda: solo actúa cuando una
   palabra no cabe entera en la línea —un correo largo, una URL— y ahí es
   preferible partir a que el texto se salga de la caja. Sin guion, además. */
*,
*::before,
*::after {
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
}

/* Las columnas estrechas, no. Justificar de verdad necesita una línea con
   palabras suficientes para repartir el sobrante: en las tarjetas del lateral de
   contacto, de unos 245 px, caben tres o cuatro, y sin partir palabras el
   navegador estira los espacios hasta abrir calles ("Lo    más    rápido"). En
   el ancho de una página normal eso no pasa.

   Son las tres columnas estrechas que hay, buscadas una a una recorriendo las
   catorce páginas y quedándose con lo que estuviera justificado por debajo de
   330 px: el lateral de contacto, el resumen de cada apartamento en el listado
   (310 px) y el de cada entrada en el blog (282 px). */
#page_content_wrapper .sidebar p,
#page_content_wrapper .sidebar_wrapper p,
#page_content_wrapper .tour_excerpt p,
#page_content_wrapper .post_header_wrapper p {
    text-align: left;
}

/* Lo que la plantilla centra a propósito —titulares, bajadas, los pies de las
   tarjetas, el bloque de los tres motivos— se queda como estaba: justificar
   una línea suelta y centrada solo la descuadra. */
#page_content_wrapper .ppb_header p,
.ppb_header p,
.page_tagline,
.page_tagline p,
[style*="text-align:center"] p,
[style*="text-align: center"] p {
    text-align: center;
    hyphens: none;
    -webkit-hyphens: none;
}

/* --- Antetítulo -------------------------------------------------------- */

/* La plantilla tiene título y bajada, pero no la línea corta de encima que
   llevan las secciones del documento del cliente ("Espacios de quietud"). */
.ppb_antetitulo {
    font-family: Poppins, Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #f8504c;
    margin-bottom: 12px;
}

/* --- Vídeo del hero ----------------------------------------------------- */

/* El hero de la portada ya es `position: relative` y trae la foto de fondo con
   `background-size: cover`. El vídeo se coloca encima cubriendo lo mismo, y el
   velo negro (.overlay_background, que en este bloque la plantilla pinta con
   z-index 1) queda por encima del vídeo. Los textos van dentro de
   .center_wrapper .inner_content .standard_wrapper, que la plantilla deja en
   z-index 2, así que se leen sobre los dos. */
.hero_medios {
    overflow: hidden;
}

/* Más alto en móvil, y el contenido por debajo del menú.

   Dos cosas a la vez, porque el fallo era de las dos:

   1. La plantilla le pone al hero un tope de `max-height: 500px` por debajo de
      768 px (grid.css). Sube a 660.
   2. Y, lo que de verdad cortaba el titular, **centra el contenido en el alto
      COMPLETO**, sin descontar la cabecera, que es `position: fixed` y tapa los
      primeros 90 px. Medido a 390: el H1 empezaba en 77 y se le comían las
      trece primeras líneas de píxeles. Subir solo el alto no bastaba: en una
      pantalla corta el tope manda, el hero vuelve a medir 500 y el titular se
      mete otra vez debajo del menú.

   El padding de arriba es lo que arregla el 2, y funciona así: la caja que
   centra es `height: 100%` del área de contenido, así que al subir el padding
   la caja encoge por arriba y **el bloque baja la mitad de lo que se añade**.
   120 px —los 30 de la plantilla más los 90 del menú— dejan el titular a 42 px
   del menú en la pantalla más pequeña que se prueba (320×568) y a 112 en un
   móvil normal, siempre con aire por debajo del buscador. Medido a 320×568,
   360×640, 390×844, 414×736 y 430×932; el peor caso es el primero.

   El `min()` con `svh` es para los teléfonos bajos: en una pantalla de 568 px
   de alto, 660 px de hero no dejarían ver nada más, así que ahí manda el 96 %
   de la altura visible. La línea con `vh` va primero como respaldo para los
   navegadores que no entienden `svh`. */
/* Ojo con el orden: esta regla va DESPUÉS de la que fija el padding de 30 px
   para todas las anchuras (más abajo, junto a su explicación). Las dos tienen
   la misma especificidad, así que la que gana es la última del fichero, y
   escrita aquí arriba el padding de móvil no se aplicaba. */

/* Mientras hay un panel del buscador abierto, el hero deja de recortar.

   El calendario y el contador de huéspedes de la barra de Holdesk se despliegan
   HACIA ABAJO, en `position: absolute`, y en móvil no caben dentro del hero:
   medido a 390 px, el panel del calendario acaba a 647 px y el bloque mide 500,
   así que `overflow: hidden` le cortaba en seco las dos últimas semanas del mes
   y la fila de «Borrar / Listo». Visto desde fuera no parece un recorte sino que
   la banda siguiente se le hubiera puesto encima, que es como se contó.

   Se hace con una clase y no quitando el recorte del todo porque el recorte
   sigue haciendo falta el resto del tiempo: este bloque tiene alto fijo —800 px,
   500 en móvil— y basta con que el titular gane una línea en una pantalla
   estrecha para que el contenido se derrame sobre la sección de abajo. La clase
   la pone y la quita site.js, mirando el atributo `hidden` de los paneles dentro
   del Shadow DOM.

   Selector doble a propósito: `.hero_medios { overflow: hidden }` está repetido
   en un <style> dentro de views/pages/home.php, que por ir después en el
   documento ganaría a igualdad de especificidad.

   No hace falta tocar ningún z-index. El panel cuelga de .standard_wrapper, que
   la plantilla deja en `position: relative; z-index: 2`, y eso ya lo pinta por
   encima de las bandas que vienen después, que no están posicionadas. */
.hero_medios.hero_medios--desplegado {
    overflow: visible;
}

/* A qué altura van el titular, la bajada y el buscador dentro del hero.

   El truco es el padding de arriba: la caja que centra el contenido es
   `height: 100%` del área de contenido, así que al subir el padding la caja
   encoge por arriba y **el bloque baja la mitad de lo que se añade**. El alto
   del hero no cambia, solo se mueve lo de dentro.

   La cabecera es `position: fixed` y tapa los primeros 132 px del hero (90 en
   móvil, donde la franja de idiomas no se ve), y la plantilla centra en el alto
   COMPLETO: sin tocar nada, el titular sale pegado al menú. Estuvo en 210 px,
   que lo dejaba centrado en la parte visible, pero se veía caído; **desde el
   31/08/2026 son 30 px**, que lo suben 90 respecto a los 210. Medido a 1280:
   quedan 174 px entre el menú y el titular, y 306 desde el buscador hasta el
   final de la foto. En móvil, 56 y 120.

   30 px es justo lo que pone la plantilla, así que esta regla ya no cambia el
   valor: se deja escrita a propósito, porque el número es una decisión tomada
   —y probada en 210, 60 y 30— y no la ausencia de una. En móvil sí hace falta
   otro valor; la excepción va justo debajo. */
.one.withsmallpadding.hero_medios {
    padding-top: 30px;
}

/* Y en móvil, el hero más alto y el contenido por debajo del menú (17/09/2026).

   Eran dos fallos sumados:

   1. La plantilla le pone al hero un tope de `max-height: 500px` por debajo de
      768 px (grid.css). Sube a 660: es lo que pidió el cliente, "hazlo todo más
      alto".
   2. Y, lo que de verdad cortaba el titular, se centra en el alto COMPLETO sin
      descontar la cabecera, que tapa los primeros 90 px. Medido a 390, el H1
      empezaba en 77 y perdía sus trece primeras líneas de píxeles. Subir solo
      el alto NO basta: en una pantalla corta manda el tope por altura, el hero
      vuelve a medir 500 y el titular se mete otra vez debajo del menú.

   Por eso van juntos el tope y el padding. 120 px son los 30 de siempre más los
   90 del menú, y como el bloque baja la mitad de lo que se añade, el titular
   queda a 42 px del menú en la pantalla más pequeña que se prueba (320×568) y a
   112 px en un móvil normal, siempre con aire de sobra por debajo del buscador.
   Medido a 320×568, 360×640, 390×844, 414×736 y 430×932.

   El `min()` con `svh` es para los teléfonos bajos: en una pantalla de 568 px de
   alto, 660 de hero no dejarían ver nada más, así que ahí manda el 96 % de lo
   visible. La línea con `vh` va primero como respaldo para los navegadores que
   no entienden `svh`. */
@media (max-width: 767px) {

    .one.withsmallpadding.hero_medios {
        padding-top: 120px;
        max-height: min(660px, 96vh);
        max-height: min(660px, 96svh);
    }
}

/* Visible desde el primer momento, sin depender de ningún evento: mientras no
   hay fotogramas el propio elemento pinta su `poster`, que es la misma foto que
   el fondo. Antes esto empezaba en `opacity: 0` y solo se mostraba al recibir
   `canplay` desde JavaScript; cuando ese evento no llegaba —reproducción
   automática rechazada, descarga lenta— el vídeo se quedaba invisible para
   siempre. */
.hero_video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    border: 0;
    pointer-events: none;
}

/* --- Bandas de color de la portada -------------------------------------- */

/* Las secciones de la portada se turnan entre fondo blanco y una banda de
   color, para que se lean como bloques distintos y no como una lista larga.
   Los dos tonos salen de los colores de marca (turquesa y ámbar) rebajados
   casi hasta el blanco: dan el aire de verano sin comerse el texto ni romper
   el tono sereno del sitio.

   Van alternando de arriba abajo —bienvenida sí, apartamentos no, entorno sí—
   salvo en el par «Esencia de la Costa» + «Por qué reservar», que van los dos
   con color por decisión del cliente (22/08/2026). Ahí lo que los separa no es
   el blanco sino el cambio de tono: ámbar y luego turquesa.

   `.banda` se comporta igual que el `.one` de la plantilla —float, ancho
   completo y clear—, que es requisito de esta maqueta: un bloque sin flotar
   entre bloques flotados se va al principio de la página. Al flotar, además,
   envuelve a sus hijos flotados y pinta el fondo detrás de todos. */
.banda {
    float: left;
    width: 100%;
    clear: both;
    padding: 70px 0;
}

/* Los .one de dentro traen sus márgenes en el atributo style, así que hay que
   ganarles con !important. Sin esto, el margen del primero abriría un hueco de
   color arriba y el del último otro abajo, y la banda saldría descentrada. */
.banda > .one:first-child {
    margin-top: 0 !important;
}

.banda > .one:last-child {
    margin-bottom: 0 !important;
}

.banda--aqua {
    background: #eaf6f8;
}

.banda--arena {
    background: #fbf4e8;
}

/* Los tres motivos para reservar directo traen 70 px de margen inferior en
   cada columna —es lo que los separa al apilarse en el móvil—, así que el
   relleno de abajo de la banda lo ponen ellos y aquí sobra. */
.banda--motivos {
    padding-bottom: 0;
}

@media (max-width: 767px) {

    .banda {
        padding: 45px 0;
    }
}

/* --- Los tres motivos para reservar directo ---------------------------- */

.razon_icono {
    display: inline-block;
    font-size: 64px;
    line-height: 1;
    color: #f8504c;
    margin-bottom: 10px;
}

/* Un color de marca por motivo —turquesa, ámbar y coral— en vez de los tres
   iguales: es la fila con más aire de la portada y aquí el color se agradece. */
.razones_iconos .one_third:nth-of-type(1) .razon_icono {
    color: #10a8b8;
}

.razones_iconos .one_third:nth-of-type(2) .razon_icono {
    color: #e59a12;
}

.razones_iconos .one_third:nth-of-type(3) .razon_icono {
    color: #f8504c;
}

/* --- Guía: el directorio de sitios ------------------------------------- */

.guia_categoria {
    margin-bottom: 30px;
}

.guia_categoria_titulo {
    margin: 0 0 26px 0;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.guia_categoria_titulo span[class^="ti-"] {
    color: #f8504c;
    margin-right: 10px;
}

/* Las tarjetas van sin caja ni sombra: la retícula ya la marcan el aire y la
   línea de la categoría, y una caja por sitio con veintitrés sitios convierte
   la página en un tablero. */
.guia_lugar {
    margin-bottom: 40px;
}

.guia_lugar h4 {
    margin-bottom: 6px;
}

.guia_lugar p {
    margin-bottom: 0;
}

/* Tipo de sitio y cómo se llega. Es la línea que se lee de un vistazo cuando
   alguien recorre la página buscando "qué hay cerca", así que va antes del
   texto y con menos peso que el nombre. */
.guia_lugar_meta {
    font-family: Poppins, Helvetica, Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px !important;
}

.guia_lugar_tipo {
    color: #f8504c;
    font-weight: 600;
}

.guia_lugar_acceso {
    opacity: 0.6;
}

/* El separador entre el tipo y el acceso se dibuja, no se escribe: así no hay
   que meter un carácter suelto en los siete ficheros de idioma. */
.guia_lugar_acceso::before {
    content: "·";
    margin: 0 8px;
}

.guia_lugar_acceso span[class^="ti-"] {
    margin-right: 4px;
    font-size: 10px;
}

/* --- Equipamiento ------------------------------------------------------ */

/* El float y el ancho, explícitos: la plantilla flota las listas, y una lista
   flotada sin ancho dentro de un contenedor con columnas se queda en cero. */
.lista_amenidades {
    float: none;
    width: 100%;
    columns: 3;
    column-gap: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lista_amenidades li {
    break-inside: avoid;
    margin-bottom: 10px;
    font-size: 15px;
}

.lista_amenidades li span {
    color: #f8504c;
    margin-right: 8px;
    font-size: 12px;
}

@media (max-width: 767px) {
    .lista_amenidades {
        columns: 1;
    }
}

/* --- Distancias -------------------------------------------------------- */

.tabla_distancias {
    width: 100%;
    border-collapse: collapse;
}

.tabla_distancias th,
.tabla_distancias td {
    text-align: left;
    padding: 12px 0;
    border-bottom: 1px solid #e6e6e6;
    font-size: 14px;
}

.tabla_distancias th {
    font-family: Poppins, Helvetica, Arial, sans-serif;
    font-weight: 600;
}

.tabla_distancias td {
    text-align: right;
    white-space: nowrap;
    opacity: 0.75;
}

/* --- Encabezado interior ----------------------------------------------- */

/* La bajada del título no puede cruzar la pantalla entera: a 1700 px sale una
   línea de punta a punta que no hay quien lea. */
#page_caption .page_tagline {
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
}

/* --- Guía -------------------------------------------------------------- */

.guia_seccion {
    margin-bottom: 50px;
}

.guia_seccion img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Filtros de categoría (blog y galería) ----------------------------- */

/* Van como botones rellenos, no como una fila de enlaces: en la galería son la
   única manera de saltar a cada apartamento y con texto suelto no se leían como
   algo pulsable. Se copia el aspecto del `.button` de la plantilla —fondo #222,
   borde del mismo color, radio de 5 px y el turquesa al pasar por encima— para
   que sean el mismo botón que el resto del sitio y no un botón nuevo. */
.filtros_categoria {
    display: flex;
    flex-wrap: wrap;

    /* A la derecha: las migas van pegadas al margen izquierdo justo encima, y
       con los botones también a la izquierda las dos filas se pisaban visualmente.
       Separados a cada lado, cada cosa se lee por su cuenta. */
    justify-content: flex-end;
    gap: 10px;
    margin: 0 0 40px;
    padding: 0 0 24px;
    list-style: none;
    border-bottom: 1px solid #e6e6e6;
    font-family: Poppins, Helvetica, Arial, sans-serif;
    font-size: 13px;
}

/* La plantilla mete 20 px de sangría a TODOS los ul del contenido
   (`#page_content_wrapper .inner .sidebar_content ul`, que es 1-2-1 de
   especificidad), y la fila de botones salía descuadrada respecto al título y a
   las migas. Hay que ganarle con el selector entero; con `.filtros_categoria` a
   secas no basta. */
#page_content_wrapper .inner .sidebar_content ul.filtros_categoria {
    margin-left: 0;
}

.filtros_categoria li {
    margin: 0;
    padding: 0;
}

/* Los filtros del blog llevan `#filtros` en el enlace para que la página nueva
   se abra a su altura y no arriba del todo. La cabecera es fija y mide 132 px
   (64 en móvil), así que sin este margen la fila de botones se queda justo
   debajo del menú y no se ve el cambio. */
#filtros {
    scroll-margin-top: 150px;
}

@media (max-width: 767px) {
    #filtros {
        scroll-margin-top: 80px;
    }
}

.filtros_categoria a {
    display: inline-block;
    padding: 9px 20px;
    border: 2px solid #0b8791;
    border-radius: 5px;
    background: #0b8791;
    color: #ffffff;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: background 150ms linear, border-color 150ms linear;
}

.filtros_categoria a:hover,
.filtros_categoria a:focus {
    background: #096e76;
    border-color: #096e76;
    color: #ffffff;
}

/* La categoría en la que se está, solo en el blog. En negro y no en otro tono
   del mismo verde: entre dos verdes parecidos no se distingue cuál está
   seleccionado, y el negro es el color de botón de la plantilla, así que no
   mete un color nuevo. */
.filtros_categoria a.activo,
.filtros_categoria a.activo:hover,
.filtros_categoria a.activo:focus {
    background: #222222;
    border-color: #222222;
    color: #ffffff;
}

/* --- Rejilla de entradas ----------------------------------------------- */

/* La plantilla reparte las tarjetas en tres columnas de 31,66% y a la que
   lleva la clase .last le pone `float: right`. Con la fila completa eso da
   igual, pero con una o dos entradas la última se iba pegada al margen
   derecho y dejaba un hueco en medio. Dos arreglos:

     · en las vistas, .last se pone cada tres tarjetas, no en la última;
     · aquí, las columnas se ajustan a cuántas tarjetas hay de verdad.

   Solo a partir de 768 px: por debajo la plantilla las pone al 100% y esa
   regla suya vive dentro de un @media, así que sin acotar la ganaríamos. */
@media (min-width: 768px) {

    /* 48,5 y no 48,75: la plantilla deja 2,5% de canalón a la derecha de cada
       tarjeta y el hueco de un float se mide con su margen incluido. Con
       48,75 la suma daba justo el 100% y al redondear el navegador bajaba la
       segunda tarjeta a la fila siguiente. El canalón de la última sobra. */
    .ppb_blog_posts.rejilla_entradas--2 .post.type-post {
        width: 48.5%;
    }

    .ppb_blog_posts.rejilla_entradas--2 .post.type-post:nth-child(2n) {
        margin-right: 0;
    }

    .ppb_blog_posts.rejilla_entradas--1 .post.type-post {
        width: 48.75%;
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- Galería ----------------------------------------------------------- */

.galeria_grupo {
    margin-bottom: 60px;

    /* Los botones de arriba son anclas. La cabecera es `position: fixed` y mide
       132 px (64 en móvil), así que sin esto el salto deja el título del grupo
       justo debajo del menú y parece que no ha pasado nada. */
    scroll-margin-top: 150px;
}

@media (max-width: 767px) {
    .galeria_grupo {
        scroll-margin-top: 80px;
    }
}

.galeria_grupo__cabecera {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 20px;
}

.galeria_grupo__cabecera h3 {
    margin: 0;
}

.mosaico {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.mosaico a {
    display: block;
    overflow: hidden;
}

.mosaico img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}

.mosaico a:hover img {
    transform: scale(1.05);
}

@media (max-width: 767px) {
    .mosaico {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Paginación y varios ----------------------------------------------- */

.paginacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #e6e6e6;
}

.paginacion__actual {
    font-family: Poppins, Helvetica, Arial, sans-serif;
    font-size: 13px;
    opacity: 0.7;
}

.nota_global {
    font-family: Poppins, Helvetica, Arial, sans-serif;
    margin-bottom: 30px;
}

.nota_global strong {
    font-size: 40px;
    color: #f8504c;
    margin-right: 10px;
}

.enlaces_404 {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 30px;
    justify-content: center;
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}

.atribucion {
    font-size: 13px;
    opacity: 0.75;
    border-top: 1px solid #e6e6e6;
    padding-top: 20px;
    margin-top: 30px;
}

.formulario_centrado {
    max-width: 46rem;
    margin: auto;
}

.texto_legal p {
    margin-bottom: 16px;
}

/* --- Migas de pan ------------------------------------------------------ */

.migas_wrapper {
    padding: 18px 0 0;
}

.migas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    opacity: 0.7;
}

.migas li + li:before {
    content: "/";
    margin-right: 8px;
    opacity: 0.5;
}

/* --- Opiniones --------------------------------------------------------- */

.opinion {
    margin: 0;
    padding: 30px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    height: 100%;
}

.opinion__texto {
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    font-size: 15px;
    font-style: italic;
    line-height: 1.7;
}

.opinion__firma {
    font-family: Poppins, Helvetica, Arial, sans-serif;
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: center;
    opacity: 0.75;
}

.opinion__nota {
    color: #f8504c;
    font-weight: 600;
    opacity: 1;
}

/* En la portada las opiniones van sobre banda de color: en blanco se despegan
   del fondo en vez de quedarse como un recuadro vacío. */
.banda .opinion {
    background: #ffffff;
    border-color: #dbeaed;
}

/* --- Cebo antispam ------------------------------------------------------ */

/* Invisible para la gente, irresistible para los robots.
   Fuera de pantalla en vez de display:none, que algunos ni lo rellenan. */
.trampa {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

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

/* Hoy no se pinta (no hay nada que consentir). Se queda listo para el día que
   se active Holdesk y su loader ponga cookies de terceros. */
.cookies {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 9998;
    max-width: 46rem;
    margin: auto;
    background: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
    border-radius: 4px;
    padding: 24px 28px;
    font-size: 14px;
}

.cookies__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
    margin-top: 16px;
}

/* --- Formularios ------------------------------------------------------- */

.campo {
    margin-bottom: 16px;
}

.campo label {
    display: block;
    font-family: Poppins, Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
}

.campo__control {
    width: 100%;
}

/* El campo de hora, igual que los demás.
   La lista de tipos que la plantilla estiliza (screen.css) se escribió antes de
   que existiera `type="time"`, así que ese input salía con el aspecto crudo del
   navegador: borde biselado, monoespaciada y 20 px de alto en medio de campos
   de 40. Se repiten aquí los valores que la plantilla ya aplica al resto. */
input[type="time"] {
    width: 100%;
    height: 40px;
    padding: 10px;
    margin: 0;
    font-family: inherit;
    font-size: 100%;
    color: #555555;
    background: #ffffff;
    border: 1px solid #dce0e0;
    border-radius: 5px;
    box-sizing: border-box;
    outline: none;
}

.campo__error {
    color: #c0392b;
    font-size: 13px;
    margin-top: 4px;
}

.campo__etiqueta {
    display: block;
    font-family: Poppins, Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
}

/* El "(opcional)" o el "(hasta 12 años)" de una etiqueta: acompaña, no compite. */
.campo__matiz {
    font-weight: 400;
    opacity: 0.65;
}

.campo__ayuda {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 4px;
}

/* Dos campos por fila en pantallas anchas; uno debajo de otro en el móvil. */
.campo--doble {
    display: flex;
    gap: 20px;
}

.campo--doble .campo {
    flex: 1 1 0;
}

@media (max-width: 600px) {
    .campo--doble {
        display: block;
    }
}

.aviso {
    padding: 16px 20px;
    border-radius: 4px;
    background: #f6f6f6;
    border-left: 3px solid #f8504c;
    margin-bottom: 24px;
}

.aviso--error {
    background: #fdeceb;
    border-left-color: #c0392b;
    color: #7d241b;
}

/* --- Ficha de apartamento ---------------------------------------------- */

.datos_piso {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 0 0 30px;
    padding: 0 0 24px;
    list-style: none;
    border-bottom: 1px solid #e6e6e6;
    font-family: Poppins, Helvetica, Arial, sans-serif;
    font-size: 13px;
}

.datos_piso li {
    margin: 0;
}

.datos_piso span {
    color: #f8504c;
    margin-right: 6px;
}

/* El detalle que acompaña a un dato —qué hay dentro de los baños, por ejemplo—
   va en gris y sin el margen de los iconos. La regla de arriba es para los
   iconos de la plantilla, pero alcanza a CUALQUIER <span> de la lista: sin esta
   excepción el texto salía en coral y pegado al número, como si fuera parte del
   icono. */
.datos_piso .dato_detalle {
    color: #6b6357;
    margin-right: 0;
}

.galeria_ficha {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 40px;
}

.galeria_ficha__grande {
    grid-column: 1 / -1;
}

.galeria_ficha a {
    display: block;
    overflow: hidden;
}

.galeria_ficha img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}

.galeria_ficha__grande img {
    aspect-ratio: 16 / 9;
}

.galeria_ficha a:hover img {
    transform: scale(1.04);
}

@media (max-width: 767px) {
    .galeria_ficha {
        grid-template-columns: repeat(2, 1fr);
    }
}

.lista_amenidades--dos {
    columns: 2;
    margin-bottom: 24px;
}

/* Lo que NO hay. Se dice claro y con su propio color: es lo que evita la
   reseña mala del que llega y se encuentra con que no hay parking. */
/* La nota de convivencia que va bajo la tabla de horarios. */
.nota_normas {
    font-size: 14px;
    margin: 14px 0 24px;
}

.licencia {
    font-size: 12px;
    opacity: 0.7;
}

/* --- El buscador del hero ---------------------------------------------- */

/* Desde el 09/09/2026 el buscador de la portada es la barra de Holdesk, la
   misma pieza que el motor de la página de reserva. Va en Shadow DOM, así que
   de aquí dentro NO se le puede tocar nada: color, redondeo y etiquetas se le
   pasan por atributos `data-` desde views/partials/buscador-holdesk.php. Lo
   único nuestro es la caja que la centra.

   820 px y no los 680 de antes: la barra son tres columnas —fechas, huéspedes y
   botón— y no dos. Por debajo de 660 px se apila ella sola, con una consulta de
   contenedor que mide su propio ancho, no el de la ventana. */
.buscador-holdesk {
    width: 100%;
    max-width: 820px;
    margin: 34px auto 0;
    text-align: left;
}

/* Las reglas de `.buscador` que vienen debajo siguen en pie porque el
   formulario propio no ha desaparecido: vive dentro del contenedor de la barra
   como respaldo para cuando search.js no llega, y entonces es lo único que se
   ve. Al montarse la barra, `attachShadow` deja de pintar a los hijos del
   contenedor y este formulario se va de la pantalla sin más.

   Solo hay que quitarle el margen de arriba, que ahora lo pone el contenedor. */
.buscador-holdesk #tour_search_form.buscador {
    margin-top: 0;
}

@media (max-width: 767px) {

    .buscador-holdesk {
        max-width: 100%;
        margin-top: 24px;
    }
}

/* Un solo calendario por campo, y que sea el del navegador.
   Antes se escondía el icono nativo con ::-webkit-calendar-picker-indicator
   para dejar a la vista el <span class="ti-calendar"> de la plantilla. Ese
   selector solo lo entienden los navegadores WebKit: en Firefox no se aplicaba,
   su icono nativo seguía ahí y se veían DOS calendarios en el mismo campo. El
   span se ha quitado de las plantillas y aquí se deja el nativo tal cual, que
   además es el que abre el desplegable al pulsarlo. */
/* Cada campo llena su columna.
   La plantilla no le da ancho a nada de aquí dentro, así que cada campo medía
   lo que medía su contenido y la fila salía a saltos, con huecos desiguales. */
.tour_search_wrapper select,
.tour_search_wrapper input[type="date"],
.tour_search_wrapper input[type="submit"] {
    width: 100%;
    box-sizing: border-box;
}

/* Una sola pieza blanca, estrecha y centrada (31/08/2026). Antes eran tres
   recuadros sueltos de punta a punta del hero: ocupaba todo el ancho, pesaba
   más que el titular y no se leía como un buscador sino como tres campos.

   La plantilla pone `float: left`, `width: 100%` y 20 px de relleno, y hay que
   deshacer las tres cosas para poder centrarlo. Va con el id delante
   (`#tour_search_form.buscador`) porque esa regla suya se escribe
   `#tour_search_form, .tour_search_form { … }`: con la clase sola pierde, el
   formulario se queda flotando a la izquierda y la bajada del titular se le
   coloca al lado. */
#tour_search_form.buscador {
    float: none;
    width: 100%;
    max-width: 680px;
    margin: 34px auto 0;
    padding: 0;
}

.buscador__caja {
    display: flex;
    align-items: stretch;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
}

.buscador__campo {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 14px 24px;
}

/* La raya entre las dos fechas, en vez de un recuadro alrededor de cada una:
   con el borde completo volvían a leerse como campos sueltos dentro de una caja. */
.buscador__campo + .buscador__campo {
    border-left: 1px solid #e6e6e6;
}

.buscador__campo label {
    margin: 0;
    font-family: Poppins, Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #8a8a8a;
}

/* La fecha, grande y sin recuadro: es lo que se lee y lo que se toca. El campo
   nativo trae borde, relleno y alto propios en cada navegador, así que se
   desmonta entero y se deja solo el texto y el iconito del calendario. */
.buscador__campo input[type="date"] {
    border: 0;
    padding: 0;
    height: auto;
    min-height: 0;
    line-height: 1.3;
    background: transparent;
    box-shadow: none;
    font-family: Poppins, Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #222222;
}

.buscador__campo input[type="date"]:focus {
    outline: none;
}

/* El foco se marca en la caja entera, que es lo que se ve; en el campo desnudo
   el contorno quedaba pegado al texto y se salía del relleno. */
.buscador__campo:focus-within {
    box-shadow: inset 0 0 0 2px #0b8791;
}

.buscador__accion {
    display: flex;
    flex: 0 0 auto;
}

/* El botón, pegado al borde de la caja y a toda su altura. */
.buscador .button,
.buscador input[type="submit"] {
    width: auto;
    height: 100%;
    border: 0;
    border-radius: 0;
    padding: 0 38px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* En móvil, uno debajo de otro: en 390 px las dos fechas y el botón en fila
   dejan cada campo en 90 px y la fecha no cabe. */
@media (max-width: 767px) {

    .buscador {
        max-width: 100%;
        margin-top: 24px;
    }

    .buscador__caja {
        flex-direction: column;
    }

    .buscador__campo + .buscador__campo {
        border-left: 0;
        border-top: 1px solid #e6e6e6;
    }

    .buscador__accion {
        flex: 1 1 auto;
    }

    .buscador .button,
    .buscador input[type="submit"] {
        width: 100%;
        padding: 16px 20px;
    }
}

.tour_search_wrapper input[type="date"] {
    position: relative;
}

.tour_search_wrapper input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
}

/* Aviso de que la reserva online aún no está: va bajo el buscador, donde el
   original pone el enlace de "Advanced Search". */
.tour_advance_search_wrapper_link {
    font-size: 13px;
    opacity: 0.85;
}

/* --- BookingSlot ------------------------------------------------------- */

/* El hueco de reserva: el mismo alto lo ocupe el buscador propio o el widget
   de Holdesk. El alto sale de config (--alto-slot), no de aquí. */
.hueco-reserva {
    padding: 40px 0;
    background: #f6f6f6;
}

.hueco-reserva--flotante {
    background: transparent;
    padding: 0;
    margin-top: calc(var(--alto-slot, 148px) / -2);
    position: relative;
    z-index: 5;
}

.hueco-reserva--flotante .hueco-reserva__marco {
    background: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    padding: 30px;
    border-radius: 4px;
}

.hueco-reserva .tour_advance_search_wrapper_link {
    margin-top: 14px;
}

/* --- Botón de reservar de la ficha -------------------------------------- */

/* Va dos veces en la ficha: arriba, nada más entrar, y otra vez al final,
   después de las fotos y las condiciones. Los dos llevan a la única página de
   reserva que hay. En móvil ocupa todo el ancho: es la acción de la página y
   con el pulgar no se falla. */
.ficha_reservar {
    margin: 0 0 30px;
}

.ficha_reservar .button {
    display: inline-block;
}

@media (max-width: 767px) {
    .ficha_reservar .button {
        display: block;
        width: 100%;
        text-align: center;
    }
}

/* --- Widget de Holdesk -------------------------------------------------- */

/* El widget es un <iframe> que inserta su loader, así que desde aquí no se
   puede tocar su interior: trae su propio tipo, sus colores y su sombra. Lo
   único que nos toca es el hueco donde cae.

   El alto mínimo lo pone el atributo `style` del contenedor con el valor de
   config, no esta hoja: se sirve con `immutable, max-age=31536000` y un
   navegador con la versión vieja cacheada reservaría un alto que ya no es. */
.holdesk {
    position: relative;
}

/* El marco blanco con sombra del hueco sobra aquí: el iframe ya trae la suya y
   se verían dos tarjetas, una dentro de otra. La clase la pone la plantilla;
   con `:has()` sería más corto, pero esto tiene que funcionar también en los
   navegadores del móvil viejo con el que reserva media clientela. */
.hueco-reserva__marco--holdesk {
    background: none;
    box-shadow: none;
    padding: 0;
}

.holdesk iframe {
    display: block;
    width: 100%;
}

/* Respaldo sin JavaScript: el loader nunca llega a correr, así que el enlace
   al formulario de solicitud es lo único que se ve. Se centra en el hueco que
   se reservó para el widget en lugar de quedar pegado arriba. */
.holdesk__cargando {
    margin: 0;
    padding: 40px 0;
    text-align: center;
}

/* En la barra lateral de la ficha el buscador no cabe en fila: los campos se
   apilan y el botón ocupa todo el ancho. */
.sidebar .tour_search_wrapper > div {
    float: none;
    width: 100%;
    margin: 0 0 10px;
}

.sidebar .tour_search_wrapper input[type="submit"] {
    width: 100%;
}

.sidebar .tour_advance_search_wrapper_link {
    font-size: 12px;
    margin-top: 10px;
}

/* --- Listado de apartamentos ------------------------------------------- */

.filtros_apartamentos {
    margin-bottom: 40px;
    padding: 24px 30px;
    background: #f6f6f6;
    border-radius: 4px;
}

.filtros_apartamentos .campo {
    float: left;
    width: 30%;
    margin-right: 5%;
}

.filtros_apartamentos .campo:last-of-type {
    margin-right: 0;
    padding-top: 26px;
}

@media (max-width: 767px) {
    .filtros_apartamentos .campo {
        float: none;
        width: 100%;
        margin-right: 0;
    }

    .filtros_apartamentos .campo:last-of-type {
        padding-top: 0;
    }
}

.resultados_linea {
    font-family: Poppins, Helvetica, Arial, sans-serif;
    font-size: 13px;
    margin-bottom: 24px;
}

/* --- Franja de foto ---------------------------------------------------- */

/* En el original es un parallax con un vídeo de YouTube incrustado; no hay
   vídeo del alojamiento, así que queda la foto fija con la misma sensación de
   profundidad. */
/* Flotada y con clear como los bloques .one de la plantilla: si no, al ser el
   único bloque sin flotar entre bloques flotados, se va al principio de la
   página y deja su hueco vacío donde tenía que estar. */
.franja_foto {
    clear: both;
    float: left;
    width: 100%;
    height: 40vh;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

/* En móvil, background-attachment: fixed va mal (iOS lo ignora y Android lo
   pinta a saltos): ahí se queda quieta. */
@media (max-width: 767px) {
    .franja_foto {
        background-attachment: scroll;
        height: 30vh;
    }
}

/* --- Texto corrido ----------------------------------------------------- */

.prosa p {
    line-height: 1.8;
}

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

/* El logo de la primera columna: todo el ancho, alto proporcional. La plantilla
   no le da ancho a las imágenes de los widgets y salía al tamaño del fichero. */
#footer .pie_logo {
    margin: 0 0 20px;
}

#footer .pie_logo img {
    display: block;
    width: 100%;
    height: auto;
}

/* La licencia turística: obligación legal, no decoración. */
#footer .licencia {
    font-size: 12px;
    opacity: 0.7;
}

#footer .widget p span {
    margin-right: 10px;
    opacity: 0.8;
}

/* Las horas de entrada y salida, cada una en su línea y sangradas hasta debajo
   del texto: el icono del reloj ocupa el hueco de la primera línea y sin la
   sangría las dos horas volvían al margen y rompían la columna. Los 24 px son el
   ancho del icono más los 10 de separación que le pone la regla de arriba. */
.pie_horario {
    display: block;
    margin-left: 24px;
}

/* --- Botones flotantes de contacto ------------------------------------- */

/* Abajo a la IZQUIERDA: el botón de subir de la plantilla (#toTop) es fixed
   abajo a la derecha y en móvil se pisarían.

   El z-index es 90 a propósito: por encima de la página (la plantilla no pasa
   de 10 salvo la cabecera) y por debajo del panel del menú móvil (999) y de su
   fondo oscuro (99), para que al abrir el menú estos botones queden tapados. */
.acciones_flotantes {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.accion_flotante {
    display: flex;
    align-items: center;
    height: 52px;
    border-radius: 26px;
    padding: 0 14px;
    color: #ffffff !important;
    background: #10a8b8;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    font-family: Poppins, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.accion_flotante .fa {
    font-size: 24px;
    width: 24px;
    text-align: center;
    flex: none;
}

/* La etiqueta sale al pasar por encima o al llegar con el tabulador. Se anima
   max-width y no width porque el texto mide lo que mide en cada idioma. */
.accion_flotante__texto {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width 0.25s ease, opacity 0.2s ease, margin-left 0.25s ease;
}

.accion_flotante:hover,
.accion_flotante:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.accion_flotante:hover .accion_flotante__texto,
.accion_flotante:focus-visible .accion_flotante__texto {
    max-width: 14rem;
    opacity: 1;
    margin-left: 10px;
}

/* Los colores de cada servicio, que es como se reconocen de un vistazo. */
.accion_flotante--whatsapp {
    background: #25d366;
}

.accion_flotante--instagram {
    background: #c13584;
    background: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%);
}

/* En el móvil, círculos limpios: la etiqueta no cabe y el :hover no existe. */
@media (max-width: 767px) {

    .acciones_flotantes {
        left: 12px;
        bottom: 12px;
        gap: 8px;
    }

    .accion_flotante {
        height: 46px;
        padding: 0 11px;
    }

    .accion_flotante:hover .accion_flotante__texto {
        max-width: 0;
        opacity: 0;
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .accion_flotante,
    .accion_flotante__texto {
        transition: none;
    }
}

@media print {

    .acciones_flotantes {
        display: none;
    }
}