/* ============================================================
   APPH Premium · Capa visual premium sobre tokens institucionales.
   Diseño Senior Fullstack: dinamismo, microinteracciones, scroll.
   ============================================================ */

/* --- Header premium: stick + blur + sombra scroll --- */
.home-contact__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr) minmax(0,1.25fr);gap:22px;align-items:stretch}.home-contact__info{display:grid;gap:14px;align-content:start}.home-contact__location{display:flex;flex-direction:column;gap:14px}.home-contact__address{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid var(--apph-border);border-radius:16px;background:#fff}.home-contact__address strong{color:var(--apph-blue-900)}.home-contact__address p{margin:5px 0 0;color:var(--apph-muted)}.home-contact__icon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:12px;background:linear-gradient(135deg,#2d388c,#36a2df);color:#fff}.home-contact__icon--green{background:linear-gradient(135deg,#3d8a36,#6cb85f)}.home-contact__map{position:relative;min-height:190px;flex:1;overflow:hidden;border-radius:18px;background:linear-gradient(145deg,#dceefa,#b8d7e9);border:1px solid #b4d3e3;color:#2d388c}.home-contact__road{position:absolute;height:22px;width:130%;background:#fff;opacity:.8;transform:rotate(-18deg);top:72px;left:-15%}.home-contact__road--two{transform:rotate(28deg);top:110px;left:-8%;background:#e9f2f6}.home-contact__pin{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:48px;height:48px;transform:translate(-50%,-50%);border-radius:50% 50% 50% 0;background:#2d388c;color:#fff;font-size:1.35rem;rotate:-45deg;box-shadow:0 8px 20px #2d388c55}.home-contact__pin i{rotate:45deg}.home-contact__map strong{position:absolute;bottom:14px;left:16px;padding:6px 10px;border-radius:8px;background:#fff;color:#2d388c;font-size:.85rem}.home-contact__form{height:100%;padding:28px}.home-contact__form h3{margin:0;color:var(--apph-blue-900)}.home-contact__fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.home-contact__form .button{margin-top:4px}@media(max-width:800px){.home-contact__grid{grid-template-columns:1fr}.home-contact__fields{grid-template-columns:1fr}.home-contact__form{padding:22px}}
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(135deg, rgba(45,56,140,.92), rgba(50,110,179,.88));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 32px rgba(34,47,62,.12);
  transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.site-header.scrolled {
  padding: 6px 0;
  box-shadow: 0 10px 36px rgba(45,56,140,.24);
}
.site-header .brand__logo { filter: none; border-radius: 0; background: transparent; }
.site-nav a {
  position: relative;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  padding: 10px 6px;
  transition: color .25s ease;
}
.site-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 2px;
  background: linear-gradient(90, var(--apph-yellow), var(--apph-orange));
  transition: width .32s cubic-bezier(.22,.8,.35,1);
}
.site-nav a:hover { color: var(--apph-yellow); }
.site-nav a:hover::after { width: 100%; }
.site-nav a.is-active { color: var(--apph-yellow); }
.site-nav a.is-active::after { width: 100%; }

/* Accessibility fixes: preserve the white header and keep active navigation
   readable against its light surface. */
.site-header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--apph-border);
}
.site-nav a,
.site-nav a.is-active {
  color: var(--apph-blue-900);
  text-shadow: none;
}
.site-nav a:hover,
.site-nav a.is-active:hover {
  color: var(--apph-blue-900);
}

/* header actions premium */
.header-actions .button--highlight {
  background: linear-gradient(135deg, var(--apph-orange), var(--apph-yellow));
  color: #1a1f2b;
  box-shadow: 0 6px 18px rgba(229,148,24,.32);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  border-radius: 999px;
}
.header-actions .button--highlight:hover {
  transform: translateY(-2px) scale(1.04);
  filter: brightness(1.05);
  box-shadow: 0 10px 26px rgba(229,148,24,.42);
}
.header-actions .button--secondary { border-radius: 999px; }

