/* =======================================================
   Villas Cangrejo — Hoja de estilos
   Diseño minimalista inspirado en rulebase.co, adaptado al
   hotel: fondo arena, tinta azul océano y acento coral (el
   color del cangrejo).
   Tipografías: Geist (títulos y texto), Geist Mono (etiquetas)
   y Fraunces itálica (palabras destacadas).
======================================================= */

/* ---------- Variables ---------- */
:root {
  --arena:        #efece5;   /* fondo general */
  --arena-2:      #e6e1d6;   /* rellenos, esqueletos de carga */
  --papel:        #f8f6f1;   /* tarjetas */
  --tinta:        #111a1c;   /* secciones oscuras */
  --tinta-2:      #1b2528;
  --texto:        #1b2022;
  --gris:         #55524b;   /* contraste ~7:1 sobre la arena */
  --gris-claro:   #77736b;
  --crema:        #ece6da;   /* texto sobre oscuro (color del logo) */
  --linea:        rgba(17, 26, 28, 0.12);
  --linea-clara:  rgba(236, 230, 218, 0.14);
  --coral:        #e2502b;
  --coral-oscuro: #c4421f;

  --f-sans:  'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:  'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --f-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-marca: 'Fraunces', Georgia, 'Times New Roman', serif;   /* gruesa (900) y suave, como el letrero */

  --radio: 4px;
  --max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --cabecera: 72px;
  --verde-wa: #0f7a3d;   /* verde WhatsApp oscuro: texto blanco legible */
  --suave: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* 112.5% = 18 px: letra base más grande, más fácil de leer */
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cabecera) + 16px); }
body {
  font-family: var(--f-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--arena);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* height: auto deja que el CSS (aspect-ratio) mande sobre el alto que traen las fotos */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

/* Transición suave al cambiar de página (navegadores que la soportan) */
@view-transition { navigation: auto; }
.cabecera { view-transition-name: cabecera; }

.contenedor { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.saltar {
  position: absolute; left: 1rem; top: -3rem; z-index: 1000;
  background: var(--tinta); color: var(--crema); padding: 0.5rem 0.8rem; border-radius: var(--radio);
}
.saltar:focus { top: 1rem; }

/* ---------- Tipografía ---------- */
.titulo-xl, .titulo-l, .titulo-m {
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.04;
}
.titulo-xl { font-size: clamp(2.3rem, 5.4vw, 4.1rem); }
.titulo-l  { font-size: clamp(1.85rem, 3.9vw, 2.9rem); }
.titulo-m  { font-size: clamp(1.35rem, 2.2vw, 1.65rem); letter-spacing: -0.02em; line-height: 1.15; }
.serif {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.gris { color: var(--gris); }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.15rem); line-height: 1.65; color: var(--gris); max-width: 36rem; }

/* Etiqueta mono con un cuadrito coral */
.etiqueta {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris);
}
.etiqueta::before { content: ''; width: 7px; height: 7px; background: var(--coral); border-radius: 1px; }

/* ---------- Botones y enlaces ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.3rem;
  border-radius: 2px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.boton-acento { background: var(--coral); color: #fff; }
.boton-acento:hover { background: var(--coral-oscuro); }
.boton-oscuro { background: var(--tinta); color: var(--crema); }
.boton-oscuro:hover { background: var(--tinta-2); }
.boton-wa { background: var(--verde-wa); color: #fff; }
.boton-wa:hover { background: #0b6332; }
.boton-claro { background: var(--crema); color: var(--tinta); }
.boton-claro:hover { background: #fff; }
.boton-linea { border: 1px solid currentColor; }
.boton-linea:hover { background: var(--texto); border-color: var(--texto); color: var(--arena); }
.oscuro .boton-linea:hover { background: var(--crema); border-color: var(--crema); color: var(--tinta); }
.boton-chico { min-height: 44px; padding: 0.55rem 1rem; font-size: 0.95rem; }

.flecha {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 500;
}
.flecha::after { content: '→'; transition: transform 0.2s ease; }
.flecha:hover::after, a:hover .flecha::after { transform: translateX(4px); }

/* ---------- Cabecera ---------- */
.cabecera {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--cabecera);
  display: flex; align-items: center; gap: 2rem;
  padding-inline: var(--gutter);
  background: rgba(239, 236, 229, 0.86);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--linea);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.marca { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1.12rem; font-weight: 500; letter-spacing: -0.03em; white-space: nowrap; }
