/* Grateus — web nueva (noviembre 2026).
   Noche en las sierras: fondo tinta, texto arena y un ámbar sacado de las luces de las fotos. */

:root {
  --noche: #0c0e12;
  --noche-2: #13161c;
  --arena: #ece2d0;
  --arena-2: rgba(236, 226, 208, .68);
  --piedra: #f2ece2;
  --tinta: #191a1d;
  --tinta-2: #5d5a55;
  --ambar: #d9a75f;
  --ambar-2: #e9c48c;
  --linea: rgba(236, 226, 208, .14);
  --linea-clara: rgba(25, 26, 29, .12);
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, sans-serif;
  --suave: cubic-bezier(.22, 1, .36, 1);
  --margen: clamp(20px, 5vw, 88px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--noche); color: var(--arena);
  font: 400 18px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
::selection { background: var(--ambar); color: var(--noche); }

/* ---------- Piezas comunes ---------- */
.volanta {
  margin: 0 0 22px; font: 600 13px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ambar);
  display: flex; align-items: center; gap: 14px;
}
.volanta::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.titulo { margin: 0; font: 400 clamp(46px, 6.4vw, 104px)/.98 var(--serif); letter-spacing: -.015em; }
.titulo em { font-style: italic; color: var(--ambar-2); }
.cabeza { padding: 0 var(--margen); max-width: 1500px; margin: 0 auto 64px; }
.cabeza__bajada { max-width: 560px; margin: 26px 0 0; color: var(--arena-2); font-size: 19px; }
.cabeza--centro { text-align: center; }
.cabeza--centro .volanta { justify-content: center; }
.cabeza--centro .volanta::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.cabeza--centro .cabeza__bajada { margin-inline: auto; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 58px; padding: 0 30px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ambar); color: var(--noche); font: 700 14px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  transition: background .3s, transform .3s var(--suave);
}
.boton:hover { background: var(--ambar-2); transform: translateY(-1px); }
.boton svg { width: 20px; height: 20px; fill: currentColor; }
.boton--chico { height: 44px; padding: 0 22px; font-size: 12.5px; }
.boton--ancho { width: 100%; }

.mono, .palabra { display: block; background: currentColor; }
.mono { width: 26px; height: 31px; -webkit-mask: url(../img/monograma.png) center / contain no-repeat; mask: url(../img/monograma.png) center / contain no-repeat; color: var(--ambar); }
.palabra { width: 118px; height: 24px; -webkit-mask: url(../img/palabra.png) center / contain no-repeat; mask: url(../img/palabra.png) center / contain no-repeat; }

/* Apariciones */
.entra { display: inline-block; opacity: 0; transform: translateY(40px); animation: entra 1.3s var(--suave) var(--d, 0s) forwards; }
@keyframes entra { to { opacity: 1; transform: none; } }
.sube { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--suave) var(--d, 0s), transform 1.1s var(--suave) var(--d, 0s); }
.sube.visto { opacity: 1; transform: none; }

