/* Hotel Avectua — hoja única.
   Paleta tomada del logo real (círculo bordó con dos palomas) y del wordmark
   dorado. Sin fuentes web a propósito: cero requests de tipografía es la mejor
   jugada de Core Web Vitals, y el stack del sistema en iPhone/Mac ya da la
   serif elegante que el lugar pide. */

:root {
  --bordo: #6D1220;
  --bordo-claro: #8E1A2C;
  --negro: #0D0709;
  --carbon: #171013;
  --carbon-2: #1F1519;
  --crema: #F5EFE6;
  --crema-2: #C9BFB4;
  --dorado: #C9A227;
  --linea: #33242A;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  --ancho: 1140px;
  --radio: 14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--negro);
  color: var(--crema);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
p { margin: 0; }

a { color: inherit; }

.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
.estrecha { max-width: 780px; }
.centro { text-align: center; }

.salto {
  position: absolute; left: -9999px;
  background: var(--dorado); color: var(--negro); padding: 10px 16px; z-index: 200;
}
.salto:focus { left: 12px; top: 12px; }

:focus-visible { outline: 2px solid var(--dorado); outline-offset: 3px; }

/* ── Botones ──────────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px;
  font: 600 0.95rem/1 var(--sans); text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.boton svg { width: 18px; height: 18px; flex: none; }
.boton-solido { background: var(--bordo); color: #fff; }
.boton-solido:hover { background: var(--bordo-claro); }
.boton-borde { border-color: var(--linea); color: var(--crema); }
.boton-borde:hover { border-color: var(--dorado); color: var(--dorado); }
.boton-grande { padding: 15px 28px; font-size: 1.02rem; }
.boton:active { transform: translateY(1px); }

.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.acciones.centrado { justify-content: center; }

/* ── Barra superior ───────────────────────────────────────────────── */
.barra {
  position: sticky; top: 0; z-index: 60;
  background: rgba(13, 7, 9, .86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.barra-int { display: flex; align-items: center; gap: 16px; padding-top: 10px; padding-bottom: 10px; }
.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
/* El PNG del logo trae un margen blanco; recortándolo en círculo desaparece. */
.marca-logo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; transform: scale(1.06); }
.marca-txt { display: flex; flex-direction: column; line-height: 1.1; }
.marca-txt strong { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; }
.marca-txt small { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--crema-2); }

.barra-abierto {
  display: flex; align-items: center; gap: 8px;
  font-size: .85rem; color: var(--crema-2); letter-spacing: .02em;
}
.punto {
  width: 8px; height: 8px; border-radius: 50%; background: #3FBF6A;
  box-shadow: 0 0 0 3px rgba(63, 191, 106, .18);
}

/* ── Hero ─────────────────────────────────────────────────────────── */
/* La foto de la fachada ya trae el logo y el lema quemados en la imagen, así
   que el texto no va encima: va al lado. Así el lockup de la foto se lee como
   parte de la foto y no compite con el h1. */
.hero { padding: 56px 0 68px; border-bottom: 1px solid var(--linea); }
.hero-int { display: grid; grid-template-columns: 1fr 1.02fr; gap: 52px; align-items: center; }
.lema {
  font-size: .78rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--dorado); margin-bottom: 18px;
}
.hero-txt h1 { max-width: 18ch; }
.bajada { margin-top: 18px; max-width: 46ch; color: var(--crema-2); font-size: 1.06rem; }
.hero-foto { margin: 0; border-radius: var(--radio); overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.hero-foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ── Tira de datos ────────────────────────────────────────────────── */
.tira { background: var(--bordo); }
.tira-int {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  padding-top: 20px; padding-bottom: 20px; text-align: center;
}
.tira-int p { display: flex; flex-direction: column; gap: 2px; }
.tira-int strong { font-family: var(--serif); font-size: 1.08rem; }
.tira-int span { font-size: .8rem; color: rgba(255,255,255,.72); }

/* ── Secciones ────────────────────────────────────────────────────── */
.seccion { padding: 76px 0; }
.seccion-alt { background: var(--carbon); }
.intro { margin-top: 14px; max-width: 62ch; color: var(--crema-2); }
.seccion h2 + .intro { margin-bottom: 36px; }

/* ── Galería ──────────────────────────────────────────────────────── */
.galeria {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px;
}
.galeria-item {
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  background: var(--carbon); border-radius: var(--radio); overflow: hidden;
}
.galeria-item img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform .4s ease, opacity .2s ease;
}
.galeria-item:hover img { transform: scale(1.04); opacity: .92; }

