/* ==========================================================================
   Sistema de diseño — editorial minimalista y oscuro
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   Variables
   -------------------------------------------------------------------------- */

:root {
  /* Color */
  --color-bg: #141414;
  --color-text: #F5F3F0;
  --color-text-secondary: #A0A0A0;
  --color-accent: #C4A582;
  --color-bg-alt: #F5F3F0;
  --color-text-alt: #141414;
  --color-border: rgba(245, 243, 240, 0.2);
  --color-border-alt: rgba(20, 20, 20, 0.2);
  --color-error: #B3452C;

  /* Tipografía */
  --font-base: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --fs-heading: clamp(2.5rem, 4vw + 1rem, 5rem);
  --fs-body: 1.05rem;
  --lh-heading: 1.05;
  --lh-body: 1.7;
  --ls-heading: -0.02em;
  --ls-button: 0.1em;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;

  /* Espaciado */
  --space-section-y: 8rem;
  --space-section-y-mobile: 4rem;
  --content-max-width: 1400px;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;

  /* Layout fijo */
  --header-height: 84px;

  /* Transiciones */
  --transition-base: 0.6s ease;
  --transition-image: 0.8s ease;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* `<picture>` es block pero no tiene alto propio: sin esto, el `height:100%`
   de los <img> de dentro (hero, galería, lightbox) nunca resuelve contra un
   valor definido y el navegador cae a "auto" — el object-fit/object-position
   deja de tener efecto. Con height:100% aquí, cuando el <picture> está dentro
   de un contenedor de alto definido, la cadena se resuelve correctamente; si
   no lo está, este 100% no hace nada (se trata como auto), así que es seguro
   dejarlo global. */
picture {
  height: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

/* --------------------------------------------------------------------------
   Accesibilidad — foco visible
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   Tipografía
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-weight: var(--fw-light);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

h1,
.h1 {
  font-size: var(--fs-heading);
}

h2,
.h2 {
  font-size: clamp(2rem, 3vw + 1rem, 3.5rem);
}

h3,
.h3 {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  font-weight: var(--fw-medium);
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.text-secondary {
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   Layout / utilidades
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.section {
  padding-block: var(--space-section-y);
}

@media (max-width: 768px) {
  .section {
    padding-block: var(--space-section-y-mobile);
  }
}

/* Las 4 secciones enlazadas desde el menú (Galería, Equipamiento, Ubicación,
   Contacto) comparten el mismo criterio de holgura bajo el header fijo al
   llegar por ancla: altura del header + 6rem. Se usa scroll-margin-top en
   cada destino en vez de scroll-padding-top en <html> porque este último,
   combinado con scroll-margin-top, sumaba ambos huecos en vez de aplicar
   solo el mayor de los dos. */
/* El borde superior de la sección debe coincidir justo con el borde
   inferior del header fijo, sin ningún hueco intermedio (si no, ese hueco
   deja asomar una franja de la sección anterior). El aire visual bajo el
   header lo aporta el padding-top propio de cada sección (o el de
   #equipamiento.section, más compacto), no este scroll-margin. */
#galeria,
#equipamiento,
#ubicacion,
#contacto {
  scroll-margin-top: var(--header-height, 84px);
}

.section--alt {
  background-color: var(--color-bg-alt);
  color: var(--color-text-alt);
}

.section--alt p {
  color: var(--color-text-alt);
}

.section--alt .text-secondary {
  color: rgba(20, 20, 20, 0.6);
}

.text-center {
  text-align: center;
}

.text-accent {
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 0.9rem 2rem;
  background-color: transparent;
  border: 1px solid currentColor;
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: 0.85rem;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-button);
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.btn:hover,
.btn:focus-visible {
  background-color: var(--color-text);
  color: var(--color-bg);
}

.btn--accent {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn--accent:hover,
.btn--accent:focus-visible {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

.section--alt .btn {
  color: var(--color-text-alt);
}

.section--alt .btn:hover,
.section--alt .btn:focus-visible {
  background-color: var(--color-text-alt);
  color: var(--color-bg-alt);
}

/* --------------------------------------------------------------------------
   Imágenes
   -------------------------------------------------------------------------- */

.img-frame {
  overflow: hidden;
  border-radius: 0;
}

.img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  transition: transform var(--transition-image);
}

.img-frame:hover img {
  transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   Animación de entrada al hacer scroll (activada vía IntersectionObserver en main.js)
   -------------------------------------------------------------------------- */

.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

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

  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .img-frame img {
    transition: none;
  }

  .gallery__item {
    transition: none;
  }
}

/* ==========================================================================
   Componente: Header / Navegación
   ========================================================================== */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: transparent;
  transition: background-color var(--transition-base);
}

.header.is-scrolled {
  background-color: var(--color-bg);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.5rem;
}

.header__brand {
  font-size: 1.1rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  color: var(--color-text);
  white-space: nowrap;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.header__links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.header__links a {
  font-size: 0.85rem;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-button);
  color: var(--color-text);
  position: relative;
  padding-bottom: 0.3rem;
}

.header__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-accent);
  transition: width var(--transition-base);
}