.marca img { width: 28px; height: 28px; border-radius: 5px; }
.menu { display: flex; gap: 1.8rem; margin-left: auto; }
.menu a { font-size: 1rem; color: var(--gris); transition: color 0.2s ease; position: relative; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--texto); }
.menu a[aria-current="page"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--coral);
}
.cabecera-acciones { display: flex; align-items: center; gap: 0.7rem; }
/* Botón de idioma: dice "English" / "Español" */
.boton-idioma {
  min-height: 40px; padding: 0.4rem 0.8rem;
  font-size: 0.9rem; font-weight: 500;
  border: 1px solid var(--linea); border-radius: 2px;
  color: var(--texto); transition: border-color 0.2s ease, background-color 0.2s ease;
}
.boton-idioma:hover { border-color: var(--texto); }
/* Teléfono siempre visible en pantallas grandes */
.cabecera-tel { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.95rem; font-weight: 500; white-space: nowrap; }
.cabecera-tel svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cabecera-tel:hover { color: var(--coral-oscuro); }
@media (max-width: 1150px) { .cabecera-tel { display: none; } }
/* Botón del menú en celular: icono + la palabra "Menú" */
.menu-boton {
  display: none; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0 0.85rem;
  border: 1px solid var(--linea); border-radius: 2px; font-size: 0.95rem; font-weight: 500;
}
.menu-icono { position: relative; width: 18px; height: 12px; }
.menu-icono span {
  position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
  transition: transform 0.3s var(--suave), top 0.3s var(--suave);
}
.menu-icono span:first-child { top: 1px; }
.menu-icono span:last-child  { top: 9px; }
body.menu-abierto .menu-icono span:first-child { top: 5px; transform: rotate(45deg); }
body.menu-abierto .menu-icono span:last-child  { top: 5px; transform: rotate(-45deg); }

