/* La Macana · landing · estilos
   Decisiones tipográficas y de diseño (web):
   - Títulos: Cormorant Garamond 600 (solo tamaños grandes). Texto: DM Sans 300 (variable).
   - Escala 1,618 desde 17 px de texto. Sin dibujos decorativos. Color de marca sin decidir.
   - Fuentes alojadas en la propia web (sin llamadas a Google). */

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;font-display:swap;src:url("../fonts/cormorant-garamond-latin-wght-italic.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url("../fonts/dm-sans-latin-opsz-normal.woff2") format("woff2")}

:root{
  font-optical-sizing:auto;
  --fondo:#f3f2ee;
  --tinta:#1c1c1c;
  --gris:#575756;                /* gris de marca: texto de los pies de foto y fondo del footer */
  --radio-boton:999px;           /* esquinas de los botones: 999px = redondeados del todo; probar 14px para menos */
  --linea:rgba(28,28,28,.22);
  --serif:"Cormorant Garamond",Garamond,Georgia,serif;
  --sans:"DM Sans",system-ui,sans-serif;
  --peso-texto:300;               /* si se ve flojo en móvil con textos reales: probar 350 */
  --ancho:1200px;
  --seccion:clamp(64px,9vw,116px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:6rem}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--fondo);color:var(--tinta);font:var(--peso-texto) clamp(16px,1.5vw,17px)/1.4 var(--sans);text-rendering:optimizeLegibility}
/* nunca una sola palabra sola en la última línea (viudas/huérfanas):
   los navegadores que no lo soporten simplemente ignoran esto, sin efecto negativo */
h1,h2,h3,.lema,.frase-lema,.kicker{text-wrap:balance}
p,li,figcaption{text-wrap:pretty}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
figure{margin:0}
ul{margin:0;padding:0;list-style:none}

/* escala tipográfica */
h1{font:600 clamp(64px,9vw,116px)/.95 var(--serif);letter-spacing:-.02em;margin:0 0 .18em}
.lema{font:italic 600 clamp(32px,3.4vw,44px)/.95 var(--serif);margin:0 0 1.1rem;max-width:20ch}
h2{font:600 clamp(42px,5.6vw,72px)/.9 var(--serif);letter-spacing:-.01em;margin:0 0 .55em}
h2.h2-xl{font-size:clamp(64px,9vw,116px);line-height:.95;letter-spacing:-.02em;margin-bottom:.4em}  /* mismo tamaño que "La Macana"; solo para títulos de una palabra o muy cortos */
h2.h2-3{line-height:.95}          /* titular de sección en 3 líneas o más */
.h2-lema{font-family:var(--serif);font-style:italic;font-size:clamp(32px,3.4vw,44px);line-height:.95;letter-spacing:0}  /* título entero en el estilo del lema de portada; se usa en h2 y también en el h3 de la fila de habitaciones */
.frase-lema{display:block;font-style:italic;font-size:clamp(32px,3.4vw,44px);line-height:1;letter-spacing:0;margin-top:.05em} /* solo la segunda frase del título, en el estilo del lema: algo separada de la primera línea, sin llegar al aire de antes */
h3{font:500 clamp(16px,1.5vw,17px)/1.3 var(--sans);margin:0 0 .5rem}
.hab-fotos-titulo{margin-top:clamp(2.5rem,5vw,4rem);margin-bottom:.55em;color:var(--tinta)}  /* mismo espacio hasta las fotos que hasta un texto corrido */
.hab-fotos-titulo + .fila-hab-3{margin-top:0}
p{font:var(--peso-texto) clamp(16px,1.5vw,17px)/1.4 var(--sans);max-width:58ch;margin:0 0 1em}
.btn{font:500 16px/1.2 var(--sans)}
.nota{font:400 clamp(14px,1.3vw,15px)/1.45 var(--sans)}
figcaption{font:var(--peso-texto) clamp(14px,1.3vw,15px)/1.25 var(--sans)}  /* más apretado que el texto corrido, para cuando ocupa 2+ líneas */
p.nota{max-width:none}

.wrap{width:min(var(--ancho),100% - 3rem);margin-inline:auto}
.section{padding:var(--seccion) 0}
.section + .section{border-top:1px solid var(--linea)}

/* pies de foto: mismo fondo que la página, texto en gris */
figcaption{background:none;color:var(--gris);padding:.65rem 0 0;margin:0;max-width:none}

.salto{position:absolute;left:-999px;top:0;background:var(--tinta);color:var(--fondo);padding:.7rem 1rem;z-index:100}
.salto:focus{left:0}
:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}