/* Header CTA hierarchy: one filled action and one quiet account action. */
.header-cta { letter-spacing: .01em; }
.header-cta--join { color: var(--apph-ink) !important; }
.header-cta--members { color: var(--apph-blue-900) !important; background: #fff; border: 1px solid var(--apph-blue-600); }
.header-cta--members:hover { color: var(--apph-blue-900) !important; background: var(--apph-surface-blue); }

/* --- Scroll reveal --- */
[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
[data-animate].visible { opacity: 1; transform: translateY(0); }
[data-animate].staggered { transition-delay: calc(var(--i,0) * .12s); }

/* --- Hero premium --- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 70vh;
  display: flex;
  align-items: center;
  color: #fff;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(45,56,140,.92), rgba(50,110,179,.86), rgba(32,60,90,.94));
  background-size: 220% 220%;
  animation: heroShift 18s ease infinite;
  z-index: 0;
}
.hero__media {
  position: absolute;
  inset: 0;
  object-fit: cover;
  z-index: 0;
  opacity: .18;
}
.hero__slider { position: relative; z-index: 1; }
.hero .container { position: relative; z-index: 1; }

/* hero content premium */
.hero .section-head .eyebrow {
  background: linear-gradient(90, var(--apph-yellow), var(--apph-orange));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hero h2 {
  font-size: clamp(2rem, 5.5vw, 3.2rem);
  line-height: 1.15;
  background: linear-gradient(90deg, #fff, #e8f0ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .lead { font-size: 1.05rem; opacity: .92; }
.hero .button--highlight {
  background: linear-gradient(135deg, var(--apph-orange), var(--apph-yellow));
  color: #1a1f2b;
  border-radius: 999px;
  box-shadow: 0 8px 26px rgba(229,148,24,.32);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.hero .button--highlight:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 34px rgba(229,148,24,.44);
  filter: brightness(1.05);
}

@keyframes heroShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Small labels must meet WCAG AA on white and pale section surfaces. */
.section-head .eyebrow,
.eyebrow {
  color: #9a5d00;
}
.badge--status { background: #347d2f; }

/* A dark section can contain a white form card; do not inherit white text. */
.section--dark .form-card,
.section--dark .form-card h1,
.section--dark .form-card h2,
.section--dark .form-card h3,
.section--dark .form-card p,
.section--dark .form-card li,
.section--dark .form-card label,
.section--dark .form-card small {
  color: var(--apph-ink);
}
.section--dark .form-card a { color: var(--apph-blue-900); }
.section--dark .card,
.section--dark .card h1,
.section--dark .card h2,
.section--dark .card h3,
.section--dark .card p,
.section--dark .card li,
.section--dark .card small {
  color: var(--apph-ink);
}
.section--dark .card a { color: var(--apph-blue-900); }
.affiliation-cta .card,
.affiliation-cta .card h1,
.affiliation-cta .card h2,
.affiliation-cta .card h3,
.affiliation-cta .card p,
.affiliation-cta .card li,
.affiliation-cta .card small {
  color: var(--apph-ink);
}
.affiliation-cta .card a { color: var(--apph-blue-900); }

/* --- Cards premium --- */
.card {
  border-radius: var(--apph-radius-lg);
  background: var(--apph-surface);
  box-shadow: var(--apph-shadow-card);
  transition: transform .32s cubic-bezier(.22,.8,.35,1), box-shadow .32s ease, border-color .32s ease;
  border: 1px solid var(--apph-border);
  overflow: hidden;
}
.card--hover:hover,
.news-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--apph-shadow-lg);
  border-color: rgba(45,56,140,.12);
}
.news-card__img, .card__icon { border-radius: var(--apph-radius-md); }
.badge { border-radius: 999px; font-weight: 700; letter-spacing: .03em; }

/* --- Stats premium --- */
.stats-section {
  background: linear-gradient(135deg, var(--apph-blue-900), var(--apph-blue-600));
  color: #fff;
  border-radius: var(--apph-radius-lg);
  overflow: hidden;
  position: relative;
}
.stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/img/logo-apph.jpg') center/contain no-repeat;
  opacity: .04;
}
.metric {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
}
.metric + .metric-label { font-weight: 600; opacity: .9; }

/* --- Noticias premium --- */
.news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--apph-surface);
  border-radius: var(--apph-radius-lg);
  box-shadow: var(--apph-shadow-card);
  transition: transform .3s ease, box-shadow .3s ease;
}
.news-card:hover { box-shadow: var(--apph-shadow-lg); transform: translateY(-6px); }
.news-card__img {
  aspect-ratio: 16/9;
  width: 100%;
  object-fit: cover;
  border-top-left-radius: var(--apph-radius-lg);
  border-top-right-radius: var(--apph-radius-lg);
}
.card__link {
  color: var(--apph-blue-600);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap .2s ease, color .2s ease;
}
.card__link:hover { gap: 10px; color: var(--apph-blue-900); }

/* --- Buttons premium (highlight) --- */
.button--highlight, .button--primary {
  background: linear-gradient(135deg, var(--apph-orange), var(--apph-yellow));
  color: #1a1f2b;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(229,148,24,.28);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.button--highlight:hover, .button--primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

/* --- Footer premium --- */
.site-footer {
  background: var(--apph-ink);
  color: #cbd6e0;
  padding: var(--apph-space-8) 0 28px;
  border-radius: 0;
}
.site-footer a { color: var(--apph-blue-400); }
.site-footer a:hover { color: var(--apph-yellow); }

/* Contact page: give the institutional channel the same visual weight as the
   affiliation flow without embedding an unverified map provider. */
.contact-layout { gap: 36px; }
.contact-location__heading { display: flex; align-items: center; gap: 14px; }
.contact-location__heading .card__icon { flex: 0 0 auto; margin-bottom: 0; }
.contact-location__address { margin: 18px 0; color: var(--apph-ink); line-height: 1.7; }
.contact-map {
  position: relative; height: 170px; overflow: hidden; margin: 18px 0;
  border: 1px solid var(--apph-border); border-radius: var(--apph-radius-md);
  background: linear-gradient(135deg, var(--apph-surface-blue), #fff 60%, var(--apph-surface-orange));
}
.contact-map::before, .contact-map::after { content: ''; position: absolute; background: rgb(50 110 179 / 13%); }
.contact-map::before { width: 140%; height: 22px; left: -20%; top: 68%; transform: rotate(-18deg); }
.contact-map::after { width: 18px; height: 130%; left: 56%; top: -15%; transform: rotate(28deg); }
.contact-map__road { position: absolute; z-index: 1; display: block; border: 1px dashed rgb(50 110 179 / 35%); border-radius: 50%; }
.contact-map__road--one { width: 70%; height: 90%; left: -10%; top: -30%; transform: rotate(24deg); }
.contact-map__road--two { width: 80%; height: 70%; right: -20%; bottom: -30%; transform: rotate(-20deg); }
.contact-map__pin { position: absolute; z-index: 2; left: 50%; top: 42%; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; background: var(--apph-blue-900); box-shadow: 0 8px 18px rgb(45 56 140 / 30%); transform: translate(-50%, -50%); }
.contact-map__label { position: absolute; z-index: 2; left: 50%; top: 68%; padding: 5px 10px; border-radius: 999px; color: var(--apph-ink); background: #fff; box-shadow: 0 3px 12px rgb(34 47 62 / 12%); font-size: .78rem; font-weight: 700; transform: translateX(-50%); white-space: nowrap; }

/* --- Form cards premium --- */
.form-card { border-radius: var(--apph-radius-lg); }
.field input, .field textarea, .field select {
  border-radius: var(--apph-radius-sm);
  border: 1.5px solid var(--apph-border);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--apph-blue-600);
  box-shadow: 0 0 0 3px var(--apph-focus);
}

/* Local token lab, hidden on every deployed/public host by JavaScript. */
.token-lab { display: none; }
@media screen {
  .token-lab.is-open, .token-lab:has(.token-lab__toggle:focus) { display: block; }
  .token-lab {
    position: fixed; right: 18px; bottom: 18px; z-index: 1000;
    color: var(--apph-ink); font: 14px/1.4 var(--font-body);
  }
  .token-lab__toggle { border: 0; border-radius: 999px; padding: 11px 16px; color: #fff; background: var(--apph-blue-900); box-shadow: 0 8px 24px rgb(34 47 62 / 25%); cursor: pointer; }
  .token-lab__body { display: none; width: 280px; margin-bottom: 10px; padding: 16px; border: 1px solid var(--apph-border); border-radius: 14px; background: #fff; box-shadow: 0 18px 45px rgb(34 47 62 / 24%); }
  .token-lab.is-open .token-lab__body { display: block; }
  .token-lab__body p { margin: 4px 0 12px; color: var(--apph-muted); font-size: 12px; }
  .token-lab__fields { display: grid; gap: 8px; }
  .token-lab__fields label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .token-lab__fields input { width: 92px; min-height: 30px; padding: 2px 5px; border: 1px solid var(--apph-border); border-radius: 6px; }
  .token-lab__actions { display: flex; gap: 8px; margin-top: 14px; }
  .token-lab__actions button { border: 1px solid var(--apph-blue-600); border-radius: 7px; padding: 6px 8px; color: var(--apph-blue-900); background: #fff; cursor: pointer; }
}

/* --- Counters --- */
[data-count] {
  overflow: hidden;
}
[data-count] span { display: inline-block; }

/* --- Fixes responsivos premium (NO redefinir layout base) --- */
html { overflow-x: hidden; }

/* Header: evita doble línea — header-actions siempre juntos, nav scrollable en tight viewports */
.site-header .site-header__inner {
  flex-wrap: nowrap;
  align-items: center;
}
.site-header .header-actions {
  flex-shrink: 0;
  flex-wrap: nowrap;
}

/* Botones: nada de wrap de texto ni overflow */
.button, .button--highlight, .button--primary, .button--secondary, .button--ghost,
.header-actions .button, [class*="button"] {
  box-sizing: border-box;
  white-space: nowrap;
}

/* Hero: contener overflow del slider */
.hero, .hero__slider, .hero__media {
  max-width: 100%;
  overflow: hidden;
}
.hero__media { display: block; max-width: 100%; height: auto; }

/* Contenedor ancho consistente para no romper el layout */
.container {
  max-width: var(--apph-content-max, 1200px);
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Grid responsive reforzado (solo refsuerzo; base ya lo maneja) */
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
 .member-hero{min-height:78vh;display:grid;grid-template-columns:1.05fr .95fr;background:linear-gradient(135deg,#172153,#2d388c 58%,#36a2df);color:#182536}.member-hero__art{padding:clamp(32px,8vw,110px);display:flex;flex-direction:column;justify-content:center;color:#fff;background:linear-gradient(145deg,rgb(23 33 83 / 86%),rgb(45 56 140 / 45%))}.member-hero__art img{width:110px;border-radius:14px;margin-bottom:28px}.member-hero__art span{font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem}.member-hero__art h1{max-width:520px;font:800 clamp(2rem,4vw,4.2rem)/1.04 Montserrat,sans-serif}.member-login{align-self:center;width:min(100%,520px);margin:24px;padding:clamp(28px,5vw,62px);background:#fff;border-radius:24px;box-shadow:0 24px 80px rgb(0 0 0 / 22%)}.member-login h2{font-size:2rem;margin:10px 0}.member-login form{margin-top:24px}.member-login .button{width:100%}.member-back{display:block;margin-top:24px;color:#68788a}.member-dashboard{min-height:100vh;background:#f4f7fa;padding:28px clamp(18px,5vw,70px)}.member-top{max-width:1200px;margin:0 auto 30px;display:flex;align-items:center;gap:18px}.member-top img{width:62px;border-radius:10px}.member-top h1{margin:4px 0;font-size:clamp(1.4rem,3vw,2.4rem);color:#2d388c}.member-top .button{margin-left:auto}.member-grid{max-width:1200px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:22px}.member-card{background:#fff;border:1px solid #e3e9ef;border-radius:20px;padding:28px;box-shadow:0 12px 35px rgb(24 37 54 / 6%)}.member-card h2{color:#2d388c;margin:10px 0}.member-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#2d388c,#36a2df);color:#fff;font-size:1.3rem}.member-docs{display:grid;gap:10px;margin:22px 0}.member-doc{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border:1px solid #e3e9ef;border-radius:12px}.member-doc small{display:block;color:#68788a;margin-top:4px}.member-card textarea,.member-card input{width:100%}@media(max-width:800px){.member-hero{grid-template-columns:1fr}.member-hero__art{min-height:35vh;padding:34px}.member-hero__art h1{font-size:2rem}.member-grid{grid-template-columns:1fr}.member-top{flex-wrap:wrap}.member-top .button{margin-left:0;width:100%}}
/* Portal socios: dimensiones consistentes y sin desbordes. */
.member-login,.member-card{box-sizing:border-box;min-width:0}
.member-shell{min-height:78vh;display:grid;grid-template-columns:270px 1fr;background:#f4f7fa}.member-sidebar{padding:24px 18px;background:linear-gradient(180deg,#172153,#202b70 60%,#18204e);color:#fff}.member-brand{display:flex;align-items:center;gap:10px}.member-brand img{width:48px;border-radius:8px}.member-brand strong{font-family:Montserrat,sans-serif}.member-identity{display:grid;justify-items:center;gap:6px;margin:34px 0 24px;text-align:center}.member-identity img{width:88px;height:88px;border-radius:50%;object-fit:cover;border:3px solid rgb(255 255 255 / 70%);background:#fff}.member-identity small{color:rgb(255 255 255 / 65%)}.member-sidebar nav{display:grid;gap:6px}.member-sidebar nav button{padding:12px;border:0;border-radius:10px;background:transparent;color:rgb(255 255 255 / 78%);text-align:left;font-weight:700;cursor:pointer}.member-sidebar nav button:hover,.member-sidebar nav button.is-active{background:rgb(255 255 255 / 15%);color:#fff}.member-sidebar>#member-logout{width:100%;margin-top:28px}.member-main{min-width:0}.member-main-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 38px;background:#fff;border-bottom:1px solid #e3e9ef}.member-main-head h1{margin:4px 0;color:#2d388c;font-size:1.6rem}.member-main>#member-view{max-width:1100px;padding:34px 38px}.member-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}.member-summary-grid div{padding:18px;border:1px solid #e3e9ef;border-radius:14px}.member-summary-grid strong,.member-summary-grid small{display:block}.member-summary-grid small{margin-top:5px;color:#68788a}.member-notice{margin-top:16px;padding:14px;border:1px solid #e3e9ef;border-radius:12px;background:#f8fafc}.member-card hr{border:0;border-top:1px solid #e3e9ef;margin:24px 0}@media(max-width:800px){.member-shell{display:block}.member-sidebar{padding:14px 16px}.member-identity{display:flex;justify-content:flex-start;margin:18px 0}.member-identity img{width:56px;height:56px}.member-sidebar nav{display:flex;overflow-x:auto}.member-sidebar nav button{white-space:nowrap}.member-sidebar>#member-logout{width:auto;margin-top:14px}.member-main-head{padding:18px 16px}.member-main>#member-view{padding:20px 16px}.member-summary-grid{grid-template-columns:1fr}}
.member-login{width:min(100% - 32px,520px)}
.member-card input,.member-card textarea,.member-login input{box-sizing:border-box;width:100%;max-width:100%;min-height:48px}
.member-card fieldset{margin:0 0 22px;padding:18px;border:1px solid #e3e9ef;border-radius:14px;min-width:0}.member-card legend{padding:0 8px;color:#2d388c;font-weight:800}.member-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.member-field-full{grid-column:1/-1}.member-private{background:#fff9ed;border-color:#efd99d !important}.member-code{margin:3px 0 0;color:#68788a;font-size:.9rem}.member-notice{max-width:1200px;margin:0 auto 22px;padding:14px 18px;border:1px solid #cfe6f4;border-radius:12px;background:#eaf5fb;color:#2d388c}.member-grid--wide{grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr)}.member-equality{margin-top:28px;padding:18px;border-radius:14px;background:#eef8ed;border:1px solid #cce5c8;color:#2e6b28}.member-equality p{margin:6px 0 0;color:#39533d}.member-card--docs{align-self:start;position:sticky;top:24px}
@media(max-width:800px){.member-fields{grid-template-columns:1fr}.member-field-full{grid-column:auto}.member-card--docs{position:static}.member-card{padding:20px}.member-notice{font-size:.9rem}}
.member-card textarea{min-height:112px;resize:vertical}
.member-card .field{min-width:0;margin-bottom:16px}
.member-password{margin:22px 0;padding-top:18px;border-top:1px solid #e3e9ef}
.member-password h3{margin:0 0 16px;color:#2d388c;font-size:1rem}
.member-doc>div{min-width:0;overflow-wrap:anywhere}

/* La portada móvil usa altura de contenido, no la relación cinematográfica. */
@media (max-width: 767px) {
  .hero { min-height: 0; }
  .hero__slider { aspect-ratio: auto; min-height: 650px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__slider { aspect-ratio: auto; min-height: 680px; }
}