/* ---------- Navegación ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 84px; padding: 0 var(--margen);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  transition: background .5s, height .5s var(--suave), border-color .5s; border-bottom: 1px solid transparent;
}
.nav.fija { height: 70px; background: rgba(12, 14, 18, .72); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border-color: var(--linea); }
.nav__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--arena); grid-column: 1; }
.nav__links { display: flex; gap: 38px; grid-column: 2; }
.nav__links a { font-size: 14px; font-weight: 500; letter-spacing: .04em; text-decoration: none; color: var(--arena-2); transition: color .3s; }
.nav__links a:hover { color: var(--arena); }
.nav .boton { justify-self: end; grid-column: 3; }

/* ---------- Portada ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--margen) 56px; }
.hero__foto { position: absolute; inset: 0; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transform: scale(1.14); animation: acercar 3.4s var(--suave) forwards; will-change: transform; }
@keyframes acercar { to { transform: scale(1.02); } }
.hero__velo { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(12,14,18,.55) 0%, rgba(12,14,18,0) 22%, rgba(12,14,18,0) 42%, rgba(30,27,24,.85) 86%, #2b2620 100%),
  radial-gradient(120% 80% at 10% 100%, rgba(12,14,18,.6), transparent 60%); }
.hero__txt { position: relative; max-width: 1200px; }
.hero__titulo { margin: 0 0 44px; font: 400 clamp(60px, 10.4vw, 176px)/.9 var(--serif); letter-spacing: -.025em; }
.hero__titulo .renglon { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__titulo em { font-style: italic; color: var(--ambar-2); }
.hero .volanta { display: inline-flex; color: var(--arena); margin-bottom: 26px; }

.barra {
  position: relative; display: grid; grid-template-columns: 1fr 1fr .7fr auto; align-items: stretch; gap: 0;
  max-width: 880px; padding: 8px; border-radius: 999px;
  background: rgba(236, 226, 208, .1); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(236, 226, 208, .2);
}
.barra label { display: flex; flex-direction: column; justify-content: center; padding: 6px 26px; border-right: 1px solid var(--linea); min-width: 0; }
.barra label span { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ambar-2); }
.barra input, .barra select { border: 0; background: none; padding: 2px 0 0; font-size: 16px; outline: none; color-scheme: dark; width: 100%; }
.barra select option { color: #000; }
.barra .barra__chico { border-right: 0; }
.hero__bajar { position: absolute; right: var(--margen); bottom: 64px; width: 1px; height: 84px; background: rgba(236,226,208,.25); overflow: hidden; }
.hero__bajar i { position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--arena); animation: gota 2.2s var(--suave) infinite; }
@keyframes gota { to { top: 100%; } }

/* ---------- La casa ---------- */
.casa { padding: clamp(110px, 14vw, 200px) var(--margen) clamp(90px, 10vw, 150px); max-width: 1500px; margin: 0 auto; }
.casa__texto { margin: 0; font: 400 clamp(32px, 4.1vw, 64px)/1.14 var(--serif); letter-spacing: -.01em; max-width: 1240px; }
.casa__texto .p { opacity: .16; transition: opacity .5s; }
.casa__texto .p.on { opacity: 1; }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: clamp(64px, 8vw, 110px) 0 0; padding-top: 40px; border-top: 1px solid var(--linea); }
.cifras dt { font: 400 clamp(56px, 6vw, 92px)/1 var(--serif); color: var(--ambar-2); }
.cifras dt small { font-size: .42em; margin-left: 4px; color: var(--arena-2); }
.cifras dd { margin: 12px 0 0; color: var(--arena-2); font-size: 16px; }

/* ---------- Un día en Grateus ---------- */
.dia { position: relative; height: 560vh; --tono: 0; }
.dia__fijo { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 86px 0 64px; }
.dia__fijo::before { /* el cielo del día: de la mañana tibia a la noche */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #2b2620 0%, #1c1916 100%); opacity: calc(1 - var(--tono));
}
.dia__cabeza { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 var(--margen); margin-bottom: clamp(16px, 2.6vh, 30px); }
.dia__cabeza .volanta { margin: 0 0 .9em; }
.dia__reloj { margin: 0; font: 400 clamp(46px, min(8vw, 12vh), 128px)/.86 var(--serif); font-variant-numeric: tabular-nums; color: var(--ambar-2); letter-spacing: -.02em; }
.dia__pista { display: flex; gap: clamp(28px, 4vw, 72px); padding: 0 var(--margen); will-change: transform; }
/* la foto se achica con el alto de la pantalla para que nunca tape el título */
.toma { flex: 0 0 auto; width: min(58vw, 980px, calc((100svh - 86px - 64px - min(8vw, 12vh) - 150px) * 1.667)); margin: 0; }
.toma__foto { aspect-ratio: 16 / 9.6; overflow: hidden; border-radius: 4px; background: var(--noche-2); }
.toma__foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.4s var(--suave); }
.toma.cerca .toma__foto img { transform: scale(1.02); }
.toma figcaption { display: flex; flex-wrap: wrap; gap: 6px 32px; margin-top: clamp(14px, 2.4vh, 26px); align-items: baseline; }
.toma figcaption b { flex: 0 0 auto; min-width: 240px; font: 400 clamp(26px, 3.6vh, 34px)/1.1 var(--serif); }
.toma figcaption span { flex: 1 1 280px; color: var(--arena-2); font-size: 17px; max-width: 460px; }
.toma__hora { display: none; margin-bottom: 6px; font: 400 22px/1 var(--serif); font-style: normal; color: var(--ambar-2); }
.dia__barra { position: absolute; left: var(--margen); right: var(--margen); bottom: 36px; height: 1px; background: var(--linea); }
.dia__barra i { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--ambar); transform-origin: left; transform: scaleX(0); }