/* En la portada la cabecera empieza transparente sobre el fondo oscuro */
.pagina-inicio .cabecera:not(.solida) {
  background: transparent; border-color: transparent; color: var(--crema);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.pagina-inicio .cabecera:not(.solida) .menu a { color: rgba(236, 230, 218, 0.88); }
.pagina-inicio .cabecera:not(.solida) .menu a:hover { color: var(--crema); }
.pagina-inicio .cabecera:not(.solida) .boton-idioma,
.pagina-inicio .cabecera:not(.solida) .menu-boton { color: var(--crema); border-color: rgba(236, 230, 218, 0.3); }

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.seccion-borde { border-top: 1px solid var(--linea); }
.oscuro { background: var(--tinta); color: var(--crema); }
.oscuro .gris, .oscuro .lead { color: rgba(236, 230, 218, 0.82); }
.oscuro .etiqueta { color: rgba(236, 230, 218, 0.8); }
.encabezado { display: flex; flex-direction: column; gap: 1rem; margin-bottom: clamp(2.2rem, 5vw, 3.5rem); }

/* Cabecera de las páginas internas */
.pagina-cabecera { padding-top: calc(var(--cabecera) + clamp(3.5rem, 8vw, 6rem)); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.pagina-cabecera .titulo-xl { margin: 1.1rem 0 1.3rem; max-width: 15ch; }

/* ---------- Portada ---------- */
.hero {
  background: var(--tinta); color: var(--crema);
  padding-top: calc(var(--cabecera) + clamp(3rem, 7vw, 5.5rem));
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}
/* Logo grande y nombre con la letra del letrero */
.hero-cangrejo { width: clamp(110px, 15vw, 168px); height: auto; margin-inline: auto; }
.hero-titulo { margin: 1.3rem auto 1.5rem; }
.hero-marca {
  display: block;
  font-family: var(--f-marca); font-weight: 900;
  font-variation-settings: 'SOFT' 100, 'WONK' 0;
  font-size: clamp(2.7rem, 7.4vw, 5.4rem);
  letter-spacing: 0.015em; line-height: 1.02;
}
.hero-lema {
  display: block; margin-top: 1rem;
  font-size: clamp(1.3rem, 2.6vw, 1.95rem); font-weight: 400;
  letter-spacing: -0.025em; line-height: 1.25;
  color: rgba(236, 230, 218, 0.9);
}
.hero .lead { margin-inline: auto; color: rgba(236, 230, 218, 0.85); }
.hero-botones { display: flex; justify-content: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 2rem; }
.hero .boton-linea { color: var(--crema); border-color: var(--linea-clara); }

/* Foto enmarcada: mitad sobre lo oscuro, mitad sobre la arena */
.hero-foto { background: linear-gradient(var(--tinta) 55%, var(--arena) 55%); }
.hero-foto img {
  width: 100%; aspect-ratio: 16 / 7; object-fit: cover;
  object-position: 50% 72%;   /* encuadre: alberca y letrero, no el cielo */
  border-radius: var(--radio);
}
@media (max-width: 700px) { .hero-foto img { aspect-ratio: 4 / 3; } }

/* Lista de servicios (fija: el texto en movimiento cuesta leerlo) */
.servicios { padding-block: 3rem 0.5rem; }
.servicios > .contenedor > p { color: var(--gris); margin-bottom: 1.1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.6rem 1rem; background: var(--arena-2); border-radius: var(--radio);
  font-size: 1rem; letter-spacing: -0.01em;
}
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }

/* Cómo reservar en 3 pasos */
.pasos { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; counter-reset: paso; }
.paso { background: var(--papel); padding: 1.6rem 1.5rem 1.7rem; }
.paso-numero { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 1.4rem; border-radius: 50%; background: var(--coral); color: #fff; font-size: 1.15rem; font-weight: 600; }
.paso h3 { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 0.35rem; }
.paso p { color: var(--gris); }
@media (max-width: 800px) { .pasos { grid-template-columns: 1fr; } }

/* Cuatro rasgos con ilustraciones de línea */
.rasgos {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
}
.rasgo { padding: 1.4rem 1.3rem 1.5rem; border-left: 1px solid var(--linea); }
.rasgo:first-child { border-left: 0; }
.rasgo-dibujo { height: 150px; display: grid; place-items: center; margin-bottom: 1.2rem; color: var(--coral); }
.rasgo-dibujo svg { width: 92px; height: 92px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.rasgo-dibujo svg .relleno { fill: currentColor; stroke: none; }
.rasgo h3 { font-size: 1.1rem; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 0.3rem; }
.rasgo p { color: var(--gris); line-height: 1.55; }
@media (max-width: 900px) {
  .rasgos { grid-template-columns: 1fr 1fr; }
  .rasgo:nth-child(3) { border-left: 0; }
  .rasgo:nth-child(n + 3) { border-top: 1px solid var(--linea); }
}
@media (max-width: 520px) {
  .rasgos { grid-template-columns: 1fr; }
  .rasgo { border-left: 0; }
  .rasgo:nth-child(n + 2) { border-top: 1px solid var(--linea); }
  .rasgo-dibujo { height: 120px; }
}

/* Tarjetas con foto que llevan a otras páginas */
.tarjetas-foto { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2rem); }
.tarjeta-foto { display: flex; flex-direction: column; gap: 0.35rem; }
.tarjeta-foto-imagen { overflow: hidden; border-radius: var(--radio); margin-bottom: 0.9rem; background: var(--arena-2); }
.tarjeta-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.7s var(--suave); }
.tarjeta-foto:hover img { transform: scale(1.03); }
.tarjeta-foto h3 { font-size: 1.2rem; font-weight: 500; letter-spacing: -0.02em; }
.tarjeta-foto p { color: var(--gris); max-width: 34rem; }
.tarjeta-foto .flecha { margin-top: 0.4rem; color: var(--coral-oscuro); }
@media (max-width: 700px) { .tarjetas-foto { grid-template-columns: 1fr; } }

/* Texto grande que se enciende palabra por palabra al bajar */
.declaracion {
  font-size: clamp(1.7rem, 3.8vw, 2.9rem);
  letter-spacing: -0.03em; line-height: 1.18;
  text-align: center; max-width: 26ch; margin-inline: auto;
}
.declaracion .palabra { color: rgba(236, 230, 218, 0.45); transition: color 0.35s ease; }
.declaracion .palabra.activa { color: var(--crema); }

/* Cifras grandes */
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.cifra { padding-top: 1.2rem; border-top: 1px solid var(--linea); }
.oscuro .cifra { border-color: var(--linea-clara); }
.cifra strong { display: block; font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 400; letter-spacing: -0.04em; line-height: 1.05; }
.cifra span { display: block; margin-top: 0.4rem; color: var(--gris); }
.oscuro .cifra span { color: rgba(236, 230, 218, 0.82); }
@media (max-width: 700px) { .cifras { grid-template-columns: 1fr; gap: 1.4rem; } }

/* Llamada final con rejilla de cuadros y el cangrejo al centro */
.cta-final { text-align: center; padding-bottom: 0; }
.cta-final .titulo-l { max-width: 16ch; margin: 1.1rem auto 1.2rem; }
.cta-final .lead { margin-inline: auto; }
.cta-final .hero-botones { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.rejilla-marco { overflow: hidden; padding-bottom: clamp(3rem, 6vw, 5rem); }
.rejilla { display: grid; grid-template-columns: repeat(11, 64px); grid-auto-rows: 64px; gap: 8px; justify-content: center; }
.rejilla span { background: var(--arena-2); border-radius: 2px; }
.rejilla .rejilla-centro { background: var(--coral); display: grid; place-items: center; }
.rejilla .rejilla-centro img { width: 70%; height: 70%; object-fit: contain; }
@media (max-width: 600px) { .rejilla { grid-template-columns: repeat(11, 44px); grid-auto-rows: 44px; gap: 6px; } }

/* ---------- Villas ---------- */
.villa-detalle { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.villa-detalle img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio); }
.precio-grande { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.precio-grande strong { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 400; letter-spacing: -0.04em; }
.precio-grande span { color: var(--gris); }
.lista-lineas li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.85rem 0; border-top: 1px solid var(--linea);
}
.lista-lineas li:last-child { border-bottom: 1px solid var(--linea); }
.lista-lineas .valor { font-family: var(--f-mono); font-size: 0.92rem; color: var(--texto); white-space: nowrap; }
.oscuro .lista-lineas li { border-color: var(--linea-clara); }
.villa-detalle .boton { margin-top: 1.8rem; }
@media (max-width: 860px) { .villa-detalle { grid-template-columns: 1fr; } }

.amenidades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.amenidad { background: var(--papel); padding: 1.6rem 1.5rem 1.7rem; }
.amenidad svg { width: 30px; height: 30px; color: var(--coral); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 2.4rem; }
.amenidad svg .relleno { fill: currentColor; stroke: none; }
.amenidad h3 { font-size: 1.1rem; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 0.35rem; }
.amenidad p { color: var(--gris); }
/* Si en la última fila queda una sola tarjeta, se estira a lo ancho (sin huecos) */
@media (min-width: 901px) { .amenidad:last-child:nth-child(3n + 1) { grid-column: 1 / -1; } }
@media (max-width: 900px) { .amenidades { grid-template-columns: 1fr 1fr; } .amenidad:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 560px) { .amenidades { grid-template-columns: 1fr; } }

.tarifas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.tabla-tarifas li { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: baseline; padding: 1.05rem 0; border-top: 1px solid var(--linea); }
.tabla-tarifas li:last-child { border-bottom: 1px solid var(--linea); }
.tabla-tarifas .plazo { font-size: 1.02rem; }
.tabla-tarifas strong { font-size: 1.35rem; font-weight: 400; letter-spacing: -0.03em; }
.tabla-tarifas .por { font-family: var(--f-mono); font-size: 0.82rem; color: var(--gris); text-transform: uppercase; letter-spacing: 0.04em; min-width: 6.5rem; text-align: right; }
.nota { font-size: 0.92rem; color: var(--gris); margin-top: 1rem; }
@media (max-width: 860px) { .tarifas { grid-template-columns: 1fr; } }

.horarios { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linea-clara); border: 1px solid var(--linea-clara); border-radius: var(--radio); overflow: hidden; }
.horario { background: var(--tinta); padding: 1.6rem 1.5rem; }
.horario strong { display: block; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 400; letter-spacing: -0.04em; margin-top: 0.6rem; }

