html,
body {
    width: 100%;
    height: 100%;
}

body {
    display: grid;
    grid-template-rows:
        var(--header-height)
        minmax(0, 1fr)
        var(--footer-height);
    overflow: hidden;
}

main {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.container {
    width: min(
        calc(100% - (var(--container-padding) * 2)),
        var(--container-width)
    );
    margin-inline: auto;
}

.site-header {
    min-height: var(--header-height);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.site-footer {
    min-height: var(--footer-height);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

/* Header y footer con el mismo ancho que la imagen principal */
.site-header > .container,
.site-footer > .container {
    max-width: 1336px;
    margin-inline: auto;
}

/* Franja superior e inferior alineadas con el ancho visible de la imagen 3:2 */
.site-header,
.site-footer {
    width: min(
        100%,
        calc(
            (
                100dvh
                - var(--header-height)
                - var(--footer-height)
            ) * 1.7768331562
        )
    );
    margin-inline: auto;
}

.site-header > .container,
.site-footer > .container {
    width: 100%;
    max-width: none;
    padding-inline: var(--container-padding);
}

/* Alineación horizontal exacta con la imagen principal */
.site-header,
.site-footer {
    position: relative;
    left: -8px;
}

/* Marco único para encabezado, portada y pie */
:root {
    --page-frame-width: min(
        100%,
        calc(
            (
                100dvh
                - var(--header-height)
                - var(--footer-height)
            ) * 1.7768331562
        )
    );
}

.site-header,
.site-footer {
    position: static;
    left: auto;
    width: var(--page-frame-width);
    margin-inline: auto;
}