/* ---------- Aparts ---------- */
.aparts { padding: clamp(110px, 12vw, 180px) 0 clamp(90px, 10vw, 140px); background: var(--piedra); color: var(--tinta); }
.aparts .volanta { color: #a7783a; }
.aparts .titulo em { color: #a7783a; }
.aparts .cabeza__bajada { color: var(--tinta-2); }
.aparts__cuerpo { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(260px, 330px); gap: clamp(28px, 3.4vw, 60px); padding: 0 var(--margen); max-width: 1640px; margin: 0 auto; align-items: start; }
.aparts__lista { display: flex; flex-direction: column; border-top: 1px solid var(--linea-clara); }
.aparts__lista button {
  display: flex; align-items: baseline; gap: 16px; text-align: left; padding: 22px 0; border: 0; border-bottom: 1px solid var(--linea-clara); background: none; cursor: pointer;
  font: 400 34px/1.05 var(--serif); color: rgba(25,26,29,.36); transition: color .4s, padding .5s var(--suave);
}
.aparts__lista button small { font: 600 12px/1 var(--sans); letter-spacing: .14em; color: rgba(25,26,29,.4); }
.aparts__lista button:hover { color: rgba(25,26,29,.7); }
.aparts__lista button[aria-selected="true"] { color: var(--tinta); padding-left: 12px; }
.aparts__lista button[aria-selected="true"] small { color: #a7783a; }
.aparts__escena { min-width: 0; }
.aparts__fotos { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: #e2d9cb; }
.aparts__fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 0 100%); transition: clip-path 1.1s var(--suave); }
.aparts__fotos img.on { clip-path: inset(0 0 0 0); }
.aparts__fotos img.fuera { clip-path: inset(0 0 0 0); z-index: -1; }
.aparts__miniaturas { display: flex; gap: 12px; margin-top: 14px; }
.aparts__miniaturas button { width: 96px; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 3px; overflow: hidden; cursor: pointer; opacity: .5; outline-offset: 3px; transition: opacity .3s; background: none; }
.aparts__miniaturas button.on, .aparts__miniaturas button:hover { opacity: 1; }
.aparts__miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.aparts__ficha { padding-top: 6px; }
.aparts__ficha h3 { margin: 0; font: 400 52px/1 var(--serif); }
.aparts__ficha .medidas { margin: 14px 0 22px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #a7783a; }
.aparts__ficha p { margin: 0 0 24px; color: var(--tinta-2); font-size: 17px; }
.aparts__ficha ul { list-style: none; margin: 0 0 30px; padding: 0; border-top: 1px solid var(--linea-clara); }
.aparts__ficha li { padding: 12px 0; border-bottom: 1px solid var(--linea-clara); font-size: 16px; font-weight: 500; }
.aparts__ficha .boton { background: var(--tinta); color: var(--piedra); }
.aparts__ficha .boton:hover { background: #33302b; }
.ficha > * { animation: ficha .8s var(--suave) both; }
.ficha > :nth-child(2) { animation-delay: .05s; } .ficha > :nth-child(3) { animation-delay: .1s; }
.ficha > :nth-child(4) { animation-delay: .15s; } .ficha > :nth-child(5) { animation-delay: .2s; }
.ficha[hidden] { display: none; }
@keyframes ficha { from { opacity: 0; transform: translateY(16px); } }
.incluye { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; list-style: none; margin: clamp(70px, 8vw, 110px) var(--margen) 0; padding: 34px 0 0; border-top: 1px solid var(--linea-clara); font-size: 15px; font-weight: 600; letter-spacing: .04em; color: var(--tinta-2); }
.incluye li { display: flex; align-items: center; gap: 12px; }
.incluye li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #a7783a; }

/* ---------- Pileta ---------- */
.pileta { padding: clamp(110px, 12vw, 180px) 0 clamp(100px, 11vw, 160px); }
.compara { position: relative; margin: 0 var(--margen); aspect-ratio: 12 / 7; max-height: 86vh; overflow: hidden; border-radius: 4px; user-select: none; -webkit-user-select: none; }
.compara img { width: 100%; height: 100%; object-fit: cover; }
.compara__a { position: absolute; inset: 0; }
.compara__b { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--corte)); }
.compara__linea { position: absolute; top: 0; bottom: 0; left: var(--corte); width: 2px; margin-left: -1px; background: var(--arena); pointer-events: none; }
.compara__tirador { position: absolute; top: 50%; left: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgba(12,14,18,.38); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1.5px solid var(--arena); display: flex; align-items: center; justify-content: center; gap: 14px; }
.compara__tirador i { width: 9px; height: 9px; border-left: 2px solid var(--arena); border-bottom: 2px solid var(--arena); transform: rotate(45deg); }
.compara__tirador i + i { transform: rotate(-135deg); }
.compara__rotulo { position: absolute; top: 28px; padding: 10px 18px; border-radius: 999px; background: rgba(12,14,18,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; pointer-events: none; }
.compara__rotulo--a { left: 28px; } .compara__rotulo--b { right: 28px; }
.compara__rango { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.compara__rango:focus-visible + * { outline: 2px solid var(--ambar); }

/* ---------- Spa ---------- */
.spa { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: center; padding: 0 var(--margen) clamp(110px, 12vw, 180px); max-width: 1640px; margin: 0 auto; }
.spa__foto { aspect-ratio: 5 / 4; overflow: hidden; border-radius: 4px; }
.spa__foto img { width: 100%; height: 118%; object-fit: cover; margin-top: -9%; }
.spa__txt > p:not(.volanta) { color: var(--arena-2); margin: 28px 0 34px; max-width: 480px; }
.carta { list-style: none; margin: 0; padding: 0; counter-reset: c; border-top: 1px solid var(--linea); max-width: 480px; }
.carta li { counter-increment: c; display: flex; gap: 22px; align-items: baseline; padding: 17px 0; border-bottom: 1px solid var(--linea); font: 400 27px/1.2 var(--serif); }
.carta li::before { content: "0" counter(c); font: 600 12px/1 var(--sans); letter-spacing: .14em; color: var(--ambar); }

/* ---------- Villa ---------- */
.villa { position: relative; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden; padding: 160px var(--margen) clamp(70px, 8vw, 120px); }
.villa__foto { position: absolute; inset: -12% 0; }
.villa__foto img { width: 100%; height: 100%; object-fit: cover; }
.villa__velo { position: absolute; inset: 0; background: linear-gradient(180deg, var(--noche) 0%, rgba(12,14,18,.2) 26%, rgba(12,14,18,.25) 50%, rgba(12,14,18,.9) 100%); }
.villa__txt { position: relative; width: 100%; max-width: 1500px; margin: 0 auto; }
.villa .volanta { color: var(--arena); }
.distancias { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; border-top: 1px solid rgba(236,226,208,.3); }
.distancias li { padding-top: 24px; font-size: 16px; color: var(--arena-2); }
.distancias b { display: block; font: 400 40px/1 var(--serif); color: var(--arena); margin-bottom: 10px; font-weight: 400; }

/* ---------- Opiniones ---------- */
.opiniones { padding: clamp(110px, 12vw, 180px) var(--margen); text-align: center; display: flex; flex-direction: column; align-items: center; }
.mono--grande { width: 40px; height: 48px; margin-bottom: 44px; }
.opiniones__lista { display: grid; width: 100%; max-width: 1100px; }
.opiniones blockquote { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(14px); transition: opacity 1s var(--suave), transform 1s var(--suave); pointer-events: none; }
.opiniones blockquote.is-on { opacity: 1; transform: none; pointer-events: auto; }
.opiniones blockquote p { margin: 0; font: italic 400 clamp(34px, 4.2vw, 64px)/1.14 var(--serif); }
.opiniones cite { display: block; margin-top: 30px; font: 600 13px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ambar); font-style: normal; }
.opiniones__puntos { display: flex; gap: 10px; margin-top: 46px; }
.opiniones__puntos button { width: 34px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.opiniones__puntos button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--linea); transition: background .3s; }
.opiniones__puntos button.on::before { background: var(--ambar); }

/* ---------- Preguntas frecuentes ---------- */
.preguntas { padding: 0 var(--margen) clamp(110px, 12vw, 170px); }
.preguntas__lista { max-width: 920px; margin: 0 auto; border-top: 1px solid var(--linea); }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; font: 400 clamp(23px, 2.2vw, 30px)/1.2 var(--serif); }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: ""; flex: 0 0 auto; width: 14px; height: 14px; border-right: 1.5px solid var(--ambar); border-bottom: 1.5px solid var(--ambar); transform: translateY(-4px) rotate(45deg); transition: transform .4s var(--suave); }
.preguntas details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.preguntas details p { margin: -6px 0 28px; max-width: 700px; color: var(--arena-2); }

