/* ==========================================================================
   Responsive — mobile first
   Mobile 320–767 · Tablet 768–1023 · Desktop 1024–1439 · Large 1440+
   ========================================================================== */

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
  :root { --header-h: 72px; }
  .brand__logo { height: 36px; }

  .site-header__cta { display: inline-flex; }

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

  .hero__lighthouse { right: 8vw; height: 46vh; height: 46svh; }
  .hero__inner { padding-top: 30vh; }
  .hero__facts { display: flex; }

  .pillars,
  .problem__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .editorial-band .media { aspect-ratio: 21 / 9; }
  .editorial-band.full-bleed { margin-inline: 0; }
  .editorial-band .media { border-radius: var(--radius-lg); }

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

  .values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-md); }

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

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

  .member__media { margin-inline: 0; border-radius: var(--radius-lg); }

  /* Servicios: carrusel nativo con scroll-snap */
  .services-h__track {
    display: flex;
    gap: var(--spacing-lg);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-bottom: var(--spacing-md);
    scrollbar-width: thin;
  }
  .service-panel {
    flex: 0 0 min(62vw, 480px);
    scroll-snap-align: start;
  }
  .service-panel__media { margin-inline: 0; border-radius: var(--radius-lg); }



  .site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-footer__lead { grid-template-columns: auto 1fr auto; align-items: end; column-gap: var(--spacing-xl); }
  .site-footer__logo { height: 150px; }

  .post__media { margin-inline: 0; }
  .article-media { border-radius: var(--radius-lg); margin-inline: 0; }
}

/* ---------- Mobile only: imágenes full-bleed ---------- */
@media (max-width: 767.98px) {
  .post__media { border-radius: 0; margin-inline: calc(var(--gutter) * -1); }
  .article-media { margin-inline: calc(var(--gutter) * -1); }
  .member__media { margin-inline: calc(var(--gutter) * -1); }
  .hero__actions .btn { flex: 1 1 auto; }
  .channel { grid-template-columns: 1fr; gap: 0.2rem; }
  .faq__answer { padding-right: 0; }
}

