:root {
    /* Colores oficiales PORTO */
    --color-verdemar-profundo: #025157;
    --color-cardenillo-denso: #005D63;
    --color-piedra-de-rio: #B0BCAF;
    --color-clementina: #E87200;
    --color-gris-ferreo: #393939;
    --color-cenizo-calido: #D6D1CA;
    --color-black: #000000;
    --color-white: #FFFFFF;
    /* Variables usadas por la página */
    --theme-color1: #025157;
    --theme-color2: #E87200;
    --theme-color3: #B0BCAF;
    --theme-color4: #005D63;
    --theme-color5: #D6D1CA;
    --theme-dark: #393939;
    --theme-white: #ffffff;
    --theme-soft: #F7F8F6;
    --theme-soft-2: #E9EFEC;
    --theme-border: rgba(2, 81, 87, .13);
    --theme-text: #393939;
    --body-font: 'MosvitaRegular', 'MosvitaLight', sans-serif;
    --display-font: 'MosvitaMediumExpanded', 'MosvitaMedium', sans-serif;
    --title-font: 'MosvitaMedium', 'MosvitaRegular', sans-serif;
    --ui-font: 'MosvitaMedium', 'MosvitaRegular', sans-serif;
    --accent-font: 'MosvitaMediumExpanded', 'MosvitaMedium', sans-serif;
    --container: 1320px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--body-font);
    color: var(--theme-text);
    background: var(--theme-white);
    line-height: 1.55;
    font-size: 15px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* Aplicación global Mosvita: toda la página usa la familia de marca. */
button,
input,
textarea,
select,
a,
p,
li,
span,
div {
    font-family: inherit;
}

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

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

.page-wrapper {
    width: 100%;
    min-width: 300px;
    overflow: hidden;
    background: #fff;
}

.auto-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

/* Header tipo Loginet: flotante, limpio, con buen aire */
.main-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    padding: 30px 0 0;
}

.header-shell {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 15px 26px;
    border-radius: 999px;
    background: radial-gradient(circle at 74% 30%, rgba(176, 188, 175, .55), transparent 34%), linear-gradient(247.34deg, #B0BCAF -0.54%, #F7F8F6 39.73%, #FFFFFF 62.81%, #D6D1CA 93.75%);
    border: 1px solid rgba(255, 255, 255, .72);
    box-shadow: 0 22px 70px rgba(0, 0, 0, .16);
    backdrop-filter: blur(14px);
}

.logo-box {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 205px;
    min-height: 44px;
}

    .logo-box img {
        width: 245px;
        height: auto;
        object-fit: contain;
    }

.logo-fallback {
    display: none;
    color: var(--theme-color1);
    font-family: var(--title-font);
    font-size: 32px;
    font-weight: 700;
    line-height: .84;
    letter-spacing: .08em;
    text-transform: uppercase;
}

    .logo-fallback small {
        display: block;
        margin-top: 7px;
        color: var(--theme-color2);
        font-size: 11px;
        letter-spacing: .19em;
    }

.main-nav {
    display: flex;
    align-items: center;
    gap: 34px;
}

    .main-nav a {
        font-family: var(--ui-font);
        color: var(--theme-color1);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: .16em;
        text-transform: uppercase;
        transition: .25s ease;
    }

        .main-nav a:hover {
            color: var(--theme-color2);
        }

.theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 30px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--ui-font);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .08em;
    transition: .28s ease;
    cursor: pointer;
    white-space: nowrap;
}

    .theme-btn i {
        margin-left: 10px;
        font-style: normal;
        transform: translateY(-1px);
    }

.btn-style-one {
    background: var(--theme-color2);
    color: #fff;
    box-shadow: 0 16px 34px rgba(232, 114, 0, .22);
}

    .btn-style-one:hover {
        transform: translateY(-2px);
        background: var(--theme-color1);
        color: #fff;
    }

.btn-style-two {
    border-color: rgba(255,255,255,.44);
    color: #fff;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
}

    .btn-style-two:hover {
        background: #fff;
        color: var(--theme-color1);
        transform: translateY(-2px);
    }

/* HERO: full image, mucho aire, compacto en texto */
.porto-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 178px 0 138px;
    background: #000;
    color: #fff;
    overflow: hidden;
}

.porto-hero__media {
    position: absolute;
    inset: 0;
    background: #000;
    overflow: hidden;
}

    .porto-hero__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity .35s ease;
    }

.porto-hero.has-image .porto-hero__media img {
    opacity: 1;
}

.porto-hero__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgba(255,255,255,.24);
    font-family: var(--title-font);
    font-size: clamp(14px, 1.35vw, 22px);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.porto-hero.has-image .porto-hero__placeholder {
    display: none;
}

.porto-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 82% 17%, rgba(232, 114, 0, .16), transparent 30%), linear-gradient(90deg, rgb(2 81 87 / 26%) 0%, rgb(2 81 87 / 19%) 45%, rgba(2, 81, 87, .20) 100%), linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .03) 48%, rgb(2 81 87 / 51%) 100%);
    z-index: 1;
}

.porto-hero::after {
    content: '';
    position: absolute;
    left: -125px;
    bottom: 115px;
    width: 370px;
    height: 370px;
    border: 1px solid rgba(232,114,0,.24);
    border-radius: 50%;
    z-index: 2;
}

.porto-hero__pattern {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 44%;
    height: 45%;
    opacity: .15;
    background-image: linear-gradient(135deg, rgba(255,255,255,.24) 12.5%, transparent 12.5%, transparent 50%, rgba(255,255,255,.24) 50%, rgba(255,255,255,.24) 62.5%, transparent 62.5%, transparent 100%);
    background-size: 18px 18px;
    mask-image: linear-gradient(90deg, transparent, #000 35%, #000);
    z-index: 2;
}

.porto-hero .auto-container {
    position: relative;
    z-index: 3;
    width: 100%;
}

.hero-content {
    max-width: 930px;
}

/* Línea editorial del hero: full-bleed, pero con el texto alineado al contenido. */
.hero-axis {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100vw;
    max-width: none;
    margin-left: calc(-1 * (((100vw - min(var(--container), calc(100vw - 48px))) / 2) + 24px));
    margin-bottom: 20px;
    color: var(--theme-color2);
    font-family: var(--accent-font);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .28em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
}

    .hero-axis::before,
    .hero-axis::after {
        content: '';
        display: block;
        height: 2px;
        background: var(--theme-color2);
        transform: translateY(1px);
    }

    .hero-axis::before {
        flex: 0 0 calc(((100vw - min(var(--container), calc(100vw - 48px))) / 2) + 24px);
    }

    .hero-axis::after {
        flex: 1 1 auto;
        min-width: 90px;
    }

    .hero-axis span {
        flex: 0 0 auto;
    }

.sub-title {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    color: var(--theme-color2);
    font-family: var(--accent-font);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
}

    .sub-title::before {
        content: '';
        width: 44px;
        height: 2px;
        background: var(--theme-color2);
        display: inline-block;
    }

.hero-title {
    color: #fff;
    font-family: var(--display-font);
    font-size: clamp(52px, 5.35vw, 94px);
    line-height: .98;
    font-weight: 500;
    letter-spacing: .015em;
    text-transform: uppercase;
    margin-bottom: 28px;
    max-width: 1000px;
}

.hero-text {
    max-width: 770px;
    color: rgba(255, 255, 255, .92);
    font-size: clamp(16px, 1.05vw, 19px);
    line-height: 1.58;
    font-weight: 400;
    margin-bottom: 34px;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-small-note {
    position: absolute;
    right: 7%;
    bottom: 92px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 14px;
    color: rgba(255,255,255,.78);
    font-family: var(--ui-font);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 11px;
}

    .hero-small-note span {
        width: 46px;
        height: 1px;
        background: rgba(255,255,255,.42);
        display: inline-block;
    }


/* Cintillo inferior del hero: información comercial en movimiento. */
.construction-marquee {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    height: 48px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: rgba(2, 81, 87, .78);
    border-top: 2px solid rgba(232,114,0,.90);
    border-bottom: 1px solid rgba(232,114,0,.90);
    box-shadow: 0 -18px 48px rgba(0,0,0,.18);
    backdrop-filter: blur(10px);
}

.construction-marquee__track {
    display: flex;
    width: max-content;
    animation: portoMarquee 38s linear infinite;
    will-change: transform;
}

.construction-marquee__group {
    display: flex;
    align-items: center;
    gap: 28px;
    padding-right: 28px;
    white-space: nowrap;
}

.construction-marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,.92);
    font-family: var(--accent-font);
    font-size: clamp(13px, 1vw, 17px);
    line-height: 1;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
}

    .construction-marquee__item strong {
        color: var(--theme-color2);
        font-weight: 700;
    }

