/*
 Theme Name:   Bootscore Child
 Description:  Bootscore Child Theme
 Author:       Bootscore
 Author URI:   https://bootscore.me
 Template:     bootscore
 Version:      6.0.0
 Requires at least: 5.0
 Tested up to: 6.6
 Requires PHP: 7.4
 License: MIT License
 License URI: https://github.com/bootscore/bootscore-child/blob/main/LICENSE
 Text Domain:  bootscore
*/

/* ==== Generales ==== */
/* --- Base --- */
:root {
  --lux-primary: #7a9e72;
  --lux-primary-dark: #2d4a2a;
  --lux-primary-texto: #4d6d48;
  --lux-secondary: #1c2118;
  --lux-tertiary: #1c2118;
  --lux-white: #f7f4ee;
  --lux-white-2: #ffffff;
  --lux-gray: #f7f4eebf;
  --lux-gray-dark: #eae5dc;
  --lux-border: #d4cdb8;
  --lux-border-claro: color-mix(in srgb, var(--lux-white) 20%, transparent);
  --lux-texto-suave: color-mix(in srgb, var(--lux-secondary) 70%, transparent);
  --lux-blanco-suave: color-mix(in srgb, var(--lux-white) 75%, transparent);
  --lux-sombra: 0 0.75rem 1.5rem -1rem
    color-mix(in srgb, var(--lux-secondary) 45%, transparent);
  --lux-velatura: linear-gradient(
    0deg,
    rgba(13, 21, 12, 0.9) 0%,
    rgba(16, 23, 14, 0.7) 25%,
    rgba(28, 33, 24, 0.45) 50%,
    rgba(28, 33, 24, 0.25) 100%
  );
  --lux-velatura-lateral: linear-gradient(
    90deg,
    rgba(13, 21, 12, 0.6) 0%,
    rgba(16, 23, 14, 0.3) 45%,
    rgba(28, 33, 24, 0) 75%
  );
  --lux-header-alto: 4.5rem;
  --lux-seguro-arriba: env(safe-area-inset-top, 0px);
  --lux-font: "Outfit", sans-serif;
  --lux-font-titulos: "Fraunces", serif;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--lux-header-alto) + var(--lux-seguro-arriba));
}

body {
  font-family: var(--lux-font);
  font-weight: 400;
  font-size: 1rem;
  color: var(--lux-secondary);
  background-color: var(--lux-white);
  padding-top: calc(var(--lux-header-alto) + var(--lux-seguro-arriba));
  -webkit-font-smoothing: antialiased;
}

body.lightbox-abierto {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--lux-font-titulos);
  font-weight: 400;
  color: var(--lux-secondary);
}

.h1 {
  font-size: clamp(3rem, 2rem + 4.5vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}

.h2 {
  font-size: clamp(2.1rem, 1.5rem + 2vw, 3.5rem);
  line-height: 1.14;
  margin-bottom: 1.5rem;
}

.h2-medio {
  font-size: clamp(1.9rem, 1.5rem + 1.25vw, 2.75rem);
}

.h3 {
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  line-height: 1.2;
  margin-bottom: 1rem;
}

p {
  font-size: 1rem;
  line-height: 2;
  color: var(--lux-texto-suave);
}

b,
strong {
  font-weight: 500;
}

a {
  color: var(--lux-primary-dark);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--lux-primary-texto);
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--lux-primary);
  outline-offset: 3px;
  box-shadow: none;
}

.text-highlight {
  font-family: var(--lux-font-titulos);
  font-style: italic;
  font-weight: 400;
}

.separador {
  display: block;
  width: 2.5rem;
  height: 1px;
  margin: 2rem 0;
  border: 0;
  background-color: var(--lux-border);
  opacity: 1;
}

section {
  overflow-x: clip;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* --- Kicker --- */
.kicker {
  display: block;
  font-family: var(--lux-font);
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--lux-primary-texto);
  margin-bottom: 1.5rem;
}

.kicker-linea {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.kicker-linea:before {
  content: "";
  flex: 0 0 2rem;
  height: 1px;
  background-color: var(--lux-primary);
}

/* --- Botones --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.15rem 2rem;
  font-family: var(--lux-font);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 0;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.btn svg {
  flex-shrink: 0;
}

.btn-flecha {
  display: inline-block;
  transition: transform 0.2s ease;
}

.btn:hover .btn-flecha,
.btn:focus-visible .btn-flecha,
a:hover > .btn-flecha,
a:focus-visible > .btn-flecha {
  transform: translateX(0.3rem);
}

.btn-primary {
  --bs-btn-bg: var(--lux-primary-texto);
  --bs-btn-color: var(--lux-white-2);
  --bs-btn-border-color: var(--lux-primary-texto);
  --bs-btn-hover-bg: var(--lux-primary-dark);
  --bs-btn-hover-color: var(--lux-white-2);
  --bs-btn-hover-border-color: var(--lux-primary-dark);
  --bs-btn-active-bg: var(--lux-primary-dark);
  --bs-btn-active-color: var(--lux-white-2);
  --bs-btn-active-border-color: var(--lux-primary-dark);
  background-color: var(--lux-primary-texto);
  border-color: var(--lux-primary-texto);
  color: var(--lux-white-2);
}

.btn-primary:active,
.btn-primary.active,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:focus-within,
.btn-primary:target,
.btn-primary:hover {
  background-color: var(--lux-primary-dark);
  border-color: var(--lux-primary-dark);
  color: var(--lux-white);
}

.btn-white {
  --bs-btn-bg: var(--lux-white);
  --bs-btn-color: var(--lux-secondary);
  --bs-btn-border-color: var(--lux-white);
  --bs-btn-hover-bg: var(--lux-primary-dark);
  --bs-btn-hover-color: var(--lux-white);
  --bs-btn-hover-border-color: var(--lux-primary-dark);
  --bs-btn-active-bg: var(--lux-primary-dark);
  --bs-btn-active-color: var(--lux-white);
  --bs-btn-active-border-color: var(--lux-primary-dark);
  background-color: var(--lux-white);
  border-color: var(--lux-white);
  color: var(--lux-secondary);
}

.btn-white:active,
.btn-white.active,
.btn-white:focus,
.btn-white:focus-visible,
.btn-white:focus-within,
.btn-white:target,
.btn-white:hover {
  background-color: var(--lux-primary-dark);
  border-color: var(--lux-primary-dark);
  color: var(--lux-white);
}

.btn-outline-white {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--lux-white);
  --bs-btn-border-color: var(--lux-blanco-suave);
  --bs-btn-hover-bg: var(--lux-white);
  --bs-btn-hover-color: var(--lux-secondary);
  --bs-btn-hover-border-color: var(--lux-white);
  --bs-btn-active-bg: var(--lux-white);
  --bs-btn-active-color: var(--lux-secondary);
  --bs-btn-active-border-color: var(--lux-white);
  background-color: transparent;
  border-color: var(--lux-blanco-suave);
  color: var(--lux-white);
}

.btn-outline-white:active,
.btn-outline-white.active,
.btn-outline-white:focus,
.btn-outline-white:focus-visible,
.btn-outline-white:focus-within,
.btn-outline-white:target,
.btn-outline-white:hover {
  background-color: var(--lux-white);
  border-color: var(--lux-white);
  color: var(--lux-secondary);
}

/* --- Enlace subrayado --- */
.enlace-subrayado {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.3rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--lux-primary-dark);
  border-bottom: 1px solid currentColor;
}