/* ---------- Consultar ---------- */
.consultar { position: relative; padding: clamp(110px, 11vw, 170px) var(--margen) clamp(90px, 10vw, 140px); overflow: hidden; }
.consultar__foto { position: absolute; inset: 0; }
.consultar__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.consultar__velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,14,18,.92) 0%, rgba(12,14,18,.7) 45%, rgba(12,14,18,.35) 100%), linear-gradient(180deg, var(--noche) 0%, transparent 30%); }
.consultar__caja { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(40px, 7vw, 120px); align-items: center; max-width: 1500px; margin: 0 auto; }
.consultar__txt > p:not(.volanta) { color: var(--arena-2); max-width: 500px; margin: 28px 0 40px; }
.datos { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 36px; margin: 0; }
.datos dt { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ambar); margin-bottom: 8px; }
.datos dd { margin: 0; font-size: 17px; }
.datos a { text-decoration: none; border-bottom: 1px solid var(--linea); }
.form { display: flex; flex-direction: column; gap: 14px; padding: 34px; border-radius: 8px; background: rgba(19, 22, 28, .72); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); border: 1px solid var(--linea); }
.form__fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.form label { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; border: 1px solid var(--linea); border-radius: 6px; transition: border-color .3s; }
.form label:focus-within { border-color: var(--ambar); }
.form label span { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ambar-2); }
.form input, .form select { min-width: 0; border: 0; background: none; padding: 0; font-size: 17px; outline: none; color-scheme: dark; width: 100%; }
.form select option { color: #000; }
.form__noches { margin: 2px 0; min-height: 1.4em; font: italic 400 21px/1.3 var(--serif); color: var(--ambar-2); }
.form .boton { margin-top: 4px; }

/* ---------- Pie ---------- */
.pie { padding: 80px var(--margen) 50px; text-align: center; border-top: 1px solid var(--linea); color: var(--arena-2); font-size: 15px; }
.pie__logo { display: inline-flex; flex-direction: column; align-items: center; gap: 14px; color: var(--arena); text-decoration: none; margin-bottom: 30px; }
.pie__logo .mono { width: 34px; height: 41px; }
.pie__logo .palabra { width: 150px; height: 30px; }
.pie p { margin: 6px 0; }
.pie a { text-decoration: none; border-bottom: 1px solid var(--linea); }
.pie__legal { margin-top: 30px !important; font-size: 13px; opacity: .6; }

.flotante { position: fixed; right: 22px; bottom: 22px; z-index: 40; width: 60px; height: 60px; border-radius: 50%; background: #25d366; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,.35); transform: scale(0); transition: transform .5s var(--suave); }
.flotante.on { transform: scale(1); }
.flotante svg { width: 28px; height: 28px; fill: #fff; }

/* ---------- Tablet y celular ---------- */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .nav { grid-template-columns: 1fr auto; }
  .nav .boton { grid-column: 2; }
  .aparts__cuerpo { grid-template-columns: 1fr; }
  .aparts__lista { flex-direction: row; overflow-x: auto; border-top: 0; gap: 26px; scrollbar-width: none; }
  .aparts__lista::-webkit-scrollbar { display: none; }
  .aparts__lista button { flex: 0 0 auto; padding: 10px 0 14px; font-size: 28px; border-bottom: 2px solid transparent; }
  .aparts__lista button[aria-selected="true"] { padding-left: 0; border-bottom-color: #a7783a; }
  .aparts__lista button small { display: none; }
  .spa { grid-template-columns: 1fr; }
  .consultar__caja { grid-template-columns: minmax(0, 1fr); }
  .distancias { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  body { font-size: 17px; }
  .nav { height: 70px; }
  .nav .palabra { width: 100px; height: 21px; }
  .hero { padding-bottom: 28px; }
  .hero__titulo { margin-bottom: 30px; font-size: clamp(54px, 15vw, 84px); }
  .hero__bajar { display: none; }
  .hero .volanta { font-size: 11px; letter-spacing: .16em; gap: 10px; }
  .hero .volanta::before { width: 18px; }
  .villa__velo { background: linear-gradient(180deg, var(--noche) 0%, rgba(12,14,18,.35) 22%, rgba(12,14,18,.7) 55%, rgba(12,14,18,.94) 100%); }
  .barra { grid-template-columns: 1fr 1fr; border-radius: 20px; padding: 6px; }
  .barra label { padding: 12px 14px; border-right: 0; border-bottom: 1px solid var(--linea); }
  .barra label:nth-child(1) { border-right: 1px solid var(--linea); }
  .barra .barra__chico { grid-column: 1 / -1; }
  .barra .boton { grid-column: 1 / -1; margin-top: 6px; border-radius: 14px; }
  .cifras { grid-template-columns: 1fr; gap: 26px; }
  .cifras > div { display: flex; align-items: baseline; gap: 18px; }
  .cifras dd { margin: 0; }

  /* En el celular el día se recorre deslizando, sin fijar la pantalla */
  .dia { height: auto; padding: 100px 0 70px; }
  .dia__fijo { position: static; height: auto; display: block; padding: 0; }
  .dia__fijo::before { display: none; }
  .dia__cabeza { margin-bottom: 26px; }
  .dia__reloj { display: none; }
  .dia__pista { margin: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 14px; padding-bottom: 10px; transform: none !important; }
  .dia__pista::-webkit-scrollbar { display: none; }
  .toma { width: 84vw !important; scroll-snap-align: center; }
  .toma__foto { aspect-ratio: 4 / 5; }
  .toma__foto img { transform: none; }
  .toma figcaption { display: block; margin-top: 18px; }
  .toma figcaption b { display: block; font-size: 28px; margin-bottom: 8px; }
  .toma__hora { display: block !important; }
  .toma figcaption span { font-size: 16px; }
  .dia__barra { display: none; }

  .aparts__fotos { aspect-ratio: 4 / 3.4; }
  .aparts__miniaturas button { width: 74px; }
  .aparts__ficha h3 { font-size: 44px; }
  .compara { margin: 0; border-radius: 0; aspect-ratio: 4 / 5; }
  .compara__rotulo { top: 18px; } .compara__rotulo--a { left: 18px; } .compara__rotulo--b { right: 18px; }
  .compara__tirador { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .spa__foto { margin: 0 calc(var(--margen) * -1); border-radius: 0; }
  .carta li { font-size: 24px; }
  .villa { min-height: 92vh; }
  .distancias { grid-template-columns: 1fr 1fr; gap: 6px 20px; margin-top: 40px; }
  .distancias b { font-size: 32px; }
  .consultar__velo { background: linear-gradient(180deg, var(--noche) 0%, rgba(12,14,18,.75) 30%, rgba(12,14,18,.92) 100%); }
  .form { padding: 22px; }
  .form .boton { font-size: 13px; letter-spacing: .05em; padding: 0 20px; }
  .datos { grid-template-columns: 1fr; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .entra, .sube { opacity: 1; transform: none; }
}

/* =========================================================
   Páginas interiores: aparts, spa, la Villa y las fiestas
   ========================================================= */
.ph { position: relative; height: 82vh; height: 82svh; min-height: 560px; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--margen) clamp(48px, 7vh, 80px); overflow: hidden; }
.ph__foto { position: absolute; inset: 0; }
.ph__foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); animation: acercar 3s var(--suave) forwards; }
.ph__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,14,18,.6) 0%, rgba(12,14,18,0) 26%, rgba(12,14,18,.15) 50%, rgba(12,14,18,.88) 90%, var(--noche) 100%); }
.ph__txt { position: relative; max-width: 1500px; width: 100%; margin: 0 auto; }
.migas { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; padding: 0; list-style: none; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--arena-2); }
.migas li + li::before { content: "/"; margin-right: 10px; opacity: .5; }
.migas a { text-decoration: none; color: var(--ambar-2); }
.ph h1 { margin: 0; font: 400 clamp(52px, 8.4vw, 140px)/.92 var(--serif); letter-spacing: -.02em; max-width: 1300px; }
.ph h1 em { display: block; font-style: italic; color: var(--ambar-2); }
.ph__dato { margin: 26px 0 0; font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--arena); }