.construction-marquee__helmet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    box-shadow: 0 8px 22px rgba(0,0,0,.16);
    font-size: 15px;
    line-height: 1;
    transform: translateY(-1px);
}

.construction-marquee__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--theme-color2);
    box-shadow: 0 0 0 4px rgba(232,114,0,.10);
    display: inline-block;
    flex: 0 0 auto;
}

@keyframes portoMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-25%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .construction-marquee__track {
        animation: none;
        transform: translateX(0);
    }
}

/* Segunda sección completa: datos + resumen + giros ideales */
.porto-overview {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 74% 30%, rgba(176, 188, 175, .55), transparent 34%), linear-gradient(247.34deg, #B0BCAF -0.54%, #F7F8F6 39.73%, #FFFFFF 62.81%, #D6D1CA 93.75%);
}

    .porto-overview::before {
        content: '';
        position: absolute;
        right: -130px;
        top: 235px;
        width: 430px;
        height: 430px;
        border-radius: 50%;
        border: 1px solid rgba(2,81,87,.10);
    }

.facts-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-left: 1px solid var(--theme-border);
    border-bottom: 1px solid var(--theme-border);
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(8px);
}

.fact-card {
    min-height: 122px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 26px;
    border-right: 1px solid var(--theme-border);
}

.fact-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: rgba(232, 114, 0, .11);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

    .fact-icon svg {
        width: 25px;
        height: 25px;
        stroke: var(--theme-color2);
    }

.fact-number {
    display: block;
    color: var(--theme-color1);
    font-family: var(--display-font);
    font-size: 30px;
    line-height: .95;
    font-weight: 500;
    letter-spacing: -.02em;
    margin-bottom: 8px;
}

.fact-label {
    color: var(--theme-color1);
    font-family: var(--ui-font);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.overview-body {
    position: relative;
    padding: 58px 0 66px;
}

.overview-layout {
    display: grid;
    grid-template-columns: minmax(0, .90fr) minmax(440px, 1.10fr);
    gap: 38px;
    align-items: center;
}

/* Línea editorial full-bleed tipo brochure para abrir la segunda sección
           La línea ocupa todo el viewport, pero el texto conserva la intención editorial. */
.section-axis {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 26px;
    color: var(--theme-color2);
    font-family: var(--accent-font);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .28em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
}

    .section-axis::before,
    .section-axis::after {
        content: '';
        display: block;
        height: 2px;
        background: var(--theme-color2);
        transform: translateY(1px);
    }

    .section-axis::before {
        flex: 0 0 calc(((100vw - min(var(--container), 100vw)) / 2) + 220px);
    }

    .section-axis::after {
        flex: 1 1 auto;
        min-width: 100px;
    }

    .section-axis span {
        flex: 0 0 auto;
    }

.sec-title .sub-title {
    margin-bottom: 18px;
}

.sec-title h2 {
    color: var(--theme-color1);
    font-family: var(--display-font);
    font-size: clamp(38px, 3.8vw, 58px);
    line-height: .98;
    font-weight: 500;
    letter-spacing: .015em;
    text-transform: uppercase;
    max-width: 760px;
    margin-bottom: 18px;
}

.summary-text {
    max-width: 710px;
    color: rgba(57,57,57,.74);
    font-size: 20px;
    line-height: 1.62;
    font-weight: 400;
    margin-bottom: 22px;
}

.summary-list {
    display: grid;
    gap: 8px;
    margin-bottom: 24px;
}

    .summary-list li {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: 14px;
        color: var(--theme-color1);
        font-family: var(--body-font);
        font-size: 17px;
        font-weight: 500;
        line-height: 1.42;
        padding-bottom: 10px;
        background: linear-gradient(var(--theme-color2), var(--theme-color2)) 24px 100% / calc(100% - 24px) 1px no-repeat;
    }

        .summary-list li::before {
            content: '';
            width: 10px;
            height: 10px;
            margin-top: 8px;
            background: var(--theme-color2);
            transform: rotate(45deg);
            flex: 0 0 auto;
        }

.image-card {
    position: relative;
    min-height: 380px;
    border-radius: 30px;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
    isolation: isolate;
}

    /* Plano flotante: sin tarjeta blanca, más grande y sin alargar la sección. */
    .image-card::before {
        content: '';
        position: absolute;
        z-index: 0;
        left: 54%;
        top: 50%;
        width: 122%;
        height: 116%;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255,255,255,.72) 0%, rgba(255,255,255,.34) 36%, rgba(255,255,255,0) 72%);
        transform: translate(-50%, -50%);
        pointer-events: none;
    }

    .image-card img {
        position: absolute;
        z-index: 1;
        left: 55%;
        top: 50%;
        width: 134%;
        height: 154%;
        padding: 0;
        object-fit: contain;
        object-position: center;
        opacity: 0;
        filter: drop-shadow(0 28px 42px rgba(2,81,87,.14));
        transform: translate(-50%, -50%);
        transition: opacity .35s ease, transform .35s ease;
    }

    .image-card.has-image img {
        opacity: 1;
    }

    .image-card.has-image {
        background: transparent;
    }

    .image-card::after {
        content: 'PLANO DEL DESARROLLO\A 2014 × 1800 px';
        white-space: pre;
        position: absolute;
        z-index: 1;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: rgba(2,81,87,.35);
        font-family: var(--title-font);
        font-size: 18px;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .image-card.has-image::after {
        display: none;
    }

.image-card__link {
    position: absolute;
    left: 22px;
    bottom: 22px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    background: rgba(2,81,87,.90);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    padding: 11px 18px;
    font-family: var(--ui-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 16px 34px rgba(2,81,87,.18);
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

    .image-card__link:hover {
        background: var(--theme-color2);
        transform: translateY(-2px);
        box-shadow: 0 18px 40px rgba(232,114,0,.20);
    }

    .image-card__link i {
        font-style: normal;
        font-size: 13px;
        line-height: 1;
        transform: translateY(-1px);
    }

    .image-card__link::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--theme-color2);
    }


/* Modal del plano: abre el SVG dentro de la misma página. */
.plano-modal {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .26s ease, visibility .26s ease;
}

    .plano-modal.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

.plano-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 81, 87, .78);
    backdrop-filter: blur(12px);
}