.enlace-subrayado:hover,
.enlace-subrayado:focus-visible {
  color: var(--lux-primary-texto);
}

/* --- Checklist --- */
.checklist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 3.5rem 0 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--lux-secondary);
}

.checklist li + li {
  border-top: 1px solid var(--lux-border);
}

.checklist li:before {
  content: "\25C8";
  flex-shrink: 0;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--lux-primary);
}

/* --- Datos --- */
.datos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin: 4rem 0 0;
  padding: 0;
  list-style: none;
}

.datos-item {
  min-width: 0;
  padding: 1.5rem 0.5rem;
  text-align: center;
}

.datos-item + .datos-item {
  border-left: 1px solid color-mix(in srgb, var(--lux-white) 10%, transparent);
}

.datos-valor {
  display: block;
  font-family: var(--lux-font-titulos);
  font-size: 1.4rem;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
  color: var(--lux-primary);
}

.datos-etiqueta {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.6rem;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  color: var(--lux-blanco-suave);
}

/* ==== Header ==== */
/* --- Barra --- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  padding-top: var(--lux-seguro-arriba);
  padding-right: env(safe-area-inset-right, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  border-bottom: 1px solid var(--lux-border);
  transition: box-shadow 0.3s ease;
}

.site-header:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--lux-gray);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.site-header:has(.offcanvas.showing),
.site-header:has(.offcanvas.show),
.site-header:has(.offcanvas.hiding) {
  z-index: 1050;
}

.admin-bar .site-header {
  top: var(--wp-admin--admin-bar--height, 0px);
}

.site-header.is-scrolled {
  box-shadow: var(--lux-sombra);
}

.site-header .navbar {
  height: var(--lux-header-alto);
  padding-top: 0;
  padding-bottom: 0;
}

/* --- Marca --- */
.marca {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-right: 0;
  padding: 0;
  text-decoration: none;
}

.marca-nombre {
  font-family: var(--lux-font-titulos);
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--lux-primary-dark);
}

.marca-subtitulo {
  font-family: var(--lux-font);
  font-size: 0.65rem;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lux-primary-texto);
}

/* --- Toggler --- */
.site-header .nav-toggler {
  padding: 0.5rem;
  border: 0;
  background-color: transparent;
  color: var(--lux-secondary);
  box-shadow: none;
}

.site-header .nav-toggler:hover,
.site-header .nav-toggler:active {
  background-color: transparent;
  color: var(--lux-primary-dark);
}

.site-header .nav-toggler svg {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

/* --- Offcanvas --- */
.site-header .offcanvas {
  --bs-offcanvas-width: min(100%, 26rem);
  background-color: var(--lux-tertiary);
  color: var(--lux-white);
}

.admin-bar .site-header .offcanvas {
  top: var(--wp-admin--admin-bar--height, 0px);
}

.site-header .offcanvas-header {
  padding: calc(1.25rem + var(--lux-seguro-arriba)) 1.5rem 1.25rem;
  border-bottom: 1px solid var(--lux-border-claro);
}

.site-header .offcanvas-header .marca-nombre {
  color: var(--lux-white);
}

.site-header .offcanvas-header .marca-subtitulo {
  color: var(--lux-primary);
}

.site-header .offcanvas-body {
  padding: 1.5rem;
}

.site-header .offcanvas:focus,
.site-header .offcanvas:focus-visible {
  outline: none;
}

.site-header .offcanvas .btn-close {
  opacity: 0.8;
  transition:
    opacity 0.2s ease,
    transform 0.3s ease;
}

.site-header .offcanvas .btn-close:hover {
  opacity: 1;
  transform: rotate(90deg);
}

.site-header .offcanvas .btn-close:focus {
  box-shadow: none;
}

.site-header .offcanvas .btn-close:focus-visible {
  opacity: 1;
  outline: 2px solid var(--lux-primary);
  outline-offset: 3px;
}

.site-header .nav-toggler:focus {
  box-shadow: none;
}

.site-header .nav-toggler:focus-visible {
  outline: 2px solid var(--lux-primary);
  outline-offset: 2px;
}

/* --- Menu --- */
.site-header .navbar-nav .nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  font-family: var(--lux-font-titulos);
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--lux-white);
  border-bottom: 1px solid var(--lux-border-claro);
  transition:
    color 0.2s ease,
    padding-left 0.2s ease;
}

