/* Oasis Eco Hotel — único CSS del sitio. Móvil primero. */

:root {
  --arena: #F6F1E9;
  --arena-2: #EDE4D6;
  --blanco: #FFFDF9;
  --carbon: #322E2F;
  --carbon-2: #262223;
  --texto: #322E2F;
  --texto-suave: #5E5657;
  --sol: #FF8800;
  --sol-2: #FFA033;
  --cafe: #654430;
  --linea: #D9CFBF;
  --borde-campo: #8C8176;
  --en-oscuro: #F6F1E9;
  --en-oscuro-suave: #CFC6BC;
  --error: #A42A12;
  --ok: #2F6B2A;
  --f-titulo: 'Marcellus', 'Times New Roman', serif;
  --f-texto: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --alto-cabecera: 72px;
  --radio: 14px;
  --sombra: 0 1px 2px rgb(50 46 47 / .06), 0 8px 24px rgb(50 46 47 / .08);
  --ancho: 1180px;
  --gutter: 16px;
  --espacio-seccion: clamp(64px, 9vw, 120px);
}
@media (min-width: 720px) { :root { --gutter: 24px; } }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-cabecera) + 12px); }
body { margin: 0; background: var(--arena); color: var(--texto); font: 400 1.0625rem/1.65 var(--f-texto); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 400; line-height: 1.15; margin: 0 0 .5em; letter-spacing: .01em; }
h1 { font-size: clamp(2.4rem, 5.2vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); }
h1, h2, h3 { text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
.wrap { width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; }
.sprite { display: none; }
.icono { width: 24px; height: 24px; flex: none; }
.saltar { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--carbon); color: var(--arena); padding: 8px 14px; border-radius: 8px; }
.saltar:focus { left: 8px; }
/* Anillo de dos tonos: el carbón interior contrasta sobre fondos claros (arena, blanco) y el
   naranjo exterior sobre fondos oscuros (secciones en --carbon), donde el anillo interior se
   funde con el fondo. */
:focus-visible { outline: 3px solid var(--carbon); outline-offset: 2px; box-shadow: 0 0 0 8px var(--sol); }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .75em 1.4em; border-radius: 999px; border: 2px solid transparent; font: 600 1rem/1.1 var(--f-texto); text-decoration: none; text-align: center; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.boton-sol { background: var(--sol); color: var(--carbon); }
.boton-sol:hover { background: var(--sol-2); }
.boton-borde { border-color: currentColor; background: transparent; }
.boton-borde:hover { background: rgb(255 255 255 / .08); }
.boton-linea { border-color: var(--carbon); color: var(--carbon); background: transparent; }
.boton-linea:hover { background: var(--carbon); color: var(--arena); }
.boton-chico { min-height: 42px; padding: .55em 1.1em; font-size: .95rem; }
.boton[disabled] { opacity: .6; cursor: progress; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 50; background: rgb(246 241 233 / .94); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid rgb(50 46 47 / .08); }
.cabecera-fila { display: flex; align-items: center; gap: 16px; height: var(--alto-cabecera); }
.marca { display: flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; }
.marca img { height: 36px; width: auto; }
.marca-texto { display: flex; flex-direction: column; line-height: 1; }
.marca-nombre { font-family: var(--f-titulo); font-size: 1.35rem; letter-spacing: .22em; text-transform: uppercase; }
.marca-sub { font-family: var(--f-titulo); font-size: .62rem; letter-spacing: .42em; text-transform: uppercase; color: var(--texto-suave); margin-top: 4px; }
.menu { display: flex; align-items: center; gap: 26px; }
.menu a { text-decoration: none; font-weight: 500; font-size: .98rem; }
.menu a:hover { color: var(--cafe); }
.menu-tel { color: var(--cafe); font-variant-numeric: tabular-nums; }
.menu-boton { display: none; }
@media (max-width: 1099px) {
  .menu { position: fixed; inset: var(--alto-cabecera) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 20px; background: var(--arena); border-bottom: 1px solid var(--linea); box-shadow: var(--sombra); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s; }
  .menu[data-abierto] { opacity: 1; visibility: visible; transform: none; }
  .menu a { padding: 14px 4px; border-bottom: 1px solid var(--linea); font-size: 1.08rem; }
  .menu a:last-child { border-bottom: 0; }
  .menu-boton { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
  .menu-boton span { display: block; height: 2px; background: var(--carbon); border-radius: 2px; transition: transform .2s, opacity .2s; }
  .menu-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 479px) {
  .cabecera-fila { gap: 12px; }
  .marca img { height: 28px; }
  .marca-nombre { font-size: 1.1rem; }
}
/* Teléfonos de 360 px: todo en una línea, sin que «Eco Hotel» se parta en dos. */
@media (max-width: 399px) {
  .cabecera-fila { gap: 10px; }
  .marca { gap: 8px; }
  .marca img { height: 24px; }
  .marca-nombre { font-size: 1.02rem; letter-spacing: .18em; }
  .marca-sub { letter-spacing: .3em; white-space: nowrap; }
  .boton-chico { padding-inline: .9em; }
}

/* Inicio */
.hero { position: relative; overflow: hidden; background: var(--carbon); color: var(--en-oscuro); }
/* Respaldo para navegadores sin 100svh: si no lo entienden, ignoran la declaración siguiente
   y se quedan con esta. */
.hero-grid { display: grid; min-height: min(calc(100vh - var(--alto-cabecera)), 860px); min-height: min(calc(100svh - var(--alto-cabecera)), 860px); }
.hero-texto { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 48px var(--gutter) clamp(88px, 12vw, 140px); }
.hero-foto { position: absolute; inset: 0; margin: 0; overflow: hidden; }
/* Cada picture ocupa todo el figure, así pueden superponerse durante el fundido. */
.hero-foto picture { position: absolute; inset: 0; transition: opacity 1.2s ease; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transform-origin: 60% 40%; }
/* Rotación: la foto en turno y la que va saliendo quedan visibles (la saliente se desvanece);
   el resto espera oculta. El zoom corre solo en la que se ve, con una única declaración para
   activa y saliente: así no se reinicia al pasar de una a otra y sí lo hace al reactivarse. */
.hero-foto[data-rotacion] picture:not(.activa):not(.saliente) { opacity: 0; }
.hero-foto[data-rotacion] picture.saliente { opacity: 0; }
.hero-foto[data-rotacion] picture.activa img,
.hero-foto[data-rotacion] picture.saliente img { animation: acercar 8s ease-out both; }
/* En móvil el texto va sobre la foto, anclado abajo: el velo se mide desde abajo en px para
   que el antetítulo naranjo quede sobre un fondo oscuro (AA) aunque cambie el alto de pantalla. */
.hero-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(38 34 35 / .94) 0, rgb(38 34 35 / .86) 480px, rgb(38 34 35 / .12) 100%); }
@keyframes acercar { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero h1 { max-width: 14ch; }
.hero-bajada { max-width: 46ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--en-oscuro-suave); }
.hero .boton-borde { color: var(--en-oscuro); }
/* Botón de pausa: esquina superior derecha del área de la foto. En móvil la foto cubre todo
   el inicio, así que también queda arriba a la derecha de la sección. */