.plano-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(1180px, 100%);
    height: min(86vh, 860px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 28px;
    background: radial-gradient(circle at 60% 24%, rgba(176,188,175,.52), transparent 38%), linear-gradient(247.34deg, rgba(176,188,175,.95) -0.54%, rgba(243,253,255,.98) 42%, rgba(241,252,254,.98) 62.81%, rgba(201,232,239,.96) 93.75%);
    box-shadow: 0 34px 90px rgba(0,0,0,.34);
    transform: translateY(18px) scale(.98);
    transition: transform .26s ease;
}

.plano-modal.is-open .plano-modal__dialog {
    transform: translateY(0) scale(1);
}

.plano-modal__head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(232,114,0,.45);
}

.plano-modal__title {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--theme-color1);
    font-family: var(--accent-font);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .20em;
    line-height: 1;
    text-transform: uppercase;
}

    .plano-modal__title::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--theme-color2);
        box-shadow: 0 0 0 4px rgba(232,114,0,.12);
    }

.plano-modal__close {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(2,81,87,.16);
    border-radius: 50%;
    background: rgba(255,255,255,.72);
    color: var(--theme-color1);
    font-family: var(--ui-font);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background .22s ease, color .22s ease, transform .22s ease;
}

    .plano-modal__close:hover {
        background: var(--theme-color2);
        color: #fff;
        transform: rotate(90deg);
    }

.plano-modal__body {
    position: relative;
    flex: 1;
    min-height: 0;
    padding: 22px;
    overflow: auto;
}

    .plano-modal__body img {
        width: 100%;
        height: 100%;
        min-height: 620px;
        object-fit: contain;
        object-position: center;
        filter: drop-shadow(0 26px 46px rgba(2,81,87,.16));
    }

body.plano-modal-open {
    overflow: hidden;
}

.ideal-row {
    position: relative;
    margin-top: 42px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: 1px solid rgba(2,81,87,.18);
    background: rgba(255,255,255,.62);
    backdrop-filter: blur(8px);
}

.ideal-card {
    position: relative;
    min-height: 126px;
    padding: 22px 22px 20px;
    border-right: 1px solid rgba(2,81,87,.18);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    transition: background .28s ease, transform .28s ease, box-shadow .28s ease;
    isolation: isolate;
}

    /* Reflejo sutil tipo vidrio con acento naranja de marca. */
    .ideal-card::before {
        content: '';
        position: absolute;
        z-index: 1;
        top: -42%;
        left: -88%;
        width: 58%;
        height: 190%;
        pointer-events: none;
        opacity: 0;
        background: linear-gradient(115deg, transparent 0%, rgba(232,114,0,.00) 18%, rgba(232,114,0,.06) 39%, rgba(255,255,255,.24) 50%, rgba(232,114,0,.07) 61%, rgba(232,114,0,.00) 82%, transparent 100%);
        transform: translateX(-120%) skewX(-18deg);
        transition: transform .85s cubic-bezier(.22,.61,.36,1), opacity .28s ease;
    }

    .ideal-card:last-child {
        border-right: none;
    }

    .ideal-card:hover {
        background: rgba(255,255,255,.92);
        transform: translateY(-4px);
        box-shadow: 0 22px 50px rgba(2,81,87,.10);
    }

        .ideal-card:hover::before {
            opacity: 1;
            transform: translateX(420%) skewX(-18deg);
        }

    .ideal-card img,
    .ideal-card h3 {
        position: relative;
        z-index: 2;
    }

    .ideal-card img {
        width: 32px;
        height: auto;
        margin-bottom: 14px;
    }

    .ideal-card h3 {
        color: var(--theme-color1);
        font-family: var(--title-font);
        font-size: 16px;
        line-height: 1.22;
        font-weight: 500;
        letter-spacing: -.01em;
        margin: 0;
    }



/* Sección 3: Operación e infraestructura
           Dirección visual distinta a la sección anterior: editorial oscura,
           render panorámico protagonista, conceptos breves y ficha técnica lineal. */
.operation-section {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: radial-gradient(circle at 88% 20%, rgba(232,114,0,.16), transparent 34%), radial-gradient(circle at 8% 82%, rgba(0,93,99,.30), transparent 36%), linear-gradient(120deg, #393939 0%, #323232 48%, #025157 150%);
    padding: 78px 0 72px;
    isolation: isolate;
}

    .operation-section::before {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        width: 46%;
        height: 54%;
        opacity: .10;
        background-image: linear-gradient(135deg, rgba(255,255,255,.28) 12.5%, transparent 12.5%, transparent 50%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.28) 62.5%, transparent 62.5%, transparent 100%);
        background-size: 18px 18px;
        mask-image: linear-gradient(90deg, transparent, #000 38%, #000);
        pointer-events: none;
        z-index: -1;
    }

    .operation-section::after {
        content: '';
        position: absolute;
        left: -160px;
        top: 24%;
        width: 340px;
        height: 340px;
        border: 1px solid rgba(232,114,0,.20);
        border-radius: 50%;
        pointer-events: none;
        z-index: -1;
    }

.operation-axis {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 34px;
    color: var(--theme-color2);
    font-family: var(--accent-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .27em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
}

    .operation-axis::before,
    .operation-axis::after {
        content: '';
        display: block;
        height: 2px;
        background: var(--theme-color2);
        transform: translateY(1px);
    }

    .operation-axis::before {
        flex: 0 0 calc(((100vw - min(var(--container), 100vw)) / 2) + 72px);
    }

    .operation-axis::after {
        flex: 1 1 auto;
        min-width: 120px;
    }

.operation-head {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(360px, .58fr);
    gap: 54px;
    align-items: end;
    margin-bottom: 34px;
}

.operation-title {
    max-width: 980px;
    margin: 0;
    color: #fff;
    font-family: var(--display-font);
    font-size: clamp(40px, 4.6vw, 76px);
    line-height: .98;
    font-weight: 500;
    letter-spacing: .012em;
    text-transform: uppercase;
}

    .operation-title span {
        display: block;
        color: var(--theme-color2);
    }

.operation-lead {
    color: rgba(255,255,255,.78);
    font-size: clamp(15px, 1.08vw, 18px);
    line-height: 1.58;
    margin: 0 0 22px;
}

    .operation-lead strong {
        color: #fff;
        font-weight: 500;
    }

.operation-visual {
    position: relative;
    min-height: clamp(330px, 42vw, 545px);
    border-radius: 30px;
    overflow: hidden;
    background: radial-gradient(circle at 68% 28%, rgba(232,114,0,.13), transparent 34%), linear-gradient(135deg, rgba(2,81,87,.80), rgba(0,0,0,.78));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 34px 90px rgba(0,0,0,.36);
}

    .operation-visual img {
        width: 100%;
        height: 100%;
        min-height: inherit;
        object-fit: cover;
        object-position: center;
        opacity: 0;
        transition: opacity .35s ease;
    }

    .operation-visual.has-image img {
        opacity: 1;
    }

    .operation-visual.has-image::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(2,81,87,.20));
        pointer-events: none;
        z-index: 1;
    }

