/* =====================================================================
   URBANIZACIÓN TIERRA GRATA CAMINO VERDE · Secciones propias del vertical
   /public_html/assets/css/sections.css
   ---------------------------------------------------------------------
   Se carga SIEMPRE después de styles.css.

   Por qué está separado: `styles.css` es el sistema de diseño común a
   todos los clientes. Aquí vive todo lo propio de este vertical: slider,
   franja de cifras, el proyecto, ubicación, tipologías, zonas comunes,
   noticias (carrusel), documentos, galería, pago de administración,
   links de interés, legal y la caja de luz.

   Reglas respetadas:
     · Solo variables de styles.css.
     · Sin unidades vw sueltas para títulos: todo va con clamp() acotado.
     · Ningún texto blanco translúcido sobre el verde: el contraste se mide.

   Índice
    01. Slider de entrada
    02. Franja de cifras
    03. El proyecto
    04. Ubicación y clasificación
    05. Tipologías y características
    06. Zonas comunes y amenidades
    07. Noticias (carrusel con caja de luz)
    08. Documentos
    09. Galería
    10. Pago de administración
    11. Links de interés
    12. Legal
    13. Caja de luz
    14. Responsive
    15. Movimiento reducido
   ===================================================================== */

/* =====================================================================
   01. SLIDER DE ENTRADA
   ===================================================================== */
.slider {
    position: relative;
    isolation: isolate;
    background: var(--brand-700);
    color: var(--white);
    overflow: hidden;
}

.slider-track {
    position: relative;
    min-height: min(88vh, 760px);
}

.slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s var(--ease), visibility 1s var(--ease);
}
.slide.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
}

/* La foto, con un zoom lento y continuo (efecto Ken Burns). */
.slide-media {
    position: absolute;
    inset: 0;
    background-color: var(--brand-700);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transform: scale(1.02);
}
.slide.is-active .slide-media {
    animation: slideZoom 11s var(--ease-out) forwards;
}
@keyframes slideZoom {
    from { transform: scale(1.02); }
    to   { transform: scale(1.12); }
}

/* Velo. Es verde de marca, pero NO tapa la fotografía: la opacidad es alta
   sólo por donde pasa el texto y baja hacia la derecha, que es donde no hay
   nada escrito y la imagen puede lucirse.

   El texto vive a la izquierda (el bloque mide 820 px y el contenedor 1180),
   así que con la ventana a 1101 px —el peor caso— el texto llega al 75 % del
   ancho. Hasta ahí el velo se mantiene en .86 o más; a partir del 80 % cae
   hasta .24 para dejar ver la foto.

   Contraste medido con el peor caso posible (foto totalmente BLANCA) y texto
   blanco, en los puntos donde HAY texto: 8,5:1 al inicio y 8,2:1 en el borde.
   El verde #1C4842 da 10,2:1 con blanco, así que hay margen de sobra.
   (Reproducible con .testenv/contraste-camino.php) */
.slide-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(28, 72, 66, .95) 0%,
        rgba(28, 72, 66, .93) 40%,
        rgba(28, 72, 66, .90) 62%,
        rgba(28, 72, 66, .86) 80%,
        rgba(28, 72, 66, .48) 92%,
        rgba(28, 72, 66, .24) 100%);
}

.slide-inner {
    position: relative;
    z-index: 2;
    padding: clamp(56px, 9vh, 104px) 0 clamp(72px, 11vh, 120px);
    max-width: 820px;
}

.slide-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px;
    margin-bottom: 20px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(228, 204, 130, .55);
    font-family: var(--ff-body);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--white);
}

/* Titular: la pieza clave. Serif con carácter (Fraunces) y la palabra
   destacada sobre el marcador arena.

   OJO con `color`: la hoja base define `h1, h2, h3, h4 { color: var(--ink-900) }`,
   y una regla directa SIEMPRE gana a la herencia. Sin esta línea el titular
   saldría gris oscuro aunque `.slider` declare `color: var(--white)`. */
