/* La portada usa el alto disponible; el contenido sigue accesible con zoom. */
body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.header { flex: none; }
.header-inner { min-height: 0; height: clamp(68px, 12svh, 104px); }
.brand { width: min(305px, 36svh); }
main { flex: 1; display: flex; flex-direction: column; }
.hero {
  flex: 1;
  display: flex;
  align-items: center;
  padding: clamp(16px, 3svh, 40px) 0;
}
.hero-grid { gap: clamp(32px, 5vw, 75px); }
.eyebrow { margin-bottom: clamp(12px, 2.4svh, 27px); }
h1 {
  font-size: clamp(32px, min(4.35vw, 7.3svh), 61px);
  margin-bottom: clamp(14px, 2.5svh, 26px);
}
.hero-description {
  font-size: clamp(16px, 2.4svh, 19px);
  margin-bottom: 10px;
}
.hero-invitation {
  font-size: clamp(13px, 1.9svh, 15px);
  margin-bottom: clamp(12px, 2.4svh, 27px);
}
.election-panel { height: clamp(240px, 49svh, 398px); }
.voting-section { flex: none; padding-bottom: clamp(16px, 3svh, 32px); }
.voting-card { padding: clamp(20px, 3svh, 31px) 36px; }
dialog { max-height: calc(100svh - 32px); overflow-y: auto; }

@media (min-width: 761px) and (max-height: 650px) {
  .header-inner { height: 64px; }
  .brand { width: 210px; }
  .hero { padding: 14px 0; }
  .hero-invitation { display: none; }
  .election-panel { height: 230px; padding: 20px 24px; }
  .ballot-art { transform: translate(-50%, -50%) scale(.7); }
  .panel-bottom { font-size: 17px; }
  .voting-card { padding: 18px 28px; }
  .voting-section { padding-bottom: 16px; }
}

@media (max-width: 760px) {
  .container { width: calc(100% - 32px); }
  .header-inner { height: clamp(60px, 9svh, 76px); }
  .brand { width: 200px; max-width: 60vw; }
  .hero { padding: clamp(12px, 2svh, 20px) 0; }
  .hero-grid { gap: 16px; }
  .eyebrow { font-size: 9px; margin-bottom: 12px; }
  h1 {
    font-size: clamp(28px, min(7.6vw, 4.4svh), 38px);
    letter-spacing: -1.2px;
    margin-bottom: 14px;
  }
  .hero-description { font-size: 15px; line-height: 1.45; margin-bottom: 8px; }
  .hero-invitation { font-size: 12px; line-height: 1.5; margin-bottom: 12px; }
  .text-link { font-size: 12px; }
  .election-panel { height: 96px; padding: 15px 18px; }
  .panel-top { font-size: 9px; max-width: 135px; }
  .panel-year { font-size: 12px; }
  .panel-bottom { font-size: 14px; gap: 2px; max-width: 180px; }
  .panel-bottom span+span { font-size: 10px; }
  .ballot-art { top: 45%; left: 78%; transform: translate(-50%, -50%) scale(.36); }
  .voting-card { padding: 16px 20px; gap: 13px; }
  .date-block { gap: 14px; }
  .date-block h2 { font-size: 17px; margin-bottom: 6px; }
  .calendar-icon { width: 56px; min-width: 56px; height: 62px; }
  .calendar-icon>span { font-size: 9px; padding: 5px; }
  .calendar-icon>strong { font-size: 26px; }
  .small-label { font-size: 8px; margin-bottom: 6px; }
  .schedule { font-size: 11px; }
  .vote-action { padding-top: 11px; }
  .status { font-size: 10px; margin-bottom: 7px; }
  .vote-button { min-height: 44px; padding: 12px; font-size: 13px; }
  .vote-action>p { font-size: 10px; margin-top: 7px; }
  .voting-section { padding-bottom: 14px; }
  .countdown { padding-top: 10px; font-size: 11px; }
}

@media (max-width: 760px) and (max-height: 740px) {
  .hero-invitation { display: none; }
}
@media (max-width: 760px) and (max-height: 650px) {
  .election-panel { display: none; }
}