/* ============================================================ villa.css — ficha de una villa (VP-02) · Kalixto Le Roy Hoja EXTRA: se carga solo en esta página (`$pageStyles = ['villa']`). El carrusel, las tarjetas y la lista de servicios ya viven en main.css y aquí se reutilizan tal cual — esto solo añade lo que es propio de la ficha. ============================================================ */ .villa-ficha { background: var(--cream); /* Altura de la BARRA FIJA (esta página no tiene hero detrás del que pasar) MÁS el separador estándar del sitio. Antes solo llevaba la altura de la barra y el título nacía pegado a ella. `--aire-seccion` es el mismo número que separa las secciones de la portada: un solo valor para todo el sitio, definido en :root. Medido: la barra son 104px (6,5rem) por debajo de 768px y 72px (4,5rem) a partir de ahí. */ padding-top: calc(6.5rem + var(--aire-seccion)); padding-bottom: 4rem; } /* ---- Galería ---- Reutiliza `.villas__marco` / `.villas__pista` / `.villas__flecha` de main.css: mismas flechas, mismo scroll-snap, mismo `villas.js`. Lo único propio es la forma de la diapositiva. */ .villa-ficha__galeria { margin-bottom: var(--aire-seccion); } /* La pista trae relleno vertical de la portada, donde existe para que no se recorte la SOMBRA del borde superior de las tarjetas al desplazarlas. Aquí las diapositivas son fotos planas, sin sombra que proteger, así que ese relleno solo sumaba 24px al aire de seccion: el hueco entre la última foto y la tarjeta salía de 80px en vez de los 56 que separan todo lo demas del sitio. */ .villa-ficha__pista { padding-top: 0; padding-bottom: 0; } .villa-foto { /* Mismo ancho que las tarjetas de la portada para que el asomo de la siguiente se lea igual. */ flex: 0 0 min(93%, 46rem); min-width: 0; /* la regla de Flex de AD-04: sin esto no encoge */ margin: 0; scroll-snap-align: center; background: var(--cream-deep); overflow: hidden; } .villa-foto img { display: block; width: 100%; height: auto; /* Proporción fija: las fotos que sube el cliente no son homogéneas, y sin imponer una la galería daría un salto de altura en cada diapositiva. 3/2 es la proporción de foto de inmueble más habitual. */ aspect-ratio: 3 / 2; object-fit: cover; } /* ---- Cuerpo ---- */ .villa-ficha__cuerpo { /* EXACTAMENTE la misma medida que `.villa-ficha__tarjeta`, a propósito: las dos columnas se leen como una sola, alineadas arriba y abajo. Antes iba con `max-width: 62ch` (una medida de LECTURA) y en tablet y escritorio salía mucho más estrecha que la tarjeta de servicios — 495px contra 736 —, como si el texto se hubiera encogido. En móvil coincidían por casualidad y por eso solo se notaba en pantallas grandes. ⚖️ El precio: a 736px la línea ronda los 90 caracteres, por encima de los 60-75 que se consideran cómodos. Se acepta porque el texto de una villa son párrafos cortos, no un artículo, y la coherencia visual con la tarjeta pesa más aquí. Si algún día el texto crece mucho, este es el número que hay que revisar. */ width: 80%; max-width: 46rem; margin: 0 auto; } .villa-ficha__cabecera { /* La MISMA medida que la tarjeta de servicios y la columna de texto. Sin esto el título ocupaba el ancho entero y un nombre largo —«Villa Estación 1 - Salobre Resort»— se pegaba a los dos bordes de la pantalla en móvil. Con la misma regla que el resto, la página entera cae sobre una sola retícula: título, tarjeta y texto empiezan y acaban en la misma vertical. */ width: 80%; max-width: 46rem; margin: 0 auto 1.75rem; text-align: center; } /* 🕓 La banda «Próximamente» al principio de la ficha (PX-04). ⚠️ **Reajusta lo que en la tarjeta viene del contenedor de fotos.** Allí va `position: absolute` sobre la imagen; aquí está en el flujo normal del documento, así que hay que devolverla a `static` y darle su propio margen — si no, se saldría de la cabecera. */ .villa-ficha__cabecera .villa__banda { position: static; display: inline-block; margin: 0 0 0.9rem; /* Sin el recorte de la izquierda: en la tarjeta va pegada al borde de la foto, y aquí flota dentro de la columna de texto. */ border-radius: 3px; padding-left: 1.25rem; } .villa-ficha__nombre { margin: 0 0 0.5rem; font-family: var(--display-font); font-weight: 400; /* Mismo cuerpo que los títulos de sección del home (`.villas__titulo`): 1,45 / 1,6 / 1,8 rem. La ficha no tiene por qué gritar más fuerte que la portada. */ font-size: 1.45rem; line-height: 1.2; color: var(--brown); } .villa-ficha__precio { margin: 0; color: var(--text-muted); /* Los mismos que en la tarjeta de villa del home (`.villa__precio` y su `strong`). */ font-size: 0.88rem; } .villa-ficha__precio strong { color: var(--brown); font-family: 'Charm', cursive; font-weight: 400; font-size: 1.15rem; } /* ---- Texto largo (markdown ya convertido por md_a_html) ---- Los selectores van por ETIQUETA porque el HTML lo genera Parsedown y no lleva clases. */ .villa-ficha__texto { color: var(--text); /* 🔤 PRUEBA DE TIPOGRAFÍA (17-ago-2026): se pasa de Prata a Lato para ver cómo queda. Prata era decisión de marca de Andrés (ago-2026), pero iba contra lo que dice el propio `:root` de main.css: «Prata es de alto contraste → cansa la vista en párrafos largos; Lato es humanista y legible». Y estos son los DOS bloques de prosa larga del sitio. Los TITULARES siguen en Charm: lo que cambia es solo el cuerpo. */ font-family: var(--default-font); /* Sube un pelo por lo mismo que en la portada: Lato se lee algo más pequeña que Prata al mismo cuerpo nominal. */ font-size: 1.05rem; line-height: 1.7; /* Justificado a petición de Andrés. `hyphens: auto` NO es opcional aquí: sin partir palabras, el justificado abre huecos enormes entre palabras en columnas estrechas — y en alemán, con sus palabras compuestas, es donde peor se ve. El navegador solo sabe partir bien si conoce el idioma, y lo sabe: `head.php` pone `lang` en el . */ text-align: justify; hyphens: auto; } /* El PRIMER elemento del texto no aporta margen propio. Hoy su `margin-top` se colapsa con el de la sección de arriba y el hueco sale de 56px —el mismo que separa todo el sitio—, pero eso deja de ser cierto en cuanto `.villa-ficha__cuerpo` reciba un `padding-top` o un borde: entonces el margen dejaría de colapsar y se sumarían 32px sin que nadie entienda de dónde salen. */ .villa-ficha__texto > :first-child { margin-top: 0; } .villa-ficha__texto h2, .villa-ficha__texto h3, .villa-ficha__texto h4 { margin: 2rem 0 0.6rem; /* Charm en los encabezados del texto. Suben de cuerpo respecto a lo que tenían en Prata porque una manuscrita se lee más pequeña al mismo tamaño nominal. */ font-family: 'Charm', cursive; font-weight: 400; line-height: 1.25; color: var(--brown); } .villa-ficha__texto h2 { font-size: 1.6rem; } .villa-ficha__texto h3 { font-size: 1.35rem; } .villa-ficha__texto h4 { font-size: 1.15rem; } .villa-ficha__texto p { margin: 0 0 1rem; } .villa-ficha__texto ul, .villa-ficha__texto ol { margin: 0 0 1.25rem; padding-left: 1.4rem; } .villa-ficha__texto li { margin-bottom: 0.4rem; } .villa-ficha__texto strong { color: var(--charcoal); } /* Cualquier enlace que escriba el cliente en el markdown: que se vea que lo es. */ .villa-ficha__texto a { color: var(--brown); text-underline-offset: 0.14em; } /* ---- Servicios ---- Va FUERA de la columna de lectura (62ch): aquí caben la lista y la rejilla de tres tarjetas, que ahogadas en una medida de lectura saldrían apretadas. */ .villa-ficha__servicios { margin: 0 auto var(--aire-seccion); max-width: 75rem; } .villa-ficha__servicios-cabecera { /* El mismo aire que la cabecera de la sección de servicios de la portada (`.servicios__cabecera`): sin él, el título quedaba pegado a la primera tarjeta y las dos cosas se leían como un solo bloque. */ margin-bottom: 1.75rem; padding: 0 1.5rem; text-align: center; } .villa-ficha__subtitulo { margin: 0 0 0.75rem; font-family: var(--display-font); font-weight: 400; /* Igual que el título de la sección de servicios del home (`.servicios__titulo`). */ font-size: 1.45rem; line-height: 1.25; color: var(--brown); } /* La lista, dentro de una TARJETA con el mismo lenguaje que las de villa del home: blanco, filete fino y remate dorado arriba. Suelta sobre el crema y a todo el ancho se leía como una tabla desnuda. El relleno es la mitad del arreglo: sin él, las filas tocan el borde. */ .villa-ficha__tarjeta { /* 80% del ancho disponible (petición de Andrés): antes solo llevaba `max-width`, que en móvil y tablet no llegaba a morder — la tarjeta salía al 100% y pegada a los bordes. El `max-width` sigue de tope: una fila «nombre … precio» estirada a 1200px separa tanto los dos extremos que deja de leerse como una sola línea de información. */ width: 80%; max-width: 46rem; margin: 0 auto; padding: 0.5rem 1.5rem; background: #fff; border: 1px solid var(--divider); border-top: 3px solid var(--gold); } /* La lista es la MISMA de la portada (`.villa__servicios`), incluido el colapso del precio a otro renglón cuando no cabe. Dentro de la tarjeta sobran sus dos remates propios: el filete superior lo pone ya el borde de la tarjeta, y el de la última fila chocaría con el borde de abajo. */ .villa-ficha__lista { margin: 0; border-top: 0; } .villa-ficha__lista .villa__servicio:last-child { border-bottom: 0; } /* Los servicios relevantes cierran la página, ya pegados al pie (orden pedido por Andrés). */ .villa-ficha__relevantes { margin-top: var(--aire-seccion); } /* ---- Testimonios dentro de la ficha (CV-04) ---- 🔑 **El margen superior hace falta AQUÍ y no en la portada, y el motivo no es obvio.** `.testimonios` trae `padding` propio, así que su título nunca queda pegado al borde de la banda. Lo que faltaba era separación ENTRE la banda y lo anterior: en el home la pone el `padding-bottom` de `.servicios`, pero en la ficha `.villa-ficha__relevantes` no tiene ninguno y la franja `--cream-deep` arrancaba **pegada** a los servicios. Por eso va acotado a `.villa-ficha`: si se pusiera en `.testimonios` a secas, en la portada se sumaría al padding de servicios y quedaría el doble de aire. */ .villa-ficha .testimonios { margin-top: var(--aire-seccion); } /* «Ver todas las villas» cierra la página, detrás de los servicios relevantes. (Aquí vivían las reglas del botón «Consultar disponibilidad»; se retiró el botón y con él sus estilos — ver la nota de villa.php sobre lo que eso implica para el `villa_id`.) */ .villa-ficha__volver { margin: var(--aire-seccion) 0 0; text-align: center; font-size: 0.92rem; } .villa-ficha__volver a { color: var(--text-muted); } @media (min-width: 768px) { /* La barra baja a 72px (4,5rem) justo aquí — medido, no supuesto: antes esta línea decía 5,5rem, que no correspondía a ninguna altura real. */ .villa-ficha { padding-top: calc(4.5rem + var(--aire-seccion)); } /* Mismos escalones que el home: 1,6 en tablet y 1,8 en escritorio. */ .villa-ficha__nombre { font-size: 1.6rem; } .villa-ficha__subtitulo { font-size: 1.6rem; } .villa-ficha__texto h2 { font-size: 1.75rem; } } @media (min-width: 1024px) { /* Sin regla de `padding-top`: la barra ya mide 4,5rem desde 768px, así que repetirla aquí solo creaba dos sitios donde tocar lo mismo. */ .villa-ficha__nombre { font-size: 1.8rem; } .villa-ficha__subtitulo { font-size: 1.8rem; } } /* ---- «Reservar» (RV-02) ---- El CTA de la ficha, justo tras el mapa. Abre WhatsApp con el mensaje ya escrito. 🎨 **CTA primario, deliberadamente DISTINTO del botón flotante.** Son dos cosas: el flotante es contacto genérico y está siempre; este dice «quiero ESTA villa», y aparece cuando ya la has visto entera. Si se parecieran, el visitante leería dos veces el mismo botón. Por eso aquí manda `--brown` en SÓLIDO —el acento cálido de la paleta (WA-05)— y no el dorado, que en este sitio es acento sutil de detalles, no de superficies. */ .villa-ficha__reservar { margin: var(--aire-seccion) 0 0; text-align: center; } /* 🔗 (FAQ-04) `.boton-reservar` y `.boton-reservar__icono` SE MUDARON A `main.css`. Dejaron de ser de la ficha de villa el día que el FAQ necesitó el mismo botón: dos páginas con hojas distintas —`villa.css` y `page.css`— no pueden compartir una regla que vive en una de las dos. En `main.css`, que se carga siempre, hay UNA definición en vez de dos que se separan con el tiempo. `.villa-ficha__reservar` (el margen del `

` que lo envuelve) SÍ se queda aquí: eso sigue siendo maquetación de la ficha. */ /* ---- Mapa de la villa (UB-03) ---- Recuadro con botón; Leaflet y las teselas solo se cargan al pulsar. La caja tiene su altura DESDE EL PRINCIPIO para que al sustituir el botón por el mapa no haya salto de maquetación. */ .mapa { width: 80%; max-width: 46rem; margin: var(--aire-seccion) auto 0; } .mapa__cabecera { margin-bottom: 1rem; text-align: center; } .mapa__aviso { /* No es letra pequeña de descargo: es lo que hace honesto al círculo. Que se lea. */ margin: 0; color: var(--text-muted); font-size: 0.88rem; line-height: 1.5; } .mapa__caja { position: relative; /* 🔑 CONTEXTO DE APILADO PROPIO. Leaflet reparte z-index de 100 a 1000 entre sus paneles y controles, y el sitio se mueve entre 90 (WhatsApp) y 210 (modal de cookies): sin esto, los controles del mapa (800) pasaban POR ENCIMA de la barra de navegación (100) y del botón de WhatsApp (90). Un `z-index` explícito sobre un elemento posicionado crea un contexto de apilado: todos los números de Leaflet pasan a compararse SOLO entre ellos, y la caja entera participa en la página con un valor 0 — por debajo de todo lo fijo. Es el arreglo correcto, y no subir a mano los z-index del sitio hasta ganarle a 1000. */ z-index: 0; height: 320px; background: var(--cream-deep); border: 1px solid var(--divider); overflow: hidden; } .mapa__boton { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; height: 100%; padding: 1rem; background: none; border: 0; color: var(--text); font-family: inherit; cursor: pointer; transition: background-color 0.2s ease; } .mapa__boton:hover, .mapa__boton:focus-visible { background: rgba(184, 148, 95, 0.10); } .mapa__boton[disabled] { cursor: progress; } .mapa__boton-texto { font-family: 'Charm', cursive; font-size: 1.3rem; color: var(--brown); } .mapa__boton-nota { color: var(--text-muted); font-size: 0.8rem; } /* Con el mapa dentro, la caja deja de ser un botón y pasa a ser el lienzo de Leaflet. */ .mapa__caja--cargado { background: none; cursor: default; } /* ---- Propiedades dentro de la tarjeta de la ficha (SEO-01·f) ---- El parcial `villa_propiedades.php` es el MISMO que usa la portada, así que llega sin la clase `.villa-ficha__lista` que aquí ajusta las listas al interior de la tarjeta. Se le da ese trato desde el padre, en vez de pasarle un parámetro más al parcial. */ /* Desde el 17-ago-2026 las propiedades van PRIMERO, así que aquí son la lista de cabecera: sin margen arriba (la tarjeta ya trae su `padding`) y sin filete, igual que `.villa-ficha__lista`. */ .villa-ficha__tarjeta .villa__propiedades { margin: 0; border-top: 0; } /* ⚠️ El aire entre las dos listas hay que PONERLO aquí. En la portada lo pone el `margin-bottom` de la primera, pero dentro de esta tarjeta `.villa-ficha__lista` lo anula (`margin: 0`). Sin esto, los servicios arrancarían pegados a las propiedades y las dos listas se leerían como una sola tabla indistinguible. */ /* 🔗 Pegadas, sin hueco: las dos listas tienen que leerse como UNA SOLA ficha (17-ago-2026). */ .villa-ficha__tarjeta .villa__propiedades + .villa-ficha__lista { margin-top: 0; } /* ⚠️ AQUÍ HABÍA UNA REGLA QUE QUITABA EL FILETE al último renglón de PROPIEDADES. Tenía sentido cuando las propiedades iban al final de la tarjeta; con los servicios detrás dejaba un hueco en el patrón de líneas justo en la costura, que es donde peor se ve. Ahora se le quita el filete a la ÚLTIMA lista de la tarjeta, sea cual sea — así funciona igual con servicios, sin ellos, o si algún día cambia el orden otra vez. */ .villa-ficha__tarjeta > ul:last-of-type > .villa__servicio:last-child { border-bottom: 0; } .villa-ficha__tarjeta .villa__registros { /* ⚠️ MARGEN SUPERIOR A CERO, y hay que dejarlo dicho. Desde el 17-ago `.villa__registros` lleva `padding-top: 1.5rem` para garantizar el aire en la tarjeta del HOME, donde su `margin-top` es `auto` y puede resolverse en 0. Aquí el margen NO es auto, así que los dos se sumaban: 48px de aire donde debía haber 24. El padding heredado ya pone el aire; el margen sobra. Abajo, `0.5rem` y no más: la tarjeta ya trae su propio `padding-bottom`. */ margin: 0 0 0.5rem; }