/* ==========================================================================
   Royal by CISS - Hoja de estilos global
   Único CSS del sitio. Las clases están pensadas para reutilizarse
   en el index y en todas las páginas interiores.
   Estructura de clases compatible con WordPress (menus, custom logo).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */
:root {
    /* Colores */
    --color-primary: #1a1a1a;
    --color-accent: #c09e6f;          /* dorado de la marca */
    --color-accent-dark: #a8875a;
    --color-accent-soft: rgba(192, 158, 111, 0.12);  /* dorado translúcido (seleccionados) */
    --color-error: #e5484d;
    --color-whatsapp: #25d366;
    --color-whatsapp-dark: #1eb257;
    --color-waze: #4a8cff;
    --color-waze-dark: #2f74ea;
    --color-maps: #ea4335;            /* rojo del pin de Google Maps */
    --color-facebook: #1877f2;
    --color-linkedin: #0a66c2;
    --color-text: #333333;
    --color-text-light: #777777;
    --color-bg: #ffffff;
    --color-bg-alt: #f5f5f5;
    --color-border: #e5e5e5;
    --color-white: #ffffff;
    --color-dark: #111111;
    --color-darker: #0c0c0c;          /* fondo de secciones oscuras */
    --color-charcoal: #141414;        /* fondo oscuro alternativo */
    --color-graphite: #171717;        /* fondo oscuro alternativo */
    --color-jet: #161616;             /* fondo oscuro alternativo */
    --color-black: #000000;
    --color-muted-dark: #8a8a8a;      /* texto secundario sobre fondo oscuro */
    --color-soft-dark: #c8c8c8;       /* texto de listas sobre fondo oscuro */
    --color-divider-dark: #262626;
    --color-line-dark: #1a1a1a;       /* línea divisoria sutil (footer) */
    --color-dim-dark: #4a4a4a;        /* texto muy tenue sobre negro */
    --color-logo-box: #2a2a2a;        /* gris oscuro de botones (.btn--dark) */
    --color-surface-dark: #1d1d1d;    /* cajas sobre fondo oscuro (autor, widgets) */
    --color-label-dark: #4a4a4a;      /* etiquetas tenues ("Desde", datos del proyecto) */
    --overlay-header: rgba(25, 25, 25, 0.55);
    --overlay-hero: linear-gradient(90deg, rgba(12, 14, 26, 0.9) 0%, rgba(12, 14, 26, 0) 50%, rgba(0, 0, 0, 0) 100%);
    --overlay-cta: linear-gradient(0deg, rgba(12, 14, 26, 0.8) 0%, rgba(12, 14, 26, 0.8) 100%);
    --overlay-page-hero:
        linear-gradient(90deg, rgba(12, 14, 26, 0.8) 0%, rgba(12, 14, 26, 0) 50%, rgba(0, 0, 0, 0) 100%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.05) 100%);
    --overlay-tag: rgba(20, 20, 30, 0.85);  /* fondo de etiquetas sobre imágenes */
    --overlay-subnav: rgba(45, 45, 45, 0.6); /* fondo del submenú de secciones */
    --overlay-modal: rgba(0, 0, 0, 0.8);    /* fondo oscuro detrás de los modales */

    /* Efecto vidrio (glass) */
    --glass-bg: rgba(60, 60, 60, 0.55);
    --glass-blur: blur(18px) saturate(140%);
    --glass-border: rgba(255, 255, 255, 0.1);

    /* Tipografía */
    --font-base: 'Montserrat', sans-serif;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --ls-wide: 0.15em;                /* letter-spacing de textos en mayúscula */

    /* Layout */
    --container-width: 1240px;
    --gutter: 20px;
    --header-height: 80px;
    --subnav-height: 50px;
    --page-hero-height: 600px;        /* alto de los banners interiores */
    --section-padding: 80px;
    --radius: 4px;
    --transition: all 0.3s ease;
}

/* --------------------------------------------------------------------------
   2. Reset / Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-base);
    font-weight: var(--fw-regular);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

body.menu-open {
    overflow: hidden;
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

ul,
ol {
    list-style: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

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

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--fw-bold);
    line-height: 1.2;
    color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.section {
    padding: var(--section-padding) 0;
}

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

/* Sección oscura: define los colores de texto claros.
   El tono de fondo se puede cambiar combinándola con una clase .bg-* */
.section--dark {
    background-color: var(--color-darker);
    color: var(--color-white);
}

/* Fondos */
.bg-darker   { background-color: var(--color-darker); }
.bg-charcoal { background-color: var(--color-charcoal); }
.bg-graphite { background-color: var(--color-graphite); }
.bg-jet      { background-color: var(--color-jet); }
.bg-black    { background-color: var(--color-black); }

.section--compact {
    padding: 40px 0;
}

/* Bloque de dos columnas: texto + imagen */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
}

/* Invierte el orden (imagen a la izquierda) */
.split--reverse .split__media {
    order: -1;
}

.split__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--color-divider-dark);
}

.split__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.split__media--wide {
    aspect-ratio: 16 / 9;
}

/* Respeta la proporción original de la imagen (sin recorte) */
.split__media--natural {
    aspect-ratio: auto;
}

.split__media--natural img {
    height: auto;
}

.split__content .text-muted {
    max-width: 440px;
}

/* Alinea las columnas arriba en lugar de al centro */
.split--top {
    align-items: start;
}

/* Textos sin límite de ancho dentro de la columna */
.split__content--wide .text-muted {
    max-width: none;
    margin-bottom: 24px;
}

/* Contenedor de imagen con proporción fija (usar con una clase .ratio-*) */
.media {
    overflow: hidden;
    background-color: var(--color-divider-dark);
}

.media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ratio-4x3      { aspect-ratio: 4 / 3; }
.ratio-16x9     { aspect-ratio: 16 / 9; }
.ratio-panorama { aspect-ratio: 8 / 3; }

/* Imágenes apiladas */
.media-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Columna con imagen + caja destacada debajo */
.split__aside {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Caja destacada con texto y botón */
.callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 20px;
    background-color: var(--color-black);
}

.callout__title {
    font-size: 14px;
    font-weight: var(--fw-medium);
    color: var(--color-white);
    margin-bottom: 4px;
}

.callout__text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-muted-dark);
    max-width: 260px;
}

.callout .btn {
    flex-shrink: 0;
    padding: 12px 18px;
    font-size: 9px;
}

/* --------------------------------------------------------------------------
   4. Tipografía reutilizable
   -------------------------------------------------------------------------- */

/* Texto pequeño en mayúsculas sobre los títulos */
.eyebrow {
    display: block;
    font-size: 12px;
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    margin-bottom: 16px;
}

.eyebrow--light {
    font-size: 10px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.25em;
    margin-bottom: 20px;
}

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

/* Título grande y liviano */
.display-title {
    font-size: clamp(38px, 4vw, 52px);
    font-weight: var(--fw-light);
    line-height: 1.1;
    margin-bottom: 10px;
}

.display-title + .text-muted {
    margin-top: 24px;
}

.display-title--regular {
    font-weight: var(--fw-regular);
}

.display-title--md {
    font-size: clamp(30px, 3vw, 40px);
    line-height: 1.25;
    margin-bottom: 30px;
}

.display-title--md + .text-muted {
    margin-top: 0;
}

/* Línea dorada corta sobre un título */
.accent-line {
    display: block;
    width: 30px;
    height: 2px;
    background-color: var(--color-accent);
    margin-bottom: 24px;
}

/* Texto en columnas, cada una con su línea dorada arriba (ej. espacios comunes del proyecto) */
.text-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px 56px;
    margin-bottom: 40px;
}

.text-columns__item .text-muted {
    margin-bottom: 0;
}

/* Cifras destacadas (pisos, unidades, fecha, etc.) */
.stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 44px;
    margin-top: 8px;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat__value {
    font-size: clamp(28px, 2.6vw, 34px);
    font-weight: var(--fw-light);
    line-height: 1.1;
    color: var(--color-white);
}

.stat__label {
    font-size: 10px;
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-label-dark);
}

.section--dark .display-title {
    color: var(--color-white);
}

/* Dato pequeño en dorado (ubicación, fecha, etc.) */
.meta-text {
    font-size: 13px;
    color: var(--color-accent);
    margin-bottom: 36px;
}

.text-muted {
    font-size: 15px;
    color: var(--color-text-light);
    margin-bottom: 36px;
}

.section--dark .text-muted {
    color: var(--color-muted-dark);
}

/* Lista con guion dorado */
.dash-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 44px;
}

.dash-list li {
    position: relative;
    padding-left: 26px;
    font-size: 15px;
}

.section--dark .dash-list li {
    color: var(--color-soft-dark);
}

.dash-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.8em;
    width: 12px;
    height: 1px;
    background-color: var(--color-accent);
}

/* Encabezado de sección (título + bajada) */
.section-heading {
    margin-bottom: 36px;
}

.section-title {
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: var(--fw-light);
    line-height: 1.3;
}

.section-subtitle {
    margin-top: 6px;
    font-size: 13px;
    color: var(--color-text-light);
}

.section--dark .section-title {
    color: var(--color-white);
}

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

.section-title--sm {
    font-size: 20px;
    font-weight: var(--fw-regular);
}

.section-subtitle--sm {
    font-size: 12px;
}

.section-title--lg {
    font-size: clamp(28px, 3vw, 36px);
}

/* Fila de encabezado con enlace a la derecha */
.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 40px;
}

.section-header .section-heading {
    margin-bottom: 0;
}

.section--dark .section-subtitle.section-subtitle--light {
    color: var(--color-soft-dark);
}

/* Enlace de texto en mayúsculas ("Ver todos") */
.text-link {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    padding: 8px 0;
}

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

.section--dark .section-subtitle {
    color: var(--color-muted-dark);
}

