/**
 * Desktop: las superficies del header pueden ocupar todo el viewport, pero
 * sus controles comparten el mismo marco centrado que el contenido.
 * El 4:3 queda como referencia, no como limite rigido en monitores anchos.
 */
:root {
  --tc-site-gutter: clamp(1rem, 2vw, 2.5rem);
  --tc-site-fluid-width: 82vw;
  --tc-site-max-width: 1680px;
  --tc-header-height: 162px;
}

#tc-site-frame > .page {
  padding-top: var(--tc-header-height);
}

@media (min-width: 992px) {
  :root {
    --tc-header-height: 177px;
  }

  body.tc-site-body {
    --tc-content-height: calc(100vh - var(--tc-header-height));
    --tc-ratio-width: calc(var(--tc-content-height) * 4 / 3);
    --tc-site-width: min(
      calc(100vw - var(--tc-site-gutter)),
      max(var(--tc-ratio-width), var(--tc-site-fluid-width)),
      var(--tc-site-max-width)
    );
    background-color: #eef2f6 !important;
  }

  #main-header.tc-site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    overflow: visible;
    z-index: 999;
    background-color: #fff;
  }

  #main-header .container-xl {
    width: calc(var(--tc-site-width) - 2rem) !important;
    max-width: calc(100vw - var(--tc-site-gutter) - 2rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #tc-site-frame {
    width: var(--tc-site-width);
    max-width: calc(100vw - var(--tc-site-gutter));
    min-height: var(--tc-content-height);
    margin-left: auto;
    margin-right: auto;
  }

  #tc-site-frame > .page {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  #tc-site-frame .container,
  #tc-site-frame [class^="container-"],
  #tc-site-frame [class*=" container-"] {
    max-width: 100% !important;
  }

  #tc-site-frame .page-header,
  #tc-site-frame .page-body {
    background: transparent;
  }

  #tc-site-frame .card {
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  }
}