.pc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: clamp(40px, 7vw, 130px); padding: clamp(70px, 9vw, 130px) var(--margen) clamp(80px, 9vw, 130px); max-width: 1500px; margin: 0 auto; align-items: start; }
.texto { max-width: 720px; }
.texto .entrada { margin: 0 0 34px; font: 400 clamp(28px, 2.8vw, 40px)/1.2 var(--serif); color: var(--arena); }
.texto p { margin: 0 0 22px; color: var(--arena-2); font-size: 18.5px; line-height: 1.7; }
.texto p strong { color: var(--arena); font-weight: 600; }
.texto h2 { margin: 64px 0 22px; font: 400 clamp(34px, 3.4vw, 50px)/1.05 var(--serif); }
.texto h2 em { font-style: italic; color: var(--ambar-2); }
.texto a { color: var(--ambar-2); text-decoration: none; border-bottom: 1px solid rgba(233,196,140,.35); }
.texto a:hover { border-color: var(--ambar-2); }
.lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; border-top: 1px solid var(--linea); }
.lista li { padding: 14px 0 14px 22px; border-bottom: 1px solid var(--linea); position: relative; font-size: 16.5px; color: var(--arena); }
.lista li::before { content: ""; position: absolute; left: 2px; top: 23px; width: 6px; height: 6px; border-radius: 50%; background: var(--ambar); }
.tabla { width: 100%; border-collapse: collapse; border-top: 1px solid var(--linea); }
.tabla td { padding: 15px 0; border-bottom: 1px solid var(--linea); font-size: 17px; }
.tabla td:last-child { text-align: right; font: 400 24px/1 var(--serif); color: var(--ambar-2); white-space: nowrap; padding-left: 20px; }
.nota { margin-top: 30px; padding: 22px 26px; border-left: 2px solid var(--ambar); background: rgba(236,226,208,.04); color: var(--arena-2); font-size: 16.5px; }
.nota strong { color: var(--arena); }