/* --------------------------------------------------------------------------
   5. Botones
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    font-size: 11px;
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: 0;
    transition: var(--transition);
    text-align: center;
    cursor: pointer;
}

.btn--primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn--primary:hover {
    opacity: 0.85;
}

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

.btn--accent:hover {
    background-color: var(--color-accent-dark);
}

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

.btn--outline:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
}

.btn--black {
    background-color: var(--color-black);
    color: var(--color-white);
}

.btn--black:hover {
    background-color: var(--color-accent);
}

.btn--whatsapp {
    background-color: var(--color-whatsapp);
    color: var(--color-white);
}

.btn--whatsapp:hover {
    background-color: var(--color-whatsapp-dark);
}

.btn__icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}

/* Botón pequeño */
.btn--sm {
    gap: 8px;
    padding: 11px 16px;
    font-size: 9px;
}

.btn--sm .btn__icon {
    width: 13px;
    height: 13px;
}

.btn--waze {
    background-color: var(--color-waze);
    color: var(--color-white);
}

.btn--waze:hover {
    background-color: var(--color-waze-dark);
}

.btn--light {
    background-color: var(--color-soft-dark);
    color: var(--color-primary);
}

.btn--light:hover {
    background-color: var(--color-white);
}

.btn__icon--maps {
    color: var(--color-maps);
}

/* --------------------------------------------------------------------------
   6. Header / Menú principal
   (clases generadas por WordPress: .menu, .menu-item, .current-menu-item,
    .menu-item-has-children, .sub-menu, .custom-logo-link, .custom-logo)
   -------------------------------------------------------------------------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: var(--overlay-header);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: var(--transition);
}

.site-header.is-scrolled {
    background-color: rgba(17, 17, 17, 0.95);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
}

/* Logo */
.site-branding {
    align-self: flex-start;
    flex-shrink: 0;
}

/* El logo ya incluye su recuadro oscuro redondeado */
.custom-logo-link {
    display: block;
    margin-top: 4px;
}

.custom-logo {
    width: 72px;
    height: auto;
}

/* Navegación */
.main-navigation {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
}

.main-navigation .menu {
    display: flex;
    align-items: center;
    gap: 56px;
}

.main-navigation .menu-item {
    position: relative;
}

.main-navigation .menu-item > a {
    display: block;
    font-size: 14px;
    font-weight: var(--fw-regular);
    color: var(--color-white);
    padding: 8px 0;
}

.main-navigation .menu-item > a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a {
    color: var(--color-accent);
}

.main-navigation .current-menu-item > a {
    font-weight: var(--fw-semibold);
}

/* Botón dentro del menú (clase "menu-btn" asignada en WordPress) */
.main-navigation .menu-btn > a {
    padding: 9px 16px;
    font-size: 11px;
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
}

.main-navigation .menu-btn > a:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
}

/* Submenús */
.main-navigation .sub-menu {
    position: absolute;
    top: 100%;
    left: -20px;
    min-width: 220px;
    padding: 10px 0;
    background-color: rgba(17, 17, 17, 0.95);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition);
}

.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-navigation .sub-menu .menu-item > a {
    padding: 8px 20px;
    font-size: 13px;
}

/* Botón para desplegar submenús en móvil (lo inserta el JS) */
.main-navigation .submenu-toggle {
    display: none;
}

/* Redes sociales */
.social-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-links a {
    display: flex;
    color: var(--color-accent);
}

.social-links a:hover {
    color: var(--color-white);
}

.social-links svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* En escritorio las redes van pegadas al borde derecho, fuera del contenedor */
@media (min-width: 1025px) {
    .main-navigation .social-links {
        position: absolute;
        top: 0;
        right: 40px;
        height: var(--header-height);
    }
}

/* Redes sociales con etiqueta (sección "Síguenos") */
.social-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 60px;
}

.social-grid__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--color-text-light);
}

.social-grid__item:hover {
    color: var(--color-accent);
}

.social-grid__item svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.social-grid__item span {
    font-size: 10px;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

/* Botón hamburguesa */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 10px;
    z-index: 110;
}

.menu-toggle__bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-white);
    transition: var(--transition);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
    opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   7. Hero slider
   -------------------------------------------------------------------------- */
.hero-slider {
    position: relative;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    background-color: var(--color-dark);
    color: var(--color-white);
}

.hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease, visibility 1s ease;
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* Imagen de fondo */
.hero-slide__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
    transition: transform 7s ease;
}

.hero-slide.is-active .hero-slide__bg {
    transform: scale(1);
}

/* Capa oscura para legibilidad del texto */
.hero-slide::after,
.page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0.2) 100%);
}

/* Slider de la portada: degradado azul noche que se desvanece a mitad de pantalla */
.hero-slide::after {
    background: var(--overlay-hero);
}

/* Banners interiores: azul noche lateral + oscurecido de abajo hacia arriba */
.page-hero::after {
    background: var(--overlay-page-hero);
}

.hero-slide .container,
.page-hero .container {
    position: relative;
    z-index: 2;
}

.hero-slide__content,
.page-hero__content {
    max-width: 480px;
    padding-top: var(--header-height);
}

.hero-slide__title,
.page-hero__title {
    font-size: clamp(42px, 5.5vw, 72px);
    font-weight: var(--fw-bold);
    line-height: 1.05;
    color: var(--color-white);
    margin-bottom: 24px;
}

.hero-slide__title .text-accent,
.page-hero__title .text-accent {
    display: block;
}

.hero-slide__text,
.page-hero__text {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 40px;
}

/* Banner de páginas interiores (comparte título, texto y capa con el slider) */
.page-hero {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--page-hero-height);
    overflow: hidden;
    background-color: var(--color-dark);
    color: var(--color-white);
}

.page-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-hero__text {
    margin-bottom: 0;
}

.page-hero__text + .btn {
    margin-top: 32px;
}

/* Banner con título ancho (el texto mantiene un ancho cómodo de lectura) */
.page-hero--wide .page-hero__content {
    max-width: 760px;
}

.page-hero--wide .page-hero__text {
    max-width: 560px;
}

/* Banner bajo para páginas de texto (page.php: legales) */
.page-hero--compact {
    height: auto;
    padding: 60px 0 70px;   /* .page-hero__content ya suma el alto del header */
}

/* Banner de artículo destacado: título largo, liviano y más ancho */
.page-hero--post .page-hero__content {
    max-width: 820px;
}

.page-hero--post .page-hero__title {
    font-size: clamp(30px, 3.4vw, 50px);
    font-weight: var(--fw-light);
    line-height: 1.2;
    margin-bottom: 28px;
}

/* Banner a pantalla completa (ficha de proyecto) */
.page-hero--full {
    height: 100vh;
    min-height: 600px;
    max-height: none;
}

/* Si hay submenú, el contenido del banner se baja para no quedar debajo */
.page-subnav ~ .page-hero .page-hero__content {
    padding-top: calc(var(--header-height) + var(--subnav-height));
}

/* Submenú de secciones (fijo bajo el header) */
.page-subnav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    z-index: 99;
    height: var(--subnav-height);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--overlay-subnav);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    transition: var(--transition);
}

.site-header.is-scrolled ~ main .page-subnav {
    background-color: rgba(17, 17, 17, 0.95);
}

/* Botón del submenú: solo visible en móvil */
.page-subnav__toggle {
    display: none;
}

.page-subnav__list {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0 var(--gutter);
}

.page-subnav__link {
    display: block;
    padding: 6px 0;
    font-size: 12px;
    white-space: nowrap;
    color: var(--color-white);
}

.page-subnav__link:hover,
.page-subnav__link.is-active {
    color: var(--color-accent);
}

.page-subnav__link.is-active {
    font-weight: var(--fw-semibold);
}

/* Las secciones enlazadas desde el submenú no quedan tapadas al saltar */
main:has(.page-subnav) section[id] {
    scroll-margin-top: calc(var(--header-height) + var(--subnav-height));
}

/* Animación de entrada del contenido */
.hero-slide__content > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.hero-slide.is-active .hero-slide__content > * {
    opacity: 1;
    transform: translateY(0);
}

.hero-slide.is-active .hero-slide__content > *:nth-child(2) { transition-delay: 0.15s; }
.hero-slide.is-active .hero-slide__content > *:nth-child(3) { transition-delay: 0.3s; }
.hero-slide.is-active .hero-slide__content > *:nth-child(4) { transition-delay: 0.45s; }

/* Paginación */
.hero-slider__nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 50px;
    z-index: 5;
}

/* Paginación reutilizable para cualquier slider */
.slider-dots {
    display: flex;
    gap: 10px;
}

.slider-dot {
    width: 46px;
    height: 8px;
    border: 1px solid var(--color-accent);
    background-color: transparent;
    transition: var(--transition);
}

.slider-dot:hover,
.slider-dot.is-active {
    background-color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   8. Formularios
   -------------------------------------------------------------------------- */

/* Campo con etiqueta superior (reutilizable en filtros y formularios) */
.form-field {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 12px 16px;
    background-color: var(--color-black);
}

.form-field__label {
    font-size: 9px;
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-accent);
}

.form-field__select {
    width: 100%;
    padding: 2px 24px 2px 0;
    font-size: 13px;
    font-weight: var(--fw-medium);
    color: var(--color-white);
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    /* Flecha */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 12px;
}

.form-field__select option {
    background-color: var(--color-dark);
    color: var(--color-white);
}

.form-field:focus-within {
    box-shadow: inset 0 -2px 0 var(--color-accent);
}

/* Buscador de proyectos */
.search-form {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 1px;
    background-color: var(--color-divider-dark);  /* hace de separador entre campos */
}

.search-form .form-field {
    min-height: 56px;
}

.search-form__submit {
    height: 100%;
    padding: 14px 40px;
    white-space: nowrap;
    font-size: 9px;
}

/* --------------------------------------------------------------------------
   9. Tarjetas (posts, proyectos, etc.)
   -------------------------------------------------------------------------- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background-color: var(--color-divider-dark);  /* hace de separador entre tarjetas */
    border: 1px solid var(--color-divider-dark);
}

