/* Red Ganadero-Cárnica · Pantalla temporal. Todos los recursos son locales. */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --wine: #7c142e;
  --terracotta: #bb5555;
  --cream: #f3eae1;
  --paper: #fffdfa;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 280px; background: var(--paper); }
body { margin: 0; color: var(--wine); }
img { display: block; max-width: 100%; }
.maintenance-page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }

/* Sólo aparece en la vista previa administrativa; nunca en la pantalla pública. */
.preview-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 9px 18px;
  background: var(--wine);
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
.preview-banner a { color: inherit; font-weight: 700; text-underline-offset: 3px; }
.preview-banner a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.site-header {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  border-bottom: 3px solid var(--wine);
  background: var(--paper);
}
.header-inner {
  width: min(100% - 96px, 1440px);
  min-height: 106px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-block: 15px;
}
.header-logo { width: 232px; height: 74px; object-fit: contain; }
.site-status {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.5;
  text-transform: uppercase;
}
.status-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--terracotta); }

.landscape {
  position: relative;
  isolation: isolate;
  flex: 1 0 auto;
  min-height: 620px;
  min-height: clamp(540px, calc(100svh - 250px), 1040px);
  overflow: hidden;
  background: #dbe0da;
}
.landscape-image { position: absolute; inset: 0; z-index: -2; }
.landscape-image img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 100%; }
/* Este velo claro centra la legibilidad sobre el cielo sin oscurecer el paisaje. */
.landscape::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 380px;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 4%, rgba(255,250,243,.96) 0%, rgba(255,250,243,.84) 33%, rgba(255,250,243,.43) 61%, rgba(255,250,243,0) 78%);
}
.message {
  position: relative;
  width: min(100% - 48px, 1180px);
  margin-inline: auto;
  padding-block: clamp(32px, 4.2vh, 58px) 36px;
  text-align: center;
}
.message-rule { display: block; width: 90px; height: 4px; margin: 0 auto 27px; background: #cd806c; }
h1 { margin: 0; font-size: clamp(44px, 4.4vw, 80px); font-weight: 800; line-height: 1.06; letter-spacing: -.04em; }
h1 span { display: block; }
.message p { margin: 19px 0 0; font-size: clamp(17px, 1.5vw, 24px); font-weight: 500; line-height: 1.5; letter-spacing: -.02em; }

.institutional-footer { flex: 0 0 auto; background: var(--paper); border-top: 1px solid rgba(124,20,46,.1); }
.institutional-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  width: min(100% - 96px, 1120px);
  margin-inline: auto;
  padding-block: 16px 17px;
}
.institution { position: relative; padding-inline: 26px; text-align: center; }
.institution + .institution::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 7px; width: 1px; background: #dec5c6; }
.institution-label { margin: 0 0 8px; font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: .02em; }
.institution-label-spacer { visibility: hidden; }
.institution-logo-slot { height: 74px; display: flex; align-items: center; justify-content: center; }
.institution-logo-slot img { width: 220px; height: 74px; object-fit: contain; }

@media (min-width: 1900px) {
  .landscape { min-height: max(760px, calc(100svh - 250px)); }
  .message { padding-top: 48px; }
}

@media (max-width: 900px) {
  .header-inner { width: calc(100% - 48px); min-height: 96px; }
  .header-logo { width: 210px; height: 67px; }
  .site-status { max-width: 165px; font-size: 10px; letter-spacing: .09em; }
  .landscape { min-height: 640px; }
  .landscape-image img { object-position: 68% 100%; }
  .message { padding-top: 44px; }
  .institutional-inner { width: calc(100% - 32px); }
  .institution { padding-inline: 18px; }
  .institution-logo-slot img { width: 190px; }
}

@media (max-width: 600px) {
  .header-inner { width: calc(100% - 36px); min-height: 100px; gap: 18px; padding-block: 14px; }
  .header-logo { width: 174px; height: 57px; }
  .site-status { max-width: 113px; font-size: 10px; line-height: 1.65; letter-spacing: .09em; gap: 7px; }
  .status-dot { width: 5px; height: 5px; flex-basis: 5px; }
  .landscape { min-height: 620px; min-height: max(570px, calc(100svh - 100px)); }
  .landscape-image img { object-position: 73% 100%; }
  .landscape::before { height: 350px; background: linear-gradient(to bottom, rgba(255,250,243,.96), rgba(255,250,243,.83) 52%, rgba(255,250,243,0)); }
  .message { width: calc(100% - 32px); padding-top: 39px; }
  .message-rule { width: 64px; height: 3px; margin-bottom: 22px; }
  h1 { font-size: clamp(32px, 8.4vw, 46px); line-height: 1.12; letter-spacing: -.04em; }
  .message p { max-width: 295px; margin: 17px auto 0; font-size: 16px; font-weight: 500; line-height: 1.6; }
  .institutional-inner { width: calc(100% - 48px); grid-template-columns: 1fr; padding-block: 24px 28px; gap: 24px; }
  .institution { padding-inline: 0; }
  .institution + .institution::before { display: none; }
  .institution-label-spacer { display: none; }
  .institution-logo-slot { height: 64px; }
  .institution-logo-slot img { width: 220px; height: 64px; }
  .institution-label { font-size: 10px; margin-bottom: 7px; }
}

@media (max-width: 350px) {
  .header-inner { width: calc(100% - 28px); gap: 10px; }
  .header-logo { width: 155px; }
  .site-status { max-width: 102px; }
  h1 { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }
@media print {
  .preview-banner { display: none; }
  .maintenance-page { min-height: auto; }
  .landscape { min-height: 490px; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .site-status { color: var(--wine); }
}