/* ─────────────────────────────────────────────────────────────────────────
   Hotel Estancia — hoja de estilo única.
   Sin dependencias: la tipografía va en assets/fuentes y los colores son los
   del manual de marca (marca/MANUAL_DE_MARCA.pdf).
   ───────────────────────────────────────────────────────────────────────── */

@font-face{font-family:"Playfair Display";src:url("assets/fuentes/PlayfairDisplay-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("assets/fuentes/PlayfairDisplay-SemiBold.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("assets/fuentes/Jost-Light.woff") format("woff");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("assets/fuentes/Jost-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("assets/fuentes/Jost-Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("assets/fuentes/Jost-SemiBold.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}

:root{
  --carbon:#16181A; --crema:#F7F3EC; --rojo:#B01B2E; --esmeralda:#0E4F45;
  --dorado:#C9A227; --gris:#6B6B6B; --blanco:#fff;
  --linea:#e2dbcd; --crema-hueso:#efe9df; --wa:#25d366;
  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --texto:"Jost",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --caja:1160px; --radio:2px;
  --sombra:0 18px 44px rgba(22,24,26,.10);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--crema);color:var(--carbon);
  font-family:var(--texto);font-weight:300;font-size:clamp(15.5px,.5vw + 14px,17px);
  line-height:1.7;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.15;margin:0;
  letter-spacing:-.005em}
h2{font-size:clamp(28px,3.1vw,44px);margin-bottom:.5em}
h3{font-size:clamp(21px,1.7vw,27px)}
p{margin:0 0 1.1em}
ul{margin:0;padding:0;list-style:none}

.caja{width:min(100% - 2.4rem,var(--caja));margin-inline:auto}
.oculto-visual{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
.saltar{position:absolute;left:-999px;top:0;background:var(--carbon);color:var(--crema);
  padding:.7rem 1.1rem;z-index:100}
.saltar:focus{left:.6rem;top:.6rem}
:focus-visible{outline:2px solid var(--rojo);outline-offset:3px}

/* ── cintillos y textos guía ─────────────────────────────────────────── */
.cintillo{font-size:.72rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  margin:0 0 .9rem;display:flex;align-items:center;gap:.7rem;color:var(--carbon)}
.cintillo--rojo{color:var(--rojo)}
.cintillo::after{content:"";flex:0 0 34px;height:1.5px;background:currentColor;opacity:.55}
.cintillo__num{color:var(--rojo);font-weight:600;margin-right:.15rem}
.parrafo-guia{max-width:62ch;color:var(--gris);font-size:1.02rem}

/* ── botones ─────────────────────────────────────────────────────────── */
.boton{display:inline-block;font-family:var(--texto);font-weight:500;font-size:.83rem;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:1rem 1.9rem;border-radius:999px;transition:transform .18s,background .18s,color .18s;
  white-space:nowrap;
  /* el botón de la galería es un <button> de verdad, no un enlace: hay que
     apagarle el fondo y el borde que le pone el navegador por su cuenta.
     Las variantes de debajo vuelven a ponerlos donde tocan. */
  background:none;border:0;cursor:pointer}
.boton--wa{background:var(--rojo);color:var(--crema);box-shadow:0 10px 24px rgba(176,27,46,.24)}
.boton--wa:hover{background:#961627;transform:translateY(-2px)}
.boton--linea{border:1px solid rgba(247,243,236,.55);color:var(--crema)}
.boton--linea:hover{background:rgba(247,243,236,.12)}
.boton--grande{padding:1.15rem 2.6rem;font-size:.9rem}

/* ── cabecera ────────────────────────────────────────────────────────── */
.cabecera{position:fixed;inset:0 0 auto 0;z-index:50;padding:1.15rem 0;
  transition:background .3s,padding .3s,box-shadow .3s}
.cabecera__caja{width:min(100% - 2.4rem,var(--caja));margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.cabecera__logo{display:block;line-height:0}
.cabecera__logo img{width:clamp(158px,17vw,215px);height:auto}
.cabecera__logo--oscuro{display:none}
.cabecera--fijo .cabecera__logo--claro{display:none}
.cabecera--fijo .cabecera__logo--oscuro{display:block}
.nav{display:flex;align-items:center;gap:1.9rem}
.nav a{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  color:var(--crema);font-weight:400;padding:.2rem 0;border-bottom:1px solid transparent}
.nav a:hover{border-bottom-color:currentColor}
.nav__wa{background:var(--rojo);color:var(--crema)!important;border-radius:999px;
  padding:.62rem 1.2rem!important;font-weight:500}
.nav__wa:hover{background:#961627;border-bottom-color:transparent!important}
.cabecera--fijo{background:rgba(247,243,236,.96);backdrop-filter:blur(8px);
  padding:.7rem 0;box-shadow:0 1px 0 var(--linea),0 10px 30px rgba(22,24,26,.06)}
.cabecera--fijo .nav a{color:var(--carbon)}
.cabecera--fijo .nav__wa{color:var(--crema)!important}
.cabecera__menu{display:none;background:none;border:0;cursor:pointer;padding:.5rem;
  width:44px;height:44px}
.cabecera__menu span{display:block;height:1.5px;background:var(--crema);margin:5px 0;
  transition:transform .25s,opacity .25s}
.cabecera--fijo .cabecera__menu span{background:var(--carbon)}

/* ── portada ─────────────────────────────────────────────────────────── */
.portada{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:8rem 0 4.5rem;color:var(--crema);overflow:hidden}
.portada__foto{position:absolute;inset:0;z-index:-2}
.portada__foto img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.portada::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(22,24,26,.60) 0%,rgba(22,24,26,.18) 34%,
    rgba(22,24,26,.60) 72%,rgba(22,24,26,.88) 100%)}
.portada__texto{width:min(100% - 2.4rem,var(--caja));margin-inline:auto}
.portada__lugar{font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(247,243,236,.82);margin-bottom:1.1rem}
.portada h1{font-size:clamp(48px,10vw,116px);line-height:.94;letter-spacing:.02em;
  margin-bottom:.5rem;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.portada h1 span{display:block;padding-left:.06em;letter-spacing:.08em}
.portada__lema{font-size:.76rem;letter-spacing:.36em;color:var(--crema);
  display:flex;align-items:center;gap:.9rem;margin-bottom:1.4rem}
.portada__lema::before{content:"";width:46px;height:2px;background:var(--rojo)}
.portada__entrada{max-width:46ch;color:rgba(247,243,236,.92);font-size:1.05rem;
  margin-bottom:2rem}
.portada__botones{display:flex;flex-wrap:wrap;gap:.9rem}
.portada__baja{position:absolute;left:50%;bottom:1.6rem;width:22px;height:38px;
  border:1px solid rgba(247,243,236,.5);border-radius:12px;transform:translateX(-50%)}
.portada__baja::after{content:"";position:absolute;left:50%;top:8px;width:2px;height:7px;
  background:var(--crema);border-radius:2px;transform:translateX(-50%);
  animation:baja 1.9s ease-in-out infinite}
@keyframes baja{0%,100%{opacity:0;transform:translate(-50%,0)}
  45%{opacity:1;transform:translate(-50%,9px)}}

/* ── secciones ───────────────────────────────────────────────────────── */
section{padding:clamp(3.6rem,7vw,6.6rem) 0}
.bienvenida{padding-bottom:0}
.bienvenida__caja{max-width:820px;text-align:center}
.bienvenida .cintillo{justify-content:center}
.bienvenida .cintillo::after{display:none}
.bienvenida .parrafo-guia{margin-inline:auto}

/* ── habitaciones ────────────────────────────────────────────────────── */
.habitaciones{padding-bottom:clamp(3.2rem,6vw,5.4rem)}
.habitaciones__lista{display:grid;gap:clamp(2.4rem,5vw,4.4rem);margin-top:2.6rem}
.hab{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.6rem,3.4vw,3.2rem);
  align-items:center;
  /* cada habitación tiene su propio id (#sencilla, #doble…). Sin este margen,
     quien entre por un enlace directo aterriza con el título metido debajo de
     la cabecera fija. */
  scroll-margin-top:6rem}
.hab:nth-child(even) .hab__foto{order:2}
.hab__foto{margin:0;overflow:hidden;border-radius:var(--radio);box-shadow:var(--sombra)}
.hab__foto img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s ease}
.hab:hover .hab__foto img{transform:scale(1.035)}
.hab__cuerpo{min-width:0}
.hab__titular{margin:.1rem 0 .7rem}
.hab__texto{color:var(--gris);max-width:52ch}
.hab__datos{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.1rem}
.hab__datos li{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--linea);border-radius:999px;padding:.34rem .9rem;color:var(--carbon)}
.hab__amenidades{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.35rem 1.2rem;margin-bottom:1.6rem}
.hab__amenidades li{font-size:.92rem;color:var(--gris);display:flex;align-items:baseline;gap:.6rem}
.hab__amenidades li::before{content:"";flex:0 0 5px;height:5px;background:var(--rojo);
  border-radius:50%;transform:translateY(-2px)}
.hab__pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem;border-top:1px solid var(--linea);padding-top:1.2rem}
.tarifa{margin:0;display:flex;flex-direction:column;line-height:1.25}
.tarifa__cifra{font-family:var(--display);font-size:1.7rem}
.tarifa__nota{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.tarifa__nota--sola{max-width:18ch;line-height:1.5}

/* ── baños ───────────────────────────────────────────────────────────── */
.banos{background:var(--crema-hueso)}
.banos__tira{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.2rem}
.banos__foto{margin:0}
.banos__foto img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radio)}
.banos__foto figcaption{font-size:.78rem;color:var(--gris);margin-top:.55rem;
  letter-spacing:.02em}

/* ── servicios ───────────────────────────────────────────────────────── */
.servicios{background:var(--crema)}
.servicios__lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.1rem 2rem;margin:2rem 0 1.6rem}
.servicios__lista li{padding:.75rem 0;border-bottom:1px solid var(--linea);
  display:flex;align-items:baseline;gap:.75rem;font-size:.98rem}