/* ── Servicios ────────────────────────────────────────────────────── */
.servicios {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px;
}
.servicios li {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 18px; background: var(--carbon-2);
  border: 1px solid var(--linea); border-radius: var(--radio);
  font-size: .96rem;
}
.serv-ico {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(201, 162, 39, .1); color: var(--dorado);
}
.serv-ico svg { width: 20px; height: 20px; }

/* ── Ambiente ─────────────────────────────────────────────────────── */
.ambiente { display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: center; }
.ambiente-fotos { display: grid; gap: 14px; }
.ambiente-fotos img { border-radius: var(--radio); aspect-ratio: 16 / 9; object-fit: cover; }

/* ── Ubicación ────────────────────────────────────────────────────── */
.ubicacion { display: grid; grid-template-columns: 1fr 1.15fr; gap: 44px; align-items: center; }
.ubicacion address {
  font-style: normal; margin: 26px 0; padding-left: 16px;
  border-left: 2px solid var(--bordo); line-height: 1.8;
}
.ubicacion address strong { font-family: var(--serif); font-size: 1.1rem; }
.ubicacion address a { color: var(--dorado); text-decoration: none; }
.ubicacion address a:hover { text-decoration: underline; }
.mapa { border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea); }
.mapa iframe { width: 100%; height: 360px; border: 0; display: block; filter: grayscale(.3) contrast(1.05); }

/* ── FAQ ──────────────────────────────────────────────────────────── */
.faq { margin-top: 32px; border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
  cursor: pointer; padding: 19px 40px 19px 0; position: relative;
  font-family: var(--serif); font-size: 1.1rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; color: var(--dorado); font-family: var(--sans); line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details p { padding: 0 40px 20px 0; color: var(--crema-2); }

/* ── Cierre ───────────────────────────────────────────────────────── */
.cierre {
  padding: 84px 0;
  background: radial-gradient(120% 100% at 50% 0%, #2A0B12 0%, var(--negro) 70%);
  border-top: 1px solid var(--linea);
}
.cierre .intro { margin-inline: auto; }

/* ── Pie ──────────────────────────────────────────────────────────── */
.pie { background: var(--carbon); border-top: 1px solid var(--linea); }
.pie-int {
  display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center;
  padding-top: 30px; padding-bottom: 30px;
}
.pie-marca { font-size: .95rem; }
.pie-chico { font-size: .82rem; color: var(--crema-2); margin-top: 5px; }
.gryff {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; font-size: .85rem; color: var(--crema-2);
  padding: 9px 14px; border: 1px solid var(--linea); border-radius: 999px;
  transition: border-color .15s ease;
}
.gryff:hover { border-color: #FF5C00; }
.gryff svg { width: 19px; height: 19px; color: #FF5C00; flex: none; }
.gryff strong { color: var(--crema); font-weight: 700; letter-spacing: .04em; }

/* ── Botón flotante ───────────────────────────────────────────────── */
.flotante {
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 50%; background: #25D366; color: #0B1F13;
  box-shadow: 0 8px 26px rgba(0,0,0,.45);
  transition: transform .15s ease;
}
.flotante:hover { transform: scale(1.06); }
.flotante svg { width: 30px; height: 30px; }

/* ── Visor de fotos ───────────────────────────────────────────────── */
#visor {
  border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 92vh;
  overflow: visible;
}
#visor::backdrop { background: rgba(5, 3, 4, .9); }
#visor img { border-radius: var(--radio); max-height: 92vh; width: auto; }
#visor-cerrar {
  position: absolute; top: -13px; right: -13px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linea);
  background: var(--negro); color: var(--crema); font-size: 1.5rem; line-height: 1; cursor: pointer;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-int, .ambiente, .ubicacion { grid-template-columns: 1fr; gap: 28px; }
  .hero-txt h1 { max-width: 24ch; }
  .tira-int { grid-template-columns: repeat(2, 1fr); gap: 16px 4px; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .seccion { padding: 56px 0; }
  .barra-abierto { display: none; }
  .marca-txt small { display: none; }
  .hero { padding: 34px 0 44px; }
  .acciones .boton { flex: 1 1 100%; }
  .galeria { grid-template-columns: 1fr; }
  /* El flotante de WhatsApp no puede taparle el crédito de Gryff. */
  .pie-int { padding-bottom: 92px; }
}