:root {
    --frame-pad: 1rem;
}

/* 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;
}

.framed-section {
    position: relative;
    /* sutil “vignette” gris en los lados, como en la imagen */
    /*background: linear-gradient(90deg, #eef1f6 0%, transparent 3%, transparent 97%, #eef1f6 100%);*/
}

    .framed-section.full-bleed {
        width: 100%;
    }

.framed-inner {
    position: relative;
    max-width: 1200px; /* ajusta si quieres */
    margin: 0 auto;
    padding: calc(var(--frame-pad) + 12px) var(--frame-pad);
    background: #fff;
}

    /* Borde inset (separado del borde real), usando pseudo-elemento */
    .framed-inner::before {
        content: none;
    }

/* Título alineado a la derecha, tipografía condensada */
.framed-title {
    position: absolute;
    top: clamp(14px, 1.8vw, 22px);
    right: calc(var(--frame-pad) + 8px);
    margin: 0;
    font-size: clamp(24px, 3.4vw, 44px);
    line-height: 1;
    letter-spacing: .02em;
    color: #111;
    font-weight: 800;
    font-stretch: condensed; /* ayuda si la fuente lo soporta */
    text-transform: uppercase;
    /* evita que el título empuje el contenido */
    transform: translateY(-10%);
    z-index: 1;
}

/* Contenido que va dentro del marco */
.framed-content {
    position: relative;
    z-index: 0;
    padding-top: clamp(24px, 4.5vw, 56px); /* espacio para que el título no se solape */
}

/* Responsivo */
@media (max-width: 768px) {
    .framed-inner {
        max-width: 100%;
        padding: calc(var(--frame-pad) + 10px) var(--frame-pad);
    }

    .framed-title {
        right: calc(var(    ) + 4px);
        transform: translateY(-6%);
    }
}