.hero-pausa { position: absolute; z-index: 4; top: 16px; right: 16px; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: rgb(50 46 47 / .6); color: var(--arena); cursor: pointer; }
/* El atributo hidden (mismo peso que la clase) no le gana a la regla de arriba sin esto. */
.hero-pausa[hidden] { display: none; }
.hero-pausa .icono { width: 20px; height: 20px; }
.hero-pausa .icono-reanudar { display: none; }
.hero-pausa[aria-pressed="true"] .icono-pausa { display: none; }
.hero-pausa[aria-pressed="true"] .icono-reanudar { display: block; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .hero-texto { justify-content: center; padding: 64px 56px 120px max(var(--gutter), calc((100vw - var(--ancho)) / 2)); }
  /* La foto no debe fijar el alto de la fila (su proporción 3:4 la estiraría más allá de la pantalla). */
  .hero-foto { position: relative; inset: auto; }
  .hero-foto::after { background: linear-gradient(90deg, rgb(50 46 47 / .55) 0%, rgb(50 46 47 / 0) 28%); }
}
.cerro { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; width: 100%; height: clamp(36px, 6vw, 90px); fill: var(--arena); pointer-events: none; }

/* Secciones */
.seccion { padding-block: var(--espacio-seccion); }
.seccion-alterna { background: var(--arena-2); }
.antetitulo { margin: 0 0 14px; font-family: var(--f-titulo); font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; color: var(--cafe); }
.hero .antetitulo, .sostenible .antetitulo, .pagina-cabeza .antetitulo { color: var(--sol); }
.titulo { display: flex; align-items: baseline; gap: .45em; }
.titulo::before { content: ""; flex: none; width: .34em; height: .34em; border-radius: 50%; background: var(--sol); transform: translateY(-.12em); }
.intro { max-width: 62ch; color: var(--texto-suave); }
.dos-col { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) {
  .dos-col { grid-template-columns: 1fr 1fr; gap: 64px; }
  .dos-col.invertida > :first-child { order: 2; }
}
.foto { margin: 0; overflow: hidden; border-radius: var(--radio); background: var(--arena-2); }
.foto picture { display: block; height: 100%; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto-vertical { aspect-ratio: 4 / 5; }
.foto-ancha { aspect-ratio: 16 / 10; }
.foto-cancha { aspect-ratio: 1600 / 616; }

/* El hotel */
/* Dos columnas como máximo, y solo si cabe «Estacionamiento» en una línea (≥ 220 px por ítem). */
.comodidades { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(220px, 40%)), 1fr)); gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.comodidades li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; font-weight: 500; line-height: 1.3; }
.comodidades .icono { width: 28px; height: 28px; color: var(--cafe); }
.comodidades .destacada { grid-column: 1 / -1; background: var(--carbon); border-color: var(--carbon); color: var(--en-oscuro); }
.comodidades .destacada .icono { color: var(--sol); }

