/* ============================================================
   otherhalf.media — responsive (tablet y celular)
   [data-m="…"] son "ganchos móviles" en el HTML: marcan qué
   elementos cambian de comportamiento en pantallas pequeñas.
   ============================================================ */

@media (max-width: 1024px) {
  [data-m="menu"] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100dvh;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
    gap: 0 !important;
    background: var(--bg);
    padding: 96px 24px 40px;
    font-size: 30px !important;
    letter-spacing: -0.03em;
    align-items: flex-start !important;
    z-index: 1 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-14px);
    transition: opacity .4s var(--ease), transform .5s var(--ease);
  }

  [data-m="burger"],
  #oh-nav>a {
    position: relative;
    z-index: 5;
  }

  [data-m="menu"]>a {
    padding: 14px 0;
    width: 100%;
    border-bottom: 1px solid rgba(245, 242, 237, .12);
  }

  [data-m="menu"].oh-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  [data-m="menu"]>[data-m="menu-cta"] {
    margin-top: 26px;
    border: 0 !important;
    background: var(--orange);
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    padding: 20px 24px;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  [data-m="burger"] {
    display: flex !important;
  }

  [data-m="hero"] {
    flex-direction: column;
    align-items: stretch !important;
  }

  [data-m="hero-l"] {
    order: 3;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 18px !important;
  }

  [data-m="hero-c"] {
    order: 1;
    flex: 1 1 auto !important;
  }

  [data-m="hero-r"] {
    order: 4;
    align-items: stretch !important;
    gap: 0 !important;
  }

  [data-m="hero-r"]>a {
    width: 100%;
    justify-content: center;
    min-height: 58px;
    margin: 40px 0;
  }

  /* aire arriba/abajo del CTA */
  /* En columna, el flex-basis de 170px (pensado como ancho en desktop) se vuelve ALTO y deja
       huecos entre ojo, tagline y botón: aquí cada bloque mide solo lo que su contenido ocupa */
  [data-m="hero-l"],
  [data-m="hero-r"] {
    flex: 0 0 auto !important;
  }

  [data-m="hero"] {
    gap: 26px !important;
  }

  [data-m="hide-s"] {
    display: none !important;
  }

  [data-m="sticky"] {
    position: static !important;
  }

  [data-m="wordmark"] {
    white-space: normal !important;
    word-break: break-word;
  }

  [data-m="case"]>[data-m="case-media"] {
    order: -1 !important;
  }

  [data-m="quote"] {
    align-items: start !important;
  }
}

@media (max-width: 1024px) {
  footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  [data-m="menu"]>a {
    min-height: 56px;
    display: flex;
    align-items: center;
  }
}

@media (max-width: 560px) {

  /* Hero compacto en celular: menos aire arriba y entre bloques, el CTA queda a la vista */
  .hero {
    padding-top: 124px;
  }

  .hero-grid {
    margin-top: 22px;
  }

  [data-m="hero"] {
    gap: 22px !important;
  }

  [data-m="hero-l"] {
    gap: 14px !important;
  }

  .hero-ticker {
    margin-top: 30px;
  }

  [data-m="menu"] {
    font-size: 26px !important;
  }

  [data-m="tile"] {
    width: 78vw !important;
  }

  [data-m="tile-s"] {
    width: 58vw !important;
  }

  [data-m="dtile"] {
    width: 76vw !important;
    height: 200px !important;
  }

  [data-m="dtile-s"] {
    width: 50vw !important;
    height: 200px !important;
  }
}

@media (max-width: 1024px) {

  /* Stats: 2x2 grid instead of a tall single column */
  #results>div {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  #results>div>div {
    border-right: 0 !important;
  }

  #results>div>div:nth-child(odd) {
    border-right: 1px solid rgba(245, 242, 237, .14) !important;
  }

  #results>div>div:nth-child(-n+2) {
    border-bottom: 1px solid rgba(245, 242, 237, .14);
  }

  /* System cards: the span-4/span-2 layout breaks below 6 columns — force 2 cols, first card full width */
  #system>div:last-child {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  #system>div:last-child>div {
    grid-column: auto !important;
  }

  #system>div:last-child>div:first-child {
    grid-column: 1 / -1 !important;
  }

  /* Footer wordmark: keep on one line, scaled to viewport instead of breaking mid-word */
  [data-m="wordmark"] {
    white-space: nowrap !important;
    word-break: normal !important;
    font-size: clamp(30px, 10.2vw, 108px) !important;
  }
}

@media (max-width: 900px) {

  /* FAQ: fixed 320px column squeezes the answers — stack instead */
  #faq>div {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }
}

@media (max-width: 700px) {
  main>section:first-of-type {
    padding-top: clamp(104px, 15vh, 136px) !important;
  }

  main h1 {
    font-size: clamp(38px, 10vw, 54px) !important;
  }

  #system>div:last-child {
    grid-template-columns: 1fr !important;
  }

  #system>div:last-child>div {
    min-height: 0 !important;
  }

  [data-step] {
    grid-template-columns: 54px 1fr !important;
    gap: 14px !important;
  }

  [data-m="case"] dl>div {
    grid-template-columns: 88px 1fr !important;
    gap: 12px !important;
  }

  /* Testimonials: quote reads first, metric after */
  blockquote>.testimonial-metric {
    order: 2;
  }

  #audit a {
    width: 100%;
    justify-content: center;
  }

  /* Footer: brand full width, link columns side by side */
  footer>div>div:first-child {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  footer>div>div:first-child>div:first-child {
    grid-column: 1 / -1;
  }

  footer form {
    max-width: 100% !important;
  }

  footer input[type="email"] {
    font-size: 16px !important;
  }
}

@media (max-width: 560px) {
  .oh-2col {
    grid-template-columns: 1fr;
  }

  .oh-cta {
    width: 100%;
    justify-content: center;
  }
}

/* Accesibilidad: sin animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    animation: none !important;
    transition: none !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}