.site-header .navbar-nav .nav-link:after {
  content: "\2192";
  font-family: var(--lux-font);
  font-size: 1.25rem;
  opacity: 0;
  transform: translateX(-0.5rem);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link:focus-visible {
  padding-left: 0.5rem;
  color: var(--lux-primary);
}

.site-header .navbar-nav .nav-link:hover:after,
.site-header .navbar-nav .nav-link:focus-visible:after {
  opacity: 1;
  transform: translateX(0);
}

.site-header .navbar-nav .nav-link.active,
.site-header .navbar-nav .current-menu-item > .nav-link {
  color: var(--lux-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}

.site-header .navbar-nav .menu-item-cta > .nav-link,
.site-header .navbar-nav .menu-item-cta > .nav-link.active {
  justify-content: center;
  margin-top: 2rem;
  padding: 1rem 1.75rem;
  font-family: var(--lux-font);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--lux-white);
  background-color: var(--lux-primary-texto);
  border-bottom: 0;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.site-header .navbar-nav .menu-item-cta > .nav-link:after {
  content: none;
}

.site-header .navbar-nav .menu-item-cta > .nav-link:hover,
.site-header .navbar-nav .menu-item-cta > .nav-link:focus-visible {
  padding-left: 1.75rem;
  color: var(--lux-white);
  background-color: var(--lux-primary-dark);
}

.site-header .navbar-nav .dropdown-toggle:after {
  content: "\2193";
  margin-left: 0;
  border: 0;
  vertical-align: middle;
  opacity: 1;
  transform: none;
  transition: transform 0.2s ease;
}

.site-header .navbar-nav .dropdown-toggle.show:after {
  transform: rotate(180deg);
}

.site-header .dropdown-menu {
  position: static;
  margin: 0;
  padding: 0.5rem 0 1rem 1rem;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--lux-border-claro);
}

.site-header .dropdown-item {
  padding: 0.6rem 0;
  font-family: var(--lux-font-titulos);
  font-size: 1.25rem;
  color: var(--lux-blanco-suave);
  background-color: transparent;
  white-space: normal;
  transition: color 0.2s ease;
}

.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus-visible,
.site-header .dropdown-item.active,
.site-header .current-menu-item > .dropdown-item {
  color: var(--lux-primary);
  background-color: transparent;
}

.site-header .dropdown-menu {
  --bs-dropdown-link-active-bg: transparent;
  --bs-dropdown-link-active-color: var(--lux-primary);
}

.site-header .navbar-nav .nav-link,
.site-header .dropdown-item {
  -webkit-tap-highlight-color: transparent;
}

.site-header .navbar-nav .nav-link:focus-visible,
.site-header .dropdown-item:focus-visible {
  box-shadow: none;
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

.site-header .navbar-nav .nav-link:active,
.site-header .dropdown-item:active {
  color: var(--lux-primary);
}

.site-header .navbar-nav .dropdown-toggle.show {
  color: var(--lux-primary);
}

.site-header .navbar-nav .menu-item-cta > .nav-link:focus-visible {
  outline: 2px solid var(--lux-white);
  outline-offset: 3px;
}

.site-header .navbar-nav .menu-item-cta > .nav-link:active {
  color: var(--lux-white);
  background-color: var(--lux-primary-dark);
}

/* ==== Footer ==== */
/* --- Footer --- */
.site-footer {
  padding-top: 3rem;
  padding-bottom: 1.5rem;
  background-color: var(--lux-tertiary);
  color: var(--lux-white);
}

.site-footer .marca-nombre {
  display: block;
  font-size: 1.1rem;
  color: var(--lux-white);
}

.site-footer .marca-subtitulo {
  display: block;
  margin-top: 0.4rem;
  color: var(--lux-primary);
}

.footer-copy {
  margin: 0.4rem 0 0;
  font-size: 0.7rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--lux-white) 50%, transparent);
}

.footer-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-enlaces a {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: color-mix(in srgb, var(--lux-white) 65%, transparent);
}

.footer-enlaces a:hover,
.footer-enlaces a:focus-visible {
  color: var(--lux-primary);
}

/* --- Kit digital --- */
.kit-digital {
  padding-top: 2rem;
  padding-bottom: 2rem;
  background-color: var(--lux-white);
  border-top: 1px solid var(--lux-border);
}

.kit-digital-logo {
  max-width: 100%;
  height: auto;
}

.kit-digital-texto {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--lux-texto-suave);
}

/* --- Colophon --- */
.colophon {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 0.25rem;
  background-color: var(--lux-white);
}

.colophon .colophon-texto {
  font-family: var(--lux-font);
  font-weight: 300;
  letter-spacing: -0.5px;
}

.colophon a {
  text-decoration: none;
  color: var(--lux-secondary);
}

.colophon svg > path {
  fill: var(--lux-secondary);
}

/* ==== WhatsApp ==== */
.whatsapp-flotante {
  position: fixed;
  z-index: 1030;
  right: 1.25rem;
  bottom: 15%;
  transform: translateY(50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  padding: 0.75rem;
  border-radius: 50%;
  color: var(--lux-white);
  background-color: var(--lux-primary);
  text-decoration: none;
  box-shadow: var(--lux-sombra);
  transition: background-color 0.2s ease;
}

.whatsapp-flotante:hover,
.whatsapp-flotante:focus-visible {
  color: var(--lux-white);
  background-color: var(--lux-primary-dark);
}

.whatsapp-flotante-anillo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  animation: whatsapp-anillo-giro 12s linear infinite;
}

.whatsapp-flotante:hover .whatsapp-flotante-anillo,
.whatsapp-flotante:focus-visible .whatsapp-flotante-anillo {
  animation-play-state: paused;
}