.operation-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgba(255,255,255,.23);
    font-family: var(--title-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.45;
    text-transform: uppercase;
}

.operation-visual.has-image .operation-placeholder {
    display: none;
}

.operation-chip {
    position: absolute;
    right: 28px;
    top: 26px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    color: #fff;
    background: rgba(2,81,87,.92);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 16px 34px rgba(0,0,0,.18);
    font-family: var(--ui-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}

    .operation-chip::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--theme-color2);
        box-shadow: 0 0 0 4px rgba(232,114,0,.13);
    }

.operation-narrative {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 42px;
    margin-top: 34px;
    padding-top: 28px;
    border-top: 1px solid rgba(232,114,0,.70);
}

.operation-point {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start;
}

    .operation-point span {
        color: var(--theme-color2);
        font-family: var(--accent-font);
        font-size: 13px;
        line-height: 1;
        letter-spacing: .16em;
        padding-top: 4px;
    }

    .operation-point h3 {
        color: #fff;
        font-family: var(--title-font);
        font-size: 20px;
        font-weight: 500;
        line-height: 1.15;
        letter-spacing: .02em;
        text-transform: uppercase;
        margin-bottom: 8px;
    }

    .operation-point p {
        color: rgba(255,255,255,.70);
        font-size: 14px;
        line-height: 1.55;
        max-width: 360px;
    }

.operation-specs {
    margin-top: 32px;
    padding-top: 20px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
    border-top: 1px solid rgba(255,255,255,.16);
}

.operation-spec {
    min-width: 0;
}

    .operation-spec strong {
        display: block;
        color: #fff;
        font-family: var(--display-font);
        font-size: clamp(20px, 2vw, 30px);
        font-weight: 500;
        line-height: 1;
        letter-spacing: -.015em;
        margin-bottom: 8px;
    }

    .operation-spec span {
        display: block;
        color: rgba(255,255,255,.56);
        font-family: var(--ui-font);
        font-size: 10px;
        font-weight: 500;
        line-height: 1.25;
        letter-spacing: .11em;
        text-transform: uppercase;
    }

@media (max-width: 1199px) {
    .operation-section {
        padding: 68px 0 64px;
    }

    .operation-head {
        grid-template-columns: 1fr;
        gap: 22px;
        align-items: start;
    }

    .operation-lead {
        max-width: 760px;
    }

    .operation-visual {
        min-height: clamp(310px, 52vw, 480px);
    }

    .operation-narrative {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .operation-point p {
        max-width: none;
    }

    .operation-specs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 24px;
    }
}

@media (max-width: 767px) {
    .operation-section {
        padding: 54px 0 56px;
    }

    .operation-axis {
        gap: 10px;
        margin-bottom: 24px;
        font-size: 10px;
        letter-spacing: .18em;
    }

        .operation-axis::before {
            flex-basis: 24px;
        }

        .operation-axis::after {
            min-width: 70px;
        }

    .operation-title {
        font-size: clamp(34px, 10vw, 46px);
    }

    .operation-visual {
        min-height: 260px;
        border-radius: 22px;
    }

    .operation-chip {
        left: 16px;
        right: 16px;
        top: 16px;
        justify-content: center;
        font-size: 10px;
        padding: 10px 14px;
    }

    .operation-narrative {
        margin-top: 28px;
        padding-top: 24px;
        gap: 22px;
    }

    .operation-point {
        grid-template-columns: 1fr;
        gap: 8px;
    }

        .operation-point h3 {
            font-size: 18px;
        }

    .operation-specs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 18px;
    }

    .operation-spec strong {
        font-size: 24px;
    }
}



/* Sección 4B: Seguridad y control - Variante Awwwards overlap
           Render panorámico protagonista + bloque editorial montado, sin cards ni dashboard. */
.security-overlap-section {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 12% 18%, rgba(255,255,255,.86), transparent 26%), radial-gradient(circle at 86% 10%, rgba(176,188,175,.48), transparent 38%), linear-gradient(247.34deg, #D6D1CA -8%, #FFFFFF 42%, #F7F8F6 62%, #B0BCAF 128%);
    padding: 76px 0 90px;
    isolation: isolate;
}

    .security-overlap-section::before {
        content: '24/7';
        position: absolute;
        right: -46px;
        top: 18px;
        color: rgba(2,81,87,.055);
        font-family: var(--display-font);
        font-size: clamp(160px, 18vw, 340px);
        line-height: .8;
        letter-spacing: -.08em;
        z-index: -1;
        pointer-events: none;
    }

    .security-overlap-section::after {
        content: '';
        position: absolute;
        left: -150px;
        bottom: -160px;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        border: 1px solid rgba(232,114,0,.18);
        z-index: -1;
    }

.security-overlap-axis {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 28px;
    color: var(--theme-color2);
    font-family: var(--accent-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .27em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
}

    .security-overlap-axis::before,
    .security-overlap-axis::after {
        content: '';
        display: block;
        height: 2px;
        background: var(--theme-color2);
        transform: translateY(1px);
    }

    .security-overlap-axis::before {
        flex: 0 0 calc(((100vw - min(var(--container), 100vw)) / 2) + 90px);
    }

    .security-overlap-axis::after {
        flex: 1 1 auto;
        min-width: 120px;
    }

.security-overlap-title {
    position: relative;
    z-index: 2;
    color: var(--theme-color2);
    font-family: var(--display-font);
    font-size: clamp(60px, 7.1vw, 126px);
    line-height: .88;
    font-weight: 500;
    letter-spacing: .005em;
    text-transform: uppercase;
    margin: 0 0 -34px;
    max-width: 1080px;
}

.security-overlap-stage {
    position: relative;
    z-index: 1;
    min-height: clamp(560px, 52vw, 760px);
    padding-top: 68px;
}

.security-overlap-media {
    position: relative;
    width: min(1120px, 82%);
    min-height: clamp(460px, 46vw, 690px);
    overflow: hidden;
    background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.08), transparent 34%), linear-gradient(135deg, rgba(2,81,87,.72), rgba(0,0,0,.46));
    box-shadow: 0 34px 90px rgba(2,81,87,.18);
}

    .security-overlap-media img {
        width: 100%;
        height: 100%;
        min-height: inherit;
        object-fit: cover;
        object-position: center;
        opacity: 0;
        transition: opacity .35s ease, transform .45s ease;
    }

    .security-overlap-media.has-image img {
        opacity: 1;
    }

    .security-overlap-media.has-image::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(2,81,87,.16), transparent 55%);
        pointer-events: none;
    }

