/* Home en móvil (ver class-home-mobile.php). Las clases rc-home-mobile / rc-car / rc-vlist / rc-search las pone home-mobile.js. TODO lo de esta hoja cuelga de dos condiciones a la vez: - la media query (max-width: 767px), y - la clase .rc-home-mobile en el , que solo pone el JS al aplicar el modo móvil y quita al volver a escritorio. La segunda no es redundante: garantiza que si el JS no llega a ejecutarse la home se quede exactamente como está hoy, en vez de quedarse a medias (con la cabecera encogida pero sin reordenar, por ejemplo). Y hace que al ensanchar la ventana el escritorio vuelva íntegro, sin depender de que el navegador reevalúe bien las variables de Elementor. Los data-id de Elementor aparecen solo donde no hay alternativa: bloques de solo título, que no tienen marcado propio por el que agarrarlos. Los carruseles y las listas se estilan por sus clases. */ /* ================================================================ Ajuste fino del espaciado — los números que se tocan ================================================================ Criterio acordado: el hueco entre un título y su contenido debe ser MENOR que el hueco entre bloques. Si miden igual, el título se lee como algo suelto. */ body.rc-home-mobile { --rc-gap-block: 20px; /* separación entre bloques */ --rc-gap-title: 12px; /* separación título → su contenido */ /* Cola inferior del carrusel de Universos. Sus tarjetas terminan en el borde de la foto, mientras que las experiencias llevan título y precio debajo y arrastran algo de aire dentro de la propia ficha. Con el mismo hueco de caja, el de Universos se lee más pegado al bloque siguiente; esto lo iguala. Medido tinta a tinta: con 16px las dos transiciones quedan en 62 y 63px. Si se cambia --rc-gap-block hay que recalibrarla. */ --rc-cats-tail: 16px; /* Cabecera compacta: la foto medía 544px y el buscador se le montaba con −140px, sobresaliendo casi 100px por debajo. Ahora el buscador va DENTRO de la foto, separado de su borde inferior por --rc-search-inset. */ /* La cabecera se aprieta todo lo que da de sí para que la primera experiencia entre en pantalla en un iPhone SE, que es el caso estrecho. Con la foto a 300px y el buscador recortado se ve el 86% de su foto; con 380px se quedaba en el 55%. El texto de la portada sigue cabiendo, y si algún día creciera, home-mobile.js estira la foto en vez de recortarlo. */ --rc-hero-height: 300px; --rc-hero-title: 30px; /* el titular, a cuatro líneas de 45px, no cabía */ --rc-search-inset: 12px; /* hueco entre el buscador y el borde de la foto */ /* El buscador, más bajo: los campos del tema vienen a 45px y el botón a 48, con 20px de relleno en la caja. Aquí cada píxel que se le quita es un píxel que gana la primera experiencia. */ --rc-field-h: 40px; /* alto de los campos */ --rc-field-gap: 6px; /* hueco entre campos y entre filas */ --rc-search-pad: 10px; /* relleno de la caja del buscador */ /* Cuánto se monta el buscador sobre la foto. Lo calcula home-mobile.js midiendo el buscador ya compactado, porque su altura depende de cuántos campos tenga el formulario y eso se configura desde el panel del tema —de hecho local y producción ya no coinciden. Este valor es solo el respaldo para el instante anterior a la medida. */ --rc-hero-overlap: 160px; --rc-hero-reserve: 130px; --rc-vlist-gap: 26px; /* separación entre las experiencias en vertical */ /* Las dos bandas con foto de fondo y un titular encima: "¿Por qué RadarCamp?" y "¿Cómo funciona?". Vienen con 480px de alto mínimo y 45px de relleno, pero su texto ocupa 134 y 191px: el resto es foto vacía. Se les respeta su papel de separador visual, pero sin que se coman media pantalla cada una. */ --rc-band-h: 280px; /* alto de las bandas con foto */ --rc-band-pad: 24px; /* su relleno arriba y abajo */ --rc-gap-section: 32px; /* y algo más de aire antes de cada una */ } @media (max-width: 767px) { /* ============================================================ Cabecera compacta ============================================================ */ body.rc-home-mobile .elementor-element.elementor-element-deea008 { --min-height: var(--rc-hero-height); /* La foto centra su texto en toda su altura, pero la franja de abajo queda tapada por el buscador. Un relleno inferior igual al solape deja el texto centrado en la parte que SE VE, no en la que ocupa. Sin esto el titular queda bajo el buscador por mucho que se encoja. */ --padding-bottom: var(--rc-hero-reserve, var(--rc-hero-overlap)); } body.rc-home-mobile .elementor-element.elementor-element-f2e735b { --margin-top: calc(-1 * var(--rc-hero-overlap)); } /* 45px daban cuatro líneas y no había foto que las aguantara. 30px es, además, el tamaño que la propia página ya tiene puesto para móvil en producción, así que allí esta regla no cambia nada. */ body.rc-home-mobile .elementor-element.elementor-element-920dd8c .elementor-heading-title { font-size: var(--rc-hero-title); line-height: 1.1; } /* El primer titular de la cabecera trae un margen superior negativo enorme (−200px en producción) para tirar del texto hacia arriba dentro de la foto de 544px. Con la foto encogida, ese margen se lleva el texto FUERA de la imagen y lo esconde detrás de la cabecera del sitio. Se anula solo el del primero: los siguientes llevan −20px, que es el solape buscado entre las tres líneas del titular y hay que conservar. Va por posición y no por id a propósito: la cabecera no tiene el mismo número de titulares en local que en producción. */ body.rc-home-mobile .elementor-element.elementor-element-deea008 > *:first-child { margin-top: 0 !important; } /* ============================================================ Ritmo vertical de los bloques reordenados ============================================================ Elementor no separa con márgenes sino con --padding-top / --padding-bottom y el --gap del contenedor padre. Aquí se anula el relleno vertical propio de cada bloque y se impone un ritmo único con --margin-top, para que el espaciado deje de depender de ocho valores sueltos y pase a depender de las dos variables de arriba. Solo se tocan los bloques de la tirada reordenada. Los de más abajo (testimonios, anfitriones, carrusel del tema) se quedan como están: tienen fondos propios que necesitan su relleno. */ body.rc-home-mobile .elementor-element.elementor-element-cc97aba, /* Inspírate */ body.rc-home-mobile .elementor-element.elementor-element-209d1fa, /* Universos */ body.rc-home-mobile .elementor-element.elementor-element-2499bff, /* Exp. Top */ body.rc-home-mobile .elementor-element.elementor-element-6d58d33, /* ¿Por qué… */ body.rc-home-mobile .elementor-element.elementor-element-84b9e95, /* 5 recuadros */ body.rc-home-mobile .elementor-element.elementor-element-8c9fd60, /* ¿Cómo funciona…*/ body.rc-home-mobile .elementor-element.elementor-element-35f854d { /* pasos */ --padding-top: 0px; --padding-bottom: 0px; --margin-top: var(--rc-gap-block); } /* Los dos bloques que son SOLO un título: su contenido vive en el bloque siguiente, así que ese siguiente se acerca. Es la única forma de cumplir "el título, más cerca de su contenido que del bloque anterior" cuando el título y su contenido son bloques hermanos. */ body.rc-home-mobile .elementor-element.elementor-element-84b9e95, /* tras "¿Por qué…" */ body.rc-home-mobile .elementor-element.elementor-element-35f854d { /* tras "¿Cómo funciona…" */ --margin-top: var(--rc-gap-title); } /* El último de la tirada sí recupera su respiro por abajo: debajo empiezan los bloques que no tocamos. */ body.rc-home-mobile .elementor-element.elementor-element-35f854d { --padding-bottom: var(--rc-gap-block); } /* Las dos bandas con foto piden algo más de aire por arriba que el resto: son cambios de sección, no continuación de lo anterior, y pegadas al bloque previo se leen como parte de él. */ body.rc-home-mobile .elementor-element.elementor-element-6d58d33, /* ¿Por qué… */ body.rc-home-mobile .elementor-element.elementor-element-8c9fd60 { /* ¿Cómo funciona… */ --margin-top: var(--rc-gap-section); } /* Y su foto, más baja. El contenedor interior es quien lleva el alto mínimo y el relleno; se apunta por posición para no añadir más data-id. */ body.rc-home-mobile .elementor-element-6d58d33 > .e-con, body.rc-home-mobile .elementor-element-8c9fd60 > .e-con { --min-height: var(--rc-band-h); --padding-top: var(--rc-band-pad); --padding-bottom: var(--rc-band-pad); } /* Al bajar la altura, la foto deja de cubrir y asoma el fondo gris por un lado: la de "¿Por qué RadarCamp?" viene desplazada -300px en móvil, y con `cover` una caja más baja escala la imagen más pequeña, así que ese desplazamiento destapa el borde derecho. Centrada sí cubre a cualquier altura. Cambia el encuadre en móvil, pero es eso o el hueco gris. La foto vive en un pseudo-elemento de la capa de efectos de Elementor, que es el único sitio donde se le puede tocar el encuadre. */ body.rc-home-mobile .elementor-element-6d58d33 > .e-con::before, body.rc-home-mobile .elementor-element-8c9fd60 > .e-con::before, body.rc-home-mobile .elementor-element-6d58d33 .elementor-motion-effects-layer::before, body.rc-home-mobile .elementor-element-8c9fd60 .elementor-motion-effects-layer::before { background-position: center center !important; background-size: cover !important; } /* Dentro de los bloques con listado, el título y su contenido son hermanos: el hueco lo pone el gap del contenedor que los envuelve, que marca el JS. */ body.rc-home-mobile .rc-home__titled { --gap: var(--rc-gap-title) var(--rc-gap-title); --row-gap: var(--rc-gap-title); } /* El contenedor del título trae 10px de relleno inferior propios que se suman al gap de arriba y descuadran la medida. */ body.rc-home-mobile .rc-home__titled > .e-con { --padding-bottom: 0px; } /* La barra de pestañas vacía del tema, entre el título y el contenido. La marca home-mobile.js, y solo cuando está vacía de verdad. */ body.rc-home-mobile .rc-tabs--empty { display: none !important; } /* Y en Universos, el que separa el título de las tarjetas es el margen superior del envoltorio de las filas (30px de origen). */ body.rc-home-mobile .elementor-element.elementor-element-b175af5 { --margin-top: var(--rc-gap-title); } /* Pero en Universos, además, se cuelan otros 20px que los otros carruseles no tienen: 10px de relleno inferior del contenedor del título y 10px de gap del propio bloque. Sin anularlos, su título queda al doble de distancia de sus tarjetas y el ritmo deja de leerse igual. */ body.rc-home-mobile .elementor-element.elementor-element-209d1fa { --gap: 0px 0px; --row-gap: 0px; --padding-bottom: var(--rc-cats-tail); } body.rc-home-mobile .elementor-element.elementor-element-96d13ed { --padding-bottom: 0px; } /* Estos envoltorios traen --min-height:469px de escritorio. Con el listado convertido en carrusel o en lista el contenido es más bajo y esa altura mínima deja un hueco muerto debajo. */ body.rc-home-mobile .elementor-element.elementor-element-2984f76, body.rc-home-mobile .elementor-element.elementor-element-31aed3f { --min-height: auto; } /* ============================================================ "Inspírate": las seis experiencias, una debajo de otra ============================================================ El cliente quiere que aquí el recorrido sea hacia abajo, no de lado: la primera experiencia asoma nada más cargar y el gesto natural es seguir bajando. Por eso este bloque NO es un carrusel. Se queda dentro del ancho de su contenedor, con sus márgenes laterales: una lista vertical a sangre completa se lee como un muro de fotos. */ .rc-vlist { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: var(--rc-vlist-gap); width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } .rc-vlist > .rc-vlist__card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; } /* ============================================================ Carrusel horizontal ============================================================ Lo usan Experiencias Top (fichas del tema), los cinco recuadros con ticks y los tres pasos EXPLORA/RESERVA/DISFRUTA. Las dos variantes solo se diferencian en cuánto ocupa cada elemento. */ /* El envoltorio, a ancho completo de PANTALLA, no de su contenedor: los bloques traen relleno lateral y el carril tiene que poder sangrar hasta el borde para que el elemento siguiente asome. Es el mismo "full-bleed" que usa el carrusel de categorías, y funciona sin importar el relleno de los ancestros. */ .rc-car-shell { position: relative; /* Las fichas del tema traen capas con z-index muy alto (la envoltura de la imagen va a 98, y el botón de favorito y la etiqueta de estado a 99). El carril no crea contexto de apilado, así que esas capas subían por encima de las flechas y las dejaban detrás de las fotos. Con isolation el carrusel se apila en su propia capa: dentro, la flecha puede ponerse por encima del 99 del tema; fuera, el conjunto sigue valiendo lo mismo que antes y no se sube encima de la cabecera. */ isolation: isolate; width: 100vw !important; max-width: 100vw !important; min-width: 0 !important; margin-left: 50% !important; transform: translateX(-50%) !important; align-self: stretch !important; flex: 0 0 auto !important; box-sizing: border-box; } .rc-car { /* El carril es hijo de un contenedor flex de Elementor. Sin width:100% y min-width:0 toma el ancho de su CONTENIDO (min-width:auto de los ítems flex) y se va a varios miles de píxeles en vez de desbordar al scroll, que es lo que queremos. */ width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; /* Con !important porque cuando el carril es un contenedor de Elementor (los recuadros con ticks y los pasos) su propia hoja gana por especificidad y lo dejaba en overflow visible: el carrusel no era desplazable y arrancaba pegado al borde. */ overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; gap: 12px !important; padding: 0 0 4px !important; margin: 0 !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .rc-car::-webkit-scrollbar { display: none; } /* Las copias del bucle infinito son elementos a todos los efectos. */ .rc-car > .rc-car__card { min-width: 0 !important; margin: 0 !important; float: none !important; scroll-snap-align: center; } /* Fichas de experiencia: el 86 % deja asomar la siguiente, que es lo que le dice al usuario que aquello se desliza. */ .rc-car--fichas > .rc-car__card { flex: 0 0 86% !important; width: 86% !important; max-width: 86% !important; padding: 0 !important; } /* Recuadros informativos: son bajitos y de puro texto, así que se dejan algo más estrechos para que el siguiente asome más y se lea como una tira. */ .rc-car--cajas > .rc-car__card { flex: 0 0 78% !important; width: 78% !important; max-width: 78% !important; } /* Y el contenedor de Elementor que hace de carril trae relleno lateral y un gap propios que descuadran el sangrado a pantalla completa. */ .rc-car--cajas { --padding-left: 0px; --padding-right: 0px; --gap: 0px 0px; --row-gap: 0px; --margin-bottom: 0px; } /* --- La ficha del tema, dentro del carrusel --- */ /* Trae 15px de relleno bajo el precio. Dentro del carrusel sobran: la ficha no tiene fondo ni borde (solo esquinas redondeadas sobre la foto), así que ese relleno no se ve, pero se suma al hueco con el bloque siguiente. */ .rc-car__card .property_listing { padding-bottom: 0 !important; } /* --- La galería de fotos de cada ficha, desactivada en móvil --- Cada ficha del tema trae su propio carrusel de imágenes con flechas. Dentro de una tira deslizable son dos gestos horizontales anidados y el usuario no sabe si está cambiando de foto o de experiencia. Se deja una sola foto; en la ficha individual y en escritorio la galería sigue intacta. En la lista vertical no hay conflicto de gestos, pero se mantiene por coherencia: la home enseña una foto por experiencia. */ .rc-car__card .property_unit_carousel .carousel-control, .rc-vlist__card .property_unit_carousel .carousel-control { display: none !important; } .rc-car__card .property_unit_carousel .carousel-inner > .item, .rc-vlist__card .property_unit_carousel .carousel-inner > .item { display: none !important; } .rc-car__card .property_unit_carousel .carousel-inner > .item.active, .rc-vlist__card .property_unit_carousel .carousel-inner > .item.active { display: block !important; } /* --- Flechas --- */ .rc-car-arrow { display: flex; align-items: center; justify-content: center; position: absolute; top: 40%; transform: translateY(-50%); z-index: 100; /* por encima del 99 del tema; contenido por el isolation del shell */ width: 44px; height: 64px; padding: 0; border: 0; background: transparent; color: #fff; font-size: 64px; font-weight: 300; line-height: 1; cursor: pointer; /* Mismo tratamiento que en el carrusel de categorías: sin fondo el glifo blanco se pierde sobre las zonas claras de la foto. Una sombra pegada al trazo le da contorno y otra difusa oscurece la imagen detrás. */ text-shadow: 0 0 2px rgba(0, 0, 0, .9), 0 2px 14px rgba(0, 0, 0, .7); } .rc-car-arrow--prev { left: 0; } .rc-car-arrow--next { right: 0; } .rc-car-arrow:active { opacity: .7; } .rc-car-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Los recuadros informativos van sobre fondo claro: ahí un glifo blanco no se ve. Se pintan en oscuro y sin sombra. */ .rc-car-shell--cajas .rc-car-arrow { color: #3a4135; text-shadow: 0 0 6px rgba(255, 255, 255, .9); /* Y más estrechas: en las fichas la flecha cae sobre la foto, pero aquí cae sobre texto, y a 44px se montaba sobre la primera palabra. Con 34 se queda en el margen que deja el recuadro (78% centrado). */ width: 34px; font-size: 52px; } /* ============================================================ Buscador compacto: dos filas, dentro de la foto ============================================================ Ubicación arriba; Llegada, Salida y el botón compartiendo la segunda fila. Cada campo ocupaba una fila entera de 45px, y el conjunto sobresalía por debajo de la foto. Las clases las pone home-mobile.js localizando #check_in / #check_out y el botón de envío. */ body.rc-home-mobile .rc-search { display: flex !important; flex-wrap: wrap !important; align-items: center; gap: var(--rc-field-gap); } /* La caja del buscador, más ceñida a sus campos. */ body.rc-home-mobile .search_wrapper { padding-top: var(--rc-search-pad) !important; padding-bottom: var(--rc-search-pad) !important; } /* Y los campos, más bajos. El tema los fija a 45px y el botón a 48. */ body.rc-home-mobile .rc-search .form-control, body.rc-home-mobile .rc-search input.advanced_select, body.rc-home-mobile .rc-search select { height: var(--rc-field-h) !important; min-height: var(--rc-field-h) !important; } body.rc-home-mobile .rc-search .advanced_search_submit_button { height: calc(var(--rc-field-h) + 2px) !important; min-height: calc(var(--rc-field-h) + 2px) !important; } /* Por defecto, cada campo sigue ocupando su fila. El `order` es lo que sube el botón a la fila de las fechas sin tocar el orden del DOM: entre las fechas y el botón puede haber otros campos (en local hay uno de viajeros que producción no tiene). */ body.rc-home-mobile .rc-search > * { order: 1; flex: 1 0 100%; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* Las dos fechas y el botón, en la misma fila. */ body.rc-home-mobile .rc-search > .rc-search__date { order: 2; flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0; /* sin esto un campo flex no baja de su ancho de contenido */ } body.rc-home-mobile .rc-search > .rc-search__go { order: 3; flex: 0 0 56px !important; width: 56px !important; max-width: 56px !important; min-width: 0; } /* El botón se queda con la lupa: el texto "Buscar" no cabe en 56px y el icono ya dice lo que hace. El value del botón sigue siendo "Buscar", así que lectores de pantalla y envío del formulario no se enteran del cambio. */ body.rc-home-mobile .rc-search > .rc-search__go .advanced_search_submit_button { width: 100% !important; min-width: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* El texto del botón se apaga con font-size:0 y no ocultando elementos: el tema lo pinta como nodo de texto suelto dentro del