/* cabecera */
.cabecera{border-bottom:1px solid var(--linea);background:var(--fondo);position:sticky;top:0;z-index:40}
.cabecera .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.6rem 0}
.marca{display:block;line-height:0}
.marca img{width:clamp(112px,11vw,148px);height:auto}
.nav{display:none;gap:1.8rem;font:400 16px/1.2 var(--sans)}
.nav a{text-decoration:none;padding:.3rem 0;border-bottom:1.5px solid transparent}
.nav a:hover{border-bottom-color:var(--tinta)}
.idiomas{display:flex;gap:.2rem;font:400 15px/1.2 var(--sans)}
.idiomas a,.idiomas span{padding:.3rem .7rem;text-decoration:none;border:1.5px solid transparent;border-radius:var(--radio-boton)}
.idiomas span{border-color:var(--tinta)}
@media (min-width:980px){.nav{display:flex}}

/* botones */
.acciones{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.btn{display:inline-block;text-decoration:none;padding:1rem 1.75rem;border-radius:var(--radio-boton);border:1.5px solid var(--tinta);background:var(--tinta);color:var(--fondo);transition:background-color .2s,color .2s}
.btn:hover{background:var(--fondo);color:var(--tinta)}
.btn-borde{background:transparent;color:var(--tinta)}
.btn-borde:hover{background:var(--tinta);color:var(--fondo)}

/* portada */
.portada{padding:clamp(40px,6vw,88px) 0 var(--seccion)}
.portada .wrap{display:grid;gap:2.5rem;align-items:center}
.portada img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:38% 50%}
.kicker{margin:0 0 1.2rem}
@media (min-width:900px){.portada .wrap{grid-template-columns:1.1fr .9fr;gap:4.5rem}}

/* rejillas */
.dos{display:grid;gap:2.5rem;align-items:center}
@media (min-width:900px){
  .dos{grid-template-columns:1fr 1fr;gap:5rem}
  .dos.inverso .pila{order:2}
}
.fotos-2{display:grid;gap:.5rem;margin-top:1.2rem}
@media (min-width:700px){.fotos-2{grid-template-columns:1fr 1fr}}
.fotos-2 img,.foto-ancha img{width:100%;aspect-ratio:3/2;object-fit:cover}
.fotos-2.vertical{margin-top:1.2rem}
.fotos-2.vertical img{aspect-ratio:3/4;object-position:50% 35%}
.foto-ancha{margin-top:clamp(2.5rem,5vw,4.5rem)}
.foto-ancha img{aspect-ratio:16/8;object-position:50% 42%}
.cuadrada img{width:100%;aspect-ratio:1/1;object-fit:cover}
.pila{display:grid;gap:1.6rem}
.pila img{width:100%;aspect-ratio:3/2;object-fit:cover}

/* habitaciones */
.hab-cabecera{display:grid;gap:2.5rem;align-items:start}
@media (min-width:900px){.hab-cabecera{grid-template-columns:5fr 6fr;gap:5rem}}
.hab-cabecera figure img{width:100%;aspect-ratio:5/6;object-fit:cover;object-position:50% 40%}
.galeria-altura{display:grid;gap:.5rem;margin-top:clamp(2.5rem,5vw,4rem)}
@media (min-width:700px){.galeria-altura{grid-template-columns:repeat(2,1fr)}}
.galeria-altura img{width:100%;aspect-ratio:3/2;object-fit:cover}
.galeria-altura figure.vertical img{aspect-ratio:2/3;object-fit:contain}  /* nunca se recorta */
.galeria-altura figure.bano-cuadrado img{aspect-ratio:3/4;object-fit:cover;object-position:50% 100%}  /* recortada por arriba: forma más cuadrada */
.galeria-altura figure.cuadrada-natural img{aspect-ratio:1/1;object-fit:contain}  /* nunca se recorta */
/* en pantalla ancha, fila de galería: todas las fotos a la misma altura, cada una con su ancho natural */
@media (min-width:900px){
  .galeria-altura{display:flex;flex-wrap:wrap}
  .galeria-altura figure{flex:none}
  .galeria-altura img{width:auto;height:clamp(200px,18vw,255px)}  /* calculado para que quepan 3 fotos horizontales por fila */
}

/* slow living */
.lectura{display:grid;gap:2.5rem;align-items:center}
@media (min-width:900px){.lectura{grid-template-columns:6fr 5fr;gap:5rem}}
.lectura img{width:100%;aspect-ratio:6/5;object-fit:cover}

/* entorno */
.entorno{display:grid;gap:2.5rem;align-items:start}
@media (min-width:900px){.entorno{grid-template-columns:6fr 5fr;gap:5rem}}
.entorno figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.enlace{font-weight:500;text-underline-offset:.25em;text-decoration-thickness:1.5px}

