/* Responsive layout: every foreground block reserves its own space. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { padding-bottom: 0; }
header { gap: 20px; }
header > a { flex-shrink: 0; }
nav { min-width: 0; }
.hero {
  height: auto;
  min-height: calc(100svh - 90px);
  max-height: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  isolation: isolate;
}
.hero-content {
  flex: 1 0 auto;
  padding: 64px 7% 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.hero-content > * { max-width: 100%; }
.hero h1 { line-height: 1.03; }
.hero .eyebrow { line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: center; }
.hero-actions .button { max-width: 100%; line-height: 1.5; }
.hero .text-link { margin: 0; width: auto; max-width: 100%; }
.hero-bottom {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  z-index: 1;
  padding: 0 7% 30px;
  gap: 24px;
  line-height: 1.65;
}
.hero-bottom > span { max-width: none; }
.hero-bottom button { flex-shrink: 0; max-width: none; line-height: 1.5; }
.section-top > div, .trial > div, .contact-intro, .contact-details,
.experience > div, .class-row > *, .prices article { min-width: 0; }
.schedule { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.session { min-width: 0; }
.prices { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.prices h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  line-height: 1.1;
  font-size: clamp(42px, 4.5vw, 60px);
}
.prices h3 span { white-space: nowrap; }
.prices article > p { overflow-wrap: anywhere; }
.prices .tag, .prices article:not(.featured)::before { min-height: 34px; }
.prices article:not(.featured)::before { content: ""; display: block; }
.contact-section { column-gap: 8%; row-gap: 40px; }
.contact-map { margin-top: 0; }
.button { min-width: 0; }
.button.full { white-space: normal; overflow-wrap: anywhere; }
.class-choice > span { min-width: 0; }
.class-choice input { flex-shrink: 0; }
.time-label { align-items: baseline; }
footer { flex-wrap: wrap; }
footer > div { flex-wrap: wrap; }

@media (max-width: 1100px) and (min-width: 801px) {
  nav { gap: 22px; }
  .prices article { padding: 26px 18px; }
  .schedule { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trial { column-gap: 5%; }
  .wizard { padding: 26px 22px; }
}

@media (max-width: 800px) {
  html { scroll-padding-top: 92px; }
  header { height: auto; min-height: 75px; padding: 10px 5%; gap: 10px; }
  header img { width: 90px; height: 44px; display: block; }
  nav { gap: 10px; justify-content: flex-end; }
  nav .button.small { font-size: 14.4px; padding: 11px 12px; line-height: 1.4; white-space: nowrap; }
  nav > a.contact-nav { font-size: 15.6px; }
  .hero { min-height: 0; height: auto; max-height: none; }
  .hero-content { padding: 50px 6% 32px; }
  .hero h1 { font-size: clamp(52px, 14vw, 88px); letter-spacing: -1.5px; }
  .hero .intro { font-size: 20px; line-height: 1.6; margin: 26px 0; }
  .hero-actions { width: 100%; flex-direction: column; align-items: flex-start; gap: 22px; }
  .hero-actions .button { padding: 17px 22px; gap: 20px; }
  .hero .text-link { line-height: 1.6; }
  .hero-bottom { padding: 0 6% 32px; flex-wrap: wrap; gap: 18px 24px; }
  .hero-bottom > span { flex: 1 1 220px; max-width: none; }
  .hero-bottom button { flex: 0 0 auto; max-width: none; }
  .schedule { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prices h3 { font-size: 48px; }
  .class-row { grid-template-columns: 25px minmax(0, 1fr) 25px; }
  .contact-section { gap: 32px; }
  .contact-details .button { max-width: 100%; white-space: normal; }
  .mobile-cta { padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px)); }
  footer { padding-bottom: calc(105px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 420px) {
  header img { width: 72px; }
  nav { gap: 8px; }
  nav .button.small { padding: 11px 10px; font-size: 14px; }
  nav > a.contact-nav { font-size: 14.4px; }
  .hero-actions .button { width: 100%; }
  .hero h1 { font-size: clamp(46px, 14vw, 58px); }
  .hero-bottom { flex-direction: column; align-items: flex-start; }
  .hero-bottom > span { flex: 0 0 auto; width: 100%; }
  .session { padding: 16px 12px; }
  .session strong { font-size: 20px; }
  .prices article { padding: 24px 16px; }
  .prices h3 { font-size: 44px; }
  .wizard { padding: 24px 18px; }
  .time-buttons { gap: 8px; }
  .actions { flex-wrap: wrap; align-items: center; }
}

@media (max-width: 360px) {
  header { padding-inline: 4%; }
  header img { width: 60px; }
  nav .button.small { font-size: 13.8px; padding: 10px 8px; }
  .schedule, .prices { grid-template-columns: 1fr; }
  .hero .intro { font-size: 19.2px; }
  .calendar-header > span { font-size: 15px; }
  .wizard-head { letter-spacing: 1px; gap: 10px; }
}

/* These long words must also fit when the device uses its fallback font. */
@media (max-width: 480px) {
  #horarios h2 { font-size: clamp(26px, 7.5vw, 36px); }
  .pricing h2 { font-size: clamp(32px, 8.5vw, 40px); }
}