.security-overlap-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.34);
    font-family: var(--title-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: .18em;
    text-align: center;
    text-transform: uppercase;
}

.security-overlap-media.has-image .security-overlap-placeholder {
    display: none;
}

.security-overlap-panel {
    position: absolute;
    right: 0;
    bottom: 34px;
    width: min(520px, 43%);
    padding: clamp(34px, 4.1vw, 58px);
    color: #fff;
    background: radial-gradient(circle at 90% 0%, rgba(176,188,175,.16), transparent 38%), linear-gradient(180deg, #005D63 0%, #025157 100%);
    border-top: 2px solid var(--theme-color2);
    box-shadow: 0 30px 80px rgba(2,81,87,.24);
}

.security-overlap-panel__kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--theme-color2);
    font-family: var(--accent-font);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .20em;
    text-transform: uppercase;
    margin-bottom: 28px;
}

    .security-overlap-panel__kicker::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: currentColor;
        box-shadow: 0 0 0 4px rgba(232,114,0,.12);
    }

.security-overlap-panel p {
    color: rgba(255,255,255,.86);
    font-size: clamp(17px, 1.25vw, 21px);
    line-height: 1.46;
    margin: 0 0 34px;
}

    .security-overlap-panel p strong {
        color: var(--theme-color2);
        font-weight: 500;
    }

.security-overlap-list {
    display: grid;
    gap: 18px;
    padding-top: 28px;
    border-top: 1px solid rgba(232,114,0,.58);
}

    .security-overlap-list li {
        position: relative;
        padding-left: 25px;
        color: rgba(255,255,255,.95);
        font-family: var(--title-font);
        font-size: clamp(17px, 1.15vw, 21px);
        line-height: 1.18;
        font-weight: 500;
    }

        .security-overlap-list li::before {
            content: '';
            position: absolute;
            left: 0;
            top: .24em;
            width: 0;
            height: 0;
            border-top: 7px solid transparent;
            border-bottom: 7px solid transparent;
            border-left: 10px solid var(--theme-color2);
        }

.security-overlap-badge {
    position: absolute;
    left: 36px;
    bottom: 32px;
    z-index: 3;
    color: #fff;
    background: rgba(2,81,87,.90);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    padding: 12px 18px;
    font-family: var(--accent-font);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
    line-height: 1;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

    .security-overlap-badge::before {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-right: 10px;
        border-radius: 50%;
        background: var(--theme-color2);
        box-shadow: 0 0 0 4px rgba(232,114,0,.13);
    }

@media (max-width: 1199px) {
    .security-overlap-title {
        margin-bottom: -18px;
    }

    .security-overlap-stage {
        padding-top: 44px;
        min-height: 0;
    }

    .security-overlap-media {
        width: 100%;
    }

    .security-overlap-panel {
        position: relative;
        right: auto;
        bottom: auto;
        width: min(680px, calc(100% - 34px));
        margin: -90px 0 0 auto;
    }
}

@media (max-width: 767px) {
    .security-overlap-section {
        padding: 56px 0 64px;
    }

    .security-overlap-axis {
        gap: 10px;
        margin-bottom: 24px;
        font-size: 10px;
        letter-spacing: .18em;
    }

        .security-overlap-axis::before {
            flex-basis: 24px;
        }

        .security-overlap-axis::after {
            min-width: 70px;
        }

    .security-overlap-title {
        font-size: clamp(48px, 15vw, 74px);
        margin-bottom: 18px;
    }

    .security-overlap-stage {
        padding-top: 0;
    }

    .security-overlap-media {
        min-height: 330px;
    }

    .security-overlap-panel {
        width: 100%;
        margin: 0;
        padding: 32px 24px 36px;
    }

    .security-overlap-badge {
        left: 18px;
        bottom: 18px;
        max-width: calc(100% - 36px);
        font-size: 10px;
    }
}


/* Footer final premium: respaldo integrado + cuadro comercial conservado
           Compacto, de cierre real, usando el logo oficial y sin formulario de correo. */
.porto-site-footer {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: radial-gradient(circle at 88% 16%, rgba(232,114,0,.12), transparent 28%), radial-gradient(circle at 18% 86%, rgba(176,188,175,.10), transparent 31%), linear-gradient(135deg, #043F45 0%, #025157 48%, #00454B 100%);
    border-top: 2px solid var(--theme-color2);
    isolation: isolate;
}

    .porto-site-footer::before {
        content: '';
        position: absolute;
        inset: 0;
        opacity: .055;
        background-image: linear-gradient(135deg, rgba(255,255,255,.40) 12.5%, transparent 12.5%, transparent 50%, rgba(255,255,255,.40) 50%, rgba(255,255,255,.40) 62.5%, transparent 62.5%, transparent 100%);
        background-size: 18px 18px;
        pointer-events: none;
        z-index: -2;
    }

    .porto-site-footer::after {
        content: '';
        position: absolute;
        right: -180px;
        bottom: -230px;
        width: 520px;
        height: 520px;
        border: 1px solid rgba(232,114,0,.18);
        border-radius: 50%;
        pointer-events: none;
        z-index: -1;
    }

.porto-footer-wrap {
    position: relative;
    padding: 58px 0 26px;
}

.porto-footer-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
    gap: clamp(38px, 6vw, 92px);
    align-items: start;
}

.porto-footer-logo {
    display: inline-flex;
    width: min(380px, 88%);
    margin-bottom: 24px;
}

    .porto-footer-logo img {
        width: 100%;
        height: auto;
    }

.porto-footer-intro {
    max-width: 590px;
    color: rgba(255,255,255,.88);
    font-size: clamp(17px, 1.25vw, 21px);
    line-height: 1.48;
    margin: 0 0 24px;
}

.porto-footer-proof {
    max-width: 660px;
    display: grid;
    grid-template-columns: 175px 1fr;
    gap: 22px;
    align-items: start;
    padding-top: 22px;
    border-top: 1px solid rgba(232,114,0,.70);
}

.porto-footer-proof__label {
    color: var(--theme-color2);
    font-family: var(--accent-font);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .22em;
    line-height: 1.45;
    text-transform: uppercase;
}

.porto-footer-proof__text {
    color: rgba(255,255,255,.66);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

    .porto-footer-proof__text strong {
        color: #fff;
        font-weight: 500;
    }

.porto-footer-card {
    position: relative;
    min-height: 0;
    padding: 30px;
    border: 1px solid rgba(255,255,255,.18);
    background: radial-gradient(circle at 100% 0%, rgba(176,188,175,.14), transparent 36%), rgba(255,255,255,.07);
    box-shadow: 0 30px 72px rgba(0,0,0,.20);
    backdrop-filter: blur(14px);
}

    .porto-footer-card::before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        right: -1px;
        height: 2px;
        background: var(--theme-color2);
    }

.porto-footer-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--theme-color2);
    font-family: var(--accent-font);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .20em;
    line-height: 1;
    text-transform: uppercase;
}

    .porto-footer-card__eyebrow::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: currentColor;
        box-shadow: 0 0 0 4px rgba(232,114,0,.13);
    }