.card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-black);
}

.card__media {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background-color: var(--color-divider-dark);
}

.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.card:hover .card__media img {
    transform: scale(1.05);
}

.card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px 20px 26px;
}

.card__category {
    align-self: flex-start;
    font-size: 9px;
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 12px;
}

.card__title {
    font-size: 15px;
    font-weight: var(--fw-regular);
    line-height: 1.45;
    color: var(--color-white);
    margin-bottom: 16px;
}

.card__title a:hover {
    color: var(--color-accent);
}

.card__date {
    font-size: 12px;
    color: var(--color-accent);
}

/* Grilla por filas: columnas unidas con línea fina y filas separadas (listado del blog) */
.card-grid--rows {
    gap: 16px 1px;
    background-color: transparent;
    border: none;
}

/* Paginación de listados (the_posts_pagination de WordPress) */
.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 56px;
}

.pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    font-size: 13px;
    color: var(--color-white);
    border: 1px solid var(--color-divider-dark);
    transition: var(--transition);
}

.pagination a.page-numbers:hover,
.pagination .page-numbers.current {
    color: var(--color-primary);
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.pagination .page-numbers.dots {
    border-color: transparent;
}

.pagination .page-numbers svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

/* Grilla con separación amplia (sin líneas divisorias) */
.card-grid--spaced {
    gap: 80px 90px;
    background-color: transparent;
    border: none;
}

/* Etiqueta sobre la imagen (ubicación, estado, etc.) */
.card__media {
    position: relative;
}

.card__tag {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 9px;
    font-size: 9px;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--color-soft-dark);
    background-color: var(--overlay-tag);
}

/* Tarjeta de proyecto */
.card--project .card__media {
    aspect-ratio: 16 / 9;
}

.card--project .card__body {
    padding: 22px 18px 20px;
}

.card__price {
    font-size: 16px;
    font-weight: var(--fw-bold);
    line-height: 1.2;
    color: var(--color-accent);
    margin-bottom: 8px;
}

.card__price-label {
    font-size: 10px;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    color: var(--color-label-dark);
    margin-right: 2px;
}

.card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--color-muted-dark);
    margin-bottom: 14px;
}

.card__meta svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    flex-shrink: 0;
}

.card--project .card__title {
    font-size: 15px;
    font-weight: var(--fw-light);
    color: var(--color-accent);
    margin-bottom: 8px;
}

.card--project .card__title a:hover {
    color: var(--color-white);
}

.card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.6;
    color: var(--color-muted-dark);
    margin-bottom: 18px;
}

/* Botón a lo ancho, siempre al fondo de la tarjeta */
.card__btn {
    width: 100%;
    margin-top: auto;
    padding: 13px 16px;
    font-size: 10px;
}

/* --------------------------------------------------------------------------
   9b. Galería + lightbox
   -------------------------------------------------------------------------- */

/* Flechas cuadradas (reutilizables en cualquier slider) */
.slider-arrows {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.slider-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--color-white);
    background-color: var(--color-black);
    border: 1px solid var(--color-divider-dark);
    transition: var(--transition);
}

.slider-arrow svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.slider-arrow--accent,
.slider-arrow:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.slider-arrow--accent:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.gallery {
    --thumbs-visible: 5;
    --thumbs-gap: 8px;
}

/* Imagen principal */
.gallery__main {
    position: relative;
    aspect-ratio: 11 / 5;
    /* En pantallas bajas la imagen se limita para que las miniaturas sigan a la vista */
    max-height: max(320px, calc(100vh - var(--header-height) - var(--subnav-height) - 160px));
    width: 100%;
    overflow: hidden;
    background-color: var(--color-divider-dark);
    cursor: zoom-in;
}

.gallery__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.35s ease;
}

.gallery__image.is-loading {
    opacity: 0;
}

.gallery__counter {
    position: absolute;
    right: 16px;
    bottom: 14px;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.7);
    pointer-events: none;
}

/* Flechas sobre la imagen principal */
.gallery__nav {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--color-white);
    background-color: rgba(0, 0, 0, 0.45);
    transform: translateY(-50%);
    opacity: 0;
    transition: var(--transition);
}

.gallery__nav--prev { left: 14px; }
.gallery__nav--next { right: 14px; }

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

.gallery__nav:hover {
    background-color: var(--color-accent);
}

.gallery__nav svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* Pantallas táctiles: sin hover, las flechas y el botón de expandir se ven siempre */
@media (hover: none) {
    .gallery__main .gallery__nav,
    .gallery__main .gallery__expand {
        opacity: 1;
    }
}

.gallery__expand {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-white);
    background-color: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: var(--transition);
}

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

.gallery__expand:hover {
    background-color: var(--color-accent);
}

.gallery__expand svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

/* Miniaturas: se muestran --thumbs-visible a la vez; el resto se desplaza */
.gallery__thumbs {
    position: relative;   /* referencia para calcular la posición de cada miniatura */
    display: flex;
    gap: var(--thumbs-gap);
    margin-top: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.gallery__thumbs::-webkit-scrollbar {
    display: none;
}

.gallery__thumb {
    flex: 0 0 calc((100% - (var(--thumbs-visible) - 1) * var(--thumbs-gap)) / var(--thumbs-visible));
    aspect-ratio: 10 / 3;
    overflow: hidden;
    background-color: var(--color-divider-dark);
    opacity: 0.35;
    transition: opacity 0.3s ease;
}

.gallery__thumb:hover {
    opacity: 0.7;
}

.gallery__thumb.is-active {
    opacity: 1;
}

.gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Lightbox (lo crea el JS una sola vez) */
body.lightbox-open {
    overflow: hidden;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.94);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

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

.lightbox__image {
    max-width: calc(100vw - 160px);
    max-height: calc(100vh - 120px);
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.lightbox__image.is-loading {
    opacity: 0;
}

.lightbox__close,
.lightbox__nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    transition: var(--transition);
}

.lightbox__close:hover,
.lightbox__nav:hover {
    color: var(--color-accent);
}

.lightbox__close {
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
}

.lightbox__nav {
    top: 50%;
    width: 56px;
    height: 56px;
    transform: translateY(-50%);
}

.lightbox__nav--prev { left: 20px; }
.lightbox__nav--next { right: 20px; }

.lightbox svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.lightbox__counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--color-muted-dark);
}

/* --------------------------------------------------------------------------
   9c. Pestañas (genéricas) + planta tipo
   -------------------------------------------------------------------------- */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tab {
    padding: 10px 22px;
    font-size: 10px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.1em;
    color: var(--color-muted-dark);
    border: 1px solid var(--color-divider-dark);
    transition: var(--transition);
}

.tab:hover {
    color: var(--color-white);
    border-color: var(--color-muted-dark);
}

.tab.is-active {
    font-weight: var(--fw-semibold);
    color: var(--color-white);
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.tab-panel.is-active {
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Imagen de la planta con su leyenda */
.plan-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.plan-figure__caption {
    align-self: stretch;
    max-width: 420px;
    margin: 0 auto;
    font-size: 9px;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-label-dark);
}

.plan-figure img {
    width: 100%;
    max-width: 420px;
    max-height: 460px;
    object-fit: contain;
}

.plan-figure__img {
    transition: opacity 0.35s ease;
}

.plan-figure__img.is-loading {
    opacity: 0;
}

/* Distribución: listado | planta | información */
.plans {
    display: grid;
    grid-template-columns: minmax(250px, 0.85fr) 2.35fr;
    align-items: start;
    gap: 50px;
}

/* Imagen + información: queda fija bajo el header/submenú mientras se
   recorre el listado; al terminar el listado se mueve con la sección */
.plans__detail {
    position: sticky;
    top: calc(var(--header-height) + var(--subnav-height) + 30px);
    display: grid;
    grid-template-columns: 1.2fr 1.1fr;
    align-items: center;
    gap: 50px;
}

.plan-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.plan-group[hidden] {
    display: none;
}

/* Tarjeta de planta */
.plan-card {
    position: relative;
    padding: 20px 18px 16px;
    background-color: var(--color-graphite);
    border: 1px solid var(--color-divider-dark);
    cursor: pointer;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.plan-card:hover {
    border-color: var(--color-dim-dark);
}

.plan-card.is-selected {
    border-color: var(--color-accent);
}

.plan-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.plan-card__title {
    font-size: 17px;
    font-weight: var(--fw-bold);
    color: var(--color-white);
}

.plan-card__badge {
    padding: 3px 7px;
    font-size: 8px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
}

/* Estado no disponible (vendido, reservado, etc.) */
.plan-card__badge--muted {
    color: var(--color-dim-dark);
    border-color: var(--color-dim-dark);
}

.plan-card__subtitle {
    margin-top: 2px;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-dim-dark);
}

/* Superficies en tres cajas */
.plan-card__areas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 16px 0;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-divider-dark);
}

.plan-card__areas li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    font-size: 13px;
    font-weight: var(--fw-medium);
    color: var(--color-white);
    background-color: var(--color-divider-dark);
    border: 1px solid transparent;
}

.plan-card__areas span {
    font-size: 8px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-muted-dark);
}

.plan-card__areas .is-total {
    color: var(--color-accent);
    background-color: transparent;
    border-color: var(--color-accent);
}

.plan-card__price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 16px;
    font-weight: var(--fw-bold);
    color: var(--color-accent);
}

.plan-card__price span {
    font-size: 11px;
    font-weight: var(--fw-regular);
    color: var(--color-muted-dark);
}

/* Botón que cubre toda la tarjeta (clic en cualquier parte) */
.plan-card__link {
    margin-top: 12px;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-dim-dark);
    transition: color 0.3s ease;
}

.plan-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
}

.plan-card:hover .plan-card__link {
    color: var(--color-soft-dark);
}

.plan-card.is-selected .plan-card__link {
    color: var(--color-accent);
}

