html, body {
  max-width: 100%;
  overflow-x: clip;
}

img, iframe, video {
  max-width: 100%;
}

@media (hover: none) {
  .serviceCard:hover,
  .challengeGrid article:hover,
  .button:hover,
  .floatWa:hover {
    transform: none;
  }

  .dragHint {
    display: none;
  }
}

/* Portátiles y tabletas horizontales */
@media (min-width: 901px) and (max-width: 1180px) {
  .nav {
    width: calc(100% - 24px);
  }

  .nav nav {
    gap: 1px;
  }

  .nav nav > a:not(.navCta) {
    padding-inline: 7px;
  }

  .section {
    padding-inline: 46px;
  }

  .serviceCard {
    min-height: 510px;
    padding: 27px;
  }

  .sectionHead {
    grid-template-columns: 0.75fr 1.65fr 1fr;
    gap: 30px;
  }

  .bookSpotlight {
    grid-template-columns: 1fr;
  }
}

/* iPad, tabletas y celulares grandes */
@media (max-width: 900px) {
  .nav {
    z-index: 90;
  }

  .menu {
    width: 44px;
    height: 44px;
    place-content: center;
    border-radius: 50%;
  }

  .menuOpen .nav nav {
    max-height: calc(100dvh - 84px);
    overflow-y: auto;
  }

  .nav nav > a,
  .navCta {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .heroCopy {
    max-width: min(720px, 92vw);
  }

  .serviceGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .serviceCard:last-child {
    grid-column: 1 / -1;
  }

  .about,
  .book,
  .podcast,
  .contact {
    gap: 54px;
  }

  .portrait img {
    height: min(72vh, 680px);
  }

  .masonry {
    grid-auto-rows: 125px;
  }

  .testimonialStage {
    grid-template-columns: minmax(180px, 0.7fr) 1.3fr;
    gap: 34px;
  }

  .testimonialStage > img {
    width: 100%;
  }

  .bookVisual {
    width: 100%;
  }

  footer {
    grid-template-columns: 1.4fr 0.8fr 0.8fr;
    gap: 36px;
  }
}

/* Celulares */
@media (max-width: 600px) {
  .nav {
    width: calc(100% - 16px);
  }

  .brandMonogram {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }

  .brandName {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .heroCopy {
    width: 100%;
    max-width: none;
    padding-inline: 20px;
  }

  .hero h1 {
    font-size: clamp(50px, 17vw, 68px);
    overflow-wrap: anywhere;
  }

  .hero .kicker {
    max-width: 92%;
    letter-spacing: 0.2em;
  }

  .actions,
  .actions .button,
  .actions .textLink,
  .bookStrip .button,
  .bookCopy .button,
  .finalCta .button {
    width: 100%;
  }

  .serviceGrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .serviceCard:last-child {
    grid-column: auto;
  }

  .sectionHead h2,
  .about h2,
  .book h2,
  .podcast h2,
  .contact h2,
  .finalCta h2 {
    font-size: clamp(38px, 12vw, 48px);
    overflow-wrap: anywhere;
  }

  .portrait img {
    height: min(68vh, 540px);
  }

  .stats,
  .tags,
  .prices {
    flex-wrap: wrap;
  }

  .stats {
    gap: 25px;
  }

  .masonry {
    grid-auto-rows: 270px;
  }

  .testimonialStage {
    grid-template-columns: minmax(0, 1fr);
  }

  .testimonialStage blockquote {
    font-size: clamp(23px, 7vw, 32px);
  }

  .testimonialNav {
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
  }

  .testimonialNav button {
    flex: 0 0 76px;
    scroll-snap-align: start;
  }

  .bookVisual {
    min-height: 510px;
  }

  .bookScene {
    transform: scale(0.9);
  }

  .contact form {
    padding: 24px 18px;
  }

  .contact input,
  .contact select,
  .contact textarea,
  .button,
  .navCta {
    min-height: 48px;
  }

  .finalCta blockquote {
    margin-top: 55px;
    font-size: 20px;
  }

  footer {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 24px;
  }

  .footerBottom {
    grid-column: 1;
  }

  .floatWa {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    width: 52px;
    height: 52px;
  }
}

/* Celulares pequeños */
@media (max-width: 380px) {
  .brandName {
    display: none;
  }

  .section {
    padding-inline: 16px;
  }

  .heroCopy {
    padding-inline: 16px;
  }

  .bookScene {
    transform: scale(0.78);
  }

  .bookVisual {
    min-height: 470px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}