/**
 * PROYECTOS DETALLE — Portocarrero Web Services
 * Prefix: .pi- (proyecto-individual)
 * Palette: green #1a3a2a, yellow #e8b931, black #111110, gray #f2f2f0
 * Zero border-radius, responsive stack at 1024px
 */

@layer proyectos-detalle {

    /* ═══════════════════════════════════════════════
       VARIABLES
       ═══════════════════════════════════════════════ */
    .page-proyecto-detalle {
        --pi-green: #1a3a2a;
        --pi-green-mid: #24503a;
        --pi-yellow: #e8b931;
        --pi-yellow-bright: #f5cc3a;
        --pi-white: #ffffff;
        --pi-gray-light: #f2f2f0;
        --pi-gray: #e5e5e3;
        --pi-gray-mid: #8a8a88;
        --pi-gray-dark: #3a3a38;
        --pi-black: #111110;
        --pi-black-soft: #1a1a19;
    }

    /* ═══════════════════════════════════════════════
       BLOCK SYSTEM
       ═══════════════════════════════════════════════ */
    .pi-block { width: 100%; }

    /* ═══════════════════════════════════════════════
       1. HERO — 100vh, photo, overlay, bottom-left
       ═══════════════════════════════════════════════ */
    .pi-hero {
        height: 100vh;
        height: 100dvh;
        background-size: cover;
        background-position: center;
        position: relative;
        display: flex;
        align-items: flex-end;
        padding: 0 0 12vh 0;
    }

    .pi-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(17,17,16,0.25) 0%, rgba(17,17,16,0.88) 100%);
    }

    .pi-hero__content {
        position: relative;
        z-index: 1;
        padding: 0 80px;
        max-width: 940px;
    }

    .pi-hero__eyebrow {
        font-size: 12px;
        letter-spacing: 5px;
        text-transform: uppercase;
        color: var(--pi-yellow);
        font-weight: 500;
        margin-bottom: 24px;
    }

    .pi-hero h1 {
        font-size: clamp(36px, 4.5vw, 62px);
        font-weight: 300;
        color: var(--pi-white);
        line-height: 1.12;
        letter-spacing: -1.5px;
        margin-bottom: 28px;
    }

    .pi-hero h1 strong { font-weight: 700; }

    .pi-hero__sub {
        font-size: 18px;
        font-weight: 300;
        color: rgba(255,255,255,0.65);
        line-height: 1.7;
        max-width: 620px;
    }

    /* ═══════════════════════════════════════════════
       2. SPLIT — 50/50 text + image
       ═══════════════════════════════════════════════ */
    .pi-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-height: 70vh;
    }

    .pi-split__text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 80px;
        background: var(--pi-white);
    }

    .pi-split__label {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--pi-green);
        margin-bottom: 32px;
    }

    .pi-split__text h2 {
        font-size: clamp(24px, 2.8vw, 36px);
        font-weight: 300;
        line-height: 1.3;
        color: var(--pi-black);
        margin-bottom: 28px;
        letter-spacing: -0.5px;
    }

    .pi-split__text h2 strong { font-weight: 700; }

    .pi-split__text p {
        font-size: 16px;
        line-height: 1.8;
        color: var(--pi-gray-dark);
        margin-bottom: 16px;
    }

    .pi-split__text p:last-child { margin-bottom: 0; }

    .pi-split__image {
        background-size: cover;
        background-position: center;
        min-height: 400px;
    }

    /* ═══════════════════════════════════════════════
       FICHA TÉCNICA (dl inside split)
       ═══════════════════════════════════════════════ */
    .pi-ficha {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 16px 32px;
    }

    .pi-ficha dt {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--pi-gray-mid);
        padding-top: 2px;
    }

    .pi-ficha dd {
        font-size: 16px;
        line-height: 1.6;
        color: var(--pi-black);
    }

    .pi-ficha dd a {
        color: var(--pi-green);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .pi-ficha dd a:hover {
        color: var(--pi-green-mid);
    }

    /* ═══════════════════════════════════════════════
       3. DARK BLOCK — centered
       ═══════════════════════════════════════════════ */
    .pi-dark {
        background: var(--pi-black);
        color: var(--pi-white);
        padding: 120px 80px;
    }

    .pi-dark--centered {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .pi-dark__eyebrow {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--pi-yellow);
        margin-bottom: 32px;
    }

    .pi-dark h2 {
        font-size: clamp(26px, 3vw, 40px);
        font-weight: 300;
        line-height: 1.3;
        max-width: 780px;
        margin-bottom: 28px;
        letter-spacing: -0.5px;
        color: var(--pi-white);
    }

    .pi-dark h2 strong { font-weight: 700; }

    .pi-dark__body {
        font-size: 17px;
        line-height: 1.8;
        color: rgba(255,255,255,0.6);
        max-width: 700px;
    }

    /* ═══════════════════════════════════════════════
       SPLIT VARIANTS
       ═══════════════════════════════════════════════ */
    .pi-split--gray .pi-split__text {
        background: var(--pi-gray-light);
    }

    .pi-split--dark {
        align-items: stretch;
    }

    .pi-split--dark .pi-split__image {
        min-height: 100%;
    }

    .pi-split__image--bottom {
        background-position: center bottom;
    }

    .pi-split--dark .pi-split__text,
    .pi-split__text--dark {
        background: var(--pi-black);
    }

    .pi-split__text--dark h2 {
        color: var(--pi-white);
    }

    .pi-split__text--dark p {
        color: rgba(255,255,255,0.6);
    }

    .pi-split__label--yellow {
        color: var(--pi-yellow);
    }

    .pi-split__small {
        font-size: 14px;
        color: var(--pi-gray-mid);
        line-height: 1.7;
    }

    /* ═══════════════════════════════════════════════
       DARK VARIANTS
       ═══════════════════════════════════════════════ */
    .pi-dark--soft {
        background: var(--pi-black-soft);
    }

    .pi-dark__note {
        font-size: 14px;
        color: rgba(255,255,255,0.35);
        margin-top: 24px;
        max-width: 700px;
    }

    /* ═══════════════════════════════════════════════
       GREEN BLOCK
       ═══════════════════════════════════════════════ */
    .pi-green {
        background: var(--pi-green);
        color: var(--pi-white);
        padding: 120px 80px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .pi-green__eyebrow {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--pi-yellow);
        margin-bottom: 32px;
    }

    .pi-green h2 {
        font-size: clamp(26px, 3vw, 40px);
        font-weight: 300;
        line-height: 1.3;
        max-width: 780px;
        margin-bottom: 28px;
        letter-spacing: -0.5px;
        color: var(--pi-white);
    }

    .pi-green h2 strong { font-weight: 700; }

    .pi-green__body {
        font-size: 17px;
        line-height: 1.8;
        color: rgba(255,255,255,0.6);
        max-width: 700px;
    }

    .pi-green__note {
        font-size: 14px;
        color: rgba(255,255,255,0.35);
        margin-top: 24px;
        max-width: 700px;
    }

    /* ═══════════════════════════════════════════════
       SEARCHES BLOCK
       ═══════════════════════════════════════════════ */
    .pi-searches {
        background: var(--pi-white);
        padding: 120px 80px;
        text-align: center;
    }

    .pi-searches h2 {
        font-size: clamp(24px, 2.5vw, 36px);
        font-weight: 300;
        color: var(--pi-black);
        letter-spacing: -0.5px;
        margin-bottom: 12px;
    }

    .pi-searches__sub {
        font-size: 14px;
        color: var(--pi-gray-mid);
        margin-bottom: 56px;
    }

    .pi-searches__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
        max-width: 900px;
        margin: 0 auto;
    }

    .pi-searches__item {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 32px;
        background: var(--pi-gray-light);
        text-align: left;
    }

    .pi-searches__query {
        font-size: 15px;
        color: var(--pi-gray-mid);
        font-style: italic;
    }

    .pi-searches__result {
        font-size: 16px;
        font-weight: 600;
        color: var(--pi-green);
    }

    /* ═══════════════════════════════════════════════
       LEADS TAGS
       ═══════════════════════════════════════════════ */
    .pi-leads__tags {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        margin: 32px 0;
        max-width: 800px;
    }

    .pi-leads__tag {
        display: inline-block;
        padding: 8px 20px;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 1px;
        color: var(--pi-white);
        border: 1px solid rgba(255,255,255,0.2);
        text-transform: uppercase;
    }

    /* ═══════════════════════════════════════════════
       RESULTS VARIANTS
       ═══════════════════════════════════════════════ */
    .pi-results__grid--8 {
        grid-template-columns: repeat(4, 1fr);
    }

    .pi-results__fuente {
        font-size: 13px;
        color: var(--pi-gray-mid);
        text-align: center;
        margin-top: 48px;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.6;
    }

    /* ═══════════════════════════════════════════════
       ANTES / AHORA
       ═══════════════════════════════════════════════ */
    .pi-antes-ahora {
        max-width: 900px;
        margin: 0 auto 56px;
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .pi-antes-ahora__item {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .pi-antes-ahora__antes,
    .pi-antes-ahora__ahora {
        padding: 24px 28px;
        font-size: 15px;
        line-height: 1.7;
    }

    .pi-antes-ahora__antes {
        background: rgba(0,0,0,0.08);
        color: var(--pi-gray-mid);
    }

    .pi-antes-ahora__ahora {
        background: var(--pi-green);
        color: var(--pi-white);
    }

    .pi-antes-ahora__antes span,
    .pi-antes-ahora__ahora span {
        display: block;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
        margin-bottom: 8px;
    }

    .pi-antes-ahora__antes span {
        color: var(--pi-gray-dark);
    }

    .pi-antes-ahora__ahora span {
        color: var(--pi-yellow);
    }

    /* ═══════════════════════════════════════════════
       REFERENCES
       ═══════════════════════════════════════════════ */
    .pi-ref__title {
        font-size: clamp(20px, 2vw, 28px);
        font-weight: 300;
        color: var(--pi-white);
        margin-bottom: 20px;
        letter-spacing: -0.3px;
    }

    /* ═══════════════════════════════════════════════
       5. PARALLAX
       ═══════════════════════════════════════════════ */
    .pi-parallax {
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        position: relative;
        padding: 160px 80px;
    }

    .pi-parallax::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(17,17,16,0.75);
    }

    .pi-parallax--centered {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-height: 50vh;
    }

    .pi-parallax__text {
        position: relative;
        z-index: 1;
        font-size: clamp(24px, 3vw, 40px);
        font-weight: 300;
        color: var(--pi-white);
        line-height: 1.35;
        max-width: 800px;
        letter-spacing: -0.5px;
    }

    /* ═══════════════════════════════════════════════
       6. RESULTADOS
       ═══════════════════════════════════════════════ */
    .pi-results {
        background: var(--pi-gray-light);
        padding: 120px 80px;
    }

    .pi-results__header {
        text-align: center;
        margin-bottom: 64px;
    }

    .pi-results__eyebrow {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--pi-green);
        margin-bottom: 20px;
    }

    .pi-results__header h2 {
        font-size: clamp(24px, 2.5vw, 36px);
        font-weight: 300;
        color: var(--pi-black);
        letter-spacing: -0.5px;
    }

    .pi-results__grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        max-width: 1200px;
        margin: 0 auto;
    }

    .pi-results__item {
        text-align: center;
        padding: 48px 24px;
        border-right: 1px solid var(--pi-gray);
    }

    .pi-results__item:last-child { border-right: none; }

    .pi-results__valor {
        font-size: clamp(32px, 4vw, 52px);
        font-weight: 700;
        color: var(--pi-green);
        line-height: 1;
        margin-bottom: 12px;
    }

    .pi-results__label {
        font-size: 13px;
        font-weight: 500;
        color: var(--pi-gray-mid);
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    /* ═══════════════════════════════════════════════
       7. CTA
       ═══════════════════════════════════════════════ */
    .pi-cta {
        background: var(--pi-green);
        color: var(--pi-white);
        padding: 120px 80px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .pi-cta h2 {
        font-size: clamp(26px, 3vw, 40px);
        font-weight: 300;
        line-height: 1.3;
        max-width: 680px;
        margin-bottom: 20px;
        letter-spacing: -0.5px;
        color: var(--pi-white);
    }

    .pi-cta p {
        font-size: 17px;
        color: rgba(255,255,255,0.65);
        margin-bottom: 40px;
        max-width: 540px;
    }

    .pi-cta__buttons {
        display: flex;
        gap: 16px;
    }

    .pi-cta__btn,
    .pi-cta__btn--primary,
    .pi-cta__btn--secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 40px;
        background: transparent;
        color: var(--pi-white);
        border: 1px solid rgba(255,255,255,0.4);
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-decoration: none;
        transition: border-color 0.2s, color 0.2s;
    }

    .pi-cta__btn:hover,
    .pi-cta__btn--primary:hover,
    .pi-cta__btn--secondary:hover {
        border-color: var(--pi-white);
        color: var(--pi-white);
    }

    /* ═══════════════════════════════════════════════
       RESPONSIVE — stack at 1024px
       ═══════════════════════════════════════════════ */
    @media (max-width: 1024px) {
        .pi-hero__content {
            padding: 0 32px;
        }

        .pi-split {
            grid-template-columns: 1fr;
        }

        .pi-split__image {
            min-height: 50vh;
            order: -1;
        }

        .pi-split__text {
            padding: 60px 32px;
        }

        .pi-dark {
            padding: 80px 32px;
        }

        .pi-parallax {
            padding: 100px 32px;
            background-attachment: scroll;
        }

        .pi-results {
            padding: 80px 32px;
        }

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

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

        .pi-results__item {
            border-right: none;
            border-bottom: 1px solid var(--pi-gray);
        }

        .pi-results__item:nth-child(odd) {
            border-right: 1px solid var(--pi-gray);
        }

        .pi-results__item:nth-last-child(-n+2) {
            border-bottom: none;
        }

        .pi-green {
            padding: 80px 32px;
        }

        .pi-searches {
            padding: 80px 32px;
        }

        .pi-searches__grid {
            grid-template-columns: 1fr;
        }

        .pi-antes-ahora__item {
            grid-template-columns: 1fr;
        }

        .pi-cta {
            padding: 80px 32px;
        }

        .pi-cta__buttons {
            flex-direction: column;
            width: 100%;
            max-width: 360px;
        }

        .pi-cta__btn,
        .pi-cta__btn--primary,
        .pi-cta__btn--secondary {
            width: 100%;
            text-align: center;
            padding: 14px 32px;
            font-size: 12px;
        }
    }

    @media (max-width: 640px) {
        .pi-hero {
            height: 85vh;
            padding: 0 0 8vh 0;
        }

        .pi-hero__content {
            padding: 0 20px;
        }

        .pi-hero h1 {
            font-size: 32px;
        }

        .pi-hero__sub {
            font-size: 16px;
        }

        .pi-split__text {
            padding: 48px 20px;
        }

        .pi-ficha {
            grid-template-columns: 1fr;
            gap: 8px 0;
        }

        .pi-ficha dt {
            margin-top: 12px;
        }

        .pi-ficha dt:first-child {
            margin-top: 0;
        }

        .pi-dark {
            padding: 64px 20px;
        }

        .pi-parallax {
            padding: 80px 20px;
        }

        .pi-results {
            padding: 64px 20px;
        }

        .pi-results__grid {
            grid-template-columns: 1fr;
        }

        .pi-results__grid--8 {
            grid-template-columns: 1fr;
        }

        .pi-results__item {
            border-right: none !important;
            border-bottom: 1px solid var(--pi-gray);
        }

        .pi-results__item:last-child {
            border-bottom: none;
        }

        .pi-green {
            padding: 64px 20px;
        }

        .pi-searches {
            padding: 64px 20px;
        }

        .pi-searches__item {
            padding: 24px 20px;
        }

        .pi-leads__tags {
            gap: 8px;
        }

        .pi-leads__tag {
            font-size: 11px;
            padding: 6px 14px;
        }

        .pi-cta {
            padding: 64px 20px;
        }
    }
}

/* ═══════════════════════════════════════════════
   HEADER FIX — fuera de layer para mayor prioridad
   Enlaces y selector de idiomas super blancos sobre hero
   ═══════════════════════════════════════════════ */
.page-proyecto-detalle ~ .header-global:not(.scrolled),
body:has(.page-proyecto-detalle) .header-global:not(.scrolled) {
    backdrop-filter: none;
}

body:has(.page-proyecto-detalle) .header-global:not(.scrolled) .header__nav-link,
body:has(.page-proyecto-detalle) .header-global:not(.scrolled) .header__lang-link {
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

body:has(.page-proyecto-detalle) .header-global:not(.scrolled) .header__lang-link--active {
    text-shadow: none;
}

/* ═══════════════════════════════════════════════
   PROYECTOS HERO — 100vh on mobile (outside @layer)
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .pi-hero {
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
    }
}