/* ---------- Galería ---------- */
.galeria-rejilla { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(180px, 22vw, 290px); gap: clamp(0.6rem, 1.4vw, 1rem); }
.galeria-item { position: relative; overflow: hidden; border-radius: var(--radio); background: var(--arena-2); cursor: zoom-in; padding: 0; }
.galeria-item:first-child { grid-row: span 2; }
.galeria-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--suave); }
.galeria-item:hover img { transform: scale(1.04); }
.galeria-item figcaption {
  position: absolute; left: 0.7rem; bottom: 0.7rem; padding: 0.3rem 0.55rem; border-radius: 2px;
  background: rgba(17, 26, 28, 0.82); color: var(--crema); font-size: 0.85rem; font-weight: 500;
}
.panoramica { margin-top: clamp(2.5rem, 5vw, 4rem); }
.panoramica h2 { margin-bottom: 1.2rem; }
.galeria-panoramica { width: 100%; aspect-ratio: 16 / 7; max-height: 560px; object-fit: cover; border-radius: var(--radio); }
@media (max-width: 700px) {
  .galeria-rejilla { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; }
  .galeria-item:first-child { grid-column: span 2; grid-row: span 1; }
  .galeria-panoramica { aspect-ratio: 4 / 3; }
}

/* Tres fotos con pie (villas: así es por dentro) */
.fotos-tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 2vw, 1.4rem); }
.fotos-tres img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio); }
.fotos-tres figcaption { margin-top: 0.6rem; color: var(--gris); }
@media (max-width: 800px) { .fotos-tres { grid-template-columns: 1fr; } }