.header__links a:hover::after,
.header__links a:focus-visible::after {
  width: 100%;
}

.header__cta {
  padding: 0.7rem 1.5rem;
}

.header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  z-index: 1100;
}

.header__toggle span {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color-text);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* --------------------------------------------------------------------------
   Header — responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .header__toggle {
    display: flex;
  }

  .header__nav {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--color-bg);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-xl);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
  }

  .header__nav.is-open {
    opacity: 1;
    visibility: visible;
  }

  .header__links {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .header__links a {
    font-size: 1.1rem;
  }

  .header.is-open .header__toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .header.is-open .header__toggle span:nth-child(2) {
    opacity: 0;
  }

  .header.is-open .header__toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}

/* ==========================================================================
   Componente: Hero
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: var(--color-bg);
}

.hero__carousel {
  position: absolute;
  inset: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Foto vertical (2400x3200): en pantallas anchas el recorte por defecto
   (centrado) deja fuera el sofá y el salón, mostrando sobre todo el techo.
   Se desplaza el encuadre hacia abajo para priorizar esa zona. */
.hero__img--portrait {
  object-position: center 78%;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Degradado suave: sólo lo justo para que el texto inferior y el header
     transparente (arriba) se lean bien sobre fotos ya de alta resolución. */
  background:
    linear-gradient(to top, rgba(20, 20, 20, 0.9) 0%, rgba(20, 20, 20, 0.6) 30%, rgba(20, 20, 20, 0.22) 58%, rgba(20, 20, 20, 0.28) 100%);
}

.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-text);
  opacity: 0.5;
  transition: opacity var(--transition-base);
}

.hero__arrow:hover,
.hero__arrow:focus-visible {
  opacity: 1;
}

.hero__arrow--prev {
  left: var(--space-sm);
}

.hero__arrow--next {
  right: var(--space-sm);
}

@media (min-width: 768px) {
  .hero__arrow--prev {
    left: var(--space-lg);
  }

  .hero__arrow--next {
    right: var(--space-lg);
  }
}

.hero__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--space-xl);
  z-index: 3;
  /* El bloque de texto ocupa todo el ancho para alinear con el .container,
     pero solo el CTA debe ser clicable: si no, tapa las flechas del
     carrusel en el lado derecho aunque ahí no haya texto visible. */
  pointer-events: none;
}

.hero__content .hero__cta {
  pointer-events: auto;
}

.hero__title {
  color: var(--color-text);
  max-width: 850px;
  margin-bottom: var(--space-sm);
}

.hero__subtitle {
  color: rgba(245, 243, 240, 0.85);
  font-size: var(--fs-body);
  margin-bottom: var(--space-md);
}

.hero__dots {
  position: absolute;
  bottom: var(--space-sm);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 0.6rem;
}

.hero__dot {
  width: 2rem;
  height: 1px;
  background-color: rgba(245, 243, 240, 0.4);
  transition: background-color var(--transition-base), width var(--transition-base);
}

.hero__dot.is-active {
  background-color: var(--color-text);
  width: 3rem;
}

@media (max-width: 600px) {
  .hero__content {
    bottom: 5.5rem;
  }

  .hero__dots {
    bottom: 1.5rem;
  }
}

/* ==========================================================================
   Componente: Descripción + Ficha técnica
   ========================================================================== */