/* Escritorio estrecho (1024–1199): enlaces más compactos para que quepan los 8 */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .site-nav a { padding-inline: 0.5rem; }
  .site-nav ul { gap: 0; }
  .site-header__inner { gap: var(--spacing-sm); }
  .site-header:not(.is-scrolled) .brand__logo { height: 30px; }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  .values__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-nav { display: block; }
  .menu-toggle { display: none; }
  .mobile-menu { display: none; }
  .brand { flex: none; }   /* el logo no se encoge con 8 enlaces */

  .hero__inner { padding-top: 0; align-self: center; padding-bottom: 0; }
  .hero { grid-template-rows: 1fr auto; }
  .hero__lighthouse {
    top: auto;
    bottom: 56px;
    right: 11vw;
    height: min(76vh, 720px);
  }
  .hero__canvas {
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, #000 50%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, #000 50%);
  }

  .section-header--split { grid-template-columns: 1.2fr 1fr; gap: var(--spacing-xl); }
  .section-header--split .lead { justify-self: end; }

  .value__grid { grid-template-columns: 5fr 7fr; gap: var(--spacing-2xl); }
  .value__grid > :first-child { position: sticky; top: calc(var(--header-h) + 3rem); align-self: start; }
  .value__list { grid-template-columns: 1fr 1fr; gap: var(--spacing-xl) var(--spacing-lg); }

  .services-h__head { grid-template-columns: 1fr auto; align-items: center; }   /* sin titular visible: antetítulo y contador en una línea */

  /* Horizontal storytelling fijado (activado por JS con .is-pinned) */
  .services-h.is-pinned { padding-block: 0; }
  .services-h.is-pinned .services-h__sticky {
    /* Encuadre: el alto disponible para la foto es la pantalla menos navbar,
       encabezado de la sección, textos de la tarjeta y márgenes. Así todo
       el recorrido se ve completo en pantalla mientras avanza con el scroll. */
    --svc-text: 340px;
    --stage-h: clamp(150px, calc(100svh - var(--header-h) - var(--svc-text) - 120px), 460px);
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: var(--header-h);
    padding-bottom: clamp(2.5rem, 10vh, 7rem);   /* recorrido más arriba: aire entre las tarjetas y el final de la sección */
    overflow: hidden;
  }
  .services-h.is-pinned .services-h__head { margin-bottom: clamp(1rem, 3vh, 1.75rem); }
  .services-h.is-pinned .services-h__head h2 { max-width: 24ch; font-size: var(--fs-h2); }
  .services-h.is-pinned .service-panel { gap: 0.6rem; }
  .services-h.is-pinned .product-panel__stage { margin-bottom: 0.35rem; }
  .services-h.is-pinned .services-h__track {
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
    padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
    will-change: transform;
  }
  /* Ancho de la tarjeta = alto disponible × 4/3: el escenario conserva su
     proporción (casi cuadrado) y la tarjeta completa cabe en pantalla */
  .services-h.is-pinned .service-panel { flex-basis: clamp(270px, min(31vw, calc(var(--stage-h) * 4 / 3)), 560px); }
  .services-h.is-pinned .service-panel__summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .services-h.is-pinned .service-panel__benefit { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .services-h.is-pinned .service-panel__media { aspect-ratio: auto; height: clamp(180px, 30vh, 340px); }

  .team { grid-template-columns: 5fr 7fr; gap: var(--spacing-2xl); align-items: start; }
  .team__stage {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
  }
  .team__stage img {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 600ms var(--ease-out), transform 1200ms var(--ease-out);
  }
  .team__stage img.is-active { opacity: 1; transform: none; }
  .team__stage-caption {
    position: absolute;
    left: 1.25rem;
    bottom: 1.25rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-pill);
    background: rgba(10, 10, 12, 0.55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #f5f5f7;
    font-size: var(--fs-xs);
  }
  .member__media { display: none; }
  .member__toggle:hover .member__name { color: var(--color-accent); }
  .member.is-active .member__name { color: var(--color-text); }

  .method { grid-template-columns: 5fr 7fr; gap: var(--spacing-2xl); }
  .method__stage {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 3rem);
    align-self: start;
  }
  .method__count {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.06em;
    line-height: 0.9;
    font-variant-numeric: tabular-nums;
  }
  .method__count small { font-size: var(--fs-h4); color: var(--color-muted); letter-spacing: 0; }
  .method__stage-title { font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); margin-top: var(--spacing-md); }
  .method__bar { position: relative; height: 2px; background: var(--color-line); margin-top: var(--spacing-lg); max-width: 22rem; overflow: hidden; }
  .method__bar span { position: absolute; inset: 0; background: var(--color-accent); transform-origin: 0 50%; transform: scaleX(0.2); transition: transform var(--transition-normal); }
  .method__step { padding-block: 16vh; grid-template-columns: 4rem 1fr; }
  .motion-ok .method__step:not(.is-active) { opacity: 0.28; }

  .trust__grid { grid-template-columns: 5fr 7fr; }

  .contact__grid { grid-template-columns: 5fr 7fr; gap: var(--spacing-2xl); }
  .contact__aside { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }

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

  .split { grid-template-columns: 4fr 8fr; }
  .split__label > * { position: sticky; top: calc(var(--header-h) + 2rem); }

}

/* ---------- Large desktop ---------- */
@media (min-width: 1440px) {
  :root { --fs-body: 1.125rem; }
  .hero__lighthouse { right: 14vw; }
}

/* ---------- Pantallas bajas (laptops 13") ---------- */
@media (min-width: 1024px) and (max-height: 760px) {
  .services-h.is-pinned .services-h__head h2 { font-size: var(--fs-h2); }
  .services-h.is-pinned .service-panel__media { height: 24vh; }
  .services-h.is-pinned .product-panel__cat { display: none; }   /* la categoría ya aparece bajo el escenario */
  .services-h.is-pinned .service-panel__summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ---------- Dispositivos táctiles ---------- */
@media (hover: none) {
  .btn:hover { transform: none; }
  .service-panel:hover .service-panel__media img,
  .product-panel:hover .product-panel__img,
  .post:hover .post__media img { transform: none; }
}

/* ---------- Impresión ---------- */
@media print {
  .site-header, .mobile-menu, .hero__canvas, .hero__lighthouse, .whatsapp, .wa-float { display: none !important; }
  body { background: #fff; color: #000; }
}