/* ============================================================ page.css — Kalixto Le Roy (LG-02, generalizado en PG-01) Molde COMÚN de las páginas interiores: legales, 404 y las que vengan (contacto, ficha de villa). Se carga solo en esas páginas, vía `$pageStyles` en cada view → head.php, y siempre DESPUÉS de main.css, así que puede matizar lo general si hiciera falta. Aquí NO va nada de la barra ni del botón de WhatsApp: su cambio de estado (`past-hero`) es comportamiento GENERAL del sitio y vive en main.css, aunque hoy se note sobre todo aquí. Estas páginas van SIN hero: son de LECTURA, no de venta. Charm en los encabezados (mantiene el aire de marca) y Lato en los párrafos — son textos de 2.000-2.800 caracteres y una script de trazo fino los vuelve costosos de leer; además el RGPD pide presentar la información de forma inteligible. Las variables de color y tipografía vienen de main.css (:root). ============================================================ */ .page { /* El padding superior salva la barra fija, que aquí es sólida desde el principio. */ padding: 7rem 1.25rem 4rem; /* Evita que en documentos cortos el pie suba hasta media pantalla. */ min-height: 70vh; } .page__inner { max-width: 70ch; /* ancho de lectura cómodo: más allá, el ojo pierde el renglón */ margin: 0 auto; } .page__title { /* Aire sobre el título: la barra fija queda justo encima y sin él se leen pegados. */ margin: 1.5rem 0 2rem; text-align: center; font-family: 'Charm', cursive; font-weight: 400; font-size: 2.4rem; line-height: 1.2; color: var(--brown); /* mismo marrón de marca que los enlaces */ } /* Encabezados de apartado (los documentos vienen con

/

) */ .page__inner h2, .page__inner h3 { margin: 2.5rem 0 0.75rem; font-family: 'Charm', cursive; font-weight: 400; font-size: 1.6rem; line-height: 1.25; color: var(--brown); } .page__inner h3 { font-size: 1.35rem; } /* Párrafos y listas: Lato, cuerpo cómodo e interlineado generoso. */ .page__inner p, .page__inner li { font-size: 1rem; line-height: 1.75; color: var(--text); text-align: justify; /* Al justificar, el navegador estira los espacios para cuadrar los márgenes y aparecen huecos enormes entre palabras («ríos»). La partición con guiones los cierra, y funciona por idioma porque head.php pone el `lang` correcto en el . */ -webkit-hyphens: auto; hyphens: auto; } .page__inner p { margin: 0 0 1.1rem; } .page__inner ul { margin: 0 0 1.1rem; padding-left: 1.25rem; } .page__inner li { margin-bottom: 0.5rem; } .page__inner a { color: var(--brown); text-decoration: underline; text-underline-offset: 0.15em; } .page__inner a:hover, .page__inner a:focus { color: var(--charcoal); } .page__inner strong { color: var(--charcoal); } .page__back { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--divider); } /* ---- Formularios (MT-03) ---- */ .form { margin-top: 2rem; } .form label { display: block; margin-bottom: 0.35rem; color: var(--text-muted); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; } .form input, .form textarea { width: 100%; margin-bottom: 1.25rem; padding: 0.7rem 0.85rem; background: #fff; border: 1px solid var(--divider); border-radius: 2px; font-family: var(--default-font); font-size: 1rem; color: var(--text); transition: border-color 0.2s ease; } .form input:focus, .form textarea:focus { outline: none; border-color: var(--brown); } .form textarea { resize: vertical; } .form button { padding: 0.8rem 2rem; background: var(--brown); border: 1px solid var(--brown); border-radius: 2px; color: var(--on-dark); font-family: var(--default-font); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background-color 0.2s ease; } .form button:hover, .form button:focus-visible { background: var(--charcoal); border-color: var(--charcoal); } /* ---- Estado «enviando» (LD-07) ---- El botón se declara flex SIEMPRE, no solo al enviar: si el `display` cambiara justo en ese momento, el texto se recolocaría a la vez que aparece el aro y se vería un tirón. Y con `min-width` caben las dos etiquetas —«Enviar» y «Enviando…»— sin que el botón crezca: el salto se evita reservando el sitio de antemano, no congelándolo a posteriori. */ .form button { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-width: 13rem; } /* El aro usa `currentColor`, no el dorado de marca: aquí el botón es marrón, y el dorado sobre marrón se emborrona. Heredando el color del propio texto, el aro tiene garantizado el mismo contraste que la etiqueta en cualquier botón donde se reutilice. */ .form button.is-enviando::before { content: ""; width: 0.9em; height: 0.9em; flex: 0 0 auto; border: 2px solid currentColor; border-top-color: transparent; /* el hueco es lo que hace visible el giro */ border-radius: 50%; animation: girar-envio 0.7s linear infinite; } /* Mientras espera no debe parecer pulsable: ni cambia de color al pasar por encima, ni el cursor invita a volver a hacer clic (que es justo lo que se quiere evitar). */ .form button.is-enviando, .form button.is-enviando:hover, .form button:disabled { background: var(--brown); border-color: var(--brown); cursor: wait; opacity: 0.85; } @keyframes girar-envio { to { transform: rotate(360deg); } } /* Sin el aro giratorio para quien pide menos movimiento: se queda el cambio de texto y el bloqueo, que es lo que de verdad informa. Un aro estático parecería un dibujo roto. */ @media (prefers-reduced-motion: reduce) { .form button.is-enviando::before { display: none; } } /* Aceptación legal obligatoria. Necesita su propio bloque porque `.form label` está pensado para rótulos de campo («NOMBRE», «MENSAJE»): bloque, mayúsculas y letras separadas. Aplicado a una frase larga junto a una casilla resultaría ilegible → aquí se revierte todo eso. */ .form__check { display: flex; align-items: flex-start; /* la casilla se alinea con la PRIMERA línea, no al centro del párrafo: si el texto ocupa dos o tres líneas, centrada parecería suelta a mitad del bloque */ gap: 0.7rem; margin: 0.5rem 0 1.75rem; } .form__check input[type="checkbox"] { /* `.form input` es width:100% (pensado para los campos de texto): sin esto la casilla intentaría ocupar todo el ancho. flex-shrink:0 impide que el texto la aplaste. */ width: 1.05rem; height: 1.05rem; flex: 0 0 auto; margin: 0.2rem 0 0; /* baja la casilla hasta la altura visual de la primera línea */ padding: 0; accent-color: var(--brown); cursor: pointer; } .form__check label { /* Revierte el estilo de rótulo de campo: aquí es una frase para leer, no una etiqueta. */ margin: 0; text-transform: none; letter-spacing: normal; font-size: 0.88rem; line-height: 1.6; color: var(--text); cursor: pointer; } .form__check a { color: var(--brown); text-decoration: underline; text-underline-offset: 0.15em; } /* Al llegar con el teclado la casilla es diminuta y el aro del navegador se pierde: se refuerza para que se vea dónde está el foco. */ .form__check input[type="checkbox"]:focus-visible { outline: 2px solid var(--brown); outline-offset: 2px; } /* El señuelo se esconde SIN `display:none`: algunos robots detectan esa regla y saltan el campo. Sacándolo de la pantalla con posición absoluta, para ellos parece un campo normal. */ .form__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form__ok { margin: 2rem 0; padding: 1rem 1.25rem; background: var(--cream-deep); border-left: 3px solid var(--gold); font-size: 1rem; } .form__errores { margin: 1.5rem 0; padding: 1rem 1.25rem 1rem 2.5rem; background: rgba(131, 102, 86, 0.08); border-left: 3px solid var(--brown); color: var(--text); font-size: 0.9rem; } .form__errores li { margin-bottom: 0.35rem; } /* Variante centrada, para páginas de UN mensaje corto (el 404). Justificar dos líneas sueltas abre huecos absurdos entre palabras; centrado se lee como un aviso, que es lo que es. */ .page--center .page__inner p { text-align: center; } .page--center .page__back { border-top: 0; } /* ---- Tablet ---- */ @media (min-width: 768px) { /* La barra es más baja en escritorio (logo de 64px) → menos hueco superior. */ .page { padding: 6rem 2rem 5rem; } .page__title { font-size: 3rem; } /* Se aprovecha algo más el ancho disponible. Se sube el CUERPO además del ancho: si solo se ensancha la columna, caben más caracteres por línea y al ojo le cuesta encontrar el renglón siguiente. Creciendo los dos a la vez, la línea sigue teniendo un largo cómodo. */ .page__inner { max-width: 78ch; } .page__inner p, .page__inner li { font-size: 1.05rem; } } /* ---- Escritorio ---- */ @media (min-width: 1024px) { .page__inner { max-width: 86ch; } .page__inner p, .page__inner li { font-size: 1.1rem; } } /* ---- CTA final del FAQ (FAQ-04) ---- Solo la COLOCACIÓN. El botón en sí es `.boton-reservar`, que desde FAQ-04 vive en `main.css` —antes estaba en `villa.css`— precisamente para que la ficha de villa y esta página puedan compartirlo sin duplicar una sola declaración. `text-align` y no `display:flex`: el botón es `inline-flex`, así que mide lo que su contenido y el centrado del padre basta. Con `flex` ocuparía todo el ancho de la columna. */ /* Las PREGUNTAS centradas (pedido por Andrés, 25-ago-2026). Solo los `h3`: los `h2` de grupo siguen alineados a la izquierda, marcando el arranque de cada bloque. Va bajo `.page--faq` y no en `.page__inner h3` porque esa regla la comparten las páginas legales. */ .page--faq .page__inner h3 { text-align: center; } .faq__cta { margin-top: 2rem; text-align: center; } /* ⚠️ **EL BOTÓN ES UN `` DENTRO DE `.page__inner`, Y ESA REGLA LE GANABA.** `.page__inner a` (especificidad 0,1,1) pesa MÁS que `.boton-reservar` (0,1,0), así que el botón salía con el marrón de los enlaces de texto, **subrayado**, y encima recuperaba un `:hover` que se había decidido NO tener (RV-02) — y que además era carbón sobre carbón, casi invisible. Aquí se le devuelve lo suyo con `.page__inner .boton-reservar` (0,2,0 > 0,1,1) y lo mismo en `:hover`/`:focus` (0,3,0 > 0,2,1). 🔑 **No se repite NINGÚN otro valor** —fondo, tipografía, tamaño, padding, icono— : todo eso sigue viniendo de la definición única de `main.css`. Aquí solo se anula lo que el contexto de página le había quitado. */ .page__inner .boton-reservar, .page__inner .boton-reservar:hover, .page__inner .boton-reservar:focus { color: var(--on-dark); text-decoration: none; }