.whatsapp-flotante-anillo-texto {
  fill: currentColor;
  font-family: var(--lux-font);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.whatsapp-flotante-icono {
  position: relative;
  z-index: 1;
  width: 1.75rem;
  height: 1.75rem;
}

@keyframes whatsapp-anillo-giro {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ==== Lightbox ==== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1rem;
  background-color: color-mix(in srgb, var(--lux-tertiary) 95%, transparent);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0s linear 0.3s;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.3s ease,
    visibility 0s;
}

.lightbox-figura {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin: 0;
}

.lightbox-imagen,
.lightbox-video {
  display: block;
  max-width: 100%;
  max-height: calc(100svh - 10rem);
  object-fit: contain;
}

.lightbox-video {
  background-color: var(--lux-secondary);
}

.lightbox-cerrar,
.lightbox-anterior,
.lightbox-siguiente {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--lux-white);
  background-color: transparent;
  border: 1px solid var(--lux-border-claro);
  border-radius: 0;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.lightbox-cerrar:hover,
.lightbox-anterior:hover,
.lightbox-siguiente:hover {
  background-color: var(--lux-primary-dark);
  border-color: var(--lux-primary-dark);
}

.lightbox-cerrar {
  top: 1rem;
  right: 1rem;
}

.lightbox-anterior,
.lightbox-siguiente {
  top: auto;
  bottom: 1rem;
}

.lightbox-anterior {
  left: 1rem;
}

.lightbox-siguiente {
  right: 1rem;
}

.lightbox-cerrar svg,
.lightbox-anterior svg,
.lightbox-siguiente svg {
  width: 1.25rem;
  height: 1.25rem;
}

.lightbox [hidden] {
  display: none;
}

/* ==== Bloques reutilizables ==== */
/* --- Hero --- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: max(
    32rem,
    calc(100svh - var(--lux-header-alto) - var(--lux-seguro-arriba))
  );
  padding-top: 6rem;
  padding-bottom: 4rem;
  color: var(--lux-white);
  background-color: var(--lux-secondary);
  background-size: cover;
  background-position: center;
}

.hero:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--lux-velatura);
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero > .hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.hero > .container {
  width: 100%;
}

.hero .kicker {
  color: var(--lux-blanco-suave);
  margin-bottom: 1.25rem;
}

.hero .h1 {
  color: var(--lux-white);
  margin-bottom: 1.5rem;
}

.hero .text-highlight {
  display: block;
}

.hero-ubicacion {
  margin-bottom: 1.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--lux-blanco-suave);
}

.hero-texto {
  max-width: 36rem;
}

.hero-texto p {
  font-size: 1.05rem;
  color: var(--lux-blanco-suave);
}

.hero-texto p:last-child {
  margin-bottom: 0;
}

.hero-acciones {
  margin-top: 2rem;
}

.hero .hero-scroll {
  position: absolute;
  right: 1.5rem;
  bottom: 2rem;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.hero-scroll-texto {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--lux-blanco-suave);
}

.hero-scroll-linea {
  position: relative;
  display: block;
  width: 1px;
  height: 4rem;
  overflow: hidden;
  background-color: color-mix(in srgb, var(--lux-white) 25%, transparent);
}

.hero-scroll-linea:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 40%;
  background-color: var(--lux-white);
  animation: hero-scroll-bajada 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes hero-scroll-bajada {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(250%);
  }
}

.hero-interior {
  align-items: center;
  min-height: 24rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.hero-interior:after {
  background: var(--lux-velatura-lateral), var(--lux-velatura);
}

/* --- Presentacion --- */
.presentacion-mosaico {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0;
}

.presentacion-mosaico > * {
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
}

.presentacion-mosaico > :first-child,
.presentacion-mosaico > :nth-child(2):last-child {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

.presentacion-imagen {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.presentacion-texto p:last-child {
  margin-bottom: 0;
}

.presentacion-acciones {
  margin-top: 2.5rem;
}

/* --- Emplazamiento --- */
.emplazamiento {
  color: var(--lux-white);
  background-color: var(--lux-primary-dark);
}

.emplazamiento .kicker {
  color: color-mix(in srgb, var(--lux-primary) 65%, var(--lux-white));
}

.emplazamiento .h2 {
  color: var(--lux-white);
}

.emplazamiento p {
  color: var(--lux-blanco-suave);
}

.emplazamiento .separador {
  background-color: color-mix(in srgb, var(--lux-primary) 75%, transparent);
}

.emplazamiento-imagenes {
  position: relative;
  padding-right: 1.5rem;
  padding-bottom: 1.5rem;
  margin-bottom: 0;
}

.emplazamiento-imagen-principal {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.emplazamiento-imagen-secundaria {
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  width: 38%;
  aspect-ratio: 1;
  object-fit: cover;
}

/* --- Galeria --- */
.galeria-mosaico {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 3rem;
}

.galeria-item {
  position: relative;
  display: block;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background-color: var(--lux-gray-dark);
  cursor: zoom-in;
}

.galeria-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.galeria-item:hover img,
.galeria-item:focus-visible img {
  transform: scale(1.04);
}

/* --- Multimedia --- */
.multimedia {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.multimedia-texto {
  margin-bottom: 0;
}

.multimedia-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
  gap: 0.75rem;
  margin-top: 3rem;
  align-items: start;
}

.multimedia-item {
  position: relative;
  display: block;
  width: 100%;
  height: 320px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0.5rem;
  background-color: var(--lux-secondary);
  cursor: pointer;
}

.multimedia-item:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.multimedia-item--span-1 {
  grid-column: span 1;
}

.multimedia-item--span-2 {
  grid-column: span 2;
}

.multimedia-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition:
    opacity 0.4s ease,
    transform 0.6s ease;
}

.multimedia-video:not([poster]) {
  opacity: 0;
}

.multimedia-video.is-cargado {
  opacity: 1;
}

.multimedia-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  padding-left: 0.2rem;
  color: var(--lux-white);
  background-color: color-mix(in srgb, var(--lux-secondary) 35%, transparent);
  border: 1px solid var(--lux-blanco-suave);
  border-radius: 50%;
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  transition:
    opacity 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

.multimedia-item:hover:after,
.multimedia-item:focus-visible:after {
  opacity: 1;
}

.multimedia-item:hover .multimedia-video,
.multimedia-item:focus-visible .multimedia-video {
  transform: scale(1.04);
}

.multimedia-item:hover .multimedia-play,
.multimedia-item:focus-visible .multimedia-play {
  background-color: var(--lux-primary-dark);
  border-color: var(--lux-primary-dark);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.multimedia-grid--verticales {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 62%;
  margin-left: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
  margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
  padding: 0 calc(var(--bs-gutter-x, 1.5rem) * 0.5) 4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  scrollbar-width: none;
}

.multimedia-grid--verticales::-webkit-scrollbar {
  display: none;
}

.multimedia-grid--verticales .multimedia-item {
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: 1rem;
  box-shadow: 0 1.5rem 2.5rem -1.5rem rgba(0, 0, 0, 0.45);
  scroll-snap-align: start;
}

.multimedia-grid--verticales .multimedia-item:nth-child(even) {
  transform: translateY(2rem);
}

/* --- CTA banda --- */
.cta-banda {
  position: relative;
  padding-top: 6rem;
  padding-bottom: 6rem;
  text-align: center;
  color: var(--lux-white);
  background-color: var(--lux-secondary);
  background-size: cover;
  background-position: center;
}

.cta-banda:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    var(--lux-velatura),
    color-mix(in srgb, var(--lux-secondary) 45%, transparent);
}

.cta-banda > * {
  position: relative;
  z-index: 1;
}

.cta-banda .kicker {
  color: var(--lux-primary);
}

.cta-banda .h2 {
  color: var(--lux-white);
  margin-bottom: 2rem;
}

.cta-banda .text-highlight {
  display: block;
}

/* ==== Home ==== */
/* --- Villas --- */
.home-principal .villas {
  background-color: var(--lux-gray-dark);
}

.home-principal .villas-lista {
  margin-top: calc(3rem - var(--bs-gutter-y));
}

.home-principal .villa-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--lux-white);
}

.home-principal .villa-card:focus-within {
  outline: 2px solid var(--lux-primary);
  outline-offset: 3px;
}

.home-principal .villa-card-media {
  position: relative;
  overflow: hidden;
}

.home-principal .villa-card-imagen {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.home-principal .villa-card:hover .villa-card-imagen,
.home-principal .villa-card:focus-within .villa-card-imagen {
  transform: scale(1.04);
}

.home-principal .villa-card-cuerpo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  padding: 2rem 1.5rem;
}

.home-principal .villa-card-enlace {
  margin-top: auto;
}

.home-principal .villa-card-enlace:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.home-principal .villa-card-enlace:focus-visible {
  outline: 0;
}

.home-principal .villa-card:hover .btn-flecha {
  transform: translateX(0.3rem);
}

.home-principal .villa-card-etiqueta {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lux-secondary);
  background-color: var(--lux-white);
}

.home-principal .villa-card-lema {
  margin-bottom: 1rem;
}

.home-principal .villa-card .h3 {
  font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
}

.home-principal .villa-card-texto p:last-child {
  margin-bottom: 0;
}

.home-principal .villa-card-datos {
  margin: 1.5rem 0 2rem;
  padding: 0.9rem 0;
  font-size: 0.7rem;
  line-height: 1.6;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--lux-texto-suave);
  border-top: 1px solid var(--lux-border);
  border-bottom: 1px solid var(--lux-border);
}

/* --- FAQ --- */
.home-principal .faq-texto {
  margin-bottom: 1.5rem;
}