/* Habitaciones */
.hab-cabecera { display: grid; gap: 24px; align-items: end; margin-bottom: 40px; }
@media (min-width: 900px) { .hab-cabecera { grid-template-columns: 1.2fr 1fr; gap: 64px; } }
/* 1, 2 o 4 columnas (nunca 3 con una tarjeta sola abajo); los cortes calzan con el «sizes» de las fotos.
   La foto es vertical solo en la fila de 4; en 1 y 2 columnas se recorta a 4:3 para no alargar la página. */
.hab-grilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .hab-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .hab-grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hab { display: flex; flex-direction: column; overflow: hidden; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
.hab .foto { aspect-ratio: 4 / 3; border-radius: 0; }
.hab .foto img { object-position: 50% 62%; }
@media (min-width: 1180px) { .hab .foto { aspect-ratio: 4 / 5; } .hab .foto img { object-position: 50% 50%; } }
.hab-cuerpo { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 20px 20px 22px; }
.hab h3 { margin: 0; }
.precio { margin: 4px 0 16px; color: var(--texto-suave); font-size: .95rem; }
.precio strong { display: block; font-family: var(--f-titulo); font-weight: 400; font-size: 1.9rem; line-height: 1.1; color: var(--texto); }
.hab .boton { width: 100%; margin-top: auto; padding-inline: 1em; }

/* Servicios */
.servicio { margin-top: 40px; }
.servicio + .servicio { margin-top: clamp(56px, 8vw, 96px); }
.galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.galeria li:first-child { grid-column: 1 / -1; }
.galeria a { display: block; overflow: hidden; border-radius: 12px; cursor: zoom-in; }
.galeria picture { display: block; }
.galeria img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .4s; }
.galeria li:first-child img { aspect-ratio: 16 / 10; }
.galeria a:hover img { transform: scale(1.03); }
.fotos-verdes { display: grid; gap: 10px; }
/* Junto a la galería alta del desayuno, el texto arranca arriba y acompaña el scroll. */
@media (min-width: 900px) {
  .servicio:has(> .galeria) { align-items: start; }
  .servicio:has(> .galeria) > div { position: sticky; top: calc(var(--alto-cabecera) + 40px); }
}
.sostenible { position: relative; overflow: hidden; padding: clamp(32px, 5vw, 64px); padding-right: clamp(96px, 12vw, 240px); background: var(--carbon); color: var(--en-oscuro-suave); border-radius: 24px; }
.sostenible h3 { color: var(--en-oscuro); }
.sostenible > * { position: relative; z-index: 1; max-width: 60ch; }
.sostenible::after { content: ""; position: absolute; top: clamp(-90px, -6vw, -50px); right: clamp(-90px, -6vw, -50px); width: clamp(140px, 22vw, 280px); aspect-ratio: 1; border-radius: 50%; background: var(--sol); }
/* En móvil el sol se achica a una esquina y el texto recupera todo el ancho. */
@media (max-width: 599px) {
  .sostenible { padding-right: clamp(32px, 5vw, 64px); }
  .sostenible::after { top: -60px; right: -60px; width: 120px; }
}

/* Ubicación */
.direccion { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0 0; font-style: normal; font-weight: 600; }
.direccion .icono { color: var(--cafe); margin-top: 2px; }