.slide-title {
    margin: 0 0 18px;
    font-family: var(--ff-head);
    color: var(--white);
    font-size: clamp(1.9rem, 1.15rem + 3.1vw, 3.05rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.01em;
    text-wrap: balance;
    text-shadow: 0 2px 26px rgba(18, 48, 42, .45);
}

/* Palabra destacada: va sobre un marcador arena sólido con texto oscuro
   (9,6:1). box-decoration-break hace que el marcador se repita bien si la
   palabra cae al final de una línea. */
.slide-hl {
    padding: .02em .18em;
    border-radius: 10px;
    background: var(--sand-500);
    color: var(--ink-900);
    box-shadow: 0 .06em 0 0 rgba(203, 179, 95, .5);
    text-shadow: none;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.slide-text {
    margin: 0 0 30px;
    max-width: 48ch;
    font-size: clamp(1rem, .96rem + .28vw, 1.12rem);
    line-height: 1.7;
    font-weight: 400;
    color: var(--white);
}

.slide-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Controles del slider. El fondo va bastante opaco (.9) porque la flecha de
   la derecha cae en la zona donde la foto se ve. */
.slider-arrow {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-top: -23px;
    border: 1px solid rgba(228, 204, 130, .55);
    border-radius: var(--r-full);
    background: rgba(28, 72, 66, .9);
    color: var(--white);
    box-shadow: 0 8px 22px -10px rgba(20, 24, 28, .45);
    cursor: pointer;
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.slider-arrow:hover,
.slider-arrow:focus-visible {
    background: var(--brand-900);
    transform: scale(1.06);
}
.slider-arrow-prev { left: clamp(10px, 2vw, 26px); }
.slider-arrow-next { right: clamp(10px, 2vw, 26px); }

.slider-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    z-index: 4;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.slider-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, .85);
    cursor: pointer;
    transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
}
.slider-dot.is-active {
    width: 32px;
    background: var(--sand-500);
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85);
}

/* =====================================================================
   02. FRANJA DE CIFRAS
   ===================================================================== */
.stats-strip {
    position: relative;
    margin-top: -46px;
    z-index: 3;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 26px 8px;
    list-style: none;
    background: var(--white);
    border: 1px solid var(--brand-100);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
}
.stats-grid li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 18px;
    text-align: center;
    border-right: 1px solid var(--ink-200);
}
.stats-grid li:last-child { border-right: 0; }
.stats-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 4px;
    border-radius: var(--r-full);
    background: var(--sand-100);
    color: var(--brand-700);
}
.stats-grid strong {
    font-family: var(--ff-head);
    font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem);
    font-weight: 700;
    color: var(--brand-700);
    line-height: 1.1;
}
.stats-grid li > span:last-child {
    font-size: .86rem;
    color: var(--ink-600);
    line-height: 1.4;
}

/* =====================================================================
   03. EL PROYECTO
   ===================================================================== */
.project { background: var(--white); }

.project-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(28px, 4vw, 60px);
    align-items: center;
}

.project-text {
    margin: 0 0 16px;
    font-size: 1.04rem;
    line-height: 1.8;
    color: var(--ink-700);
}
.project-text-soft {
    font-size: .95rem;
    color: var(--ink-600);
}
.project-badges {
    margin: 8px 0 26px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.project-badges li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--r-full);
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    font-size: .87rem;
    color: var(--brand-700);
}
.project-badges .icon { color: var(--brand-600); }
.project-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.project-photo {
    margin: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-lg);
}
.project-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* =====================================================================
   04. UBICACIÓN Y CLASIFICACIÓN
   ===================================================================== */
.location { background: var(--ink-50); }

.location-inner {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

.location-data {
    margin: 24px 0 26px;
    display: grid;
    gap: 14px;
}
.location-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ink-200);
}
.location-row:last-child { border-bottom: 0; padding-bottom: 0; }
.location-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: var(--r-sm);
    background: var(--white);
    border: 1px solid var(--brand-100);
    color: var(--brand-700);
}
.location-row dt {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-500);
    margin-bottom: 2px;
}
.location-row dd {
    margin: 0;
    font-size: .96rem;
    color: var(--ink-800);
    line-height: 1.5;
}
.location-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.location-map {
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--sh-md);
    aspect-ratio: 4 / 3;
}
.location-map iframe,
.location-map img {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

/* =====================================================================
   05. TIPOLOGÍAS Y CARACTERÍSTICAS
   ===================================================================== */
.units { background: var(--white); }

.units-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.unit-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 24px;
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xs);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.unit-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh-md);
    border-color: var(--brand-100);
}
.unit-card h3 {
    margin: 0;
    font-family: var(--ff-head);
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--brand-700);
}
.unit-value {
    margin: 0;
    font-family: var(--ff-head);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink-900);
    line-height: 1.15;
}
.unit-facts {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 7px;
    font-size: .88rem;
    color: var(--ink-600);
}
.unit-facts li { display: flex; align-items: center; gap: 8px; }
.unit-facts .icon { color: var(--brand-500); }
.unit-text {
    margin: 0;
    font-size: .9rem;
    line-height: 1.65;
    color: var(--ink-600);
}