.porto-footer-card h2 {
    max-width: 360px;
    color: #fff;
    font-family: var(--display-font);
    font-size: clamp(30px, 2.55vw, 42px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    margin: 0 0 16px;
}

.porto-footer-card p {
    max-width: 360px;
    color: rgba(255,255,255,.70);
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 24px;
}

.porto-footer-actions {
    display: grid;
    gap: 12px;
}

.porto-footer-btn,
.porto-footer-linkbtn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 46px;
    border-radius: 999px;
    padding: 0 22px;
    font-family: var(--ui-font);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .06em;
    transition: transform .24s ease, background .24s ease, border-color .24s ease, color .24s ease;
}

.porto-footer-btn {
    color: #fff;
    background: var(--theme-color2);
    border: 1px solid var(--theme-color2);
    box-shadow: 0 16px 34px rgba(232,114,0,.18);
}

    .porto-footer-btn:hover {
        transform: translateY(-2px);
        background: #fff;
        color: var(--theme-color1);
        border-color: #fff;
    }

.porto-footer-linkbtn {
    color: rgba(255,255,255,.86);
    border: 1px solid rgba(255,255,255,.24);
    background: rgba(255,255,255,.045);
}

    .porto-footer-linkbtn:hover {
        transform: translateY(-2px);
        border-color: rgba(232,114,0,.82);
        color: #fff;
    }

.porto-footer-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: end;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.14);
}

.porto-footer-nav,
.porto-footer-contact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 24px;
}

    .porto-footer-nav a,
    .porto-footer-contact a,
    .porto-footer-contact span {
        color: rgba(255,255,255,.68);
        font-family: var(--ui-font);
        font-size: 13px;
        font-weight: 500;
        letter-spacing: .03em;
        transition: color .22s ease;
    }

        .porto-footer-nav a:hover,
        .porto-footer-contact a:hover {
            color: var(--theme-color2);
        }

.porto-footer-legal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 24px;
    color: rgba(255,255,255,.44);
    font-size: 11px;
    line-height: 1.4;
}

    .porto-footer-legal a {
        color: rgba(255,255,255,.80);
        font-family: 'MosvitaBold', 'MosvitaMedium', var(--body-font);
        font-weight: 700;
        letter-spacing: -.02em;
        transition: color .22s ease;
    }

        .porto-footer-legal a:hover {
            color: var(--theme-color2);
        }

@media (max-width: 1199px) {
    .porto-footer-main {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .porto-footer-card {
        max-width: 560px;
    }

    .porto-footer-strip {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

@media (max-width: 767px) {
    .porto-footer-wrap {
        padding: 44px 0 24px;
    }

    .porto-footer-logo {
        width: min(310px, 100%);
    }

    .porto-footer-proof {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .porto-footer-card {
        padding: 24px 20px;
    }

        .porto-footer-card h2 {
            font-size: clamp(29px, 9.5vw, 38px);
        }

    .porto-footer-strip,
    .porto-footer-legal {
        display: grid;
        gap: 18px;
    }
}


/* Firma Lucido: integrada al fondo de la sección, centrada y con más carácter. */
.lucido-credit {
    position: relative;
    z-index: 1;
    background: transparent;
    padding: 18px 0 34px;
    text-align: center;
}

    .lucido-credit::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        width: 100vw;
        height: 1px;
        background: var(--theme-color2);
        transform: translateX(-50%);
        pointer-events: none;
    }

.lucido-credit__text {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    color: rgba(2,81,87,.62);
    font-family: var(--body-font);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
}

    .lucido-credit__text a {
        color: var(--theme-color1);
        font-family: 'MosvitaBold', 'MosvitaMedium', var(--body-font);
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -.035em;
        line-height: .95;
        text-transform: none;
        transition: color .25s ease, opacity .25s ease;
    }

        .lucido-credit__text a:hover {
            color: var(--theme-color2);
        }

/* Modal de contacto: formulario temporal con simulación de envío. */
.contact-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .26s ease, visibility .26s ease;
}

    .contact-modal.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

.contact-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 81, 87, .78);
    backdrop-filter: blur(12px);
}

.contact-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(720px, 100%);
    max-height: min(88vh, 820px);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 30px;
    background: radial-gradient(circle at 78% 18%, rgba(232,114,0,.14), transparent 28%), radial-gradient(circle at 18% 8%, rgba(176,188,175,.62), transparent 36%), linear-gradient(247.34deg, rgba(176,188,175,.97) -0.54%, rgba(243,253,255,.99) 42%, rgba(241,252,254,.99) 62.81%, rgba(201,232,239,.97) 93.75%);
    box-shadow: 0 34px 90px rgba(0,0,0,.34);
    transform: translateY(18px) scale(.98);
    transition: transform .26s ease;
}

.contact-modal.is-open .contact-modal__dialog {
    transform: translateY(0) scale(1);
}

.contact-modal__head {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 26px 28px 18px;
    border-bottom: 1px solid rgba(232,114,0,.42);
}

.contact-modal__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    color: var(--theme-color2);
    font-family: var(--accent-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .22em;
    line-height: 1;
    text-transform: uppercase;
}

    .contact-modal__eyebrow::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--theme-color2);
        box-shadow: 0 0 0 4px rgba(232,114,0,.12);
    }

.contact-modal__title {
    color: var(--theme-color1);
    font-family: var(--display-font);
    font-size: clamp(30px, 3.2vw, 46px);
    line-height: .98;
    font-weight: 500;
    letter-spacing: .015em;
    text-transform: uppercase;
    margin: 0 0 10px;
}

.contact-modal__text {
    color: rgba(57,57,57,.74);
    font-size: 15px;
    line-height: 1.52;
    max-width: 560px;
}

.contact-modal__close {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(2,81,87,.16);
    border-radius: 50%;
    background: rgba(255,255,255,.76);
    color: var(--theme-color1);
    font-family: var(--ui-font);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background .22s ease, color .22s ease, transform .22s ease;
}

    .contact-modal__close:hover {
        background: var(--theme-color2);
        color: #fff;
        transform: rotate(90deg);
    }

.contact-modal__body {
    padding: 24px 28px 28px;
    max-height: calc(88vh - 150px);
    overflow: auto;
}

.contact-form {
    display: grid;
    gap: 16px;
}

.contact-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.contact-field {
    display: grid;
    gap: 8px;
}

.contact-field--full {
    grid-column: 1 / -1;
}