.reserva { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 14px; padding: 30px; border-radius: 8px; background: var(--noche-2); border: 1px solid var(--linea); }
.reserva h2 { margin: 0 0 4px; font: 400 32px/1.05 var(--serif); }
.reserva > p { margin: 0 0 8px; color: var(--arena-2); font-size: 15.5px; }
.reserva label { display: flex; flex-direction: column; gap: 6px; padding: 11px 15px; border: 1px solid var(--linea); border-radius: 6px; min-width: 0; transition: border-color .3s; }
.reserva label:focus-within { border-color: var(--ambar); }
.reserva label span { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ambar-2); }
.reserva input, .reserva select { min-width: 0; width: 100%; border: 0; background: none; padding: 0; font-size: 17px; outline: none; color-scheme: dark; }
.reserva select option { color: #000; }
.reserva__fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.reserva .boton { font-size: 13px; letter-spacing: .05em; padding: 0 20px; }
.reserva__tel { margin: 4px 0 0; text-align: center; font-size: 14.5px; color: var(--arena-2); }
.reserva__tel a { color: var(--arena); }

.galeria { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; padding: 0 var(--margen); max-width: 1640px; margin: 0 auto; }
.galeria figure { margin: 0; overflow: hidden; border-radius: 4px; cursor: zoom-in; background: var(--noche-2); }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--suave); }
.galeria figure:hover img { transform: scale(1.04); }
.galeria figure:nth-child(1) { grid-column: span 7; aspect-ratio: 4 / 3; }
.galeria figure:nth-child(2) { grid-column: span 5; }
.galeria figure:nth-child(3) { grid-column: span 5; aspect-ratio: 4 / 3; }
.galeria figure:nth-child(4) { grid-column: span 7; }
.galeria--2 figure:nth-child(2) { aspect-ratio: auto; }
.galeria--3 figure:nth-child(3) { grid-column: span 12; aspect-ratio: 21 / 9; }

