/* Adaptaciones para teléfono, tableta, notebook y pantallas grandes. */
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; }

@media (min-width: 851px) and (max-width: 1200px) {
  .sidebar { width: 202px; padding-inline: 15px; }
  .content { margin-left: 202px; width: calc(100% - 202px); }
  .content header, .hero, .moments, .letters { padding-inline: 5vw; }
  .hero { min-height: 510px; padding-top: 66px; }
  .orbital { transform: scale(.78); transform-origin: center right; right: 1%; }
  .story-grid > * { padding: 32px 24px; }
  .story-grid h2 { font-size: 35px; }
}

@media (max-width: 850px) {
  .app { display: block; }
  .sidebar {
    width: 100%; height: 105px; min-height: 0; padding: 0 14px; display: block;
    overflow: visible; z-index: 20; box-shadow: 0 2px 13px #3a20291a;
  }
  .brand-area { height: 56px; display: flex; flex-direction: row; justify-content: space-between; text-align: left; }
  .brand-area .brand { align-self: center; }
  .brand-photo, .couple-names, .names-editor, .music-player, .side-footer { display: none !important; }
  .sidebar nav {
    height: 49px; margin: 0 -14px; padding: 0 10px; display: flex; align-items: center;
    gap: 0; overflow-x: auto; border-top: 1px solid var(--line); background: inherit; scrollbar-width: none;
  }
  .sidebar nav::-webkit-scrollbar { display: none; }
  .sidebar nav a { flex: 0 0 auto; padding: 9px 10px; border-left: 0; border-bottom: 2px solid transparent; font-size: 10px; }
  .sidebar nav a:hover, .sidebar nav .active { border-color: var(--red); }
  .content, .sidebar-hidden .content { margin: 105px 0 0; width: 100%; }
  .sidebar-hidden .sidebar { transform: translateY(-105px); }
  .sidebar-hidden .content { margin-top: 0; }
  .content header { height: 58px; padding: 0 4vw; }
  .content header > p, .online, #profile-button { display: none; }
  .header-actions { margin-left: auto; }
  .hero { min-height: 470px; padding: 58px 7vw 44px; }
  .hero h1 { max-width: 75%; font-size: clamp(39px, 12vw, 62px); }
  .hero-copy { font-size: 15px; max-width: 58%; margin: 23px 0; }
  .orbital { width: 220px; height: 220px; right: -72px; top: 230px; transform: scale(.72); }
  .story-grid { grid-template-columns: 1fr; }
  .story-grid > * { min-height: auto; padding: 36px 7vw; }
  .story-grid h2, .moments h2, .letters h2 { font-size: clamp(38px, 11vw, 49px); }
  .counter { margin-top: 25px; }
  .memory { min-height: 320px !important; }
  .memory-bottom { left: 7vw; right: 7vw; bottom: 30px; }
  .moments, .letters { padding: 60px 7vw; }
  .moments-action { max-width: none; width: 100%; }
  .photo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .letter-list { grid-template-columns: 1fr; margin-top: 34px; }
  .profile-popover { right: 16px; top: 65px; width: min(225px, calc(100% - 32px)); }
  .composer-card { padding: 36px 23px; box-shadow: 7px 7px 0 var(--red); }
  .composer-card h2 { font-size: 35px; }
  .setup-card { width: min(100%, 560px); max-height: calc(100vh - 24px); overflow-y: auto; grid-template-columns: 1fr; }
  .setup-side { padding: 29px; }
  .setup-form { padding: 30px 25px; }
}

@media (max-width: 480px) {
  .sidebar nav a { padding-inline: 8px; font-size: 9px; }
  .hero { min-height: 445px; padding-top: 47px; }
  .hero h1 { max-width: 82%; }
  .hero-copy { max-width: 68%; }
  .orbital { right: -91px; top: 225px; transform: scale(.61); }
  .photo-wall { grid-template-columns: 1fr; }
  .content header { padding-inline: 5vw; }
  .icon-button, .menu-button { width: 34px; height: 34px; }
  .memory-bottom p { font-size: 20px; }
}

@media (min-width: 1600px) {
  .sidebar { width: 270px; padding: 34px 26px; }
  .content { margin-left: 270px; width: calc(100% - 270px); }
  .brand { font-size: 25px; }
  nav a { font-size: 14px; padding-block: 12px; }
  .content header, .hero, .moments, .letters { padding-inline: 8vw; }
  .hero { min-height: 680px; }
  .hero h1 { font-size: clamp(68px, 5vw, 96px); }
  .hero-copy { font-size: 19px; max-width: 440px; }
  .orbital { transform: scale(1.16); right: 10%; top: 155px; }
  .story-grid > * { padding: 58px 50px; }
  .story-grid h2 { font-size: 54px; }
  .moments h2, .letters h2 { font-size: 65px; }
}