.home-principal .faq-item {
  border-bottom: 1px solid var(--lux-border);
}

.home-principal .faq-item:last-child {
  border-bottom: 0;
}

.home-principal .faq-pregunta {
  margin: 0;
  font: inherit;
}

.home-principal .faq-boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.25rem 0;
  font-family: var(--lux-font);
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: left;
  color: var(--lux-secondary);
  background-color: transparent;
  border: 0;
  transition: color 0.2s ease;
}

.home-principal .faq-boton:hover {
  color: var(--lux-primary-dark);
}

.home-principal .faq-icono {
  position: relative;
  flex: 0 0 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  color: var(--lux-primary-texto);
  transition: transform 0.2s ease;
}

.home-principal .faq-icono:before,
.home-principal .faq-icono:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
}

.home-principal .faq-icono:after {
  transform: rotate(90deg);
}

.home-principal .faq-boton.is-open .faq-icono {
  transform: rotate(45deg);
}

.home-principal .faq-respuesta-cuerpo {
  padding-bottom: 1.25rem;
}

.home-principal .faq-respuesta-cuerpo p {
  font-size: 0.9rem;
  line-height: 1.8;
}

.home-principal .faq-respuesta-cuerpo p:last-child {
  margin-bottom: 0;
}

/* ==== Villa ==== */
/* --- Presentacion --- */
.villa-principal .presentacion {
  background-color: var(--lux-gray-dark);
}

.villa-principal .presentacion .datos {
  grid-auto-flow: row;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--lux-border);
  border-bottom: 1px solid var(--lux-border);
}

.villa-principal .presentacion .datos-item + .datos-item {
  border-left-color: var(--lux-border);
}

.villa-principal .presentacion .datos-item:nth-child(odd) {
  border-left: 0;
}

.villa-principal .presentacion .datos-item:nth-child(n + 3) {
  border-top: 1px solid var(--lux-border);
}

.villa-principal .presentacion .datos-valor {
  color: var(--lux-primary-dark);
}

.villa-principal .presentacion .datos-etiqueta {
  color: var(--lux-texto-suave);
}

.villa-principal .presentacion .checklist li {
  gap: 1rem;
  padding: 1.5rem 1rem;
  font-size: 1.15rem;
}

.villa-principal .presentacion .checklist li:before {
  font-size: 0.9rem;
}

/* --- Videos --- */
.villa-principal .presentacion-videos {
  margin-top: 3.5rem;
}

.villa-principal .video-marco {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--lux-secondary);
}

.villa-principal .presentacion-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.villa-principal .carrusel-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
}

.villa-principal .carrusel-indicadores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.villa-principal .carrusel-indicadores button {
  width: 2rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: linear-gradient(var(--lux-border), var(--lux-border)) center /
    100% 2px no-repeat;
  transition: background-size 0.2s ease;
}

.villa-principal .carrusel-indicadores button.active {
  background-image: linear-gradient(
    var(--lux-primary-dark),
    var(--lux-primary-dark)
  );
}

.villa-principal .carrusel-flechas {
  display: flex;
  gap: 0.5rem;
}

.villa-principal .carrusel-flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--lux-border);
  border-radius: 50%;
  color: var(--lux-secondary);
  background-color: transparent;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.villa-principal .carrusel-flecha:hover,
.villa-principal .carrusel-flecha:focus-visible {
  color: var(--lux-white);
  background-color: var(--lux-primary-dark);
  border-color: var(--lux-primary-dark);
}

/* ==== Contacto ==== */
/* --- Contacto --- */
.contacto-principal .contacto {
  background-color: var(--lux-gray-dark);
}

.contacto-principal .contacto .h2 .text-highlight {
  display: block;
}

.contacto-principal .contacto-texto p:last-child {
  margin-bottom: 0;
}

.contacto-principal .contacto-datos {
  margin: 3.5rem 0 0;
  padding: 0;
  list-style: none;
}

.contacto-principal .contacto-dato {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contacto-principal .contacto-dato + .contacto-dato {
  margin-top: 1.5rem;
}

.contacto-principal .contacto-dato-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--lux-border);
}

.contacto-principal .contacto-dato-icono img {
  display: block;
  width: 1rem;
  height: 1rem;
  object-fit: contain;
}

.contacto-principal .contacto-dato-cuerpo {
  display: block;
  min-width: 0;
}

.contacto-principal .contacto-dato-etiqueta {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lux-texto-suave);
}

.contacto-principal .contacto-dato-valor {
  display: block;
  font-size: 1rem;
  line-height: 1.5;
  text-decoration: none;
  overflow-wrap: anywhere;
  color: var(--lux-secondary);
}

.contacto-principal a.contacto-dato-valor:hover,
.contacto-principal a.contacto-dato-valor:focus-visible {
  color: var(--lux-primary-dark);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* --- Pestanas --- */
.contacto-principal .contacto-tabs {
  flex-wrap: nowrap;
  gap: 1.75rem;
  margin-bottom: 2rem;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--lux-border);
  scrollbar-width: thin;
}

.contacto-principal .contacto-tabs .nav-item {
  flex-shrink: 0;
}

.contacto-principal .contacto-tabs .nav-link {
  margin-bottom: -1px;
  padding: 0.85rem 0;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--lux-texto-suave);
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.contacto-principal .contacto-tabs .nav-link:hover {
  color: var(--lux-secondary);
  border-bottom-color: var(--lux-border);
}

.contacto-principal .contacto-tabs .nav-link.active {
  color: var(--lux-secondary);
  background-color: transparent;
  border-bottom-color: var(--lux-primary-dark);
}

/* --- Formulario --- */
.form-card .nf-form-content {
  max-width: none;
  padding: 0;
}

.form-card .nf-form-fields-required,
.form-card .nf-before-form-content {
  margin-bottom: 1.5rem;
  font-size: 0.75rem;
  color: var(--lux-texto-suave);
}

.form-card nf-fields-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 1.25rem;
}

.form-card nf-field {
  grid-column: 1 / -1;
}

.form-card .nf-form-content .nf-field-container {
  margin-bottom: 1.5rem;
}

.form-card .nf-form-content .nf-field-label {
  margin-bottom: 0.6rem;
}

.form-card .nf-form-content .nf-field-label label {
  font-family: var(--lux-font);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lux-texto-suave);
}

.form-card .nf-form-content .ninja-forms-req-symbol {
  color: inherit;
}

.form-card
  .nf-form-content
  .ninja-forms-field:not([type="submit"]):not([type="button"]):not(
    [type="checkbox"]
  ):not([type="radio"]) {
  width: 100%;
  height: auto;
  padding: 0.9rem 1rem;
  font-family: var(--lux-font);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--lux-secondary);
  background-color: var(--lux-white);
  border: 1px solid var(--lux-border);
  border-radius: 0;
  box-shadow: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.form-card .nf-form-content textarea.ninja-forms-field {
  min-height: 8rem;
  resize: vertical;
}