/* Información de la tipología */
.plan-info__title {
    font-size: clamp(22px, 2vw, 26px);
    font-weight: var(--fw-light);
    color: var(--color-white);
    margin-bottom: 14px;
}

.plan-info .accent-line {
    margin-bottom: 30px;
}

/* Cifras en columnas iguales con línea inferior */
.stats--grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 0;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--color-divider-dark);
}

/* Lista de precios (etiqueta a la izquierda, valor a la derecha) */
.price-list {
    margin: 10px 0 34px;
}

.price-list__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid var(--color-divider-dark);
}

/* Fila sin dato (ej. el modelo no tiene bodega): la oculta el JS de plantas */
.price-list__row[hidden] {
    display: none;
}

.price-list__row dt {
    font-size: 12px;
    color: var(--color-muted-dark);
}

.price-list__row dd {
    font-size: 14px;
    color: var(--color-soft-dark);
}

.price-list__row--highlight dd {
    font-size: 19px;
    font-weight: var(--fw-bold);
    color: var(--color-white);
}

/* --------------------------------------------------------------------------
   9d. Mosaico de imágenes con etiqueta (espacios comunes, etc.)
   -------------------------------------------------------------------------- */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.tile {
    position: relative;
    display: block;
    aspect-ratio: 10 / 7;
    overflow: hidden;
    background-color: var(--color-divider-dark);
    cursor: zoom-in;
}

.tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.tile:hover img {
    transform: scale(1.05);
}

/* Degradado inferior para que la etiqueta se lea sobre cualquier foto */
.tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.1) 45%, rgba(0, 0, 0, 0) 100%);
    transition: var(--transition);
}

.tile:hover::after {
    background-color: rgba(0, 0, 0, 0.15);
}

.tile__label {
    position: absolute;
    left: 16px;
    bottom: 18px;
    z-index: 1;
    font-size: 10px;
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Línea corta bajo la etiqueta */
.tile__label::after {
    content: '';
    display: block;
    width: 16px;
    height: 1px;
    margin-top: 6px;
    background-color: rgba(255, 255, 255, 0.6);
    transition: width 0.3s ease;
}

.tile:hover .tile__label::after {
    width: 32px;
}

/* --------------------------------------------------------------------------
   9e. Ubicación + mapa
   -------------------------------------------------------------------------- */
.location-grid {
    display: grid;
    grid-template-columns: 2fr 3fr;
    align-items: start;
    gap: 50px;
}

/* Bloques de información con etiqueta (dirección, horarios, etc.) */
.info-block + .info-block {
    margin-top: 40px;
}

.info-label {
    font-size: 9px;
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-dim-dark);
    margin-bottom: 12px;
}

.info-title {
    font-size: 15px;
    color: var(--color-white);
}

.info-text {
    font-size: 12px;
    color: var(--color-muted-dark);
}

/* Variante compacta de la lista (horarios) */
.price-list--compact {
    margin: 0;
}

.price-list--compact .price-list__row {
    padding: 11px 0;
}

.price-list--compact .price-list__row dd {
    font-size: 12px;
    color: var(--color-white);
    text-align: right;
}

/* Grupo de botones en línea */
.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Mapa embebido */
.map-embed {
    aspect-ratio: 12 / 7;
    overflow: hidden;
    background-color: var(--color-divider-dark);
}

.map-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Tono oscuro para el iframe estándar de Google (invierte colores) */
.map-embed--dark iframe {
    filter: invert(90%) hue-rotate(180deg) brightness(0.95) contrast(0.9);
}

/* --------------------------------------------------------------------------
   9f. Equipo / ejecutivos
   -------------------------------------------------------------------------- */

/* 3 columnas en escritorio, 2 en tablet, 1 en móvil */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.team-card {
    padding: 30px 28px;
    background-color: var(--color-black);
}

.team-card__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--color-divider-dark);
    margin-bottom: 26px;
}

.team-card__name {
    font-size: 18px;
    font-weight: var(--fw-semibold);
    color: var(--color-white);
    margin-bottom: 6px;
}

.team-card__role {
    font-size: 11px;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 26px;
}

/* Lista de contacto con ícono cuadrado */
.contact-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.contact-list__item {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    color: var(--color-soft-dark);
    word-break: break-all;
}

.contact-list__item:hover {
    color: var(--color-white);
}

.contact-list__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
}

.contact-list__icon svg {
    width: 16px;
    height: 16px;
}

.contact-list__icon--mail {
    background-color: var(--color-bg-alt);
    color: var(--color-text-light);
}

.contact-list__icon--mail svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.contact-list__icon--whatsapp {
    background-color: var(--color-whatsapp);
    color: var(--color-white);
}

.contact-list__icon--whatsapp svg {
    fill: currentColor;
}

/* --------------------------------------------------------------------------
   9g. Artículo (single post): cabecera, contenido y barra lateral
   -------------------------------------------------------------------------- */

/* Datos del artículo en la cabecera */
.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
    font-size: 11px;
    color: var(--color-soft-dark);
}

.post-meta__author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.post-meta__author img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--color-divider-dark);
}

.post-meta__author strong {
    display: block;
    font-size: 12px;
    font-weight: var(--fw-semibold);
    color: var(--color-white);
}

.post-meta__author span {
    font-size: 10px;
    color: var(--color-muted-dark);
}

.post-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.post-meta__item svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

/* Distribución: contenido + barra lateral */
.post-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 90px;
}

/* Contenido del editor (WordPress): estilos por etiqueta */
.entry-content {
    max-width: 780px;
}

.entry-content > * + * {
    margin-top: 20px;
}

.entry-content h2,
.entry-content h3 {
    margin-top: 56px;
    font-weight: var(--fw-regular);
    line-height: 1.3;
    color: var(--color-white);
}

.entry-content h2 { font-size: clamp(21px, 2vw, 25px); }
.entry-content h3 { font-size: 19px; }

.entry-content p,
.entry-content li {
    font-size: 14px;
    line-height: 1.85;
    color: var(--color-muted-dark);
}

.entry-content strong {
    color: var(--color-soft-dark);
}

.entry-content a:not([class]) {
    color: var(--color-accent);
    text-decoration: underline;
}

/* Subtítulo menor, listas y separador (notas escritas en el editor de WordPress) */
.entry-content h4 {
    margin-top: 36px;
    font-size: 16px;
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    color: var(--color-soft-dark);
}

.entry-content ul:not([class]),
.entry-content ol:not([class]),
.entry-content .wp-block-list {
    padding-left: 22px;
}

.entry-content ul:not([class]),
.entry-content ul.wp-block-list {
    list-style: disc;
}

.entry-content ol:not([class]),
.entry-content ol.wp-block-list {
    list-style: decimal;
}

.entry-content li + li {
    margin-top: 8px;
}

.entry-content li::marker {
    color: var(--color-accent);
}

.entry-content hr {
    margin: 40px 0;
    border: 0;
    border-top: 1px solid var(--color-divider-dark);
}

/* Bajada inicial */
.entry-content .entry-lead {
    padding-left: 22px;
    font-size: 15px;
    font-style: italic;
    line-height: 1.8;
    color: var(--color-soft-dark);
    border-left: 2px solid var(--color-accent);
}

.entry-content > .accent-line {
    margin: 34px 0 0;
}

.entry-content > .accent-line + h2 {
    margin-top: 34px;
}

/* Imágenes */
.entry-content .wp-block-image {
    margin-top: 36px;
    margin-bottom: 16px;
    background-color: var(--color-divider-dark);
}

/* Las imágenes del editor respetan su proporción original */
.entry-content .wp-block-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Galería de imágenes lado a lado */
.entry-content .wp-block-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 36px;
}

.entry-content .wp-block-gallery .wp-block-image {
    margin: 0;
    overflow: hidden;
}

.entry-content .wp-block-gallery img {
    aspect-ratio: 7 / 6;
    transition: transform 0.6s ease;
}

.entry-content .wp-block-gallery a:hover img {
    transform: scale(1.04);
}

/* Cita destacada */
.entry-content .wp-block-quote {
    margin-top: 40px;
    margin-bottom: 20px;
    padding: 30px 34px;
    background-color: var(--color-black);
    border-left: 2px solid var(--color-accent);
}

.entry-content .wp-block-quote p {
    font-size: clamp(17px, 1.6vw, 20px);
    font-weight: var(--fw-light);
    line-height: 1.55;
    color: var(--color-white);
}

.entry-content .wp-block-quote cite {
    display: block;
    margin-top: 18px;
    font-size: 9px;
    font-style: normal;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Cifras con línea superior e inferior */
.stats--bordered {
    padding: 24px 0;
    border-top: 1px solid var(--color-divider-dark);
}

.entry-content .stats {
    margin-top: 36px;
}

/* Etiquetas */
.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 44px;
}

.tag {
    display: inline-block;
    padding: 6px 12px;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-muted-dark);
    border: 1px solid var(--color-divider-dark);
}

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

/* Caja del autor */
.author-box {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-top: 30px;
    padding: 26px;
    background-color: var(--color-surface-dark);
    border: 1px solid var(--color-divider-dark);
}

.author-box__avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--color-divider-dark);
}

.entry-content .author-box__name {
    font-size: 14px;
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    color: var(--color-white);
}

.entry-content .author-box__role {
    margin-bottom: 8px;
    font-size: 9px;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    line-height: 1.6;
    color: var(--color-accent);
}

.entry-content .author-box__bio {
    font-size: 12px;
    line-height: 1.7;
}

/* Barra lateral: queda fija al recorrer el artículo */
.post-sidebar {
    position: sticky;
    top: calc(var(--header-height) + 30px);
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.widget {
    padding: 22px;
}

.widget:not(.widget--bordered):not(.widget--dark) {
    padding: 0;
}

.widget--bordered {
    background-color: var(--color-surface-dark);
    border: 1px solid var(--color-divider-dark);
}

.widget--dark {
    background-color: var(--color-black);
}

.widget__title {
    margin-bottom: 14px;
    font-size: 9px;
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-muted-dark);
}