.description {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
  font-size: clamp(1.35rem, 1.4vw + 1rem, 2rem);
  font-weight: var(--fw-light);
  line-height: 1.6;
  letter-spacing: var(--ls-heading);
  margin-bottom: var(--space-xl);
}

.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.stats__item {
  flex: 1 1 20%;
  min-width: 140px;
  text-align: center;
  padding: 0 var(--space-md);
  border-right: 1px solid var(--color-border-alt);
}

.stats__item:last-child {
  border-right: none;
}

.stats__number {
  display: block;
  font-size: clamp(2rem, 2.5vw + 1rem, 3rem);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-heading);
}

.stats__label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-button);
  color: rgba(20, 20, 20, 0.6);
}

@media (max-width: 700px) {
  .stats__item {
    flex: 1 1 45%;
    border-right: none;
    border-bottom: 1px solid var(--color-border-alt);
    padding-block: var(--space-sm);
  }
}

/* ==========================================================================
   Componente: Galería
   ========================================================================== */

.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
}

.gallery-filters__link {
  font-size: 0.85rem;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-button);
  color: var(--color-text-secondary);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: color var(--transition-base), border-color var(--transition-base);
}

.gallery-filters__link:hover,
.gallery-filters__link:focus-visible {
  color: var(--color-text);
}

.gallery-filters__link.is-active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-sm);
  /* Sin esto, cuando el contenedor queda con un min-height mayor que su
     contenido real (justo lo que pasa durante toda la animación de
     filtrado: se fija la altura alta de partida y se anima hacia la
     nueva), las filas incompletas se separan de las completas en vez de
     quedarse pegadas arriba. Es más visible cuanto menos llena está la
     última fila (p. ej. una sola foto suelta), porque esa fila se mueve
     sola en vez de en bloque junto a sus vecinas. */
  align-content: start;
}

.gallery__item {
  aspect-ratio: 4 / 3;
  opacity: 1;
  transform: scale(1);
  cursor: pointer;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.gallery__item.is-hidden {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}

/* ==========================================================================
   Componente: Lightbox
   ========================================================================== */

body.no-scroll {
  overflow: hidden;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(20, 20, 20, 0.97);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.lightbox.is-open {
  display: flex;
}

.lightbox.is-visible {
  opacity: 1;
}

.lightbox__stage {
  max-width: min(90vw, 1400px);
  max-height: 85vh;
  display: flex;
}

.lightbox__stage img {
  max-width: 100%;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}

.lightbox__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 3;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: var(--fw-light);
  line-height: 1;
  color: var(--color-text);
  opacity: 0.6;
  transition: opacity var(--transition-base);
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
  opacity: 1;
}

@media (min-width: 768px) {
  .lightbox__close {
    top: var(--space-md);
    right: var(--space-lg);
  }
}

.lightbox__counter {
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 0.8rem;
  letter-spacing: var(--ls-button);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Componente: Equipamiento / Comodidades
   ========================================================================== */

#equipamiento.section {
  padding-block: 2rem;
}

.amenities-header {
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: 2.5rem;
}

.eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-button);
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.amenities-header .h2 {
  margin: 0;
}

.amenities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem var(--space-md);
}

.amenity {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 104px;
  gap: 0.5rem;
  padding-inline: var(--space-sm);
}

.amenity__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--color-accent);
}

.amenity__name {
  font-size: 1rem;
  color: var(--color-text);
}

.amenity__detail {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-text-secondary);
  max-width: 270px;
  margin-top: -0.15rem;
}

.amenities-safety {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.amenities-safety svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .amenities-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   Componente: Ubicación
   ========================================================================== */

.location__text {
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
}

.location__address {
  font-size: clamp(1.25rem, 1.5vw + 1rem, 1.75rem);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-xs);
}

.location__registry {
  margin-top: var(--space-sm);
  font-size: 0.85rem;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--color-accent);
}

.location__map {
  width: 100%;
  min-height: 450px;
  line-height: 0;
}

.location__map iframe {
  display: block;
  width: 100%;
  filter: grayscale(1);
}

.location__map-fallback {
  width: 100%;
  min-height: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  text-align: center;
  padding: var(--space-lg);
  background-color: rgba(20, 20, 20, 0.03);
  line-height: 1.6;
}