/* Visor de fotos */
#lightbox {
  position: fixed; inset: 0; z-index: 200; display: none; place-items: center;
  background: rgba(17, 26, 28, 0.94); padding: 4rem 1rem;
}
#lightbox.abierto { display: grid; }
#lightbox-imagen { max-width: min(1200px, 100%); max-height: 82vh; object-fit: contain; border-radius: var(--radio); }
.lightbox-boton {
  position: absolute; width: 52px; height: 52px; display: grid; place-items: center;
  color: var(--crema); border: 1px solid rgba(236, 230, 218, 0.35); border-radius: 2px; font-size: 1.5rem;
  transition: background-color 0.2s ease;
}
.lightbox-boton:hover { background: rgba(236, 230, 218, 0.1); }
#lightbox-cerrar { top: 1rem; right: 1rem; }
#lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
#lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ---------- Ubicación ---------- */
.ubicacion { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.ubicacion .lead { margin-bottom: 1.8rem; }
.ubicacion-botones { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.direccion { margin-top: 2.2rem; padding: 1.3rem 1.4rem; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); }
.direccion p { margin-top: 0.5rem; font-size: 1.05rem; letter-spacing: -0.01em; }
.fachada { margin-top: 1.2rem; }
.fachada img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 62%; border-radius: var(--radio); }
.fachada figcaption { margin-top: 0.6rem; color: var(--gris); }
.melaque { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.melaque img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radio); }
.melaque .titulo-l { margin: 1rem 0 1.2rem; }
@media (max-width: 860px) { .ubicacion, .melaque { grid-template-columns: 1fr; } }