.widget__heading {
    margin: -6px 0 16px;
    font-size: 18px;
    font-weight: var(--fw-light);
    color: var(--color-white);
}

/* Resumen de plantas dentro de la barra lateral */
.widget .stats--grid {
    gap: 10px;
    margin-top: 20px;
    padding-bottom: 18px;
}

.widget .stat__value {
    font-size: 26px;
}

.widget .stat__label {
    font-size: 8px;
}

.widget .price-list {
    margin: 4px 0 20px;
}

.widget .price-list__row dt,
.widget .price-list__row dd {
    font-size: 11px;
}

.widget .price-list__row--highlight dd {
    font-size: 15px;
}

/* Pestañas pequeñas */
.tabs--sm .tab {
    padding: 7px 12px;
    font-size: 9px;
}

/* Botón a todo el ancho */
.btn--block {
    width: 100%;
}

/* Botones para compartir */
.share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.share-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--color-white);
    transition: var(--transition);
}

.share-btn:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}

.share-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.share-btn--whatsapp { background-color: var(--color-whatsapp); }
.share-btn--facebook { background-color: var(--color-facebook); }
.share-btn--x        { background-color: var(--color-black); border: 1px solid var(--color-divider-dark); }
.share-btn--linkedin { background-color: var(--color-linkedin); }
.share-btn--copy     { background-color: var(--color-divider-dark); }

.share-btn--copy svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* Aviso "Enlace copiado" */
.share-btn--copy::after {
    content: 'Enlace copiado';
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    padding: 5px 9px;
    font-size: 10px;
    white-space: nowrap;
    color: var(--color-primary);
    background-color: var(--color-white);
    transform: translate(-50%, 4px);
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
}

.share-btn--copy.is-copied::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Artículos relacionados */
.related-posts {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.related-posts__item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.related-posts__item img {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    object-fit: cover;
    background-color: var(--color-divider-dark);
}

.related-posts__item strong {
    display: block;
    font-size: 12px;
    font-weight: var(--fw-regular);
    line-height: 1.45;
    color: var(--color-soft-dark);
    transition: color 0.3s ease;
}

.related-posts__item:hover strong {
    color: var(--color-accent);
}

.related-posts__item time {
    font-size: 10px;
    color: var(--color-dim-dark);
}

/* --------------------------------------------------------------------------
   9h. Quiénes somos: pilares (misión/visión/valores) y equipo
   -------------------------------------------------------------------------- */

/* Sección que continúa a la anterior (mismo fondo, sin espacio superior extra) */
.section--flush-top {
    padding-top: 0;
}

/* Negrita dentro de títulos livianos ("creando", "Royal") */
.display-title strong,
.section-title strong {
    font-weight: var(--fw-bold);
}

/* Columnas separadas por una línea vertical */
.pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.pillar {
    padding: 20px 40px 30px;
}

.pillar + .pillar {
    border-left: 1px solid var(--color-divider-dark);
}

.pillar__title {
    margin-bottom: 28px;
    font-size: clamp(26px, 2.4vw, 32px);
    font-weight: var(--fw-light);
    line-height: 1.2;
    color: var(--color-white);
}

.pillar__text {
    font-size: 13px;
    line-height: 1.85;
    color: var(--color-muted-dark);
}

.pillar .dash-list {
    gap: 12px;
    margin-bottom: 0;
}

.pillar .dash-list li {
    font-size: 13px;
    line-height: 1.6;
}

/* Tarjetas de personas con foto vertical */
.people-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
}

.person-card {
    background-color: var(--color-darker);
}

.person-card__photo {
    position: relative;
    aspect-ratio: 10 / 11;
    overflow: hidden;
    background-color: var(--color-divider-dark);
}

.person-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.person-card:hover .person-card__photo img {
    transform: scale(1.04);
}

/* Degradado inferior que funde la foto con la tarjeta */
.person-card__photo::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 30%;
    background: linear-gradient(0deg, var(--color-darker) 0%, rgba(12, 12, 12, 0) 100%);
}

.person-card__body {
    padding: 14px 24px 22px;
}

.person-card__name {
    font-size: 15px;
    font-weight: var(--fw-semibold);
    color: var(--color-white);
    margin-bottom: 4px;
}

.person-card__role {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   9i. Financiamiento: franja promocional, pasos, cuadrícula de costos y notas
   -------------------------------------------------------------------------- */

/* Título con ancho limitado (títulos largos de varias líneas) */
.display-title--narrow {
    max-width: 640px;
}

/* Franja dorada con llamado a la acción (simulador, etc.) */
.promo-band {
    padding: 44px 0;
    background-color: var(--color-accent);
}

.promo-band__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.promo-band__eyebrow {
    display: block;
    margin-bottom: 8px;
    font-size: 9px;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.5);
}

.promo-band__title {
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
}

.promo-band__text {
    margin-top: 4px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
}

.btn--dark {
    flex-shrink: 0;
    background-color: var(--color-logo-box);
    color: var(--color-white);
}

.btn--dark:hover {
    background-color: var(--color-black);
}

/* Etiqueta más grande (usada como acceso a secciones) */
.tag--lg {
    padding: 9px 16px;
    font-size: 9px;
    color: var(--color-soft-dark);
    border-color: var(--color-dim-dark);
}

.split__content .post-tags {
    margin-top: 30px;
}

/* Pasos numerados */
.steps {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.step {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 18px;
    align-items: start;
}

.step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 10px;
    color: var(--color-accent);
    border: 1px solid var(--color-divider-dark);
}

.step__title {
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: var(--fw-semibold);
    color: var(--color-white);
}

.step__text {
    font-size: 12px;
    line-height: 1.7;
    color: var(--color-muted-dark);
}

/* Cuadrícula de ítems con ícono, separados por líneas finas */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 20px;
    background-color: var(--color-divider-dark);  /* hace de línea divisoria interior */
}

.feature {
    padding: 32px 30px;
    background-color: var(--color-graphite);
}

.feature__icon {
    width: 22px;
    height: 22px;
    margin-bottom: 18px;
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.feature p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--color-muted-dark);
}

/* Notas con borde lateral (ventaja / consideración) */
.note-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 30px;
}

.note {
    padding-left: 16px;
    border-left: 2px solid var(--color-accent);
}

.note--muted {
    border-left-color: var(--color-dim-dark);
}

.note__label {
    display: block;
    margin-bottom: 4px;
    font-size: 9px;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-accent);
}

.note--muted .note__label {
    color: var(--color-dim-dark);
}

.note__text {
    font-size: 12px;
    line-height: 1.7;
    color: var(--color-muted-dark);
}

/* Fuente o nota al pie */
.source-note {
    padding-top: 16px;
    font-size: 10px;
    color: var(--color-dim-dark);
    border-top: 1px solid var(--color-divider-dark);
}

/* --------------------------------------------------------------------------
   9j. Inversionistas: cifras destacadas, pilares con ícono
   -------------------------------------------------------------------------- */

/* Imagen más alta en el bloque de dos columnas */
.split__media--tall {
    aspect-ratio: 9 / 8;
}

/* Cifras en dorado y negrita */
.stats--accent .stat__value {
    font-weight: var(--fw-semibold);
    color: var(--color-accent);
}

/* Cifras separadas por línea vertical */
.stats--divided {
    gap: 0;
    margin-top: 30px;
}

.stats--divided .stat {
    padding-right: 34px;
}

.stats--divided .stat + .stat {
    padding-left: 34px;
    border-left: 1px solid var(--color-divider-dark);
}

.stats--divided .stat__label {
    line-height: 1.5;
}

/* Texto breve a la derecha del encabezado de sección */
.section-header__aside {
    max-width: 280px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-muted-dark);
    align-self: center;
}

/* Pilares en 4 columnas con ícono */
.pillars--4 {
    grid-template-columns: repeat(4, 1fr);
}

.pillars--4 .pillar {
    padding: 24px 28px 30px;
}

.pillar .feature__icon {
    margin-bottom: 26px;
}

.pillar__heading {
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: var(--fw-medium);
    line-height: 1.4;
    color: var(--color-white);
}

/* --------------------------------------------------------------------------
   9k. Postventa: descargas, cifras centradas y equipo con contacto
   -------------------------------------------------------------------------- */

.promo-band__title--regular {
    font-weight: var(--fw-medium);
}

/* Lista de documentos descargables */
.download-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 36px;
    background-color: var(--color-accent-dark);  /* hace de línea divisoria */
}

.download-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    font-size: 11px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-white);
    background-color: var(--color-accent);
}

.download-item:hover {
    background-color: var(--color-accent-dark);
}

.download-item svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.download-item__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.download-item__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.7);
}

.download-item__meta svg {
    width: 13px;
    height: 13px;
}

/* Cifras centradas en columnas iguales */
.stats--center {
    justify-content: space-between;
}

.stats--center .stat {
    flex: 1;
    align-items: center;
    text-align: center;
}

.stats--center .stat__value {
    font-size: clamp(30px, 2.8vw, 38px);
}

.stats--center .stat__label {
    font-size: 9px;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

/* Equipo con datos de contacto (foto horizontal, columnas con línea) */
.people-grid--contact {
    gap: 0;
}

.people-grid--contact .person-card {
    background-color: transparent;
}

.people-grid--contact .person-card + .person-card .person-card__body {
    border-left: 1px solid var(--color-divider-dark);
}

.people-grid--contact .person-card__photo {
    aspect-ratio: 11 / 10;
}

.people-grid--contact .person-card__photo::after {
    display: none;
}

.people-grid--contact .person-card__body {
    padding: 20px 24px 24px;
}

.people-grid--contact .person-card__role {
    margin-bottom: 8px;
    font-size: 9px;
}

.people-grid--contact .person-card__name {
    margin-bottom: 18px;
    font-size: 18px;
    font-weight: var(--fw-regular);
}

.person-card__contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.person-card__contact a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color-muted-dark);
    word-break: break-all;
}