/* La tarjeta destacada ocupa dos columnas y lleva foto arriba. */
.unit-card.is-featured {
    grid-column: span 2;
    padding: 0 0 26px;
    overflow: hidden;
}
.unit-card.is-featured h3,
.unit-card.is-featured .unit-value,
.unit-card.is-featured .unit-facts,
.unit-card.is-featured .unit-text { padding: 0 24px; }
.unit-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    margin-bottom: 20px;
}

.units-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 26px 0 0;
    padding: 16px 20px;
    border-radius: var(--r-md);
    background: var(--sand-100);
    color: var(--ink-800);
    font-size: .88rem;
    line-height: 1.6;
}
.units-note .icon { flex: 0 0 auto; margin-top: 2px; color: var(--brand-700); }

/* =====================================================================
   06. ZONAS COMUNES Y AMENIDADES
   ===================================================================== */
.amenities {
    position: relative;
    background: var(--brand-700);
    color: var(--white);
}
.amenities .section-title { color: var(--white); }
.amenities .section-subtitle { color: var(--white); }

.amenities-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.amenity-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 22px;
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(228, 204, 130, .28);
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.amenity-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, .11);
    border-color: rgba(228, 204, 130, .55);
}
.amenity-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 4px;
    border-radius: var(--r-sm);
    background: var(--sand-500);
    color: var(--ink-900);
}
.amenity-card h3 {
    margin: 0;
    font-family: var(--ff-head);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.3;
}
.amenity-card p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--white);
}

/* =====================================================================
   07. NOTICIAS (carrusel + caja de luz)
   ===================================================================== */
.news { background: var(--white); }

.carousel { position: relative; }

.carousel-viewport {
    overflow: hidden;
    padding: 4px;
    margin: -4px;
}
.carousel-track {
    display: flex;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform .55s var(--ease-out);
    will-change: transform;
}
.news-card {
    flex: 0 0 auto;
    width: calc((100% - (var(--per-view, 3) - 1) * 18px) / var(--per-view, 3));
}
.news-card figure {
    position: relative;
    margin: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--ink-100);
    box-shadow: var(--sh-sm);
}
.news-figure {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    position: relative;
}
.news-figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform .6s var(--ease-out);
}
.news-card:hover .news-figure img { transform: scale(1.05); }

.news-zoom {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--r-full);
    background: rgba(28, 72, 66, .88);
    color: var(--white);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.news-figure:hover .news-zoom,
.news-figure:focus-visible .news-zoom { opacity: 1; transform: translateY(0); }

.news-card figcaption {
    padding: 14px 16px 16px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink-800);
    line-height: 1.45;
}

.carousel-arrow {
    position: absolute;
    top: 40%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    border: 1px solid var(--brand-100);
    border-radius: var(--r-full);
    background: var(--white);
    color: var(--brand-700);
    box-shadow: var(--sh-md);
    cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.carousel-arrow:hover {
    background: var(--brand-700);
    color: var(--white);
    transform: scale(1.06);
}
.carousel-arrow[disabled] { opacity: .4; cursor: default; transform: none; }
.carousel-prev { left: -18px; }
.carousel-next { right: -18px; }

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 24px;
}
.carousel-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: var(--r-full);
    background: var(--ink-300);
    cursor: pointer;
    transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
}
.carousel-dot.is-active {
    width: 26px;
    background: var(--brand-700);
}

/* =====================================================================
   08. DOCUMENTOS
   ===================================================================== */
.documents { background: var(--brand-50); }

.documents-group { margin-bottom: 30px; }
.documents-group:last-of-type { margin-bottom: 0; }

.documents-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-family: var(--ff-head);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--brand-700);
}
.documents-group-title small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: var(--r-full);
    background: var(--white);
    border: 1px solid var(--brand-100);
    font-family: var(--ff-body);
    font-size: .74rem;
    color: var(--ink-600);
}