/* ---------- Contacto y formulario ---------- */
.contacto { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .contacto { grid-template-columns: 1fr; } }

.formulario {
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.form-paso { border: 0; min-width: 0; margin-bottom: 1.8rem; }
.form-paso legend {
  display: flex; align-items: center; gap: 0.6rem; width: 100%; margin-bottom: 1.1rem;
  font-family: var(--f-mono); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris);
}
.form-paso legend::after { content: ''; flex: 1; height: 1px; background: var(--linea); }
.paso-num { color: var(--coral); }
.campo-grupo { margin-bottom: 1.05rem; }
.campos-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.9rem; }
@media (max-width: 560px) { .campos-fila { grid-template-columns: 1fr; } }
.campo-grupo label { display: block; font-size: 1rem; font-weight: 500; margin-bottom: 0.4rem; }
.campo-grupo input,
.campo-grupo select,
.campo-grupo textarea {
  width: 100%; height: 52px; padding: 0 0.9rem;
  font: inherit; font-size: 1rem; color: var(--texto);
  background: #fff; border: 1px solid rgba(17, 26, 28, 0.25); border-radius: 2px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.campo-grupo textarea { height: auto; min-height: 110px; padding: 0.75rem 0.9rem; resize: vertical; line-height: 1.5; }
.campo-grupo ::placeholder { color: var(--gris-claro); }
.campo-grupo input:hover, .campo-grupo select:hover, .campo-grupo textarea:hover { border-color: rgba(17, 26, 28, 0.28); }
.campo-grupo input:focus, .campo-grupo select:focus, .campo-grupo textarea:focus {
  outline: none; border-color: var(--texto); box-shadow: 0 0 0 3px rgba(17, 26, 28, 0.08);
}
.campo-grupo select {
  appearance: none; -webkit-appearance: none; padding-right: 2.4rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111a1c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 16px;
}
.campo-grupo input.error, .campo-grupo select.error, .campo-grupo textarea.error { border-color: var(--coral); background-color: #fff8f5; }
.campo-error { display: none; margin-top: 0.4rem; font-size: 0.92rem; font-weight: 500; color: #a8361a; }
.campo-error.visible { display: block; }
.precio-estimado {
  margin: 0 0 1.1rem; padding: 0.8rem 0.95rem; border-left: 2px solid var(--coral);
  background: var(--arena); font-size: 1rem; line-height: 1.5;
}
.precio-estimado[hidden] { display: none; }
.precio-estimado strong { font-weight: 600; }
.btn-enviar { width: 100%; min-height: 56px; font-size: 1.05rem; }
.btn-enviar::after { content: '→'; transition: transform 0.2s ease; }
.btn-enviar:hover::after { transform: translateX(4px); }
.nota-privacidad { margin-top: 0.8rem; text-align: center; font-size: 0.9rem; color: var(--gris); }
.nota-privacidad a { text-decoration: underline; text-underline-offset: 2px; }

#formulario-exito { display: none; text-align: center; padding: 2.5rem 1rem; }
.exito-icono {
  width: 56px; height: 56px; margin: 0 auto 1.2rem; display: grid; place-items: center;
  background: var(--coral); color: #fff; border-radius: var(--radio);
}
.exito-icono svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#formulario-exito p { max-width: 26rem; margin-inline: auto; color: var(--gris); }
#formulario-exito p strong { display: block; margin-bottom: 0.4rem; font-size: 1.6rem; font-weight: 400; letter-spacing: -0.03em; color: var(--texto); }
.exito-alterno { display: inline-block; margin-top: 1.1rem; font-size: 1rem; text-decoration: underline; text-underline-offset: 3px; }

.contacto-lado { display: flex; flex-direction: column; gap: 1.2rem; }
.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.4rem 1.4rem 1.2rem; }
.tarjeta .etiqueta { margin-bottom: 0.8rem; }
.dato { display: flex; justify-content: space-between; gap: 1rem; padding: 0.8rem 0; border-top: 1px solid var(--linea); }
.dato:first-of-type { border-top: 0; }
.dato > span:first-child { color: var(--gris); flex-shrink: 0; }
.dato > :last-child { text-align: right; overflow-wrap: anywhere; }
.dato a { text-decoration: underline; text-decoration-color: rgba(17, 26, 28, 0.35); text-underline-offset: 3px; }
.dato a:hover { text-decoration-color: currentColor; }

/* ---------- Pie de página ---------- */
.pie { border-top: 1px solid var(--linea); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.pie-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 2rem; }
.pie li a { overflow-wrap: anywhere; }   /* el correo largo puede partirse */
.pie-marca p { margin-top: 0.9rem; color: var(--gris); max-width: 20rem; }
.pie h2 { font-family: var(--f-mono); font-size: 0.82rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); margin-bottom: 1rem; }
.pie li + li { margin-top: 0.6rem; }
.pie li a { transition: color 0.2s ease; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.pie li a:hover { text-decoration-color: currentColor; }
.pie li a:hover { color: var(--coral-oscuro); }
.pie-inferior { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.4rem; border-top: 1px solid var(--linea); font-size: 0.9rem; color: var(--gris); }
@media (max-width: 800px) { .pie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pie-marca { grid-column: 1 / -1; } }
@media (max-width: 480px) { .pie-grid { grid-template-columns: 1fr; } }

/* Botón flotante de WhatsApp */
.whatsapp-flotante {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 90;
  min-height: 52px; padding: 0 1.15rem 0 0.95rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--verde-wa); color: #fff; border-radius: 999px;
  font-size: 1rem; font-weight: 600;
  box-shadow: 0 10px 26px -10px rgba(17, 26, 28, 0.6);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.whatsapp-flotante:hover { transform: translateY(-2px); background: #0b6332; }
.whatsapp-flotante svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Páginas legales y 404 ---------- */
.legal { max-width: 46rem; }
.legal h1 { margin: 1rem 0 0.5rem; }
.legal h2 { font-size: 1.2rem; font-weight: 500; letter-spacing: -0.02em; margin: 2.2rem 0 0.6rem; }
.legal p, .legal li { color: #3a3e3f; font-size: 0.98rem; }
.legal p + p { margin-top: 0.7rem; }
.legal ul { list-style: disc; padding-left: 1.2rem; margin: 0.5rem 0 0.8rem; }
.legal li + li { margin-top: 0.3rem; }
.legal a { text-decoration: underline; text-underline-offset: 2px; }
.legal-fecha { font-family: var(--f-mono); font-size: 0.78rem; color: var(--gris); }

/* ---------- Menú en celular ---------- */
@media (max-width: 900px) {
  .menu-boton { display: inline-flex; }
  .cabecera-acciones .boton-acento { display: none; }
  .cabecera-acciones { margin-left: auto; }
  .menu {
    position: fixed; inset: var(--cabecera) 0 0 0; z-index: 99;
    display: flex; flex-direction: column; gap: 0; margin: 0;
    padding: 1.5rem var(--gutter) 2rem;
    background: var(--tinta);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s var(--suave), visibility 0.3s;
  }
  .menu > a {
    font-size: 1.8rem; letter-spacing: -0.03em; padding: 0.75rem 0;
    color: rgba(236, 230, 218, 0.85) !important; border-bottom: 1px solid var(--linea-clara);
  }
  .menu { overflow-y: auto; }
  .menu-extra { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.6rem; }
  .menu-extra .boton { width: 100%; min-height: 54px; font-size: 1.05rem; }
  .menu .menu-extra .boton-claro { color: var(--tinta) !important; }
  .menu .menu-extra .boton-wa { color: #fff !important; }
  .menu-extra .boton-idioma { color: var(--crema); border-color: rgba(236, 230, 218, 0.35); }
  .cabecera-acciones .boton-idioma { display: none; }
  .menu a[aria-current="page"], .menu a:hover { color: var(--crema) !important; }
  .menu a[aria-current="page"]::after { display: none; }
  .menu .menu-reservar { display: block; margin-top: 1.5rem; border: 0; color: var(--coral) !important; }
  body.menu-abierto { overflow: hidden; }
  body.menu-abierto .menu { opacity: 1; visibility: visible; transform: none; }
  /* Sin desenfoque con el menú abierto: el desenfoque haría que el menú (fijo)
     quedara atrapado dentro de la barra en lugar de cubrir la pantalla */
  body.menu-abierto .cabecera { background: var(--tinta); color: var(--crema); border-color: var(--linea-clara); backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.menu-abierto .menu-boton { color: var(--crema); border-color: rgba(236, 230, 218, 0.35); }
}
@media (min-width: 901px) { .menu .menu-reservar, .menu-extra { display: none; } }

/* ---------- Aparición al bajar ---------- */
.aparece { transition: opacity 0.8s var(--suave), transform 0.8s var(--suave); }
.aparece.oculto { opacity: 0; transform: translateY(18px); }

/* ---------- Esqueletos de carga ---------- */
@keyframes brillo-carga {
  from { background-position: 150% 0, 0 0; }
  to   { background-position: -50% 0, 0 0; }
}
img.esqueleto {
  background-color: var(--arena-2);
  background-image: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.6) 50%, transparent 75%);
  background-size: 200% 100%; background-repeat: no-repeat;
  animation: brillo-carga 1.5s ease-in-out infinite;
}
.oscuro img.esqueleto, .hero img.esqueleto { background-color: var(--tinta-2); background-image: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.07) 50%, transparent 75%); }
@keyframes foto-aparece { from { opacity: 0; } to { opacity: 1; } }
img.foto-lista { animation: foto-aparece 0.6s ease; }

/* ---------- Animación de bienvenida (portada, primera visita) ----------
   Dura 2 s en total y no espera a que cargue la página: lo de abajo
   sigue cargando mientras tanto. Funciona solo con CSS. */
.intro {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: var(--tinta); color: var(--crema);
  cursor: pointer;
  animation: intro-salida 0.6s cubic-bezier(0.7, 0, 0.3, 1) 1.45s forwards;
}
.intro.fuera { animation: intro-salida 0.35s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
.intro-contenido { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.intro-cangrejo {
  width: 120px; height: auto;
  animation: intro-entra 0.5s var(--suave) both, intro-camina 0.8s ease-in-out 0.5s both;
}
.intro-nombre {
  font-family: var(--f-marca); font-weight: 900; font-variation-settings: 'SOFT' 100, 'WONK' 0;
  font-size: 2.1rem; letter-spacing: 0.015em;
  animation: intro-texto 0.5s var(--suave) 0.4s both;
}
@keyframes intro-entra { from { opacity: 0; transform: translateY(16px) scale(0.85); } to { opacity: 1; transform: none; } }
/* Pasitos de lado, como cangrejo */
@keyframes intro-camina {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-12px) rotate(-5deg); }
  40% { transform: translateX(10px) rotate(4deg); }
  60% { transform: translateX(-7px) rotate(-3deg); }
  80% { transform: translateX(4px) rotate(1.5deg); }
}
@keyframes intro-texto { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes intro-salida { to { transform: translateY(-100%); visibility: hidden; } }
.sin-intro .intro { display: none; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }   /* sin animación de bienvenida */
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .declaracion .palabra { color: var(--crema); }
  @view-transition { navigation: none; }
}