.form-card .nf-form-content .ninja-forms-field::placeholder {
  color: color-mix(in srgb, var(--lux-secondary) 45%, transparent);
  opacity: 1;
}

.form-card
  .nf-form-content
  .ninja-forms-field:not([type="submit"]):not([type="button"]):not(
    [type="checkbox"]
  ):not([type="radio"]):focus {
  outline: 0;
  border-color: var(--lux-primary-dark);
  box-shadow: 0 0 0 1px var(--lux-primary-dark);
}

.form-card .nf-form-content .submit-container .ninja-forms-field,
.form-card .nf-form-content input[type="submit"],
.form-card .nf-form-content input[type="button"] {
  display: block;
  width: 100%;
  height: auto;
  padding: 1.1rem 1.5rem;
  font-family: var(--lux-font);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lux-white);
  background-color: var(--lux-primary-dark);
  border: 1px solid var(--lux-primary-dark);
  border-radius: 0;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.form-card .nf-form-content .submit-container .ninja-forms-field:hover,
.form-card .nf-form-content .submit-container .ninja-forms-field:focus-visible,
.form-card .nf-form-content input[type="submit"]:hover,
.form-card .nf-form-content input[type="button"]:hover {
  color: var(--lux-white);
  background-color: var(--lux-secondary);
  border-color: var(--lux-secondary);
}

.form-card .nf-form-content .nf-error .ninja-forms-field {
  border-color: currentColor;
}

.form-card .nf-error-msg,
.form-card .nf-response-msg {
  margin-top: 0.5rem;
  font-size: 0.8rem;
}

/* ==== Legal ==== */
.legal-hero {
  padding-top: 4rem;
  padding-bottom: 3.5rem;
  color: var(--lux-white);
  background-color: var(--lux-primary-dark);
}

.legal-hero .h1 {
  margin: 0;
  font-size: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
  color: var(--lux-white);
}

.legal-cuerpo {
  padding-top: 3.5rem;
  padding-bottom: 5rem;
}

.legal-contenido {
  color: var(--lux-secondary);
}

.legal-contenido > :first-child {
  margin-top: 0;
}

.legal-contenido h2,
.legal-contenido h3,
.legal-contenido h4 {
  font-family: var(--lux-font-titulos);
  font-weight: 400;
  color: var(--lux-secondary);
}

.legal-contenido h2 {
  margin: 2.5rem 0 1rem;
  font-size: 1.6rem;
}

.legal-contenido h3,
.legal-contenido h4 {
  margin: 2rem 0 0.75rem;
  font-size: 1.25rem;
}

.legal-contenido ul,
.legal-contenido ol {
  margin-bottom: 1.5rem;
  padding-left: 1.25rem;
}

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

.legal-contenido a {
  color: var(--lux-primary-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.legal-contenido a:hover,
.legal-contenido a:focus-visible {
  color: var(--lux-primary-texto);
}

.legal-contenido .wp-block-table {
  margin: 1.5rem 0 2rem;
  overflow-x: auto;
}

.legal-contenido table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.legal-contenido th,
.legal-contenido td {
  padding: 0.75rem;
  border: 1px solid var(--lux-border);
  text-align: left;
  vertical-align: top;
}

.legal-contenido th {
  font-weight: 500;
  background-color: var(--lux-gray-dark);
}

/* ==== 404 ==== */
.error-404 {
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--lux-header-alto) - var(--lux-seguro-arriba));
  padding-top: 4rem;
  padding-bottom: 4rem;
  text-align: center;
  background-color: var(--lux-white);
}

.error-404-ilustracion {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin: 0 auto 2.5rem;
  color: var(--lux-primary-dark);
}

.error-404-numero {
  font-family: var(--lux-font-titulos);
  font-size: 200px;
  font-weight: 400;
  fill: currentColor;
}

.error-404-marco,
.error-404-horizonte,
.error-404-pajaro {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.error-404-sol {
  fill: var(--lux-primary);
}

.error-404-ola {
  fill: none;
  stroke: var(--lux-primary);
  stroke-width: 1.5;
  stroke-linecap: round;
  animation: error-404-oleaje 4s linear infinite;
}

.error-404-ola-2 {
  animation-duration: 5.5s;
  opacity: 0.7;
}

.error-404-ola-3 {
  animation-duration: 7s;
  opacity: 0.45;
}

@keyframes error-404-oleaje {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-40px);
  }
}

.error-404-texto {
  max-width: 34rem;
  margin: 0 auto 2.5rem;
  color: var(--lux-texto-suave);
}

.error-404-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 2rem;
}

/* ==== MQ ==== */
/*sm*/
@media (min-width: 576px) {
  /* ==== Generales ==== */
  /* --- Base --- */

  /* --- Kicker --- */

  /* --- Botones --- */

  /* --- Enlace subrayado --- */

  /* --- Checklist --- */
  .checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .checklist li:nth-child(2) {
    border-top: 0;
  }

  .checklist li:nth-child(odd) {
    border-right: 1px solid var(--lux-border);
  }

  /* --- Datos --- */
  .datos-item {
    padding: 1.5rem 1rem;
  }

  /* ==== Header ==== */
  /* --- Barra --- */

  /* --- Marca --- */

  /* --- Toggler --- */

  /* --- Offcanvas --- */

  /* --- Menu --- */

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

  /* --- Kit digital --- */

  /* --- Colophon --- */

  /* ==== WhatsApp ==== */

  /* ==== Lightbox ==== */

  /* ==== Bloques reutilizables ==== */
  /* --- Hero --- */

  /* --- Presentacion --- */

  /* --- Emplazamiento --- */

  /* --- Galeria --- */

  /* --- Multimedia --- */

  /* --- CTA banda --- */

  /* ==== Home ==== */
  /* --- Villas --- */

  /* --- FAQ --- */

  /* ==== Villa ==== */
  /* --- Presentacion --- */

  /* --- Videos --- */

  /* ==== Contacto ==== */
  /* --- Contacto --- */

  /* --- Pestanas --- */

  /* --- Formulario --- */

  /* ==== Legal ==== */

  /* ==== 404 ==== */
}