.servicios__lista li::before{content:"";flex:0 0 6px;height:6px;background:var(--dorado);
  transform:translateY(-2px)}
.servicios__nota{color:var(--gris);font-size:.9rem;max-width:64ch}

/* ── galería ─────────────────────────────────────────────────────────── */
.galeria{background:var(--carbon);color:var(--crema)}
.galeria h2,.galeria .cintillo{color:var(--crema)}
.galeria .cintillo--rojo{color:#e2586b}
.galeria .parrafo-guia{color:rgba(247,243,236,.7)}
.galeria__rejilla{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.8rem;margin-top:2.4rem}
/* La galería se enseña en DOS FILAS de cinco. Las columnas van fijas —no
   `auto-fill`— porque sólo así se sabe cuántas celdas caben en dos filas.
   GALERIA tiene exactamente diez fotos, así que en pantalla ancha se ven todas
   y esta regla no llega a saltar nunca; queda de red por si algún día se añade
   una foto a la lista y no se cae la maqueta. */
.galeria__celda:nth-child(n+11){display:none}
.galeria__celda{position:relative;padding:0;border:0;background:none;cursor:zoom-in;
  overflow:hidden;border-radius:var(--radio);display:block}
.galeria__celda img{width:100%;aspect-ratio:1/1;object-fit:cover;
  transition:transform .6s ease,opacity .3s}
.galeria__celda:hover img{transform:scale(1.06);opacity:.85}
.galeria__pie{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .8rem .7rem;
  font-size:.76rem;color:var(--crema);text-align:left;line-height:1.35;
  background:linear-gradient(180deg,transparent,rgba(22,24,26,.82));
  opacity:0;transition:opacity .3s}
.galeria__celda:hover .galeria__pie,.galeria__celda:focus-visible .galeria__pie{opacity:1}

/* ── ubicación ───────────────────────────────────────────────────────── */
.ubicacion{background:var(--crema-hueso)}
.ubicacion__caja{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.8rem,4vw,3.4rem);
  align-items:center}