.visor { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 4vw; background: rgba(8,9,11,.94); opacity: 0; pointer-events: none; transition: opacity .4s; cursor: zoom-out; }
.visor.on { opacity: 1; pointer-events: auto; }
.visor img { max-width: 100%; max-height: 100%; border-radius: 4px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }

.otros { padding: clamp(100px, 11vw, 160px) var(--margen) clamp(90px, 10vw, 140px); max-width: 1640px; margin: 0 auto; }
.otros__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); }
.tarjeta { display: block; text-decoration: none; color: var(--arena); }
.tarjeta__foto { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--noche-2); }
.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--suave); }
.tarjeta:hover .tarjeta__foto img { transform: scale(1.05); }
.tarjeta h3 { margin: 20px 0 6px; font: 400 32px/1.1 var(--serif); }
.tarjeta p { margin: 0; color: var(--arena-2); font-size: 15.5px; }
.tarjeta__ir { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ambar); }

.ver-mas { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: inherit; border-bottom: 1px solid currentColor; padding-bottom: 4px; }

.pie__mapa { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 12px 70px; margin: 0 auto 44px; text-align: left; }
.pie__mapa p { margin: 0 0 10px !important; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ambar); }
.pie__mapa ul { list-style: none; margin: 0; padding: 0; }
.pie__mapa li { margin: 0 0 8px; }
.pie__mapa a { border: 0 !important; color: var(--arena-2); }
.pie__mapa a:hover { color: var(--arena); }