.person-card__contact a:hover {
    color: var(--color-white);
}

.person-card__contact svg {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   9l. Animaciones de entrada (las clases las agrega el JS: initReveal)
   Sin JS, o con "reducir movimiento" activado, el contenido se ve normal.
   -------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--reveal-delay, 0s);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* --------------------------------------------------------------------------
   9m. Modal genérico + formulario de cotización
   -------------------------------------------------------------------------- */
body.modal-open {
    overflow: hidden;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: var(--overlay-modal);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal[hidden] {
    display: none;
}

.modal.is-open {
    opacity: 1;
}

/* Barra de desplazamiento acorde al sitio (delgada, carril oscuro, indicador dorado).
   Se aplica a los modales y a cualquier contenedor con la clase .custom-scroll */
.modal__dialog,
.custom-scroll {
    scrollbar-width: thin;                                              /* Chrome, Edge, Firefox */
    scrollbar-color: var(--color-accent-dark) var(--color-darker);
}

/* Safari (y navegadores que no soportan scrollbar-color) */
.modal__dialog::-webkit-scrollbar,
.custom-scroll::-webkit-scrollbar {
    width: 6px;
}

.modal__dialog::-webkit-scrollbar-track,
.custom-scroll::-webkit-scrollbar-track {
    background-color: var(--color-darker);
}

.modal__dialog::-webkit-scrollbar-thumb,
.custom-scroll::-webkit-scrollbar-thumb {
    background-color: var(--color-accent-dark);
    border-radius: 3px;
}

.modal__dialog::-webkit-scrollbar-thumb:hover,
.custom-scroll::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-accent);
}

.modal__dialog:hover {
    scrollbar-color: var(--color-accent) var(--color-darker);
}

.modal__dialog {
    position: relative;
    width: 100%;
    max-width: 536px;   /* incluye el ancho de la barra de desplazamiento */
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    padding: 40px 38px 30px;
    background-color: var(--color-graphite);
    border: 1px solid var(--color-divider-dark);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    transform: translateY(20px);
    transition: transform 0.35s ease;
    overscroll-behavior: contain;
}

.modal.is-open .modal__dialog {
    transform: none;
}

.modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-muted-dark);
    transition: var(--transition);
}

.modal__close:hover {
    color: var(--color-accent);
}

.modal__close svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

/* Encabezado del formulario */
.quote-header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding-bottom: 26px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--color-divider-dark);
}

.quote-header[hidden] {
    display: none;
}

.quote-header__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: var(--color-accent);
    background-color: var(--color-accent-soft);
    border: 1px solid var(--color-accent-dark);
}

.quote-header__icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linejoin: round;
}

.quote-header__project {
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-accent);
}

.quote-header__title {
    font-size: 22px;
    font-weight: var(--fw-medium);
    color: var(--color-white);
}

.quote-header__text {
    margin-top: 6px;
    font-size: 13px;
    color: var(--color-muted-dark);
}

/* Cotizador MobySuite dentro del modal (los colores van como parámetros del widget) */
.modal__dialog--quote {
    max-width: 760px;
}

.quote-widget {
    min-height: 200px;   /* reserva espacio mientras carga el script */
}

/* Proyecto sin "ID en MobySuite": aviso en lugar del cotizador */
.quote-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.quote-empty__text {
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-muted-dark);
}

.quote-widget mobysuite-quote {
    display: block;
}

/* Todo en una columna: el widget usa la grilla de Vuetify (.col-md-6 = mitad en escritorio).
   Si MobySuite cambia sus clases, el widget solo vuelve a dos columnas. */
.quote-widget .v-application .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Imagen/plano de la unidad: alto acotado para no ocupar todo el modal */
.quote-widget .v-application .image-dialog-thumb {   /* .v-application: gana a .resp-img[data-v-*] del widget */
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 340px;
    margin: 0 auto;
    object-fit: contain;
}

/* Campos de formulario (reutilizables en contacto, cotización, etc.) */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.form-label {
    display: block;
    margin-bottom: 10px;
    padding: 0;
    font-size: 10px;
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-accent);
}

.form-control {
    width: 100%;
    padding: 13px 15px;
    font-size: 13px;
    color: var(--color-white);
    background-color: var(--color-darker);
    border: 1px solid var(--color-divider-dark);
    border-radius: 0;
    outline: none;
    transition: border-color 0.3s ease;
}

.form-control::placeholder {
    color: var(--color-dim-dark);
}

.form-control:focus {
    border-color: var(--color-accent);
}

.form-control.is-invalid,
.form-control.wpcf7-not-valid {
    border-color: var(--color-error);
}

/* Campo a todo el ancho de la grilla (ej. mensaje) */
.form-group--full {
    grid-column: 1 / -1;
}

textarea.form-control {
    min-height: 110px;
    resize: vertical;
}

.form-error,
.wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--color-error);
}

.form-fieldset {
    margin-top: 26px;
    padding: 0;
    border: none;
}

.form-fieldset[hidden] {
    display: none;
}

/* Opciones tipo "chip" (radio oculto + etiqueta) */
.choice-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.choice-input,
.choice-chips .wpcf7-list-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.chip,
.choice-chips .wpcf7-list-item-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--color-soft-dark);
    border: 1px solid var(--color-divider-dark);
    cursor: pointer;
    transition: var(--transition);
}

.chip:hover,
.choice-chips .wpcf7-list-item-label:hover {
    border-color: var(--color-dim-dark);
}

.choice-input:checked + .chip,
.choice-chips input:checked + .wpcf7-list-item-label {
    color: var(--color-accent);
    background-color: var(--color-accent-soft);
    border-color: var(--color-accent);
}

.choice-input:focus-visible + .chip,
.choice-chips input:focus-visible + .wpcf7-list-item-label,
.choice-input:focus-visible + .choice-row {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.chip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: var(--fw-semibold);
    color: var(--color-soft-dark);
    background-color: var(--color-divider-dark);
}

.choice-input:checked + .chip .chip__count {
    color: var(--color-primary);
    background-color: var(--color-accent);
}

.chip__icon {
    width: 15px;
    height: 15px;
}

.chip__icon--whatsapp {
    fill: var(--color-whatsapp);
}

.chip__icon--line {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linejoin: round;
}

/* Lista de opciones con radio visible (modelos) */
.choice-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.choice-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    font-size: 13px;
    background-color: var(--color-darker);
    border: 1px solid var(--color-divider-dark);
    cursor: pointer;
    transition: var(--transition);
}

.choice-row:hover {
    border-color: var(--color-dim-dark);
}

.choice-row__radio {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--color-muted-dark);
    border-radius: 50%;
    transition: var(--transition);
}

.choice-row__name {
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    color: var(--color-white);
}

.choice-row__meta {
    font-size: 12px;
    color: var(--color-muted-dark);
}

.choice-row__price {
    margin-left: auto;
    color: var(--color-accent-dark);
    white-space: nowrap;
}

.choice-input:checked + .choice-row {
    background-color: var(--color-accent-soft);
    border-color: var(--color-accent);
}

.choice-input:checked + .choice-row .choice-row__radio {
    border-color: var(--color-accent);
    box-shadow: inset 0 0 0 3px var(--color-graphite), inset 0 0 0 8px var(--color-accent);
}

.choice-input:checked + .choice-row .choice-row__price {
    color: var(--color-accent);
}

/* Grupo obligatorio sin elegir */
.choice-chips.is-invalid .chip,
.choice-chips.wpcf7-not-valid .wpcf7-list-item-label {
    border-color: var(--color-error);
}

.quote-form__submit {
    margin-top: 32px;
    padding: 18px;
    font-size: 11px;
}

/* Contact Form 7: su CSS no se carga (inc/contacto.php); el formulario usa las clases del tema */
.wpcf7 .screen-reader-response {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.wpcf7 .hidden-fields-container,
.wpcf7-spinner {
    display: none;
}

.wpcf7-form-control-wrap {
    display: block;
}

/* Chips de CF7: <span.wpcf7-list-item><label><input><span.wpcf7-list-item-label> */
.choice-chips .wpcf7-list-item {
    margin: 0;
}

.choice-chips .wpcf7-list-item label {
    display: block;
}

/* Íconos de las opciones de contacto (CF7 no permite SVG dentro de la etiqueta) */
.choice-chips .wpcf7-list-item-label::before {
    content: "";
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    background-color: currentColor;
    mask: center / contain no-repeat;
}

.choice-chips input[value="WhatsApp"] + .wpcf7-list-item-label::before {
    background-color: var(--color-whatsapp);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91C21.95 6.45 17.5 2 12.04 2z'/%3E%3C/svg%3E");
}

.choice-chips input[value="Correo"] + .wpcf7-list-item-label::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='1'/%3E%3Cpath d='M4 6.5l8 6 8-6'/%3E%3C/svg%3E");
}

.choice-chips input[value="Llamada"] + .wpcf7-list-item-label::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h3l1.5 4.5-2 1.5a11 11 0 0 0 5.5 5.5l1.5-2 4.5 1.5v3a2 2 0 0 1-2 2A16 16 0 0 1 4.5 5.5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
}

.wpcf7 form.submitting .quote-form__submit {
    opacity: 0.6;
    cursor: wait;
}

/* Mensaje de CF7: solo se ven los errores; el éxito lo muestra el modal #modal-exito */
.wpcf7 form .wpcf7-response-output {
    margin-top: 24px;
    font-size: 12px;
    text-align: center;
    color: var(--color-error);
}

.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output {
    display: none;
}

.form-note {
    margin-top: 16px;
    font-size: 11px;
    text-align: center;
    color: var(--color-dim-dark);
}

.form-note a {
    color: var(--color-muted-dark);
    text-decoration: underline;
}

.form-note a:hover {
    color: var(--color-accent);
}