.ubicacion__datos{margin-top:1.6rem;border-top:1px solid var(--linea)}
.ubicacion__datos li{display:flex;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--linea);
  font-size:.96rem}
.ubicacion__datos span{flex:0 0 110px;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);padding-top:.25rem}
.ubicacion__datos a{color:var(--rojo);text-decoration:none}
.ubicacion__datos a:hover{text-decoration:underline}
.ubicacion__foto{margin:0}
.ubicacion__foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radio);
  box-shadow:var(--sombra)}
.ubicacion__foto figcaption{font-size:.78rem;color:var(--gris);margin-top:.55rem}
.ubicacion__mapa iframe{width:100%;height:340px;border:0;border-radius:var(--radio);
  margin-top:1.4rem}

/* ── contacto ────────────────────────────────────────────────────────── */
.contacto{background:var(--esmeralda);color:var(--crema);text-align:center}
.contacto__caja{max-width:640px}
.contacto__iso{width:76px;height:76px;margin:0 auto 1.4rem;opacity:.92}
.contacto h2{color:var(--crema)}
.contacto p{color:rgba(247,243,236,.82);max-width:44ch;margin-inline:auto}
.contacto .boton--wa{margin-top:.8rem}
.contacto__otros{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;justify-content:center;
  margin-top:2rem;font-size:.9rem}
.contacto__otros a{color:rgba(247,243,236,.86);text-decoration:none;
  border-bottom:1px solid rgba(247,243,236,.35);padding-bottom:2px}
.contacto__otros a:hover{color:var(--crema)}

/* ── página de error ─────────────────────────────────────────────────── */
/* Reutiliza el bloque de contacto entero —fondo esmeralda, isotipo, botones—
   y sólo corrige lo que cambia al estar sola en la pantalla: aquí no hay
   <section> que ponga el respiro vertical, así que lo pone ella. */
.error404{min-height:100vh;display:grid;place-items:center;
  padding:clamp(3rem,8vw,6rem) 0}
.error404 h1{color:var(--crema);font-size:clamp(26px,3vw,40px);margin-bottom:.5em}
.error404__codigo{font-family:var(--display);font-size:clamp(52px,8vw,92px);
  line-height:1;color:var(--dorado);letter-spacing:.05em;margin-bottom:1.1rem}