@media (max-width: 1100px) {
  .pc { grid-template-columns: minmax(0, 1fr); }
  .reserva { position: static; max-width: 560px; }
  .otros__lista { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .ph { height: 74svh; min-height: 480px; }
  .ph h1 { font-size: clamp(44px, 12.5vw, 72px); }
  .migas { font-size: 11px; margin-bottom: 18px; }
  .lista { grid-template-columns: 1fr; }
  .texto p { font-size: 17px; }
  .galeria { grid-template-columns: 1fr 1fr; gap: 8px; }
  .galeria figure:nth-child(n) { grid-column: span 2; aspect-ratio: 4 / 3; }
  .galeria figure:nth-child(2), .galeria figure:nth-child(3) { grid-column: span 1; aspect-ratio: 1; }
  .galeria--2 figure:nth-child(2), .galeria--3 figure:nth-child(3) { grid-column: span 2; aspect-ratio: 4 / 3; }
  .galeria--3 figure:nth-child(2) { grid-column: span 2; aspect-ratio: 4 / 3; }
  .otros__lista { grid-template-columns: 1fr; }
  .reserva { padding: 22px; }
  .pie__mapa { grid-template-columns: 1fr 1fr; gap: 26px 30px; }
}
.ficha .ver-mas { display: flex; width: fit-content; margin-top: 22px; color: var(--tinta-2); }
.ficha .ver-mas:hover { color: var(--tinta); }
.otros__lista:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1100px; }
@media (max-width: 720px) { .otros__lista:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; } }