/* Base: reinicio, tipografía, botones y estados comunes. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--alto-cabecera);
  /* Sin negritas ni cursivas de imitación: cada peso tiene su archivo */
  font-synthesis: none;
}
/* Desplazamiento suave del navegador solo sin Lenis: con Lenis (html.con-mov) lo lleva él, y los saltos directos
   del menú y de la barra tienen que ser instantáneos */
html:not(.con-mov) { scroll-behavior: smooth; }
html.sin-scroll { overflow: hidden; }
/* Scroll suave (Lenis): reglas que pide la librería */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--c-papel);
  color: var(--c-tinta);
  font-family: var(--f-texto);
  font-size: var(--t-m);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
b, strong { font-weight: 500; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0; }
/* Sin palabras viudas: el navegador reparte las líneas para que la última no se quede con una palabra sola */
p, li, figcaption, dd { text-wrap: pretty; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.titulo { font-size: var(--t-titulo); letter-spacing: -0.025em; text-wrap: balance; }
.entradilla {
  max-width: 44ch;
  margin-top: 1.6rem;
  font-size: var(--t-l);
  line-height: 1.5;
  color: var(--c-tinta-2);
}
.etiqueta-texto {
  font-size: var(--t-etiqueta);
  font-weight: 500;
  letter-spacing: var(--espaciado-etiqueta);
  text-transform: uppercase;
}

/* Secciones: el blanco es el fondo; arena y mar son paneles redondeados separados del borde */
.seccion { padding-block: var(--e-seccion); }
.seccion--arena,
.seccion--mar { margin-inline: var(--margen); border-radius: var(--r-xl); }
.seccion--arena { background: var(--c-arena); }
.seccion--mar { background: var(--c-mar); color: var(--c-blanco); }
.seccion--mar .entradilla { color: rgba(255, 255, 255, 0.72); }
.seccion__cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: clamp(2.4rem, 1.4rem + 3vw, 4.5rem); }

.cristal {
  background: var(--c-cristal);
  border: 1px solid var(--c-cristal-borde);
  border-radius: var(--r-l);
  box-shadow: var(--sombra);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
}

.boton {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 54px;
  padding: 0 1.7rem;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--r-pildora);
  background: transparent;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.45s var(--curva), border-color 0.45s var(--curva), transform 0.2s;
}
.boton::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s var(--curva);
}
.boton:hover::before { transform: scaleX(1); transform-origin: left; }
.boton:active { transform: scale(0.98); }
.boton svg { width: 16px; height: 16px; }
.boton--icono { padding: 0 6px 0 1.7rem; }
.boton--fino { min-height: 44px; padding: 0 1.4rem; }
.boton__ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  transition: background 0.45s var(--curva), color 0.45s var(--curva);
}
.boton__ico svg { transition: transform 0.6s var(--curva); }
.boton:hover .boton__ico svg { transform: rotate(-45deg); }
.boton--tinta { background: var(--c-tinta); color: var(--c-blanco); }
.boton--tinta::before { background: var(--c-mar); }
.boton--tinta .boton__ico { background: var(--c-blanco); color: var(--c-tinta); }
.boton--blanco { background: var(--c-blanco); color: var(--c-tinta); }
.boton--blanco::before { background: var(--c-arena); }
.boton--blanco .boton__ico { background: var(--c-tinta); color: var(--c-blanco); }
.boton--borde-claro { border-color: rgba(255, 255, 255, 0.6); color: var(--c-blanco); }
.boton--borde-claro::before { background: var(--c-blanco); }
.boton--borde-claro:hover { color: var(--c-tinta); border-color: var(--c-blanco); }
.boton--borde { border-color: var(--c-linea-fuerte); color: var(--c-tinta); }
.boton--borde::before { background: var(--c-tinta); }
.boton--borde:hover { border-color: var(--c-tinta); color: var(--c-blanco); }
.boton[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.boton[aria-disabled="true"]::before { display: none; }

.circulo {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--c-linea-fuerte);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background var(--d-rapida), border-color var(--d-rapida), color var(--d-rapida);
}
.circulo:hover { background: var(--c-tinta); border-color: var(--c-tinta); color: var(--c-blanco); }
.circulo svg { width: 16px; height: 16px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.5rem 1.15rem;
  border: 1px solid var(--c-linea-fuerte);
  border-radius: var(--r-pildora);
  background: transparent;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--d-rapida), color var(--d-rapida), border-color var(--d-rapida);
}
.chip:hover { border-color: var(--c-tinta); }
.chip[aria-pressed="true"] { background: var(--c-tinta); border-color: var(--c-tinta); color: var(--c-blanco); }
.chip svg { width: 15px; height: 15px; }

.enlace-boton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.enlace-boton svg { width: 15px; height: 15px; }

.icono { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: 2px solid var(--c-mar-2); outline-offset: 3px; }
.seccion--mar :focus-visible,
.portada :focus-visible,
.espacios :focus-visible,
.contacto__in > div:first-child :focus-visible { outline-color: var(--c-blanco); }
.saltar {
  position: absolute;
  left: var(--margen);
  top: -100px;
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--c-tinta);
  color: var(--c-blanco);
}
.saltar:focus { top: 1rem; }
.oculto-visual {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.nota { font-size: var(--t-xs); color: var(--c-tinta-2); }

.estado {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* El estado va solo en texto, sin puntos ni colores: tinta, gris y gris claro */
.estado--disponible { color: var(--c-tinta); }
.estado--reservada { color: var(--c-tinta-2); }
.estado--vendida { color: var(--c-tinta-3); }

/* Apariciones. Sin GSAP las hace app.js con estas transiciones; con GSAP (html.con-mov) las hace movimiento.js. */
.revelar-imagen { overflow: hidden; }
html.con-js:not(.con-mov) .revelar {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--d-lenta) var(--curva), transform var(--d-lenta) var(--curva);
}
html.con-js:not(.con-mov) .revelar.visible { opacity: 1; transform: none; }
html.con-js:not(.con-mov) .revelar-imagen > img,
html.con-js:not(.con-mov) .revelar-imagen > video {
  clip-path: inset(10% 10% 10% 10%);
  transform: scale(1.12);
  transition: clip-path 1.4s var(--curva), transform 1.8s var(--curva);
}
html.con-js:not(.con-mov) .revelar-imagen.visible > img,
html.con-js:not(.con-mov) .revelar-imagen.visible > video { clip-path: inset(0 0 0 0); transform: none; }

/* Piezas que crea movimiento.js: titulares que suben desde una máscara y palabras que se encienden al leer */
.mascara { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.mascara__in { display: block; }
.palabra { display: inline; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html.con-js:not(.con-mov) .revelar,
  html.con-js:not(.con-mov) .revelar-imagen > img,
  html.con-js:not(.con-mov) .revelar-imagen > video { opacity: 1; transform: none; clip-path: none; }
}