/* información práctica */
.info{display:grid;gap:2.5rem 4rem;margin-top:2.2rem}
@media (min-width:800px){.info{grid-template-columns:1fr 1fr}}
.info li{padding:.6rem 0;border-bottom:1px solid var(--linea)}

/* contacto */
.contacto-centro{max-width:640px;margin-inline:auto;text-align:center}
.contacto-centro .acciones{justify-content:center}
.contacto-centro .lema{margin-inline:auto}
.contacto-centro p{margin-inline:auto}
.logo-puerta{width:100%;max-width:150px;height:auto;margin:0 auto 2rem}  /* imagen es display:block por la regla base; hace falta margin:auto para centrarla */
.reservas{margin-top:1.6rem}
.reservas a{font-weight:500;text-underline-offset:.25em}
.junto{white-space:nowrap}
.registro{margin-top:1.4rem}

/* pie: fondo gris de marca con texto del color de la página */
.pie{background:var(--gris);color:var(--fondo);padding:2.4rem 0}
.pie .wrap{display:flex;flex-wrap:wrap;gap:1rem 3rem;align-items:center;justify-content:space-between}
.pie .wrap>span{font-weight:500}
.pie nav{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem}
.pie a{text-decoration:none;border-bottom:1px solid var(--fondo)}
.pie :focus-visible{outline-color:var(--fondo)}
.pie a:hover{border-bottom-width:2px}
.pie small{font:inherit}

/* WhatsApp flotante */
.wa{position:fixed;right:1rem;bottom:1rem;z-index:50;display:flex;align-items:center;gap:.55rem;background:var(--tinta);color:var(--fondo);text-decoration:none;font:500 16px/1.2 var(--sans);padding:.8rem 1.15rem .8rem .95rem;border-radius:999px;box-shadow:0 4px 18px rgba(0,0,0,.25)}
.wa:hover{background:#000}
.wa:focus-visible{outline-color:var(--fondo);outline-offset:2px;box-shadow:0 0 0 3px var(--tinta)}
.wa svg{width:22px;height:22px;flex:none}

/* icono de WhatsApp reutilizado dentro de botones y enlaces (se ajusta al tamaño del texto) */
.icon-wa{width:1.05em;height:1.05em;vertical-align:-0.15em;margin-right:.45em;flex:none}
@media (max-width:480px){.wa span{display:none}.wa{padding:.9rem}}

/* fila de 4 fotos (1 horizontal 3:2 + 3 verticales 2:3) que juntas ocupan el ancho completo,
   sin recortar ninguna: las columnas están calculadas para que la altura resultante coincida.
   3/2 : 2/3 : 2/3 : 2/3  ->  9 : 4 : 4 : 4 */
.fila-proporcional{display:grid;gap:.5rem;margin-top:clamp(2.5rem,5vw,4rem);grid-template-columns:1fr}
.fila-proporcional img{width:100%;height:auto;display:block}
.fila-proporcional figure.horizontal img{aspect-ratio:3/2}
.fila-proporcional figure.vertical img{aspect-ratio:2/3}
@media (min-width:700px){.fila-proporcional{grid-template-columns:9fr 4fr 4fr 4fr}}

/* Habitaciones: dos filas que ocupan exactamente el mismo ancho total.
   Fila de 3 (todas 3:2): columnas iguales -> ya da la misma altura entre sí.
   Fila de 4 (2 horizontales 3:2 + 1 vertical 2:3 + el baño 3:4): columnas
   proporcionales a cada relación de aspecto, para que las 4 salgan a la
   misma altura Y la fila entera ocupe el mismo ancho que la de arriba. */
.fila-hab-3{display:grid;gap:.5rem;margin-top:clamp(2.5rem,5vw,4rem);grid-template-columns:1fr}
.fila-hab-3 img{width:100%;aspect-ratio:3/2;object-fit:cover}
@media (min-width:700px){.fila-hab-3{grid-template-columns:repeat(3,1fr)}}

.fila-hab-4{display:grid;gap:.5rem;margin-top:.5rem;grid-template-columns:1fr}
.fila-hab-4 img{width:100%;height:auto;display:block}
.fila-hab-4 figure img{aspect-ratio:3/2;object-fit:cover}
.fila-hab-4 figure.vertical img{aspect-ratio:2/3;object-fit:contain}
.fila-hab-4 figure.bano-cuadrado img{aspect-ratio:3/4;object-fit:cover;object-position:50% 100%}
@media (min-width:700px){.fila-hab-4{grid-template-columns:18fr 18fr 8fr 9fr}}