.location__map-fallback-address {
  font-size: 1.1rem;
  font-weight: var(--fw-medium);
  color: var(--color-text-alt);
}

.location__map-fallback-note {
  max-width: 420px;
  font-size: 0.9rem;
  color: rgba(20, 20, 20, 0.6);
  margin-bottom: var(--space-xs);
}

/* ==========================================================================
   Componente: Contacto
   ========================================================================== */

.contact {
  display: grid;
  grid-template-columns: 2fr 3fr;
  align-items: start;
  gap: 4rem;
  max-width: 1100px;
  margin-inline: auto;
  margin-top: var(--space-lg);
}

.contact__info {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-sm);
}

.contact__intro {
  margin-bottom: var(--space-xs);
  color: var(--color-text-alt);
  line-height: 1.6;
}

.contact__link {
  font-size: clamp(1.1rem, 1.2vw + 1rem, 1.4rem);
  border-bottom: 1px solid var(--color-border-alt);
  transition: color var(--transition-base), border-color var(--transition-base);
}

.contact__link:hover,
.contact__link:focus-visible {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Los dos botones de la columna izquierda deben quedar del mismo ancho
   (el de la columna entera) en vez de ajustarse cada uno a su propio texto. */
.contact__info .btn {
  width: 100%;
  text-align: center;
}

.contact__airbnb {
  margin-top: var(--space-sm);
}

.btn--large {
  padding: 1.25rem 3rem;
  font-size: 0.95rem;
}

@media (max-width: 800px) {
  .contact {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

/* --------------------------------------------------------------------------
   Formulario de contacto
   -------------------------------------------------------------------------- */

.contact__form-wrap {
  min-width: 0;
}

.contact__form-title {
  font-size: clamp(1.35rem, 1.2vw + 1rem, 1.75rem);
  font-weight: var(--fw-medium);
  margin-bottom: 0.4rem;
}

.contact__form-subtitle {
  margin-bottom: var(--space-md);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* .contact-form ya fija su propio "display", que gana por cascada a la
   regla nativa [hidden]{display:none} del navegador (misma especificidad,
   pero una regla de autor). Sin esto, el formulario seguiría visible tras
   ocultarlo con el atributo hidden al mostrar el mensaje de éxito. */
.contact-form[hidden] {
  display: none;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.form-row .form-field {
  flex: 1 1 180px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-field label {
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-button);
  color: var(--color-text-alt);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea {
  width: 100%;
  border: 1px solid var(--color-border-alt);
  background-color: transparent;
  padding: 0.75rem 1rem;
  font-family: var(--font-base);
  font-size: 1rem;
  color: var(--color-text-alt);
  transition: border-color var(--transition-base);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-text-secondary);
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.form-field textarea {
  resize: vertical;
  min-height: 100px;
}

.form-error {
  display: block;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--color-error);
}

/* Sin esto, cada .form-error reservaba min-height incluso vacío, dejando un
   hueco fijo bajo cada campo aunque no hubiera ningún error que mostrar. */
.form-error:empty {
  display: none;
}

.form-field--checkbox {
  gap: 0.3rem;
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-alt);
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--fw-regular);
}

.form-checkbox input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}

.form-checkbox a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* Honeypot: oculto para personas, presente en el DOM y en el orden de
   tabulación normal para los bots que rellenan formularios a ciegas. */
.form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -9999px;
}

.contact-form__submit {
  width: 100%;
  padding: 1rem 2rem;
  background-color: var(--color-accent);
  color: var(--color-bg);
  border: 1px solid var(--color-accent);
  font-family: var(--font-base);
  font-size: 0.85rem;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-button);
  cursor: pointer;
  transition: opacity var(--transition-base), background-color var(--transition-base), color var(--transition-base);
}

.contact-form__submit:hover,
.contact-form__submit:focus-visible {
  background-color: transparent;
  color: var(--color-accent);
}

.contact-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.contact-form__submit-error {
  border: 1px solid var(--color-error);
  color: var(--color-error);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.9rem;
  line-height: 1.5;
}

.contact-form__submit-error a {
  color: inherit;
  text-decoration: underline;
}

.contact-form__success {
  border: 1px solid var(--color-border-alt);
  padding: var(--space-md);
}

