/* Fonts */
@font-face {
    font-family: 'Bolton Titling Elongated';
    src: url('assets/fonts/Bolton/BoltonTitlingElongated.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Akrobat Black';
    src: url('assets/fonts/Akrobat/Akrobat-Black.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Familias secundarias: para todo lo que NO son títulos importantes (esos se
   quedan siempre en Bolton Titling Elongated). Sirven para dar variedad
   alternando entre la familia Bolton y la familia Akrobat. */
@font-face {
    font-family: 'Bolton';
    src: url('assets/fonts/Bolton/Bolton.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Bolton';
    src: url('assets/fonts/Bolton/BoltonItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Bolton';
    src: url('assets/fonts/Bolton/BoltonBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Bolton';
    src: url('assets/fonts/Bolton/BoltonBoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Akrobat';
    src: url('assets/fonts/Akrobat/Akrobat-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Akrobat';
    src: url('assets/fonts/Akrobat/Akrobat-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Akrobat';
    src: url('assets/fonts/Akrobat/Akrobat-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Akrobat';
    src: url('assets/fonts/Akrobat/Akrobat-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Base */
html { scroll-behavior: smooth; }
/* Compensa la barra fija al abrir el enlace «Cómo llegar». */
#visita { scroll-margin-top: 5rem; }
body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }

/* Typography */
.font-serif { font-family: 'Bolton Titling Elongated', serif; }
.font-condensed { font-family: 'Akrobat Black', sans-serif; }
.opening-question {
    display: inline-block;
    margin-right: .04em;
    font-family: 'Bolton Titling Elongated', serif;
    font-size: 1em;
    font-weight: inherit;
    letter-spacing: 0;
    line-height: 1;
    transform: rotate(180deg);
    transform-origin: center 54%;
    vertical-align: -.01em;
}
.title-accent {
    position: relative;
    display: inline-block;
}
.title-accent::after {
    content: '';
    position: absolute;
    top: -.08em;
    left: 50%;
    width: .2em;
    height: .055em;
    border-radius: 999px;
    background: currentColor;
    transform: translateX(-44%) rotate(-46deg);
    transform-origin: center;
}

@media (max-width: 767px) {
    .title-accent::after {
        /* Acerca la tilde a la letra incluso cuando cambia el interlineado. */
        top: calc(50% - .24em);
    }
}

/* Secundarias (alternan Bolton / Akrobat para todo lo que no es título) */
.font-accent { font-family: 'Bolton', serif; }
.font-accent-semibold { font-family: 'Bolton', serif; font-weight: bold; }
.font-sans-alt { font-family: 'Akrobat', sans-serif; font-weight: 600; }
.font-sans-alt-light { font-family: 'Akrobat', sans-serif; font-weight: 300; }

/* Ghost text / section watermark: estilo propio, sin heredar de otras clases,
   pensado solo para las letras enormes y tenues de fondo en los títulos de sección. */
.section-watermark {
    position: absolute;
    display: block;
    font-family: 'Bolton Titling Elongated', serif;
    font-weight: 900;
    font-style: normal;
    font-size: clamp(8rem, 20vw, 18rem);
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
    z-index: 0;
    color: rgba(0, 0, 0, 0.06);
}
.section-watermark-light {
    color: rgba(255, 255, 255, 0.08);
}

/* Lines */
.line-red {
    height: 1px;
    background-color: #BE1622;
}
.line-red-vertical {
    width: 2px;
    background-color: #BE1622;
}
.line-white {
    height: 1px;
    background-color: rgba(255,255,255,0.3);
}

/* Navigation */
.nav-link {
    position: relative;
    letter-spacing: 0.15em;
    font-size: 0.75rem;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.3s ease;
}
.nav-link:hover::after {
    width: 100%;
}

/* Mobile menu */
.mobile-menu {
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-menu.open {
    transform: translateX(0);
}
.mobile-menu .mobile-link {
    font-family: 'Akrobat Black', sans-serif !important;
    font-weight: normal;
    color: #fff !important;
    mix-blend-mode: normal;
}

/* Fade in on scroll */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Gallery item */
.gallery-item {
    cursor: pointer;
    transition: transform 0.4s ease;
}
.gallery-item:hover {
    transform: translateY(-4px);
}
.gallery-item img {
    transition: transform 0.6s ease;
}
.gallery-item:hover img {
    transform: scale(1.02);
}

/* Collage/masonry: cada .gallery-item recibe su grid-row-end (span) por JS
   (script.js, layoutMasonry) según su altura real, para que las obras verticales
   ocupen varias filas y no queden huecos en blanco entre las obras horizontales. */
.masonry-grid {
    grid-auto-flow: dense;
    grid-auto-rows: 8px;
    align-items: start;
}

/* Lightbox */
.lightbox {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.lightbox.active {
    opacity: 1;
    pointer-events: all;
}

/* Filter buttons */
.filter-btn {
    position: relative;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
}
.filter-btn.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #BE1622;
}

/* Architectural illustrations */
.arch-illustration {
    opacity: 0.9;
    mix-blend-mode: multiply;
}

/* Las imágenes con carga diferida deben seguir siendo visibles mientras el
   navegador decide cuándo descargarlas; ocultarlas aquí deja en blanco el
   avance de las obras. */
img {
    opacity: 1;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #BE1622;
}

/* Counter style */
.counter {
    font-family: 'Akrobat Black', sans-serif;
    letter-spacing: 0.1em;
}

/* Map container */
.map-container iframe {
    filter: grayscale(100%) contrast(1.1);
}

/* Contacto */
.contact-section {
    background: #f8f5f2;
    border-top: 1px solid rgba(190,22,34,.15);
}
.contact-panel {
    display: grid;
    gap: 2rem;
    align-items: center;
    text-align: center;
}
.contact-panel__copy { min-width: 0; }
.contact-panel__eyebrow {
    margin-bottom: 1rem;
    color: #BE1622;
    font-size: .75rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.contact-panel__title {
    margin-bottom: 1rem;
    color: #0A0A0A;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    line-height: 1.15;
}
.contact-panel__description {
    max-width: 28rem;
    margin-inline: auto;
    color: #4A4A4A;
    font-weight: 300;
    line-height: 1.75;
}
.contact-email {
    display: block;
    min-width: 0;
    max-width: 100%;
    justify-self: center;
    padding-block: 1rem;
    border-bottom: 1px solid rgba(190,22,34,.35);
    color: #BE1622;
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease;
}
.contact-email__label {
    display: block;
    margin-bottom: .65rem;
    color: #4A4A4A;
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.contact-email__row {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.contact-email__address {
    min-width: 0;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    overflow-wrap: anywhere;
}
.contact-email__icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.contact-email:hover { color: #8F1119; border-color: currentColor; }
.contact-email:focus-visible { outline: 2px solid #BE1622; outline-offset: 6px; }
@media (min-width: 1024px) {
    .contact-panel { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; text-align: left; }
    .contact-panel__description { margin-inline: 0; }
    .contact-email { justify-self: end; }
}

/* Countdown */
.countdown-number {
    display: inline-block;
    min-width: 1.6ch;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease;
}
.countdown-number.tick {
    color: #C83B45;
}
.countdown-timer {
    transition: opacity .45s ease, transform .45s ease;
}
.countdown-opening {
    display: none;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
}
#countdown.is-open .countdown-timer {
    display: none;
}
#countdown.is-open .countdown-opening {
    display: flex;
    animation: countdown-opening-in .8s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes countdown-opening-in {
    from { opacity: 0; transform: translateY(1rem); }
    to { opacity: 1; transform: translateY(0); }
}

/* Loader */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.page-loader.loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-logo {
    width: 120px;
    height: auto;
    animation: loader-pulse 1.4s ease-in-out infinite;
}

@keyframes loader-pulse {
    0%, 100% {
        transform: scale(0.92);
        opacity: 0.6;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Avance: un solo lienzo con alturas y escalas escalonadas, sin separar
   las últimas obras en otra fila. Se conservan las proporciones originales. */
.avance-collage {
    position: relative;
    width: min(100%, 68rem);
    aspect-ratio: 5 / 6;
    margin-inline: auto;
}
.collage-item {
    position: absolute;
    margin: 0;
    cursor: zoom-in;
}
.ci-expolio { top: 0; left: 0; width: 28.6%; }
.ci-luz { top: 2%; left: 34.6%; width: 30.1%; }
.ci-corphus { top: 0; left: 73%; width: 23.6%; }
.ci-fragmento { top: 22.5%; left: 38.3%; width: 18%; }
.ci-cocinilla { top: 44%; left: 0; width: 32.8%; }
.ci-testigos { top: 33%; left: 61.7%; width: 38.3%; }
.ci-geometria { top: 60%; left: 0; width: 36%; }
.ci-persistencia { top: 63%; left: 40%; width: 33%; }
.ci-panoramica { top: 89%; left: 43%; width: 58%; }
.ci-tejados { top: 57%; left: 78%; width: 23%; }
.collage-frame {
    position: relative;
    overflow: hidden;
    background: #171214;
}
.collage-frame img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .7s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
}
.collage-item:hover .collage-frame img { transform: scale(1.04); }
.collage-item:focus-visible {
    outline: 2px solid #BE1622;
    outline-offset: 5px;
}
.collage-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.25rem 1.25rem 1rem;
    background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
}
.collage-item:hover .collage-caption,
.collage-item:focus-within .collage-caption { opacity: 1; transform: translateY(0); }

@media (max-width: 767px) {
    .avance-collage {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        width: 100%;
        aspect-ratio: auto;
    }
    .collage-item { position: static; width: auto; }
    .ci-luz, .ci-fragmento { grid-column: span 2; }
    .ci-fragmento { width: 66.667%; justify-self: center; }
    .collage-caption {
        position: static;
        padding: .8rem .9rem;
        background: #171214;
        opacity: 1;
        transform: none;
    }
    .collage-caption p:first-child { line-height: 1.2; }
    .collage-caption p + p { margin-top: .3rem; line-height: 1.2; }
}

@media (max-width: 639px) {
    .avance-collage { grid-template-columns: 1fr; gap: 1.5rem; }
    .ci-luz, .ci-fragmento { grid-column: auto; }
    .collage-frame img { width: 100%; }
    .collage-caption { padding: 1rem; }
}

@media (max-width: 639px) {
    .lightbox {
        padding: 1.25rem 3.5rem;
    }
    .lightbox #lightboxClose {
        top: .75rem;
        right: .75rem;
    }
    .lightbox #lightboxImg {
        max-height: 68vh;
    }
    .lightbox #lightboxTitle {
        font-size: 1rem;
        line-height: 1.25;
    }
    .lightbox #lightboxMeta {
        line-height: 1.25;
    }
}

@media (hover: none) {
    .collage-caption { opacity: 1; transform: none; }
}

/* ==========================================================
   SECCIÓN: LA TÉCNICA — CUERDA SECA
   ========================================================== */

/* Placeholders: bloque oscuro con leve brillo, listo para
   sustituirse por <img> sin tocar el layout */
.tec-ph {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.05) 50%, transparent 70%),
        radial-gradient(120% 140% at 25% 15%, #2E1C1A, #14100F 70%);
    background-size: 200% 200%, 100% 100%;
    animation: tec-shimmer 4s ease-in-out infinite;
    overflow: hidden;
}
.tec-ph--2 { background: radial-gradient(120% 140% at 70% 30%, #2A1923, #100C0E 70%); }
.tec-ph--3 { background: radial-gradient(120% 140% at 40% 70%, #1B262E, #0C1013 70%); }
.tec-ph--4 { background: radial-gradient(120% 140% at 60% 60%, #2C2215, #131009 70%); }
@keyframes tec-shimmer {
    0% { background-position: 200% 0, 0 0; }
    100% { background-position: -200% 0, 0 0; }
}

.tec-ph-label {
    position: relative;
    z-index: 1;
    font-family: 'Akrobat Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.65);
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.3);
    padding: 0.55rem 1.1rem;
    white-space: nowrap;
}

.tec-material-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Llena el ancho del panel; la altura sobrante se recorta, sin zoom. */
    object-fit: cover;
    object-position: center;
    filter: saturate(.88) contrast(1.05);
}

/* Carrusel horizontal: muestra una etapa completa y la desplaza suavemente. */
.tec-carousel__viewport { overflow: hidden; }
.tec-carousel__track {
    display: flex;
    transform: translate3d(0, 0, 0);
    transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}
.tec-slide {
    flex: 0 0 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    min-height: 27rem;
    background: #121212;
}
.tec-slide__visual { min-height: 100%; }
.tec-slide__copy {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3.5rem clamp(2rem, 6vw, 6rem);
}
.tec-slide__num {
    position: absolute;
    top: 1.6rem;
    right: 2rem;
    font-family: 'Bolton Titling Elongated', serif;
    font-size: clamp(3rem, 7vw, 6rem);
    line-height: 1;
    color: rgba(255,255,255,0.08);
}
.tec-carousel__controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.35rem;
}
.tec-carousel__arrow {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    font-size: 1.25rem;
    transition: background-color .25s ease, border-color .25s ease;
}
.tec-carousel__arrow:hover, .tec-carousel__arrow:focus-visible { background: #BE1622; border-color: #BE1622; outline: none; }
.tec-carousel__dots { display: flex; align-items: center; gap: .5rem; }
.tec-carousel__dots button {
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background: rgba(255,255,255,.3);
    transition: width .4s ease, background-color .4s ease;
}
.tec-carousel__dots button.active { width: 2.25rem; background: #BE1622; }

@media (max-width: 767px) {
    .tec-slide { grid-template-columns: 1fr; min-height: 0; }
    .tec-slide__visual { aspect-ratio: 16 / 10; min-height: 0; }
    .tec-slide__copy { min-height: 19rem; padding: 2.5rem 2rem 3rem; }
    .tec-carousel__controls { gap: .75rem; }
    .tec-carousel__arrow { width: 2.5rem; height: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .tec-carousel__track { transition: none; }
}

/* Aviso legal */
.legal-page {
    margin: 0;
    background: #0A0A0A;
    color: #d4d4d4;
    font-family: 'Akrobat', sans-serif;
    font-size: 1.125rem;
    line-height: 1.65;
}
.legal-content {
    max-width: 48rem;
    margin-inline: auto;
    padding: clamp(1.5rem, 5vw, 4rem) 1.5rem;
}
.legal-page a {
    color: inherit;
    text-underline-offset: .2em;
    overflow-wrap: anywhere;
}
.legal-page a:hover { color: #fff; }
.legal-page a:focus-visible {
    outline: 2px solid #D94656;
    outline-offset: 5px;
}
.legal-back { font-size: 1rem; }
.legal-header {
    margin: 3rem 0;
    padding-bottom: 2rem;
    border-bottom: 1px solid #333;
}
.legal-eyebrow {
    color: #D94656;
    font-family: 'Akrobat Black', sans-serif;
    font-size: .875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.legal-header h1 {
    margin: .5rem 0 0;
    color: #fff;
    font-family: 'Bolton Titling Elongated', serif;
    font-size: clamp(2.5rem, 7vw, 4rem);
    font-weight: normal;
    line-height: 1.2;
}
.legal-content section { margin-block: 2.5rem; }
.legal-content h2 {
    color: #D94656;
    font-size: 1.5rem;
    line-height: 1.3;
}
.legal-content ul { padding-left: 1.25rem; }
.legal-footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid #333;
    font-size: 1rem;
}