.documents-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.document-button {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 18px 20px;
    border-radius: var(--r-md);
    background: var(--white);
    border: 1px solid var(--ink-200);
    box-shadow: var(--sh-xs);
    color: var(--ink-800);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.document-button:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-md);
    border-color: var(--sand-500);
}
.document-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--r-sm);
    background: var(--sand-100);
    color: var(--brand-700);
}
.document-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.document-text strong {
    font-family: var(--ff-head);
    font-size: .98rem;
    font-weight: 700;
    color: var(--brand-700);
}
.document-text small {
    font-size: .83rem;
    line-height: 1.5;
    color: var(--ink-600);
}
.document-meta {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: .74rem;
    color: var(--ink-500);
    white-space: nowrap;
}

.documents-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 26px 0 0;
    font-size: .88rem;
    color: var(--ink-600);
}
.documents-note .icon { flex: 0 0 auto; margin-top: 2px; color: var(--brand-500); }

/* =====================================================================
   09. GALERÍA
   ===================================================================== */
.gallery { background: var(--white); }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.gallery-item { margin: 0; }
.gallery-button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: var(--ink-100);
    border-radius: var(--r-md);
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--sh-xs);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gallery-button:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.gallery-button img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .6s var(--ease-out);
}
.gallery-button:hover img { transform: scale(1.06); }

.gallery-actions {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

/* =====================================================================
   10. PAGO DE ADMINISTRACIÓN
   ===================================================================== */
.pay {
    position: relative;
    background: var(--brand-700);
    color: var(--white);
}
.pay-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}
.pay-title {
    margin: 0 0 16px;
    font-family: var(--ff-head);
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.15rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--white);
}
.pay-text {
    margin: 0 0 22px;
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--white);
    max-width: 58ch;
}
.pay-points {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pay-points li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .96rem;
    line-height: 1.55;
    color: var(--white);
}
.pay-points .icon { flex: 0 0 auto; margin-top: 2px; color: var(--sand-500); }

.pay-action {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px 24px;
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(228, 204, 130, .35);
    text-align: center;
}
.pay-pending {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0;
    font-size: .95rem;
    color: var(--white);
}
.pay-pending .icon { color: var(--sand-500); }
.pay-note {
    margin: 0;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--white);
}

/* =====================================================================
   11. LINKS DE INTERÉS
   ===================================================================== */
.links { background: var(--ink-50); }

.links-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.link-card a {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 22px;
    border-radius: var(--r-lg);
    background: var(--white);
    border: 1px solid var(--ink-200);
    box-shadow: var(--sh-xs);
    color: var(--ink-800);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.link-card a:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-md);
    border-color: var(--brand-100);
}
.link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: var(--r-sm);
    background: var(--brand-50);
    color: var(--brand-700);
}
.link-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.link-text strong {
    font-family: var(--ff-head);
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand-700);
}
.link-text small { font-size: .84rem; line-height: 1.5; color: var(--ink-600); }
.link-card a > .icon:last-child { margin-left: auto; color: var(--ink-400); }

/* =====================================================================
   12. LEGAL
   ===================================================================== */
.legal { background: var(--brand-50); }
.legal-inner { max-width: 940px; }

.legal-block {
    margin-top: 12px;
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    overflow: hidden;
}
.legal-block summary {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 18px 22px;
    font-family: var(--ff-head);
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand-700);
    cursor: pointer;
    list-style: none;
}
.legal-block summary::-webkit-details-marker { display: none; }
.legal-block summary .icon:last-child {
    margin-left: auto;
    color: var(--ink-500);
    transition: transform var(--dur) var(--ease);
}
.legal-block[open] summary .icon:last-child { transform: rotate(180deg); }
.legal-block summary:focus-visible { outline: 3px solid var(--brand-500); outline-offset: -3px; }

.legal-text {
    padding: 0 22px 20px;
    font-size: .9rem;
    line-height: 1.75;
    color: var(--ink-600);
}
.legal-text p { margin: 0 0 12px; }
.legal-text p:last-child { margin-bottom: 0; }

.legal-note {
    margin: 20px 0 0;
    font-size: .84rem;
    color: var(--ink-500);
}