.contact-form__success p {
  margin: 0;
  color: var(--color-text-alt);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  background-color: var(--color-bg);
  color: var(--color-text);
  padding-block: var(--space-xl);
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.footer__brand-name {
  font-size: 1.25rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  margin-bottom: var(--space-sm);
}

.footer__tagline {
  max-width: 320px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-sm);
}

.footer__registry {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.footer__col-title {
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-button);
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.footer__links,
.footer__contact-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer__contact-list {
  color: var(--color-text-secondary);
}

.footer__links a,
.footer__contact-list a {
  color: var(--color-text-secondary);
  transition: color var(--transition-base);
}

.footer__links a:hover,
.footer__links a:focus-visible,
.footer__contact-list a:hover,
.footer__contact-list a:focus-visible {
  color: var(--color-accent);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.footer__copyright {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.footer__legal-links {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.footer__legal-links a {
  color: var(--color-text-secondary);
  border-bottom: 1px solid transparent;
  transition: color var(--transition-base), border-color var(--transition-base);
}

.footer__legal-links a:hover,
.footer__legal-links a:focus-visible {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .footer__bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}

/* ==========================================================================
   Componente: Banner de cookies
   ========================================================================== */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1500;
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-md);
  transform: translateY(100%);
  transition: transform var(--transition-base);
}

.cookie-banner.is-visible {
  transform: translateY(0);
}

.cookie-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.cookie-banner__text {
  flex: 1 1 420px;
  max-width: 700px;
  font-size: 0.9rem;
  color: var(--color-text);
}

.cookie-banner__text a {
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
}

.cookie-banner__actions {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* Botones deliberadamente idénticos entre sí (mismo tamaño, mismo estilo):
   el RGPD exige que rechazar sea tan fácil como aceptar. */
.cookie-banner__actions .btn {
  min-width: 130px;
}

@media (max-width: 640px) {
  .cookie-banner__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-banner__actions {
    justify-content: stretch;
  }

  .cookie-banner__actions .btn {
    flex: 1;
    min-width: 0;
  }
}

/* ==========================================================================
   Páginas legales (aviso-legal / privacidad / cookies)
   ========================================================================== */

.legal {
  background-color: var(--color-bg-alt);
  color: var(--color-text-alt);
  min-height: 100vh;
  padding-top: calc(var(--header-height, 84px) + var(--space-lg));
  padding-bottom: var(--space-section-y);
}

.legal__content {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.legal__back {
  display: inline-block;
  margin-bottom: var(--space-lg);
  font-size: 0.85rem;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-button);
  color: var(--color-text-alt);
  border-bottom: 1px solid var(--color-border-alt);
  transition: color var(--transition-base), border-color var(--transition-base);
}

.legal__back:hover,
.legal__back:focus-visible {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.legal__title {
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  margin-bottom: 0.5rem;
}

.legal__updated {
  color: rgba(20, 20, 20, 0.55);
  font-size: 0.9rem;
  margin-bottom: var(--space-xl);
}

.legal h2 {
  font-size: clamp(1.35rem, 1.2vw + 1rem, 1.75rem);
  font-weight: var(--fw-medium);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.legal h3 {
  font-size: 1.1rem;
  font-weight: var(--fw-medium);
  margin-top: var(--space-md);
  margin-bottom: 0.5rem;
}

.legal p {
  margin-bottom: 1rem;
  color: var(--color-text-alt);
}

.legal ul,
.legal ol {
  margin-bottom: 1rem;
  padding-left: 1.4rem;
}

.legal ul {
  list-style: disc;
}

.legal ol {
  list-style: decimal;
}

.legal li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

.legal a {
  color: var(--color-text-alt);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal a:hover,
.legal a:focus-visible {
  color: var(--color-accent);
}

.legal strong {
  font-weight: var(--fw-medium);
}

/* ==========================================================================
   Página 404
   ========================================================================== */

.error-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--color-bg-alt);
  color: var(--color-text-alt);
  padding: var(--space-md);
}

.error-page__code {
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-heading);
  line-height: 1;
  color: var(--color-accent);
}

.error-page__title {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  font-weight: var(--fw-medium);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.error-page__text {
  max-width: 480px;
  color: rgba(20, 20, 20, 0.65);
  margin-bottom: var(--space-lg);
}