/*md*/
@media (min-width: 768px) {
  /* ==== Generales ==== */
  /* --- Base --- */
  section {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  /* --- Kicker --- */

  /* --- Botones --- */

  /* --- Enlace subrayado --- */

  /* --- Checklist --- */

  /* --- Datos --- */
  .datos-valor {
    font-size: 1.6rem;
  }

  /* ==== Header ==== */
  /* --- Barra --- */

  /* --- Marca --- */

  /* --- Toggler --- */

  /* --- Offcanvas --- */

  /* --- Menu --- */

  /* ==== Footer ==== */
  /* --- Footer --- */
  .footer-enlaces {
    justify-content: flex-end;
  }

  /* --- Kit digital --- */

  /* --- Colophon --- */

  /* ==== WhatsApp ==== */

  /* ==== Lightbox ==== */
  .lightbox {
    padding: 4rem 5.5rem;
  }

  .lightbox-anterior,
  .lightbox-siguiente {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  .lightbox-anterior {
    left: 1.5rem;
  }

  .lightbox-siguiente {
    right: 1.5rem;
  }

  .lightbox-cerrar {
    top: 1.5rem;
    right: 1.5rem;
  }

  /* ==== Bloques reutilizables ==== */
  /* --- Hero --- */
  .hero-interior {
    min-height: 28rem;
  }

  /* --- Presentacion --- */

  /* --- Emplazamiento --- */

  /* --- Galeria --- */
  .galeria-mosaico {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* --- Multimedia --- */
  .multimedia-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }

  .multimedia-item {
    height: 420px;
  }

  .multimedia-item--span-3 {
    grid-column: span 3;
  }

  .multimedia-item--span-4 {
    grid-column: span 4;
  }

  .multimedia-grid--verticales {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row dense;
    margin-left: 0;
    margin-right: 0;
    padding: 0 0 3rem;
    gap: 1.25rem;
    overflow: visible;
  }

  .multimedia-grid--verticales .multimedia-item:nth-child(even) {
    transform: none;
  }

  .multimedia-grid--verticales .multimedia-item:nth-child(3n + 2),
  .multimedia-grid--verticales .multimedia-item:last-child:nth-child(3n + 1) {
    transform: translateY(3rem);
  }

  .multimedia-grid--verticales .multimedia-item:last-child:nth-child(3n + 1) {
    grid-column: 2;
    width: 100%;
  }

  /* --- CTA banda --- */
  .cta-banda {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  /* ==== Home ==== */
  /* --- Villas --- */

  /* --- FAQ --- */

  /* ==== Villa ==== */
  /* --- Presentacion --- */
  .villa-principal .presentacion .datos {
    grid-auto-flow: column;
    grid-template-columns: none;
  }

  .villa-principal .presentacion .datos-item:nth-child(odd) {
    border-left: 1px solid var(--lux-border);
  }

  .villa-principal .presentacion .datos-item:first-child {
    border-left: 0;
  }

  .villa-principal .presentacion .datos-item:nth-child(n + 3) {
    border-top: 0;
  }

  /* --- Videos --- */

  /* ==== Contacto ==== */
  /* --- Contacto --- */

  /* --- Pestanas --- */

  /* --- Formulario --- */

  /* ==== Legal ==== */

  /* ==== 404 ==== */
  .form-card nf-fields-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-card nf-field:has(.nf-mitad),
  .form-card nf-field:has(.one-half) {
    grid-column: auto;
  }
}

/*lg*/
@media (min-width: 992px) {
  /* ==== Generales ==== */
  /* --- Base --- */
  :root {
    --lux-header-alto: 5rem;
  }

  section {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  /* --- Kicker --- */
  .kicker-linea {
    margin-bottom: 4rem;
  }

  /* --- Botones --- */

  /* --- Enlace subrayado --- */

  /* --- Checklist --- */

  /* --- Datos --- */

  /* ==== Header ==== */
  /* --- Barra --- */

  /* --- Marca --- */

  /* --- Toggler --- */

  /* --- Offcanvas --- */

  /* --- Menu --- */
  .site-header .navbar-nav {
    align-items: center;
    gap: 2rem;
  }

  .site-header .navbar-nav .nav-link {
    position: relative;
    display: block;
    padding: 0.4rem 0;
    font-family: var(--lux-font);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--lux-secondary);
    border-bottom: 0;
  }

  .site-header .navbar-nav .nav-link:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: var(--lux-primary);
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
  }

  .site-header .navbar-nav .nav-link:hover,
  .site-header .navbar-nav .nav-link:focus-visible {
    padding-left: 0;
    color: var(--lux-primary-dark);
  }

  .site-header .navbar-nav .nav-link:hover:after,
  .site-header .navbar-nav .nav-link:focus-visible:after {
    transform: scaleX(1);
  }

  .site-header .navbar-nav .nav-link.active,
  .site-header .navbar-nav .current-menu-item > .nav-link {
    color: var(--lux-primary-dark);
    text-decoration: none;
  }

  .site-header .navbar-nav .nav-link.active:after,
  .site-header .navbar-nav .current-menu-item > .nav-link:after {
    transform: scaleX(1);
  }

  .site-header .navbar-nav .menu-item-cta > .nav-link,
  .site-header .navbar-nav .menu-item-cta > .nav-link.active {
    margin-top: 0;
    padding: 1.1rem 2rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--lux-white);
  }

  .site-header .navbar-nav .menu-item-cta > .nav-link:hover,
  .site-header .navbar-nav .menu-item-cta > .nav-link:focus-visible {
    padding-left: 2rem;
    color: var(--lux-white);
  }

  .site-header .navbar-nav .menu-item-cta > .nav-link:after {
    content: none;
  }

  .site-header .navbar-nav .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .site-header .navbar-nav .dropdown-toggle:after {
    position: static;
    height: auto;
    font-size: 0.7rem;
    background-color: transparent;
    transform: none;
  }

  .site-header .navbar-nav .dropdown-toggle:hover:after,
  .site-header .navbar-nav .dropdown-toggle:focus-visible:after {
    transform: none;
  }

  .site-header .navbar-nav .dropdown-toggle.show:after {
    transform: rotate(180deg);
  }

  .site-header .dropdown-menu {
    position: absolute;
    min-width: 15rem;
    margin-top: 1rem;
    padding: 0.75rem 0;
    background-color: var(--lux-white);
    border: 1px solid var(--lux-border);
    box-shadow: var(--lux-sombra);
  }

  .site-header .dropdown-item {
    padding: 0.6rem 1.5rem;
    font-family: var(--lux-font);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--lux-secondary);
  }

  .site-header .dropdown-item:hover,
  .site-header .dropdown-item:focus-visible,
  .site-header .dropdown-item.active,
  .site-header .current-menu-item > .dropdown-item {
    color: var(--lux-primary-dark);
    background-color: var(--lux-gray-dark);
  }

  .site-header .navbar-nav .nav-link:active,
  .site-header .navbar-nav .dropdown-toggle.show {
    color: var(--lux-primary-dark);
  }

  .site-header .dropdown-item:active {
    color: var(--lux-primary-dark);
    background-color: var(--lux-gray-dark);
  }

  .site-header .navbar-nav .menu-item-cta > .nav-link:focus-visible {
    outline-color: var(--lux-primary-dark);
  }

  /* ==== Footer ==== */
  /* --- Footer --- */
  .site-footer {
    padding-bottom: 3rem;
  }

  /* --- Kit digital --- */

  /* --- Colophon --- */

  /* ==== WhatsApp ==== */

  /* ==== Lightbox ==== */

  /* ==== Bloques reutilizables ==== */
  /* --- Hero --- */
  .hero:not(.hero-con-video) {
    background-attachment: fixed;
  }

  .hero {
    min-height: max(
      36rem,
      calc(100svh - var(--lux-header-alto) - var(--lux-seguro-arriba))
    );
    padding-bottom: 5rem;
  }

  .hero .hero-scroll {
    display: flex;
    right: 8rem;
  }

  .hero-interior {
    min-height: 32rem;
    padding-bottom: 4rem;
  }

  /* --- Presentacion --- */

  /* --- Emplazamiento --- */
  .emplazamiento-imagenes {
    padding-right: 0;
  }

  .emplazamiento-imagen-secundaria {
    right: -1.5rem;
    width: 35%;
  }

  /* --- Galeria --- */
  .galeria-mosaico {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 16rem 14rem;
    gap: 0.8rem;
    margin-top: 5rem;
  }

  .galeria-item {
    aspect-ratio: auto;
  }

  .galeria-item:nth-child(6n + 1),
  .galeria-item:nth-child(6n) {
    grid-column: span 2;
  }

  .galeria-item:nth-child(6n + 1):last-child,
  .galeria-item:nth-child(6n + 4):last-child {
    grid-column: 1 / -1;
  }

  .galeria-item:nth-child(6n + 2):last-child {
    grid-column: span 2;
  }

  .galeria-item:nth-child(6n + 5):last-child {
    grid-column: span 3;
  }

  /* --- Multimedia --- */
  .multimedia-fluid {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .multimedia-grid--verticales {
    grid-template-columns: repeat(var(--multimedia-columnas), minmax(0, 1fr));
    gap: 1rem;
    padding-bottom: 3.5rem;
  }

  .multimedia-grid--verticales .multimedia-item:nth-child(3n + 2),
  .multimedia-grid--verticales .multimedia-item:last-child:nth-child(3n + 1) {
    transform: none;
  }

  .multimedia-grid--verticales .multimedia-item:last-child:nth-child(3n + 1) {
    grid-column: auto;
  }

  .multimedia-grid--verticales .multimedia-item:nth-child(even),
  .multimedia-grid--verticales .multimedia-item:last-child:nth-child(even) {
    transform: translateY(3.5rem);
  }

  /* --- CTA banda --- */
  .cta-banda {
    background-attachment: fixed;
  }

  .cta-banda {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  /* ==== Home ==== */
  /* --- Villas --- */
  .home-principal .villa-card-cuerpo {
    padding: 2.5rem 2.25rem;
  }

  /* --- FAQ --- */

  /* ==== Villa ==== */
  /* --- Presentacion --- */

  /* --- Videos --- */

  /* ==== Contacto ==== */
  /* --- Contacto --- */

  /* --- Pestanas --- */

  /* --- Formulario --- */

  /* ==== Legal ==== */
  .legal-hero {
    padding-top: 6rem;
    padding-bottom: 5rem;
  }

  .legal-cuerpo {
    padding-top: 5rem;
    padding-bottom: 7rem;
  }

  /* ==== 404 ==== */
}

/*xl*/
@media (min-width: 1200px) {
  /* ==== Generales ==== */
  /* --- Base --- */
  section {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }

  /* --- Kicker --- */

  /* --- Botones --- */

  /* --- Enlace subrayado --- */

  /* --- Checklist --- */

  /* --- Datos --- */
  .datos-valor {
    font-size: 1.75rem;
  }

  /* ==== Header ==== */
  /* --- Barra --- */

  /* --- Marca --- */

  /* --- Toggler --- */

  /* --- Offcanvas --- */

  /* --- Menu --- */
  .site-header .navbar-nav {
    gap: 2.25rem;
  }

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

  /* --- Kit digital --- */

  /* --- Colophon --- */

  /* ==== WhatsApp ==== */

  /* ==== Lightbox ==== */

  /* ==== Bloques reutilizables ==== */
  /* --- Hero --- */
  .hero-interior {
    min-height: 34rem;
  }

  /* --- Presentacion --- */

  /* --- Emplazamiento --- */

  /* --- Galeria --- */
  .galeria-mosaico {
    grid-auto-rows: 19.5rem 17rem;
  }

  /* --- Multimedia --- */

  /* --- CTA banda --- */

  /* ==== Home ==== */
  /* --- Villas --- */

  /* --- FAQ --- */

  /* ==== Villa ==== */
  /* --- Presentacion --- */

  /* --- Videos --- */

  /* ==== Contacto ==== */
  /* --- Contacto --- */

  /* --- Pestanas --- */

  /* --- Formulario --- */

  /* ==== Legal ==== */

  /* ==== 404 ==== */
}

/*xxl*/
@media (min-width: 1400px) {
  /* ==== Generales ==== */
  /* --- Base --- */

  /* --- Kicker --- */

  /* --- Botones --- */

  /* --- Enlace subrayado --- */

  /* --- Checklist --- */

  /* --- Datos --- */

  /* ==== Header ==== */
  /* --- Barra --- */

  /* --- Marca --- */

  /* --- Toggler --- */

  /* --- Offcanvas --- */

  /* --- Menu --- */

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

  /* --- Kit digital --- */

  /* --- Colophon --- */

  /* ==== WhatsApp ==== */

  /* ==== Lightbox ==== */

  /* ==== Bloques reutilizables ==== */
  /* --- Hero --- */

  /* --- Presentacion --- */

  /* --- Emplazamiento --- */

  /* --- Galeria --- */
  .galeria-mosaico {
    grid-auto-rows: 22.5rem 19.5rem;
  }

  /* --- Multimedia --- */

  /* --- CTA banda --- */

  /* ==== Home ==== */
  /* --- Villas --- */

  /* --- FAQ --- */

  /* ==== Villa ==== */
  /* --- Presentacion --- */

  /* --- Videos --- */

  /* ==== Contacto ==== */
  /* --- Contacto --- */

  /* --- Pestanas --- */

  /* --- Formulario --- */

  /* ==== Legal ==== */

  /* ==== 404 ==== */
}

/*reduced motion*/
@media (prefers-reduced-motion: reduce) {
  /* ==== WhatsApp ==== */
  .whatsapp-flotante-anillo {
    animation: none;
  }

  /* ==== Bloques reutilizables ==== */
  /* --- Hero --- */
  .hero-scroll-linea:after {
    animation: none;
  }

  /* ==== 404 ==== */
  .error-404-ola {
    animation: none;
  }
}