/* =====================================================================
   13. CAJA DE LUZ
   ===================================================================== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 3vw, 40px);
    background: rgba(18, 48, 42, .93);
    backdrop-filter: blur(3px);
    animation: lightboxIn .22s var(--ease);
}
@keyframes lightboxIn { from { opacity: 0; } to { opacity: 1; } }

.lightbox-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
}

.lightbox-figure {
    margin: 0;
    max-width: 100%;
    text-align: center;
}
.lightbox-figure img {
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    height: auto;
    border-radius: var(--r-md);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6);
}
.lightbox-figure figcaption {
    margin-top: 14px;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--white);
}
.lightbox-figure figcaption:empty { display: none; }

.lightbox-close,
.lightbox-nav {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, .14);
    color: var(--white);
    cursor: pointer;
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(255, 255, 255, .26); }
.lightbox-close { top: 0; right: 0; }
.lightbox-prev { left: 0; top: 50%; margin-top: -23px; }
.lightbox-next { right: 0; top: 50%; margin-top: -23px; }
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible { outline: 3px solid var(--sand-500); outline-offset: 2px; }
.lightbox-nav[disabled] { opacity: .35; cursor: default; }

.lightbox-counter {
    position: absolute;
    left: 50%;
    bottom: -34px;
    transform: translateX(-50%);
    margin: 0;
    font-size: .82rem;
    color: var(--white);
    opacity: .85;
}

/* =====================================================================
   14. RESPONSIVE
   ===================================================================== */
@media (max-width: 1100px) {
    /* Con el texto más ancho (hasta el 89 %) el velo se queda alto casi
       hasta el borde derecho: la foto se asoma sólo en la última franja. */
    .slide-veil {
        background: linear-gradient(100deg,
            rgba(28, 72, 66, .95) 0%,
            rgba(28, 72, 66, .93) 55%,
            rgba(28, 72, 66, .90) 85%,
            rgba(28, 72, 66, .86) 93%,
            rgba(28, 72, 66, .28) 100%);
    }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
    .stats-grid li:nth-child(2) { border-right: 0; }
    .units-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .amenities-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .carousel-prev { left: -8px; }
    .carousel-next { right: -8px; }
}

@media (max-width: 900px) {
    /* En móvil el texto ocupa todo el ancho, así que manda el degradado
       vertical: fuerte donde está el texto y más claro en las franjas libres. */
    .slide-veil {
        background: linear-gradient(180deg,
            rgba(28, 72, 66, .40) 0%,
            rgba(28, 72, 66, .92) 9%,
            rgba(28, 72, 66, .94) 45%,
            rgba(28, 72, 66, .95) 86%,
            rgba(28, 72, 66, .74) 100%);
    }
    .slider-arrow { display: none; }

    .stats-strip { margin-top: -30px; }

    .project-inner,
    .location-inner,
    .pay-inner { grid-template-columns: 1fr; }
    .project-photo { order: -1; }

    .units-grid { grid-template-columns: 1fr; }
    .unit-card.is-featured { grid-column: span 1; }
    .amenities-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .documents-list { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .links-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .slide-inner { max-width: none; padding: 46px 0 74px; }
    .slide-title { font-size: clamp(1.8rem, 1.1rem + 5.4vw, 2.35rem); }
    .slide-text { font-size: 1rem; }
    .slide-actions .btn { width: 100%; }

    .stats-grid { grid-template-columns: 1fr; }
    .stats-grid li { border-right: 0; border-bottom: 1px solid var(--ink-200); padding-bottom: 16px; }
    .stats-grid li:last-child { border-bottom: 0; }

    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .amenities-grid { grid-template-columns: 1fr; }
    .carousel-arrow { display: none; }
    .document-meta { display: none; }
    .lightbox-close { top: -8px; right: -4px; }
    .lightbox-prev { left: -4px; }
    .lightbox-next { right: -4px; }
}

@media (max-width: 560px) {
    .slide-title { font-size: 1.78rem; line-height: 1.12; }
    .slider-dots { bottom: 16px; }
    .gallery-grid { grid-template-columns: 1fr; }
    .lightbox-figure img { max-height: 66vh; }
}

/* =====================================================================
   15. MOVIMIENTO REDUCIDO
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .slide.is-active .slide-media { animation: none; transform: none; }
    .slide { transition: none; }
    .carousel-track { transition: none; }
    .unit-card:hover,
    .amenity-card:hover,
    .gallery-button:hover,
    .document-button:hover,
    .link-card a:hover { transform: none; }
    .news-card:hover .news-figure img,
    .gallery-button:hover img { transform: none; }
    .lightbox { animation: none; }
}