/* En tu CSS global (por ejemplo, en skytile.css o donde lo uses) */
@font-face {
    font-family: 'GildaDisplay';
    src: url('/fonts/GildaDisplay-Regular.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.textGilda {
    font-family: 'GildaDisplay', sans-serif;
}

/* =========================
       Variables FLUIDAS
       ========================= */
.home-hero {
    /* ancho/alto del “stage”, nunca más grande que el viewport */
    --stage-w: clamp(320px, 96vw, 1200px);
    --stage-h: clamp(260px, 44vw, 530px);
    /* inclinación y solape */
    --clip: polygon(35% 0, 100% 0, 65% 100%, 0 100%);
    --overlap: clamp(24px, 10vw, 150px);
    --gutter: clamp(8px, 1.2vw, 12px);
    font-family: system-ui, Segoe UI, Inter, Arial, sans-serif;
}

    /* =========================
       Stage y tiras
       ========================= */
    .home-hero .stage {
        width: min(100%, var(--stage-w)); /* centrado y responsivo */
        height: var(--stage-h);
        margin: 40px auto;
        padding: var(--gutter);
        background: #fff;
        overflow: visible;
    }

    .home-hero .strips {
        display: flex;
        align-items: stretch;
        width: 100%;
        height: 100%;
        overflow: visible;
    }

    .home-hero .strip {
        position: relative;
        flex: 1 1 0;
        height: 100%;
        clip-path: var(--clip);
        -webkit-clip-path: var(--clip);
        margin-left: calc(-1 * var(--overlap));
        background: #000;
        outline: 1px solid transparent;
        isolation: isolate;
        box-shadow: 0 0 0 10px #fff inset;
        overflow: hidden;
    }

        .home-hero .strip:first-child {
            margin-left: 0;
        }

    /* =========================
       Video de fondo (Vimeo)
       ========================= */
    .home-hero .video-bg {
        position: absolute;
        inset: 0;
        z-index: -1;
        overflow: hidden;
    }
        /* “cover” para que no salgan franjas negras */
        .home-hero .video-bg iframe {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200%;
            height: 200%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            border: 0;
        }

    /* =========================
       CTA (si lo usas en la 3ra tira)
       ========================= */
    .home-hero .strip--lime .cta {
        margin: 0 0 20px 20px;
        padding: 14px 20px;
        border: 2px solid #fff;
        border-radius: 999px;
        background: rgba(0,0,0,.4);
        color: #fff;
        font-weight: 800;
        cursor: pointer;
        font-size: 16px;
        position: relative;
        z-index: 1;
    }

/* =========================
       MEDIA QUERIES
       ========================= */

/* <= 1200px: suaviza un poco el ángulo y el solape */
/* ===== Mantener forma en tablets ===== */
@media (max-width: 992px) {
    .home-hero {
        --clip: polygon(30% 0, 100% 0, 70% 100%, 0 100%); /* forma inclinada */
        --overlap: 48px; /* menos solape */
    }

        .home-hero .stage {
            height: auto; /* dejamos que crezca por contenido */
        }

        .home-hero .strips {
            height: auto;
        }

        .home-hero .strip {
            height: auto;
            aspect-ratio: 5 / 6; /* más alto para que el video no “aplane” */
            box-shadow: 0 0 0 6px #fff inset; /* borde interior más fino en pantallas chicas */
        }

        /* cubrir sin barras (un poco menos zoom que en mobile) */
        .home-hero .video-bg iframe {
            width: 210%;
            height: 210%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
}

/* ===== Mantener forma en móviles ===== */
@media (max-width: 768px) {
    .home-hero {
        --clip: polygon(28% 0, 100% 0, 72% 100%, 0 100%); /* sigue inclinada */
        --overlap: 36px; /* que no se pisen demasiado */
    }

        .home-hero .stage {
            width: min(100%, var(--stage-w));
            margin: 24px auto; /* centrado siempre */
            height: auto;
        }

        .home-hero .strips {
            height: auto;
        }

        .home-hero .strip {
            height: auto;
            aspect-ratio: 3 / 4; /* aún más alto para evitar bandas */
            clip-path: var(--clip);
            -webkit-clip-path: var(--clip);
            margin-left: calc(-1 * var(--overlap));
        }

            .home-hero .strip:first-child {
                margin-left: 0;
            }

        /* “Cover” agresivo para matar barras negras del player */
        .home-hero .video-bg {
            background: #000;
        }
            /* por si el iframe deja algún borde */
            .home-hero .video-bg iframe {
                width: 260%;
                height: 260%;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }

}

/* ===== Extra chico (iPhone SE, etc.) ===== */
@media (max-width: 400px) {
    .home-hero {
        --clip: polygon(26% 0, 100% 0, 74% 100%, 0 100%);
        --overlap: 28px;
    }

        .home-hero .strip {
            aspect-ratio: 7 / 10; /* un chin más alto en phones pequeños */
        }

        .home-hero .video-bg iframe {
            width: 280%;
            height: 280%;
        }
}