correspondiente, agrega, ANTES del
:
3. Borra el ... y la clase "ph-tone-X".
La ![]()
se acomoda automáticamente (object-fit: cover) y tapa el degradado.
============================================================================= */
.ph {
position: relative; overflow: hidden; isolation: isolate;
}
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.ph::before {
content: ""; position: absolute; inset: 0; z-index: 0;
}
.ph-tone-terracota::before { background: linear-gradient(150deg, var(--terracota-soft) 0%, var(--terracota) 55%, var(--ladrillo) 100%); }
.ph-tone-verde::before { background: linear-gradient(150deg, #A9C088 0%, var(--verde) 60%, #3F7A28 100%); }
.ph-tone-ladrillo::before { background: linear-gradient(150deg, #A9755E 0%, var(--ladrillo) 60%, var(--ladrillo-deep) 100%); }
.ph-tone-lima::before { background: linear-gradient(150deg, var(--verde-suave) 0%, var(--lima) 70%, var(--verde) 100%); }
.ph-tone-mix::before { background: linear-gradient(150deg, var(--terracota) 0%, var(--ladrillo) 50%, var(--verde) 130%); }
.stamp {
position: absolute; inset: 0; z-index: 1;
display: flex; align-items: center; justify-content: center;
pointer-events: none;
}
.stamp-ring {
width: clamp(64px, 9vw, 128px); aspect-ratio: 1;
border-radius: 50%;
border: 1.5px solid rgba(251,243,231,0.5);
display: flex; align-items: center; justify-content: center;
color: rgba(251,243,231,0.92);
/* Estado de reposo antes de "estamparse": girado, chico y transparente */
opacity: 0; transform: scale(.5) rotate(-14deg);
transition: opacity .5s var(--ease-soft), transform .6s var(--ease-bounce);
}
.stamp-ring svg {
width: 52%; height: 52%;
/* La tinta "se expande" desde el centro después de que el sello cae */
clip-path: circle(0% at 50% 50%);
transition: clip-path .7s var(--ease-soft) .2s;
}
/* Se activa en cuanto CUALQUIER ancestro con [data-reveal] recibe .is-revealed,
sin importar si es el propio .ph o una tarjeta que lo envuelve. */
.is-revealed .stamp-ring {
opacity: 1; transform: scale(1) rotate(0deg);
}
.is-revealed .stamp-ring svg {
clip-path: circle(75% at 50% 50%);
}
.ph:hover .stamp-ring { transform: scale(1.05) rotate(-2deg); }
.ph-caption {
position: absolute; z-index: 1; bottom: 14px; right: 16px;
font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
color: rgba(251,243,231,0.5);
}
/* =============================================================================
5. DIVISORES ORGÁNICOS — olas que rompen la retícula entre secciones
============================================================================= */
.divider { display: block; width: 100%; height: clamp(46px, 7vw, 84px); }
.divider svg { width: 100%; height: 100%; display: block; }
/* =============================================================================
6. NAV
============================================================================= */
/* El nav empieza TRANSPARENTE (deja ver la foto del hero completa, sin una
franja sólida encima) y solo se vuelve opaco cuando hay scroll — mismo
.is-scrolled que ya agrega main.js pasados 40px. Como el texto pasa de
estar sobre una foto a estar sobre fondo crema, su color también cambia
entre los dos estados (claro sobre foto, oscuro sobre crema). */
.site-nav {
position: sticky; top: 0; z-index: 100;
height: var(--nav-h);
display: flex; align-items: center; justify-content: space-between;
padding-inline: 6vw;
/* Degradado sutil (no transparencia total): sobre una foto la parte del
cielo puede quedar muy clara y el texto crema se vuelve ilegible ahí.
Este velo oscuro leve garantiza contraste sin verse como una barra sólida. */
background: linear-gradient(180deg, rgba(20,12,6,.34) 0%, rgba(20,12,6,.06) 100%);
border-bottom: 1px solid transparent;
transition: background .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.site-nav.is-scrolled {
background: rgba(251,243,231,0.94);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border-bottom-color: var(--line);
box-shadow: 0 8px 30px rgba(62,42,31,0.06);
}
.nav-brand { display: flex; align-items: center; gap: 12px; }
.nav-brand img { width: 44px; height: 44px; flex: none; object-fit: contain; }
.nav-brand strong {
font-family: var(--serif); font-weight: 600; font-size: 1.08rem; color: var(--crema);
letter-spacing: -0.01em;
text-shadow: 0 1px 10px rgba(0,0,0,.3);
transition: color .4s var(--ease-out), text-shadow .4s var(--ease-out);
}
.nav-brand span {
display: block; font-size: .68rem; color: rgba(251,243,231,.85); letter-spacing: .05em;
text-shadow: 0 1px 10px rgba(0,0,0,.3);
transition: color .4s var(--ease-out), text-shadow .4s var(--ease-out);
}
.site-nav.is-scrolled .nav-brand strong { color: var(--madera); text-shadow: none; }
.site-nav.is-scrolled .nav-brand span { color: var(--ink-mute); text-shadow: none; }
.nav-links { display: none; align-items: center; gap: 2.2rem; }
@media (min-width: 960px) { .nav-links { display: flex; } }
.nav-link {
position: relative; font-size: .89rem; font-weight: 600; color: var(--crema);
padding-block: .3rem;
text-shadow: 0 1px 10px rgba(0,0,0,.3);
transition: color .4s var(--ease-out), text-shadow .4s var(--ease-out);
}
.site-nav.is-scrolled .nav-link { color: var(--ink-soft); text-shadow: none; }
.nav-link::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
background: var(--terracota); transform: scaleX(0); transform-origin: right;
transition: transform .4s var(--ease-out);
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-actions .nav-cta { display: none; }
@media (min-width: 720px) { .nav-actions .nav-cta { display: inline-flex; } }
.nav-burger {
display: grid; place-items: center; width: 42px; height: 42px;
border-radius: 50%; background: var(--crema-2);
}
@media (min-width: 960px) { .nav-burger { display: none; } }
.nav-burger span, .nav-burger span::before, .nav-burger span::after {
content: ""; display: block; width: 18px; height: 1.6px; background: var(--madera);
position: relative; transition: transform .3s var(--ease-out), opacity .3s var(--ease-out);
}
.nav-burger span::before { position: absolute; top: -6px; }
.nav-burger span::after { position: absolute; top: 6px; }
.nav-burger[aria-expanded="true"] span { background: transparent; }
.nav-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
.nav-mobile {
position: fixed; inset: var(--nav-h) 0 0 0; z-index: 99;
background: var(--crema); overflow-y: auto;
display: flex; flex-direction: column; gap: 0;
clip-path: inset(0 0 100% 0);
transition: clip-path .55s var(--ease-soft);
}
.nav-mobile.is-open { clip-path: inset(0 0 0 0); }
.nav-mobile a {
padding: 1.3rem 6vw; font-family: var(--serif); font-size: 1.5rem;
border-bottom: 1px solid var(--line);
}
.nav-mobile .nav-cta { display: inline-flex; margin: 1.6rem 6vw; }
@media (min-width: 960px) { .nav-mobile { display: none; } }
/* =============================================================================
7. BOTONES
============================================================================= */
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 26px; border-radius: 100px;
font-size: .92rem; font-weight: 700; font-family: var(--sans);
box-shadow: 0 4px 14px rgba(62,42,31,0.08), 0 1px 3px rgba(62,42,31,0.06);
transition: transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft), background-color .3s var(--ease-out), color .3s var(--ease-out);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 20px 44px rgba(62,42,31,0.16), 0 8px 18px rgba(217,80,42,0.18);
}
.btn:active { transform: translateY(-1px); transition-duration: .12s; }
.btn-primary { background: var(--terracota); color: var(--crema); }
.btn-primary:hover { background: var(--terracota-dark); }
.btn-line { border: 1.5px solid var(--line-strong); color: var(--madera); box-shadow: none; }
.btn-line:hover { border-color: var(--terracota-dark); color: var(--terracota-dark); box-shadow: 0 14px 30px rgba(62,42,31,0.08); }
.btn-cream { background: var(--crema); color: var(--ladrillo-deep); }
.btn-cream:hover { background: var(--crema-2); }
.btn-line-light { border: 1.5px solid rgba(251,243,231,0.35); color: var(--crema); box-shadow: none; }
.btn-line-light:hover { border-color: var(--crema); box-shadow: none; }
.btn-sm { padding: 10px 20px; font-size: .82rem; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
/* Magnetic wrapper — no altera el layout, solo envuelve el contenido para animar */
.magnetic-inner { display: inline-flex; align-items: center; gap: inherit; will-change: transform; }
/* =============================================================================
8. HERO
============================================================================= */
/* Hero de foto completa, de lado a lado, con el texto sobre un degradado
oscuro que cae sobre la parte izquierda de la foto (cielo/árbol, la zona
con menos detalle) — la derecha (fachada y familia) queda despejada. */
/* margin-top negativo del alto del nav + padding-top que lo compensa: así
la foto (hero-media, inset:0 dentro de .hero) arranca en el borde superior
real de la ventana, detrás del nav sticky, en vez de dejar un tramo del
fondo crema del body visible como una franja/corte antes de la foto. */
.hero {
position: relative;
min-height: 560px;
display: flex; align-items: center;
margin-top: calc(-1 * var(--nav-h));
padding-top: calc(var(--nav-h) + clamp(1.6rem, 4vw, 2.6rem));
padding-bottom: clamp(1.6rem, 4vw, 2.6rem);
}
@media (min-width: 720px) { .hero { min-height: 68svh; } }
/* overflow:hidden vive en .hero-media (que solo recorta la foto), NO en
.hero: si el texto (titular + párrafo + botones + datos) mide más que
min-height en una pantalla baja, .hero simplemente crece para que quepa
todo. Ponerlo en .hero recortaba las estadísticas de abajo sin avisar. */
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 62%; }
.hero-scrim {
position: absolute; inset: 0;
background: linear-gradient(100deg,
rgba(58,38,24,.88) 0%, rgba(58,38,24,.72) 30%,
rgba(58,38,24,.22) 56%, rgba(58,38,24,0) 72%);
}
@media (max-width: 719px) {
/* En móvil el bloque de texto (titular+párrafo+botones+datos) obliga a
.hero a crecer bastante, y una foto de lado a lado ese alto (angosta y
muy alta) recorta casi toda la casa dejando solo una franja centrada.
Por eso aquí la foto NO cubre el 100% del alto de .hero como en
escritorio: solo el tramo de arriba, y el resto queda en el color sólido
de abajo (mismo tono que el degradado) — así se ve mucho más fachada. */
/* min-height:100svh asegura que .hero llene toda la pantalla visible al
cargar — así la ola/crema de la siguiente sección queda debajo del
borde inferior de la pantalla en vez de asomar como una franja blanca
apenas se abre la página. El alto de la foto (94vw, más abajo) se fija
en base al ANCHO, no al alto de .hero: si no, al crecer .hero por el
min-height, la foto también crecería y volvería a recortar la casa. */
.hero { background: #3A2618; min-height: 100svh; }
.hero-media { bottom: auto; height: 94vw; }
.hero-scrim {
background: linear-gradient(180deg,
rgba(58,38,24,.25) 0%, rgba(58,38,24,.7) 62%, rgba(58,38,24,1) 100%);
}
/* En móvil el recuadro es angosto: con el mismo encuadre del escritorio
el letrero "El Peregrino" quedaba cortado. Este punto de enfoque lo
deja completo. */
.hero-media img { object-position: 78% 42%; }
/* Los botones quedaban pegados a la izquierda al envolver en 2 filas
(flex-wrap no encoge el ancho del contenedor al tamaño del botón más
ancho) — se centran explícitamente. */
.btn-row { justify-content: center; }
}
/* margin-inline:0 anula el auto-centrado que .hero-content hereda de
.container (esa clase centra bloques angostos por diseño) — aquí
queremos el texto pegado a la izquierda, no centrado en toda la foto. */
.hero-content {
position: relative; z-index: 1; max-width: 560px; margin-inline: 0;
padding-left: clamp(2rem, 9vw, 6rem);
}
.hero-eyebrow { margin-bottom: .9rem; color: var(--terracota-soft); }
.hero-title {
font-size: clamp(2.1rem, 4.2vw, 3.4rem);
margin-bottom: 1.1rem;
max-width: 15ch;
color: var(--crema);
text-shadow: 0 2px 26px rgba(20,12,6,.4);
}
.hero-title em { color: var(--terracota-soft); }
/* Animación de entrada — cada palabra del titular "cae" en su lugar al
cargar la página. Es la única animación de carga del sitio (no se repite
en scroll), reservada para el titular por ser el primer mensaje que se lee.
main.js agrega .is-shown al justo después del primer pintado, y cada
palabra transiciona con su propio delay calculado a partir de --i. */
.hero-title .w-in {
display: inline-block;
opacity: 0;
transform: translateY(24px);
transition: opacity .7s var(--ease-soft), transform .7s var(--ease-soft);
transition-delay: calc(var(--i) * 75ms);
}
.hero-title.is-shown .w-in { opacity: 1; transform: translateY(0); }
.hero-lede {
font-size: 1.04rem; color: rgba(251,243,231,.88); max-width: 44ch; margin-bottom: 1.3rem;
text-align: justify; hyphens: none;
}
/* Grid de 3 columnas iguales (no flex-wrap): así los 3 datos quedan
siempre en una sola fila sin importar el ancho — un grid nunca "decide"
mandar el tercero a una fila nueva como sí puede pasar con flex-wrap. */
.hero-trust {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 1rem; margin-top: 1.3rem; max-width: 400px;
}
.hero-trust div { display: flex; flex-direction: column; }
.hero-trust strong { font-family: var(--serif); font-size: 1.5rem; color: var(--crema); }
.hero-trust span { font-size: .74rem; color: rgba(251,243,231,.75); }
/* =============================================================================
9. SOBRE NOSOTROS
============================================================================= */
/* Justo después del hero+ola queda bastante crema vacío antes de que
aparezca contenido — en escritorio no se nota, pero en móvil, donde cada
scroll cuenta, se siente como un vacío. Se recorta solo el padding de
ARRIBA de esta sección (el de abajo, antes de la siguiente ola, se deja
igual que el resto del sitio). */
@media (max-width: 719px) { #sobre { padding-top: .75rem; } }
.sobre { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 960px) { .sobre { grid-template-columns: 0.88fr 1.12fr; } }
.sobre-visual { aspect-ratio: 4 / 3.1; border-radius: 28px; }
.sobre h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 1.1rem; }
.sobre p {
color: var(--ink-mute); margin-bottom: 1.1rem; max-width: 52ch;
text-align: justify; hyphens: none;
}
.sobre p:last-of-type { margin-bottom: 0; }
/* =============================================================================
10. AMENIDADES
============================================================================= */
.amenidades-band { background: var(--verde-suave); }
.amenidades-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.6rem, 3vw, 2.6rem);
max-width: 1080px; margin: 0 auto;
}
@media (min-width: 720px) { .amenidades-grid { grid-template-columns: repeat(4, 1fr); } }
.amenidad { text-align: center; padding-inline: .5rem; }
.amenidad-icon {
width: 62px; height: 62px; margin: 0 auto 1.1rem;
border-radius: 50%; background: var(--crema);
display: grid; place-items: center;
box-shadow: 0 8px 20px rgba(62,42,31,0.08);
}
.amenidad-icon svg { width: 27px; height: 27px; color: var(--terracota-dark); }
.amenidad h3 { font-size: 1.02rem; margin-bottom: .4rem; }
.amenidad p { font-size: .88rem; color: var(--ink-mute); }
/* =============================================================================
11. HABITACIONES
============================================================================= */
.rooms {
display: grid; gap: clamp(1.8rem, 3vw, 2.4rem);
grid-template-columns: 1fr;
}
@media (min-width: 620px) { .rooms { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .rooms { grid-template-columns: repeat(4, 1fr); } }
.room-card {
background: var(--crema-2); border-radius: 24px; overflow: hidden;
transition: transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft);
}
@media (min-width: 620px) {
.room-card:nth-child(even) { transform: translateY(26px); }
.room-card:nth-child(even):hover { transform: translateY(14px); }
}
.room-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -20px rgba(62,42,31,0.22); }
@media (min-width: 620px) { .room-card:nth-child(even):hover { transform: translateY(6px); box-shadow: 0 30px 60px -20px rgba(62,42,31,0.22); } }
.room-photo { aspect-ratio: 5 / 4; }
.room-body { padding: 1.5rem 1.6rem 1.7rem; }
.room-body h3 { font-size: 1.12rem; margin-bottom: .5rem; }
.room-body p { font-size: .9rem; color: var(--ink-mute); margin-bottom: 1.2rem; min-height: 3.4em; }
.room-cta {
display: inline-flex; align-items: center; gap: 7px;
font-size: .84rem; font-weight: 700; color: var(--terracota-dark);
}
.room-cta svg { width: 15px; height: 15px; transition: transform .3s var(--ease-out); }
.room-card:hover .room-cta svg { transform: translateX(4px); }
/* =============================================================================
12. GALERÍA — mosaico orgánico, tamaños desiguales a propósito
============================================================================= */
/* Mosaico de 10 fotos: 2 grandes (destacadas) + 8 más pequeñas. En vez de
dejar que el grid las acomode solo (con 2 piezas grandes, el algoritmo por
defecto dejaba huecos vacíos al final), se ubica cada foto a mano con
grid-template-areas: así no quedan espacios en blanco ni fotos demasiado
chiquitas — cada celda mide lo mismo en las dos columnas de tamaño. */
.galeria-grid {
display: grid; gap: 14px;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 210px;
}
.galeria-grid .g-item.span2 { grid-column: span 2; }
@media (min-width: 720px) {
.galeria-grid {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
grid-template-areas:
"l1 l1 r1 r2"
"l1 l1 r3 r4"
"r5 r6 l2 l2"
"r7 r8 l2 l2";
}
.galeria-grid .g-item.span2 { grid-row: span 2; }
.g-l1 { grid-area: l1; }
.g-l2 { grid-area: l2; }
.g-r1 { grid-area: r1; }
.g-r2 { grid-area: r2; }
.g-r3 { grid-area: r3; }
.g-r4 { grid-area: r4; }
.g-r5 { grid-area: r5; }
.g-r6 { grid-area: r6; }
.g-r7 { grid-area: r7; }
.g-r8 { grid-area: r8; }
}
.g-item { transition: transform .5s var(--ease-soft); border-radius: 22px; }
.g-item:hover { transform: scale(1.03) rotate(-.4deg); z-index: 2; }
.g-item:nth-child(3n+1) { border-radius: 46% 54% 52% 48% / 42% 40% 60% 58%; }
/* =============================================================================
13. QUÉ TIENES CERCA — tarjetas ilustradas de alrededores
-----------------------------------------------------------------------------
Ilustraciones encargadas por el cliente (paleta a juego con la marca),
recortadas y optimizadas a assets/img/mapa-*.webp. Mismo patrón visual
que .room-card para que se sientan parte de la misma familia de tarjetas.
============================================================================= */
.cerca-grid {
display: grid; gap: clamp(1.6rem, 3vw, 2.2rem);
grid-template-columns: 1fr;
max-width: 1000px; margin: 0 auto;
}
@media (min-width: 620px) { .cerca-grid { grid-template-columns: repeat(2, 1fr); } }
.cerca-card {
background: var(--crema-2); border-radius: 22px; overflow: hidden;
transition: transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft);
}
.cerca-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -20px rgba(62,42,31,0.25); }
.cerca-img { aspect-ratio: 16 / 9; overflow: hidden; }
.cerca-img img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .6s var(--ease-soft);
}
.cerca-card:hover .cerca-img img { transform: scale(1.06); }
.cerca-body { padding: 1.3rem 1.5rem 1.6rem; position: relative; }
.cerca-icon {
position: absolute; top: -22px; left: 1.5rem;
width: 44px; height: 44px; border-radius: 50%;
background: var(--terracota); color: var(--crema);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 18px rgba(217,80,42,0.35);
}
.cerca-icon svg { width: 20px; height: 20px; }
.cerca-body h3 { font-size: 1.05rem; margin: .6rem 0 .4rem; }
.cerca-body p { font-size: .9rem; color: var(--ink-mute); }
/* =============================================================================
14. INSTAGRAM
============================================================================= */
.insta-band { background: var(--ladrillo); color: var(--crema); }
.insta-band .eyebrow { color: var(--terracota-soft); }
.insta-band .section-head h2 { color: var(--crema); }
.insta-band .section-head p { color: rgba(251,243,231,0.72); }
.insta-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
max-width: 880px; margin: 0 auto 2.6rem;
}
@media (min-width: 720px) { .insta-grid { grid-template-columns: repeat(4, 1fr); } }
.insta-item {
aspect-ratio: 1; border-radius: 18px;
display: grid; place-items: center;
transition: transform .45s var(--ease-soft);
}
.insta-item:hover { transform: scale(1.04); }
.insta-item svg { width: 26px; height: 26px; color: rgba(251,243,231,0.85); }
.insta-cta { text-align: center; }
/* =============================================================================
15. TESTIMONIOS
============================================================================= */
.testimonios-grid {
display: grid; gap: 1.8rem; grid-template-columns: 1fr;
max-width: 900px; margin: 0 auto;
}
@media (min-width: 720px) { .testimonios-grid { grid-template-columns: 1fr 1fr; } }
.testi-card { background: var(--crema-2); border-radius: 22px; padding: 2.1rem; position: relative; }
.testi-card svg { width: 26px; height: 20px; color: var(--terracota-soft); margin-bottom: 1rem; }
.testi-card p {
font-family: var(--serif); font-style: italic; color: var(--ladrillo);
font-size: 1.08rem; line-height: 1.5; margin-bottom: 1.1rem;
}
.testi-autor { font-size: .8rem; color: var(--ink-mute); font-weight: 700; }
/* =============================================================================
16. CÓMO RESERVAR
============================================================================= */
.reserva-band { background: var(--crema-2); }
.pasos {
display: grid; gap: 1.8rem; grid-template-columns: repeat(2, 1fr);
max-width: 1080px; margin: 0 auto 3.6rem;
}
@media (min-width: 720px) { .pasos { grid-template-columns: repeat(4, 1fr); } }
.paso { text-align: center; padding-inline: .4rem; }
.paso-num {
width: 46px; height: 46px; margin: 0 auto 1.1rem;
border-radius: 50%; background: var(--terracota); color: var(--crema);
font-family: var(--serif); font-weight: 600; font-size: 1.15rem;
display: grid; place-items: center;
}
.paso h3 { font-size: 1rem; margin-bottom: .4rem; }
.paso p { font-size: .87rem; color: var(--ink-mute); }
.anticipo-nota {
max-width: 700px; margin: 0 auto 3.2rem; text-align: center;
background: var(--crema); border: 1.5px dashed var(--terracota);
border-radius: 20px; padding: 1.6rem 1.9rem;
}
.anticipo-nota p { font-size: .95rem; color: var(--ink-soft); }
.anticipo-nota strong { color: var(--terracota-dark); }
.metodos-pago { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; max-width: 820px; margin: 0 auto; }
.metodo {
background: var(--crema); border-radius: 16px; padding: 1.2rem 1.8rem;
min-width: 128px; min-height: 34px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 6px 18px rgba(62,42,31,0.07);
transition: transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft);
}
.metodo:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(62,42,31,0.12); }
.metodo img { height: 26px; width: auto; }
.metodo-tarjeta { gap: 14px; }
.metodo-tarjeta img { height: 24px; }
/* =============================================================================
17. CONTACTO
============================================================================= */
.contacto-band {
background: linear-gradient(160deg, var(--ladrillo) 0%, var(--ladrillo-deep) 100%);
color: var(--crema); border-radius: 34px;
margin: 0 6vw; padding: clamp(3.4rem, 7vw, 5.4rem) 6vw; text-align: center;
position: relative; overflow: hidden;
}
.contacto-band .eyebrow { color: var(--terracota-soft); }
.contacto-band h2 { color: var(--crema); font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin: .9rem auto 1.1rem; max-width: 20ch; }
.contacto-band > p { color: rgba(251,243,231,0.78); max-width: 480px; margin: 0 auto 2.2rem; }
.contact-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 2.8rem; }
.info-row {
display: flex; gap: 2.4rem; justify-content: center; flex-wrap: wrap;
font-size: .9rem; color: rgba(251,243,231,0.86);
padding-top: 2.2rem; border-top: 1px solid rgba(251,243,231,0.16);
}
.info-row strong { display: block; font-family: var(--serif); font-weight: 600; color: var(--crema); margin-bottom: .3rem; }
/* =============================================================================
18. FOOTER
============================================================================= */
.site-footer {
padding: 3rem 6vw 2.4rem;
display: flex; flex-direction: column; gap: 1.4rem; align-items: center; text-align: center;
}
@media (min-width: 720px) { .site-footer { flex-direction: row; justify-content: space-between; text-align: left; } }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand img { width: 30px; height: 30px; object-fit: contain; }
.footer-brand span { font-family: var(--serif); font-weight: 600; color: var(--madera); }
.footer-links { display: flex; gap: 1.6rem; font-size: .85rem; color: var(--ink-mute); flex-wrap: wrap; justify-content: center; }
.footer-copy { font-size: .8rem; color: var(--ink-mute); }
/* =============================================================================
19. WHATSAPP FLOTANTE
============================================================================= */
.wa-float {
position: fixed; bottom: 24px; right: 24px; z-index: 150;
background: #25D366; color: white; width: 58px; height: 58px;
border-radius: 50%; display: grid; place-items: center;
box-shadow: 0 10px 28px rgba(0,0,0,0.24);
transition: transform .4s var(--ease-bounce);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 28px; height: 28px; }
/* =============================================================================
20. CAMINO DEL PEREGRINO — efecto firma
-----------------------------------------------------------------------------
Un sendero SVG recorre toda la página por detrás del contenido. Al hacer
scroll, el trazo se va "caminando" y la figura del peregrino avanza sobre
él — referencia directa al nombre del hostal y al Camino que representa.
============================================================================= */
.camino-track {
position: absolute; left: 0; top: 0; width: 100%; z-index: 0;
pointer-events: none;
}
.camino-track svg { width: 100%; height: 100%; display: block; overflow: visible; }
.camino-fondo { fill: none; stroke: var(--line-strong); stroke-width: 2.2; stroke-linecap: round; opacity: .6; }
.camino-recorrido { fill: none; stroke: var(--terracota); stroke-width: 1.8; stroke-linecap: round; opacity: .45; }
/* .site-nav queda fuera de esta regla: ya es "sticky" con su propio
z-index (sección 6) y no debe perder ese position aquí. */
.hero, section, .divider, .contacto-band, .site-footer {
position: relative; z-index: 2;
}
.peregrino-fig .parte-ala { fill: var(--madera); }
.peregrino-fig .parte-copa { fill: var(--ladrillo); }
.peregrino-fig .parte-cabeza { fill: #D9A876; }
.peregrino-fig .parte-ruana { fill: var(--terracota); }
.peregrino-fig .parte-raya { stroke: var(--ladrillo-deep); stroke-width: .5; opacity: .5; fill: none; }
.peregrino-fig .parte-morral { fill: var(--verde); }
.peregrino-fig .parte-baston { stroke: var(--madera); stroke-width: 1.7; stroke-linecap: round; fill: none; }
.peregrino-fig .parte-pierna {
stroke: var(--ladrillo); stroke-width: 3.2; stroke-linecap: round; fill: none;
transform-box: fill-box; transform-origin: top center;
}
.peregrino-fig .parte-pie { fill: var(--madera); }
.peregrino-fig { transform-box: fill-box; }
.pierna-izq { animation: balanceoA .55s ease-in-out infinite; }
.pierna-der { animation: balanceoB .55s ease-in-out infinite; }
body:not(.caminando) .pierna-izq,
body:not(.caminando) .pierna-der { animation-play-state: paused; }
@keyframes balanceoA { 0%, 100% { transform: rotate(20deg); } 50% { transform: rotate(-20deg); } }
@keyframes balanceoB { 0%, 100% { transform: rotate(-20deg); } 50% { transform: rotate(20deg); } }
/* =============================================================================
21. REVEAL ON SCROLL (universal)
============================================================================= */
[data-reveal] {
opacity: 0; transform: translateY(38px);
transition: opacity .85s var(--ease-soft), transform .85s var(--ease-soft);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }
/* =============================================================================
22. TILT sutil en tarjetas (habitaciones / galería)
============================================================================= */
.has-tilt {
--rx: 0deg; --ry: 0deg;
transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
transform-style: preserve-3d;
}
.room-card.has-tilt:hover, .g-item.has-tilt:hover { transition-duration: .15s; }
/* =============================================================================
23. REDUCED MOTION — solo se apaga lo realmente intrusivo
============================================================================= */
@media (prefers-reduced-motion: reduce) {
.camino-track { display: none; }
.pierna-izq, .pierna-der { animation: none; }
[data-reveal] { transition-duration: .25s; }
.stamp-ring, .stamp-ring svg { transition-duration: .2s; transition-delay: 0s; }
.hero-title .w-in { transition: none; opacity: 1; transform: none; }
}