/* Modal de envío exitoso (formularios de contacto): logo + mensaje */
.modal__dialog--success {
    max-width: 420px;
    padding: 50px 38px 40px;
}

.success-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.success-message__logo {
    width: 86px;
    height: 86px;
    margin-bottom: 28px;
    object-fit: contain;
}

.success-message__title {
    font-size: 24px;
    font-weight: var(--fw-regular);
    color: var(--color-white);
}

.success-message .accent-line {
    margin: 16px auto 18px;
}

.success-message__text {
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-muted-dark);
}

.success-message .btn {
    margin-top: 30px;
}

/* Preguntas frecuentes: intro a la izquierda + acordeón con <details> (una abierta a la vez) */
.faq {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr);
    gap: 60px;
    align-items: start;
}

.faq__intro .text-muted {
    margin-bottom: 30px;
    font-size: 13px;
}

.faq__contact {
    font-size: 12px;
    line-height: 1.6;
    color: var(--color-muted-dark);
}

.faq__contact a {
    color: var(--color-accent);
}

.faq__item {
    border-bottom: 1px solid var(--color-divider-dark);
}

.faq__question {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 26px 30px;
    list-style: none;
    cursor: pointer;
}

.faq__question::-webkit-details-marker {
    display: none;
}

.faq__question:focus-visible {
    outline: 1px solid var(--color-accent);
    outline-offset: -1px;
}

.faq__number {
    flex: 0 0 22px;
    font-size: 9px;
    letter-spacing: var(--ls-wide);
    color: var(--color-accent);
}

.faq__title {
    flex: 1;
    font-size: clamp(16px, 1.4vw, 18px);
    font-weight: var(--fw-light);
    line-height: 1.4;
    color: var(--color-white);
    transition: var(--transition);
}

.faq__question:hover .faq__title,
.faq__item[open] .faq__title {
    color: var(--color-accent);
}

/* Botón +, que al abrir gira y queda como × sobre fondo dorado */
.faq__icon {
    position: relative;
    flex: 0 0 28px;
    height: 28px;
    color: var(--color-white);
    border: 1px solid var(--color-dim-dark);
    transition: var(--transition);
}

.faq__icon::before,
.faq__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 1px;
    background-color: currentColor;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}

.faq__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq__item[open] .faq__icon {
    color: var(--color-primary);
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.faq__item[open] .faq__icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.faq__item[open] .faq__icon::after {
    transform: translate(-50%, -50%) rotate(135deg);
}

.faq__answer {
    padding: 0 82px 28px 76px;
}

.faq__answer p {
    font-size: 13px;
    line-height: 1.85;
    color: var(--color-muted-dark);
}

.faq__answer p + p {
    margin-top: 14px;
}

@media (max-width: 1024px) {
    .faq {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .faq__question {
        gap: 16px;
        padding: 22px 0;
    }

    .faq__answer {
        padding: 0 0 24px 38px;
    }
}

/* Antetítulo con línea dorada a la izquierda */
.eyebrow--line {
    display: flex;
    align-items: center;
    gap: 16px;
}

.eyebrow--line::before {
    content: "";
    flex-shrink: 0;
    width: 30px;
    height: 1px;
    background-color: currentColor;
}

/* Estacionamientos a la venta (ficha del proyecto): encabezado con precio,
   características numeradas y recuadro de contacto */
.parking__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    margin: 14px 0 60px;
}

.parking__intro {
    max-width: 480px;
}

.parking__text {
    margin-top: 22px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--color-muted-dark);
}

.parking__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 36px;
    text-align: right;
}

.parking__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid var(--color-dim-dark);
    font-size: 10px;
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-accent);
}

.parking__badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

.parking__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.parking__price-label,
.parking__price-note {
    font-size: 9px;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-dim-dark);
}

.parking__price-value {
    font-size: clamp(34px, 3.4vw, 42px);
    font-weight: var(--fw-light);
    line-height: 1.1;
    color: var(--color-white);
}

.parking__price-unit {
    margin-left: 4px;
    font-size: 15px;
    color: var(--color-accent);
}

.parking__features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--color-divider-dark);
    list-style: none;
}

.parking__feature {
    display: flex;
    flex-direction: column;
    padding: 36px 30px 40px;
    background-color: var(--color-graphite);
}

.parking__feature + .parking__feature {
    border-left: 1px solid var(--color-divider-dark);
}

.parking__number {
    margin-bottom: 26px;
    font-size: 38px;
    font-weight: var(--fw-bold);
    line-height: 1;
    color: var(--color-accent);
    opacity: 0.2;
}

.parking__feature-title {
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    color: var(--color-white);
}

.parking__feature-text {
    font-size: 12px;
    line-height: 1.7;
    color: var(--color-muted-dark);
}

/* Línea dorada al pie de cada característica */
.parking__feature::after {
    content: "";
    width: 22px;
    height: 2px;
    margin-top: 30px;
    background-color: var(--color-accent);
    opacity: 0.45;
}

.parking__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 40px;
    padding: 30px 40px;
    background-color: var(--color-graphite);
}

.parking__cta-eyebrow {
    display: block;
    margin-bottom: 8px;
    font-size: 9px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-muted-dark);
}

.parking__cta-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-soft-dark);
}

.parking__btn {
    flex-shrink: 0;
    gap: 14px;
    padding: 20px 32px;
}

.parking__note {
    margin-top: 22px;
    font-size: 10px;
    color: var(--color-dim-dark);
}

@media (max-width: 1024px) {
    .parking__features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .parking__feature + .parking__feature {
        border-left: 0;
    }

    .parking__feature:nth-child(even) {
        border-left: 1px solid var(--color-divider-dark);
    }

    .parking__feature:nth-child(n + 3) {
        border-top: 1px solid var(--color-divider-dark);
    }
}

@media (max-width: 768px) {
    .parking__header,
    .parking__cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .parking__header {
        gap: 30px;
        margin-bottom: 40px;
    }

    .parking__aside,
    .parking__price {
        align-items: flex-start;
        text-align: left;
    }

    .parking__aside {
        gap: 24px;
    }

    .parking__cta {
        padding: 26px 22px;
    }

    .parking__btn {
        width: 100%;
        justify-content: center;
        padding: 18px 20px;
        white-space: normal;
    }
}

@media (max-width: 600px) {
    .parking__features {
        grid-template-columns: 1fr;
    }

    .parking__feature:nth-child(even) {
        border-left: 0;
    }

    .parking__feature + .parking__feature {
        border-top: 1px solid var(--color-divider-dark);
    }

    .parking__feature {
        padding: 30px 24px 32px;
    }
}

/* --------------------------------------------------------------------------
   10. Banner CTA (imagen de fondo + texto centrado)
   -------------------------------------------------------------------------- */
.cta-banner {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
    text-align: center;
    color: var(--color-white);
    background-color: var(--color-charcoal);
}

.cta-banner__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--overlay-cta);
}

.cta-banner__content {
    position: relative;
    z-index: 1;
}

.cta-banner__title {
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: var(--fw-light);
    color: var(--color-white);
    margin-bottom: 12px;
}

.cta-banner__text {
    font-size: 14px;
    color: var(--color-soft-dark);
    margin-bottom: 36px;
}

.cta-banner .btn {
    padding: 16px 40px;
}

/* --------------------------------------------------------------------------
   11. Botones flotantes
   -------------------------------------------------------------------------- */
.floating-actions {
    position: fixed;
    right: 12px;
    bottom: 14px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.floating-actions .btn {
    min-width: 150px;
    padding: 12px 20px;
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    padding: 70px 0 50px;
    background-color: var(--color-black);
    color: var(--color-soft-dark);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 40px 30px;
    padding-bottom: 70px;
}

/* La columna de contacto va alineada a la derecha (última columna) */
.footer-col--contact {
    grid-column: 6;
}

.footer-title {
    font-size: 10px;
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    line-height: 1.6;
    color: var(--color-accent);
    margin-bottom: 20px;
}

.footer-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-menu a,
.footer-contact {
    font-size: 13px;
    line-height: 1.6;
}

.footer-menu a:hover,
.footer-menu .current-menu-item > a {
    color: var(--color-accent);
}

.footer-more {
    display: inline-block;
    margin-top: 26px;
    font-size: 13px;
    color: var(--color-accent);
}

.footer-more:hover {
    color: var(--color-white);
}

.footer-contact {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.footer-contact__email {
    color: var(--color-muted-dark);
}

.footer-contact__email:hover {
    color: var(--color-accent);
}

.footer-subtitle {
    font-size: 9px;
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-dim-dark);
    margin-bottom: 12px;
}

.footer-hours {
    font-size: 11px;
    line-height: 1.7;
}

/* Barra inferior */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 34px;
    border-top: 1px solid var(--color-line-dark);
    font-size: 11px;
}

.footer-logo {
    display: block;
    flex-shrink: 0;
}

.footer-logo img {
    width: 86px;
}

/* --------------------------------------------------------------------------
   13. Utilidades
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-uppercase { text-transform: uppercase; }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

.hidden { display: none !important; }

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1400px) {
    .main-navigation .menu {
        gap: 40px;
    }

    .main-navigation .social-links {
        right: 20px;
    }
}

@media (max-width: 1320px) {
    .main-navigation .menu {
        gap: 28px;
    }

    /* Sin espacio lateral: las redes pasan a formar parte del flujo */
    .main-navigation .social-links {
        position: static;
        height: auto;
        margin-left: 28px;
    }
}