/* Con `.error404__botones` a secas no bastaba: `.contacto p` tiene una clase
   MÁS un elemento, gana por especificidad, y su max-width de 44ch partía la
   fila en dos botones apilados. Con `.contacto` delante empatan y manda éste,
   que va después. */
.contacto .error404__botones{display:flex;flex-wrap:wrap;gap:.9rem;
  justify-content:center;max-width:none;margin-top:2.4rem}
.error404__botones .boton{margin-top:0}

/* ── pie ─────────────────────────────────────────────────────────────── */
.pie{background:var(--carbon);color:rgba(247,243,236,.72);padding:3rem 0;
  text-align:center;font-size:.86rem}
.pie__caja{display:grid;justify-items:center;gap:.15rem}
.pie img{margin:0 auto 1.2rem;width:190px;height:auto}
.pie p{margin:.2rem 0}
.pie a{color:inherit;text-decoration:none}
.pie a:hover{color:var(--crema)}

/* ── botón flotante ──────────────────────────────────────────────────── */
.flotante{position:fixed;right:clamp(.9rem,2vw,1.6rem);bottom:clamp(.9rem,2vw,1.6rem);
  width:56px;height:56px;border-radius:50%;background:var(--wa);display:grid;
  place-items:center;z-index:60;box-shadow:0 12px 28px rgba(37,211,102,.36);
  transition:transform .2s}
.flotante:hover{transform:scale(1.07)}
.flotante svg{width:32px;height:32px;fill:#fff}

/* ── visor de fotos ──────────────────────────────────────────────────── */
.visor{position:fixed;inset:0;z-index:90;background:rgba(12,13,14,.96);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.5rem;
  padding:clamp(.8rem,3vw,2.4rem)}
.visor[hidden]{display:none}
.visor__marco{margin:0;display:grid;place-items:center;gap:.9rem;max-height:92svh}
.visor__marco img{max-width:100%;max-height:82svh;width:auto;object-fit:contain;
  border-radius:var(--radio)}
.visor__marco figcaption{color:rgba(247,243,236,.8);font-size:.86rem;letter-spacing:.03em}
.visor__flecha,.visor__cerrar{background:none;border:0;color:var(--crema);cursor:pointer;
  font-size:2.6rem;line-height:1;padding:.4rem .8rem;opacity:.72;transition:opacity .2s}
.visor__flecha:hover,.visor__cerrar:hover{opacity:1}
.visor__flecha--ant{justify-self:start}
.visor__flecha--sig{justify-self:end}
.visor__cerrar{position:absolute;top:.6rem;right:1rem;font-size:2.4rem}

/* ── aparición suave ─────────────────────────────────────────────────── */
.revelar{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}
.revelar.visible{opacity:1;transform:none}

/* ── teléfono y tableta ──────────────────────────────────────────────── */
@media (max-width:960px){
  .hab{grid-template-columns:1fr}
  .hab:nth-child(even) .hab__foto{order:0}
  .ubicacion__caja{grid-template-columns:1fr}
  .servicios__lista{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  /* Tres cajas verticales no caben a lo ancho de un teléfono sin quedar en
     miniatura, y un baño en miniatura no enseña nada. Se apilan, con tope de
     ancho para que en una tableta en vertical no salgan gigantes. */
  .banos__tira{grid-template-columns:1fr;gap:1.4rem}
  .banos__foto{max-width:420px;margin-inline:auto;width:100%}
  .cabecera__menu{display:block}
  .nav{position:fixed;inset:0 0 auto 0;background:var(--crema);flex-direction:column;
    align-items:flex-start;gap:1.4rem;padding:5.4rem 1.8rem 2.4rem;
    transform:translateY(-102%);transition:transform .35s ease;box-shadow:var(--sombra)}
  .nav a{color:var(--carbon);font-size:1rem}
  .nav--abierto{transform:none}
  .portada{min-height:92svh}
  .servicios__lista{grid-template-columns:1fr}
  .hab__amenidades{grid-template-columns:1fr}
  .galeria__rejilla{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
  /* En el teléfono no caben diez a un tamaño decente: se enseñan seis y las
     otras cuatro se pasan deslizando dentro del visor, que las lleva todas. */
  .galeria__celda:nth-child(n+7){display:none}
  /* En el teléfono el pie se enseñaba siempre, porque no hay ratón con el que
     pasar por encima. Con tres columnas la celda baja de 120 px y el rótulo
     tapaba la foto entera, así que aquí se calla: el texto sigue en el `alt`
     y el visor lo enseña al abrir la foto. */
  .galeria__pie{display:none}
  .visor__flecha{font-size:2rem;padding:.2rem .3rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .revelar{opacity:1;transform:none}
}