/* Contacto y formularios */
.contacto-grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .contacto-grid { grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; } }
.canales { display: grid; gap: 18px; margin: 24px 0 0; padding: 0; list-style: none; }
.canales li { display: flex; align-items: flex-start; gap: 14px; }
.canales .icono { color: var(--cafe); margin-top: 3px; }
.canales a { font-weight: 600; text-decoration: none; }
.canales a:hover { text-decoration: underline; }
.canales small { display: block; color: var(--texto-suave); font-size: .9rem; }
.tarjeta-form { padding: clamp(20px, 4vw, 36px); background: var(--blanco); border: 1px solid var(--linea); border-radius: 20px; box-shadow: var(--sombra); }
.campos { display: grid; gap: 18px; }
@media (min-width: 720px) {
  .campos-2 { grid-template-columns: 1fr 1fr; }
  .campo-ancho { grid-column: 1 / -1; }
}
.campo { min-width: 0; }
.campo label, .campo legend { display: block; margin-bottom: 6px; padding: 0; font-weight: 600; font-size: .95rem; }
.opcional { font-weight: 400; color: var(--texto-suave); }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; padding: .7em .85em; font: inherit; color: var(--texto); background: #fff; border: 1.5px solid var(--borde-campo); border-radius: 10px; }
.campo textarea { min-height: 140px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--cafe); }
.campo [aria-invalid="true"] { border-color: var(--error); }
.campo-error { margin: 6px 0 0; color: var(--error); font-size: .9rem; }
.campo-error:empty { display: none; }
fieldset.campo { margin: 0; padding: 0; border: 0; }
.opciones { display: flex; flex-wrap: wrap; gap: 20px; }
.opciones label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; }
.opciones input { width: 20px; height: 20px; min-height: 0; accent-color: var(--cafe); }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 22px; }
.form-msg { margin: 0; font-weight: 500; }
.form-msg.ok { color: var(--ok); }
.form-msg.err { color: var(--error); }
.nota { margin: 16px 0 0; font-size: .9rem; color: var(--texto-suave); }

/* Pie */
/* Abajo deja lugar al botón flotante de WhatsApp para que no tape la línea legal. */
.pie { position: relative; margin-top: clamp(40px, 6vw, 90px); padding: 72px 0 96px; background: var(--carbon); color: var(--en-oscuro-suave); }
.pie .cerro { top: auto; bottom: 100%; fill: var(--carbon); }
.pie-grid { display: grid; gap: 36px; }
@media (min-width: 900px) { .pie-grid { grid-template-columns: 1.3fr 1fr 1.2fr; } }
.pie-logo { width: 170px; height: auto; }
.pie-frase { max-width: 34ch; margin-top: 16px; }
.pie h2 { margin: 0 0 14px; font-size: .85rem; letter-spacing: .24em; text-transform: uppercase; color: var(--sol); }
.pie ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pie a { color: var(--en-oscuro); text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie-legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgb(246 241 233 / .14); font-size: .88rem; }
.pie-legal p { margin: 0; }

/* WhatsApp */
.whatsapp { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 20px 0 16px; background: var(--sol); color: var(--carbon); border-radius: 999px; box-shadow: 0 6px 20px rgb(38 34 35 / .28); font-weight: 600; text-decoration: none; }
.whatsapp .icono { width: 26px; height: 26px; }
@media (max-width: 599px) {
  .whatsapp { width: 56px; padding: 0; justify-content: center; }
  .whatsapp span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Visor de fotos */
.visor { max-width: min(92vw, 900px); max-height: 92vh; padding: 0; border: 0; background: transparent; }
.visor::backdrop { background: rgb(38 34 35 / .88); }
.visor-marco img { max-height: 84vh; width: auto; margin: auto; border-radius: 12px; }
.visor-cerrar { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--arena); color: var(--carbon); font-size: 1.6rem; line-height: 1; cursor: pointer; }

/* Aparición al hacer scroll (la agrega el JS; nunca con movimiento reducido) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Misma especificidad que la regla que enciende el zoom (arriba), para seguir ganando. */
  .hero-foto[data-rotacion] picture.activa img,
  .hero-foto[data-rotacion] picture.saliente img { animation: none; }
  .galeria img { transition: none; }
}

/* Página de reservas */
.pagina-cabeza { position: relative; overflow: hidden; padding: 56px 0 clamp(88px, 11vw, 130px); background: var(--carbon); color: var(--en-oscuro); }
.pagina-cabeza h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
.pagina-cabeza p { max-width: 56ch; color: var(--en-oscuro-suave); }
.seccion-reserva { padding-top: 40px; }
.reserva-grid { display: grid; gap: 32px; }
@media (min-width: 960px) { .reserva-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } }
.grupo { margin: 0 0 28px; padding: 0; border: 0; min-width: 0; }
.grupo > legend { margin-bottom: 14px; padding: 0; font-family: var(--f-titulo); font-size: 1.4rem; }
.aside-contacto { padding: 28px; background: var(--arena-2); border-radius: 20px; }
@media (min-width: 960px) { .aside-contacto { position: sticky; top: calc(var(--alto-cabecera) + 24px); } }
.aside-contacto h2 { font-size: 1.6rem; }
.aside-contacto h3 { margin-top: 28px; font-size: 1.2rem; }
.tarifas { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tarifas li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px dashed var(--linea); }

/* 404 */
.error-404 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; min-height: 100svh; }
.error-404 img { height: 48px; width: auto; margin-bottom: 16px; }