@media (max-width: 1024px) {
    :root {
        --header-height: 70px;
        --section-padding: 60px;
    }

    .menu-toggle {
        display: flex;
    }

    .custom-logo {
        width: 60px;
    }

    .split {
        gap: 50px;
    }

    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .card-grid--spaced {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .gallery {
        --thumbs-visible: 4;
    }

    .tile-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .location-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .team-grid,
    .people-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pillar {
        padding: 20px 26px 30px;
    }

    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 4 pilares → 2 × 2 (línea vertical solo entre columnas, horizontal entre filas) */
    .pillars--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .pillars--4 .pillar:nth-child(odd) {
        border-left: none;
    }

    .pillars--4 .pillar:nth-child(n + 3) {
        border-top: 1px solid var(--color-divider-dark);
    }

    /* Equipo con contacto en 2 columnas: sin línea al inicio de cada fila */
    .people-grid--contact .person-card:nth-child(odd) .person-card__body {
        border-left: none;
    }

    .people-grid--contact {
        row-gap: 30px;
    }

    /* Artículo: la barra lateral pasa debajo del contenido */
    .post-layout {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .post-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: start;
    }

    /* Plantas: el listado pasa arriba como fila deslizable y el detalle deja de ser fijo */
    .plans {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .plans__list {
        min-width: 0;
    }

    .plans__detail {
        position: static;
        gap: 40px;
    }

    .plan-group {
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .plan-group::-webkit-scrollbar {
        display: none;
    }

    .plan-card {
        flex: 0 0 280px;
        scroll-snap-align: start;
    }

    .footer-col--contact {
        grid-column: auto;
    }

    /* Buscador: el botón pasa a ocupar una fila completa */
    .search-form {
        grid-template-columns: repeat(3, 1fr);
    }

    .search-form__submit {
        grid-column: 1 / -1;
        min-height: 50px;
    }

    /* Menú móvil: panel lateral */
    .main-navigation {
        position: fixed;
        top: 0;
        right: 0;
        width: min(340px, 85vw);
        height: 100vh;
        height: 100dvh;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 30px;
        padding: calc(var(--header-height) + 20px) 30px 30px;
        background-color: var(--color-dark);
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.4s ease;
    }

    .main-navigation.is-open {
        transform: translateX(0);
    }

    .main-navigation .menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }

    .main-navigation .menu > .menu-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .main-navigation .menu-item > a {
        padding: 14px 0;
        font-size: 15px;
    }

    .main-navigation .menu-btn {
        border-bottom: none !important;
        margin-top: 24px;
    }

    .main-navigation .menu-btn > a {
        text-align: center;
        padding: 14px 16px;
    }

    /* Submenús en móvil: acordeón */
    .main-navigation .menu-item-has-children {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .main-navigation .menu-item-has-children > a {
        flex: 1;
    }

    .main-navigation .submenu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        color: var(--color-white);
    }

    .main-navigation .submenu-toggle::before {
        content: '';
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: var(--transition);
    }

    .main-navigation .submenu-toggle[aria-expanded="true"]::before {
        transform: rotate(-135deg);
    }

    .main-navigation .sub-menu {
        position: static;
        width: 100%;
        min-width: 0;
        padding: 0 0 10px 15px;
        background: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
    }

    .main-navigation .sub-menu.is-open {
        display: block;
    }

    .main-navigation .social-links {
        margin-left: 0;
    }

    .social-links svg {
        width: 20px;
        height: 20px;
    }

    /* Fondo oscuro detrás del panel */
    body.menu-open::after {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 99;
        background-color: rgba(0, 0, 0, 0.5);
    }
}

@media (max-width: 768px) {
    :root {
        --section-padding: 40px;
        --page-hero-height: 560px;
    }

    .hero-slider {
        min-height: 560px;
    }

    .hero-slide::after,
    .page-hero::after {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.45) 100%);
    }

    .hero-slide__text,
    .page-hero__text {
        font-size: 14px;
        margin-bottom: 30px;
    }

    .hero-slider__nav {
        bottom: 130px;
    }

    .slider-dot {
        width: 32px;
    }

    .search-form {
        grid-template-columns: 1fr;
    }

    .split {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .callout {
        flex-direction: column;
        align-items: flex-start;
    }

    .card-grid,
    .team-grid,
    .plans__detail,
    .post-sidebar {
        grid-template-columns: 1fr;
    }

    .author-box {
        flex-direction: column;
    }

    /* Pilares apilados: la línea divisoria pasa a ser horizontal */
    .pillars {
        grid-template-columns: 1fr;
    }

    .pillar {
        padding: 30px 0;
    }

    .pillar + .pillar {
        border-left: none;
        border-top: 1px solid var(--color-divider-dark);
    }

    .pillars--4 .pillar {
        padding: 30px 0;
    }

    .stats--divided .stat {
        padding-right: 18px;
    }

    .stats--divided .stat + .stat {
        padding-left: 18px;
    }

    .person-card__body {
        padding: 12px 14px 18px;
    }

    /* Modal y formulario */
    .modal {
        padding: 12px;
    }

    .modal__dialog {
        padding: 30px 20px 24px;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .choice-row {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    /* Franja del simulador: texto arriba y botón abajo */
    .promo-band__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .entry-content .wp-block-quote {
        padding: 24px 22px;
    }

    .plan-card {
        flex-basis: 260px;
    }

    /* Galería */
    .gallery {
        --thumbs-visible: 3;
        --thumbs-gap: 6px;
    }

    .gallery__main {
        aspect-ratio: 4 / 3;
    }

    .gallery__thumb {
        aspect-ratio: 4 / 3;
    }

    .gallery__main .gallery__nav,
    .gallery__main .gallery__expand {
        opacity: 1;   /* en móvil no hay hover: siempre visibles */
    }

    .gallery__nav {
        width: 36px;
        height: 36px;
    }

    .gallery__nav--prev { left: 8px; }
    .gallery__nav--next { right: 8px; }

    /* Las flechas sobre la imagen reemplazan a las del título */
    section:has([data-gallery]) .section-header .slider-arrows {
        display: none;
    }

    .lightbox__image {
        max-width: 100vw;
        max-height: calc(100vh - 160px);
    }

    .lightbox__nav {
        top: auto;
        bottom: 12px;
        transform: none;
    }

    .lightbox__counter {
        bottom: 30px;
    }

    /* Submenú de secciones: menú hamburguesa propio con fondo tipo vidrio */
    /* El vidrio de la barra va en un pseudo-elemento: si el backdrop-filter
       estuviera en .page-subnav, el panel (hijo) no podría desenfocar la página */
    .page-subnav,
    .site-header.is-scrolled ~ main .page-subnav {
        justify-content: stretch;
        background-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-top-color: var(--glass-border);
        border-bottom: 1px solid var(--glass-border);
    }

    .page-subnav::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background-color: var(--glass-bg);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
    }

    .page-subnav__toggle {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        height: 100%;
        padding: 0 var(--gutter);
    }

    /* Ícono hamburguesa → X */
    .page-subnav__burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 20px;
        height: 20px;
    }

    .page-subnav__burger span {
        display: block;
        height: 1.5px;
        background-color: var(--color-white);
        transition: var(--transition);
    }

    .page-subnav__toggle[aria-expanded="true"] .page-subnav__burger span:nth-child(1) {
        transform: translateY(5.5px) rotate(45deg);
    }

    .page-subnav__toggle[aria-expanded="true"] .page-subnav__burger span:nth-child(2) {
        opacity: 0;
    }

    .page-subnav__toggle[aria-expanded="true"] .page-subnav__burger span:nth-child(3) {
        transform: translateY(-5.5px) rotate(-45deg);
    }

    /* Panel desplegable */
    .page-subnav__list {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 6px 0 10px;
        background-color: var(--glass-bg);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border-bottom: 1px solid var(--glass-border);
        box-shadow: 0 16px 30px rgba(0, 0, 0, 0.3);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    }

    .page-subnav.is-open .page-subnav__list {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .page-subnav__link {
        position: relative;
        padding: 13px var(--gutter);
        font-size: 14px;
    }

    .page-subnav__list li + li .page-subnav__link {
        border-top: 1px solid var(--glass-border);
    }

    /* Marca dorada a la izquierda de la sección activa */
    .page-subnav__link.is-active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 10px;
        bottom: 10px;
        width: 2px;
        background-color: var(--color-accent);
    }


    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .site-footer {
        padding: 50px 0 110px;   /* espacio inferior para no quedar bajo los botones flotantes */
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        padding-bottom: 50px;
    }

    .footer-col--contact {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .search-form__submit {
        min-height: 50px;
    }

    .floating-actions .btn {
        min-width: 0;
        padding: 11px 14px;
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .gallery {
        --thumbs-visible: 2;
    }

    .tile-grid {
        grid-template-columns: 1fr;
    }

    .map-embed {
        aspect-ratio: 4 / 3;
    }

    /* Horarios: día arriba y horario abajo */
    .price-list--compact .price-list__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .price-list--compact .price-list__row dd {
        text-align: left;
    }

    .gallery__thumb {
        aspect-ratio: 16 / 9;
    }
}

/* --------------------------------------------------------------------------
   15. WordPress
   (clases que genera WordPress y ajustes para usuarios con sesión iniciada)
   -------------------------------------------------------------------------- */
/* Texto solo para lectores de pantalla (formularios, paginación, etc.) */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    word-wrap: normal !important;
}

/* "Saltar al contenido": visible solo al recibir foco con teclado */
.skip-link:focus {
    top: 8px;
    left: 8px;
    z-index: 1000;
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 20px;
    clip: auto;
    clip-path: none;
    background-color: var(--color-white);
    color: var(--color-primary);
    font-size: 14px;
    font-weight: var(--fw-semibold);
}

/* Barra de administración: el header y el submenú fijos se bajan para no quedar debajo */
.admin-bar {
    --admin-bar-height: 32px;
}

.admin-bar .site-header {
    top: var(--admin-bar-height);
}

.admin-bar .page-subnav {
    top: calc(var(--header-height) + var(--admin-bar-height));
}

@media (max-width: 782px) {
    .admin-bar {
        --admin-bar-height: 46px;
    }
}

/* Bajo 600px la barra de administración deja de ser fija */
@media (max-width: 600px) {
    .admin-bar {
        --admin-bar-height: 0px;
    }
}