/* TINTIN — composición común para páginas secundarias */
:where(body:not(:has(.login-page)):not(:has(.adm-main))) {
  --secondary-page-gutter: clamp(16px, 4vw, 40px);
  background: var(--surface-soft, #fff6fa);
}

:where(body:not(:has(.login-page)):not(:has(.adm-main))) .tt-page-hero > .container,
:where(body:not(:has(.login-page)):not(:has(.adm-main))) .section > .container,
:where(body:not(:has(.login-page)):not(:has(.adm-main))) .tt-footer-shell {
  width: min(100% - (var(--secondary-page-gutter) * 2), 1180px);
  margin-inline: auto;
}

:where(body:not(:has(.login-page)):not(:has(.adm-main))) .tt-page-hero {
  padding-block: clamp(42px, 7vw, 84px);
  text-align: center;
}

:where(body:not(:has(.login-page)):not(:has(.adm-main))) .tt-page-hero-title,
:where(body:not(:has(.login-page)):not(:has(.adm-main))) .tt-page-hero-sub {
  max-width: 780px;
  margin-inline: auto;
}

:where(body:not(:has(.login-page)):not(:has(.adm-main))) .tt-page-hero-sub {
  line-height: 1.7;
}

:where(body:not(:has(.login-page)):not(:has(.adm-main))) .section {
  padding-block: clamp(32px, 5vw, 64px);
}

:where(body:not(:has(.login-page)):not(:has(.adm-main))) .section > .container[style*="max-width"] {
  max-width: 780px !important;
}

:where(body:not(:has(.login-page)):not(:has(.adm-main))) .tt-info-block {
  margin-inline: auto;
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(87, 42, 59, .055);
}

:where(body:not(:has(.login-page)):not(:has(.adm-main))) .tt-info-title {
  text-wrap: balance;
}

:where(body:not(:has(.login-page)):not(:has(.adm-main))) .tt-footer-shell {
  padding-inline: 0;
}

:where(body:not(:has(.login-page)):not(:has(.adm-main))) .tt-footer-grid {
  align-items: start;
  gap: clamp(24px, 5vw, 64px);
}

:where(body:not(:has(.login-page)):not(:has(.adm-main))) .tt-footer-bottom {
  text-align: center;
}

/* Product: el contenido principal mantiene un ancho de lectura y no se pega
   a los bordes en monitores grandes. */
body:has(.tt-product-page) .tt-product-page > .container,
body:has(.tt-product-page) .tt-related-section > .container {
  width: min(100% - (var(--secondary-page-gutter, 24px) * 2), 1280px);
  margin-inline: auto;
}

/* Error 404: una sola columna centrada, con aire y botones consistentes. */
.tt-404-wrap {
  width: min(100% - 32px, 680px);
  margin-inline: auto;
  text-align: center;
  padding-block: clamp(48px, 10vw, 112px);
}
.tt-404-sub { max-width: 56ch; margin-inline: auto; line-height: 1.7; }
.tt-404-actions { justify-content: center; gap: 12px; flex-wrap: wrap; }
.tt-404-cats { justify-content: center; gap: 8px; flex-wrap: wrap; }

/* Panel de imágenes: ancho controlado y controles respirables sin modificar
   los permisos ni el flujo de autenticación. */
body:has(.adm-main) .adm-main {
  width: min(100%, 1380px);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 36px);
}
body:has(.adm-main) .adm-section-header,
body:has(.adm-main) .adm-cards-grid,
body:has(.adm-main) .adm-bulk-toolbar {
  width: min(100%, 1180px);
  margin-inline: auto;
}
body:has(.adm-main) .adm-cards-grid {
  align-items: stretch;
  gap: clamp(16px, 2vw, 28px);
}

@media (max-width: 767px) {
  :where(body:not(:has(.login-page)):not(:has(.adm-main))) .tt-page-hero {
    padding-block: 34px 42px;
  }
  :where(body:not(:has(.login-page)):not(:has(.adm-main))) .section {
    padding-block: 24px 42px;
  }
  :where(body:not(:has(.login-page)):not(:has(.adm-main))) .tt-footer-grid {
    gap: 28px;
  }
  .tt-404-actions .tt-btn { width: 100%; justify-content: center; }
  body:has(.adm-main) .adm-main { padding-inline: 14px; }
}

@media (max-width: 380px) {
  :where(body:not(:has(.login-page)):not(:has(.adm-main))) .tt-page-hero-title { font-size: clamp(1.75rem, 9vw, 2.25rem); }
  :where(body:not(:has(.login-page)):not(:has(.adm-main))) .tt-info-block { border-radius: 16px; }
}