.contact-field label {
    color: var(--theme-color1);
    font-family: var(--ui-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.contact-field input,
.contact-field textarea,
.contact-field select {
    width: 100%;
    border: 1px solid rgba(2,81,87,.16);
    border-radius: 16px;
    background: rgba(255,255,255,.72);
    color: var(--theme-color1);
    font-family: var(--body-font);
    font-size: 15px;
    line-height: 1.35;
    outline: none;
    padding: 15px 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.70);
    transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.contact-field textarea {
    min-height: 104px;
    resize: vertical;
}

    .contact-field input:focus,
    .contact-field textarea:focus,
    .contact-field select:focus {
        border-color: rgba(232,114,0,.70);
        background: rgba(255,255,255,.90);
        box-shadow: 0 0 0 4px rgba(232,114,0,.10);
    }

.contact-form__status {
    min-height: 22px;
    color: rgba(2,81,87,.72);
    font-size: 13px;
    line-height: 1.4;
}

.contact-submit {
    position: relative;
    width: 100%;
    min-height: 52px;
    border: none;
    overflow: hidden;
}

    .contact-submit .btn-loader,
    .contact-submit .btn-check {
        width: 18px;
        height: 18px;
        display: none;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
        flex: 0 0 auto;
    }

    .contact-submit .btn-loader {
        border: 2px solid rgba(255,255,255,.45);
        border-top-color: #fff;
        border-radius: 50%;
        animation: contactSpin .8s linear infinite;
    }

    .contact-submit .btn-check {
        border-radius: 50%;
        background: rgba(255,255,255,.18);
        font-size: 14px;
        line-height: 1;
    }

    .contact-submit.is-loading {
        pointer-events: none;
        background: var(--theme-color1);
    }

        .contact-submit.is-loading .btn-loader {
            display: inline-flex;
        }

    .contact-submit.is-success {
        pointer-events: none;
        background: #23A26D;
        box-shadow: 0 16px 34px rgba(35,162,109,.24);
    }

        .contact-submit.is-success .btn-check {
            display: inline-flex;
        }

@keyframes contactSpin {
    to {
        transform: rotate(360deg);
    }
}

body.contact-modal-open {
    overflow: hidden;
}

@media (max-width: 1199px) {
    .main-nav {
        display: none;
    }

    .porto-hero {
        min-height: 820px;
        padding-top: 155px;
    }

    .hero-title {
        font-size: clamp(48px, 8.5vw, 82px);
    }

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

    .overview-layout {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .image-card {
        width: min(100%, 780px);
        min-height: clamp(460px, 58vw, 620px);
        margin: 18px auto 72px;
    }

        .image-card img {
            left: 50%;
            top: 48%;
            width: 118%;
            height: 118%;
        }

        .image-card::before {
            left: 50%;
            width: 118%;
            height: 106%;
        }

    .image-card__link {
        left: 50%;
        bottom: 34px;
        transform: translateX(-50%);
    }

        .image-card__link:hover {
            transform: translateX(-50%) translateY(-2px);
        }

    .ideal-row {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 18px;
    }

    .ideal-card:nth-child(2n) {
        border-right: none;
    }
}

@media (max-width: 767px) {
    .main-header {
        padding: 16px 0 0;
    }

    .auto-container {
        padding: 0 18px;
    }

    .header-shell {
        border-radius: 24px;
        padding: 12px 15px;
        min-height: 68px;
    }

    .logo-box {
        min-width: 150px;
    }

        .logo-box img {
            width: 136px;
        }

    .header-shell .theme-btn {
        display: none;
    }

    .lucido-credit {
        padding: 18px 0;
    }

    .lucido-credit__text {
        text-align: center;
        font-size: 10px;
        letter-spacing: .07em;
    }


    .porto-hero {
        /*
                    En móvil el hero debe ocupar al menos todo el alto visible.
                    Así el cintillo queda siempre al final de la primera pantalla
                    y la segunda sección ya no se asoma debajo del hero.
                */
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;
        align-items: center;
        padding: 138px 0 100px;
    }

    .hero-axis {
        gap: 10px;
        margin-left: calc(-1 * (((100vw - min(var(--container), calc(100vw - 36px))) / 2) + 18px));
        margin-bottom: 16px;
        font-size: 18px;
        letter-spacing: .18em;
    }

        .hero-axis::before {
            flex-basis: calc(((100vw - min(var(--container), calc(100vw - 36px))) / 2) + 18px);
        }

        .hero-axis::after {
            min-width: 42px;
        }

    .sub-title {
        font-size: 33px;
        letter-spacing: .15em;
        margin-bottom: 18px;
    }

    .hero-title {
        font-size: clamp(38px, 11.5vw, 58px);
        margin-bottom: 24px;
    }

    .hero-text {
        font-size: 15px;
        margin-bottom: 28px;
    }

    .theme-btn {
        width: 100%;
        min-height: 48px;
    }

    .hero-small-note {
        left: 24px;
        right: auto;
        bottom: 82px;
    }

    .construction-marquee {
        height: 44px;
    }

    .construction-marquee__track {
        animation-duration: 22s;
    }

    .construction-marquee__group {
        gap: 18px;
        padding-right: 18px;
    }

    .construction-marquee__item {
        font-size: 12px;
        letter-spacing: .10em;
    }

    .construction-marquee__helmet {
        width: 24px;
        height: 24px;
        font-size: 13px;
    }

    @media (max-height: 780px) {
        .porto-hero {
            align-items: flex-end;
            padding-top: 124px;
            padding-bottom: 72px;
        }

        .hero-axis {
            margin-bottom: 12px;
            font-size: 11px;
            letter-spacing: .14em;
        }

        .sub-title {
            font-size: 25px;
            margin-bottom: 12px;
        }

        .hero-title {
            font-size: clamp(34px, 10.5vw, 50px);
            margin-bottom: 18px;
        }

        .hero-text {
            font-size: 14px;
            margin-bottom: 18px;
        }

        .theme-btn {
            min-height: 44px;
        }

        .hero-small-note {
            display: none;
        }
    }

    .section-axis {
        gap: 10px;
        margin-bottom: 24px;
        font-size: 11px;
        letter-spacing: .18em;
    }

        .section-axis::before {
            flex-basis: 46px;
        }

        .section-axis::after {
            min-width: 32px;
        }


    .section-axis {
        gap: 10px;
        margin-bottom: 24px;
        font-size: 11px;
        letter-spacing: .18em;
    }

        .section-axis::before {
            flex-basis: 24px;
        }

        .section-axis::after {
            min-width: 70px;
        }

    .facts-grid {
        grid-template-columns: 1fr;
        border-left: none;
    }

    .fact-card {
        min-height: 116px;
        border-right: none;
        border-bottom: 1px solid var(--theme-border);
        padding: 24px 22px;
    }

    .overview-body {
        padding: 54px 0 62px;
    }

    .sec-title h2 {
        font-size: clamp(34px, 9.5vw, 50px);
    }

    .summary-text {
        font-size: 14px;
    }

    .image-card {
        min-height: 390px;
        margin: 28px auto 58px;
        border-radius: 0;
    }

        .image-card::before {
            left: 50%;
            width: 130%;
            height: 108%;
        }

        .image-card img {
            left: 50%;
            top: 48%;
            width: 132%;
            height: 120%;
            padding: 0;
        }

        .image-card::after {
            font-size: 14px;
        }

    .image-card__link {
        left: 50%;
        bottom: 20px;
        max-width: calc(100% - 30px);
        justify-content: center;
        transform: translateX(-50%);
        font-size: 11px;
        padding: 10px 15px;
        white-space: nowrap;
    }

        .image-card__link:hover {
            transform: translateX(-50%) translateY(-2px);
        }

    .contact-modal {
        padding: 14px;
    }

    .contact-modal__dialog {
        max-height: 90vh;
        border-radius: 22px;
    }

    .contact-modal__head {
        padding: 20px 18px 16px;
    }

    .contact-modal__title {
        font-size: clamp(28px, 9vw, 38px);
    }

    .contact-modal__text {
        font-size: 13px;
    }

    .contact-modal__close {
        width: 38px;
        height: 38px;
        font-size: 22px;
    }

    .contact-modal__body {
        padding: 18px;
        max-height: calc(90vh - 200px);
    }

    .contact-form__grid {
        grid-template-columns: 1fr;
    }

    .contact-field input,
    .contact-field textarea,
    .contact-field select {
        border-radius: 14px;
        font-size: 14px;
        padding: 14px 14px;
    }


    .plano-modal {
        padding: 14px;
    }

    .plano-modal__dialog {
        height: 88vh;
        border-radius: 20px;
    }

    .plano-modal__head {
        padding: 14px 14px 12px;
    }

    .plano-modal__title {
        font-size: 10px;
        letter-spacing: .14em;
    }

    .plano-modal__close {
        width: 38px;
        height: 38px;
        font-size: 22px;
        flex: 0 0 auto;
    }

    .plano-modal__body {
        padding: 14px;
    }

        .plano-modal__body img {
            min-width: 760px;
            min-height: 680px;
            height: auto;
        }

    .ideal-row {
        grid-template-columns: 1fr;
        margin-top: 20px;
    }

    .ideal-card {
        border-right: none;
        border-bottom: 1px solid rgba(2,81,87,.18);
        min-height: 112px;
    }

        .ideal-card:last-child {
            border-bottom: none;
        }
}

/* Ajuste: hero y cintillo como página activa del proyecto. */
.construction-marquee {
    background: rgba(2, 81, 87, .82);
}

.construction-marquee__item {
    letter-spacing: .14em;
}


/* Header premium v3: retícula editorial
           Logo limpio + menú glass centrado + CTA sólido refinado. */
.main-header.header-variant-invisible {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 60;
    padding: 38px 0 0;
    pointer-events: none;
}

.header-variant-invisible .auto-container {
    max-width: min(1480px, calc(100vw - 64px));
    padding-left: 0;
    padding-right: 0;
}

.header-variant-invisible .header-shell {
    position: relative;
    min-height: 58px;
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr minmax(210px, 300px);
    align-items: center;
    gap: clamp(22px, 3.2vw, 56px);
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: auto;
}

.header-variant-invisible .logo-box {
    justify-self: start;
    min-width: 0;
    min-height: 0;
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

    .header-variant-invisible .logo-box img {
        width: clamp(230px, 13.4vw, 278px);
        height: auto;
        object-fit: contain;
        filter: drop-shadow(0 10px 22px rgba(0,0,0,.22)) drop-shadow(0 1px 0 rgba(255,255,255,.10));
        transform: translateY(-1px);
    }

.header-variant-invisible .main-nav {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(26px, 2.15vw, 40px);
    min-height: 50px;
    padding: 0 clamp(30px, 2.7vw, 46px);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(2,81,87,.30), rgba(255,255,255,.075));
    box-shadow: 0 18px 46px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.13), inset 0 -1px 0 rgba(2,81,87,.12);
    backdrop-filter: blur(17px) saturate(122%);
    -webkit-backdrop-filter: blur(17px) saturate(122%);
}

    .header-variant-invisible .main-nav a {
        position: relative;
        display: inline-flex;
        align-items: center;
        min-height: 50px;
        color: rgba(255,255,255,.88);
        font-family: var(--ui-font);
        font-size: clamp(13px, .78vw, 14px);
        font-weight: 500;
        letter-spacing: .095em;
        line-height: 1;
        text-transform: uppercase;
        text-shadow: 0 8px 18px rgba(0,0,0,.20);
        transition: color .24s ease, transform .24s ease;
    }

        .header-variant-invisible .main-nav a::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 10px;
            width: 18px;
            height: 2px;
            border-radius: 999px;
            background: var(--theme-color2);
            opacity: 0;
            transform: translateX(-50%) scaleX(.35);
            transition: opacity .24s ease, transform .24s ease;
        }

        .header-variant-invisible .main-nav a:hover {
            color: #fff;
            transform: translateY(-1px);
        }

            .header-variant-invisible .main-nav a:hover::after {
                opacity: 1;
                transform: translateX(-50%) scaleX(1);
            }

.header-variant-invisible .header-shell .theme-btn {
    justify-self: end;
    min-height: 48px;
    padding: 0 28px;
    border-radius: 999px;
    color: #fff;
    background: var(--theme-color2);
    border: 1px solid rgba(232,114,0,.92);
    box-shadow: 0 14px 30px rgba(232,114,0,.19);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-size: 13px;
    letter-spacing: .055em;
}

    .header-variant-invisible .header-shell .theme-btn i {
        color: #fff;
        margin-left: 12px;
        transition: transform .24s ease;
    }

    .header-variant-invisible .header-shell .theme-btn:hover {
        transform: translateY(-2px);
        color: #fff;
        background: var(--theme-color1);
        border-color: rgba(255,255,255,.18);
        box-shadow: 0 18px 42px rgba(2,81,87,.26);
    }

        .header-variant-invisible .header-shell .theme-btn:hover i {
            transform: translate(3px, -1px);
        }

@media (max-width: 1240px) {
    .header-variant-invisible .auto-container {
        max-width: calc(100vw - 48px);
    }

    .header-variant-invisible .header-shell {
        grid-template-columns: minmax(190px, 250px) 1fr minmax(190px, 245px);
        gap: 24px;
    }

    .header-variant-invisible .logo-box img {
        width: clamp(200px, 16vw, 242px);
    }

    .header-variant-invisible .main-nav {
        gap: 24px;
        padding: 0 28px;
    }

        .header-variant-invisible .main-nav a {
            font-size: 12.5px;
            letter-spacing: .075em;
        }

    .header-variant-invisible .header-shell .theme-btn {
        min-height: 46px;
        padding: 0 22px;
        font-size: 12px;
    }
}

@media (max-width: 980px) {
    .main-header.header-variant-invisible {
        padding: 24px 0 0;
    }

    .header-variant-invisible .header-shell {
        grid-template-columns: 1fr auto;
    }

    .header-variant-invisible .main-nav {
        display: none;
    }

    .header-variant-invisible .logo-box img {
        width: clamp(190px, 28vw, 230px);
    }
}

@media (max-width: 767px) {
    .main-header.header-variant-invisible {
        padding: 18px 0 0;
    }

    .header-variant-invisible .auto-container {
        max-width: calc(100vw - 34px);
    }

    .header-variant-invisible .header-shell {
        min-height: 46px;
        gap: 12px;
    }

    .header-variant-invisible .logo-box img {
        width: 168px;
    }

    .header-variant-invisible .header-shell .theme-btn {
        min-height: 40px;
        padding: 0 15px;
        font-size: 11px;
        letter-spacing: .035em;
    }
}