/* =============================================================
   TOTONIK — responsive.css (mobile first → tablet → desktop)
   ============================================================= */

/* ---------- ≥ 640px (tablet vertical) ---------- */
@media (min-width: 640px) {
  .facts { grid-template-columns: repeat(4, 1fr); }
  .fact { border-right: 1px solid var(--line); padding: 26px 20px 26px 20px !important; }
  .fact:first-child { padding-left: 0 !important; }
  .fact:last-child { border-right: 0; }
  .facts--xl { grid-template-columns: repeat(3, 1fr); }
  .facts--xl .fact { border-right: 1px solid var(--line) !important; padding: 20px 24px !important; }
  .facts--xl .fact:first-child { padding-left: 0 !important; }
  .facts--xl .fact:last-child { border-right: 0 !important; }
  .gcols { grid-template-columns: repeat(2, 1fr); }
  .gcols__col:nth-child(3) { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); }
  .masonry { columns: 2; }
  .panel { flex-basis: 72vw; padding: 32px; }
  .qform__row { grid-template-columns: 1fr 1fr; }
  .studio__swatches { grid-template-columns: repeat(3, auto); justify-content: start; }
  .pillars__grid { grid-template-columns: repeat(2, 1fr); }
  .tblocks__grid { grid-template-columns: repeat(2, 1fr); }
  .access__imgs { grid-template-columns: 1fr 1fr; }
  .access__imgs figure:first-child { grid-column: 1 / -1; }
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .site-footer__bottom { grid-template-columns: 1fr auto auto; gap: 32px; align-items: center; }
  .lightbox__fig { inset: 72px 80px 80px; }
}

/* ---------- ≥ 1024px (laptop / escritorio) ---------- */
@media (min-width: 1024px) {
  :root { --header-h: 84px; }
  .site-header.is-scrolled { height: 68px; }
  .nav { display: block; }
  .site-header__cta { display: inline-flex; }
  .burger { display: none; }
  .drawer { display: none; }

  .section-head { grid-template-columns: 1fr auto; }
  .section-head .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }

  /* Hero */
  .hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-bottom: 40px; }
  .hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 32px; }
  .hero__title { font-size: clamp(4rem, 7.4vw, 9rem); }
  .hero__product { padding-top: 0; }
  .hero__product .lid { width: min(30vw, 440px); }
  .hero__disc { width: min(44vw, 680px); }
  .hero__ring { display: block; left: 50%; top: 44%; right: auto; width: min(54vw, 780px); max-width: none; transform: translate(-50%, -50%); }
  .hero__scroll { display: flex; align-items: center; gap: 8px; position: absolute; left: var(--gutter); bottom: 28px; color: var(--steel); }
  .hero__scroll .icon { width: 16px; height: 16px; }
  .facts { margin-top: 48px; }

  /* Fuego */
  .fire { height: 280vh; }

  /* IMINAR (composición asimétrica) */
  .iminar__grid { grid-template-columns: repeat(12, 1fr); gap: 40px 24px; }
  .iminar__head { grid-column: 1 / 7; }
  .iminar__statement { grid-column: 1 / 9; grid-row: 2; }
  .iminar__media { grid-column: 9 / 13; grid-row: 1 / 4; align-self: start; margin-top: 40px; }
  .iminar__aside { grid-column: 2 / 6; grid-row: 3; margin-top: 24px; }
  .iminar__media--b { grid-column: 6 / 9; grid-row: 3 / 5; max-width: none; margin-top: 60px; }

  /* Tecnología: imagen fija + lista */
  .tech__grid { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  .tech__visual { position: sticky; top: calc(var(--header-h) + 24px); height: calc(100vh - var(--header-h) - 48px); display: grid; align-items: center; }
  .tech__stage { max-width: min(460px, 70vh); }
  .tech .features { margin-top: 48px; }
  .feature { padding-block: 34px; opacity: .42; }
  .feature.is-active { opacity: 1; }

  /* Modelos: scroll horizontal fijado */
  .hscroll.is-pinned .hscroll__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--header-h) - 10px) 40px; }
  .hscroll.is-pinned .hscroll__track { overflow: visible; scroll-snap-type: none; gap: 28px; will-change: transform; transform: translate3d(calc(var(--x, 0) * -1px), 0, 0); }
  .panel { flex: 0 0 min(76vw, 1120px); grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; padding: 40px 56px; min-height: min(72vh, 680px); }
  .hscroll.is-pinned .hscroll__track { align-items: center; }
  .panel--intro { flex-basis: min(38vw, 560px); grid-template-columns: 1fr; padding: 0 24px 0 0; min-height: 0; }
  .panel--intro .h-xl { font-size: clamp(2.6rem, 4.4vw, 5rem); }
  .panel--intro .lead { font-size: 1.1rem; }
  .panel .lid__stage { max-height: 54vh; }
  .panel__media .lid { width: min(24vw, 340px); }
  .panel__photo { margin-bottom: 20px; }
  .hscroll__progress { display: block; position: relative; height: 2px; margin: 36px var(--gutter) 0; background: var(--line); }
  .hscroll__progress span { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); }

  /* Studio */
  .studio__grid { grid-template-columns: 5fr 6fr; grid-template-rows: auto auto; gap: 40px 64px; align-items: center; }
  .studio__copy { grid-row: 1 / 3; }
  .studio__stage { grid-column: 2; grid-row: 1 / 3; }
  .studio__door { position: absolute; right: calc(var(--gutter) - 12px); bottom: -40px; width: 22%; max-width: 280px; box-shadow: 0 30px 60px rgba(0,0,0,.5); z-index: 3; }
  .studio__swatches { grid-template-columns: 1fr; max-width: 360px; }

  /* Galería */
  .gcols { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .gcols__col { gap: 24px; }
  .gcols__col:nth-child(2) { margin-top: 120px; }
  .gcols__col:nth-child(3) { grid-column: auto; grid-template-columns: 1fr; margin-top: 40px; }
  .masonry { columns: 3; column-gap: 24px; }
  .masonry .gitem { margin-bottom: 24px; }

  .where__grid { grid-template-columns: 1fr 1fr; gap: 96px; }
  .qband__grid { grid-template-columns: 1.2fr 1fr; align-items: end; gap: 64px; }

  .site-footer__top { grid-template-columns: 2fr 1fr 1.3fr 1fr; gap: 48px; }

  /* Internas */
  .phero__grid { grid-template-columns: 1.2fr 1fr; }
  .phero:not(.phero--img) .phero__grid { grid-template-columns: 1fr; }
  .phero:not(.phero--img) .phero__copy { display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; column-gap: 64px; }
  .phero:not(.phero--img) .phero__copy .eyebrow { grid-column: 1 / -1; }
  .phero:not(.phero--img) .phero__lead { margin: 0 0 12px; }

  .model__grid { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  .model--alt .model__media { order: 2; }
  .model__sticky { position: sticky; top: calc(var(--header-h) + 90px); }
  .story__grid { grid-template-columns: 1fr 1.3fr; gap: 80px; }
  .pillars__grid { grid-template-columns: repeat(4, 1fr); }
  .tvideo__grid { grid-template-columns: 1fr 1.3fr; gap: 80px; }
  .tblocks__grid { grid-template-columns: repeat(3, 1fr); gap: 56px 32px; }
  .tblocks__grid .tblock:nth-child(3n+2) { margin-top: 80px; }
  .access__grid { grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: center; }
  .access__imgs { grid-template-columns: 1fr 1fr; }

  .quote__grid { grid-template-columns: 1fr 1.25fr; gap: 80px; align-items: start; }
  .quote__side { position: sticky; top: calc(var(--header-h) + 24px); }
  .quote__img { display: block; margin-top: 40px; border-radius: var(--radius-lg); overflow: hidden; max-width: 320px; }

  .wa-float { right: 24px; bottom: 24px; width: 60px; height: 60px; }
}

/* ---------- ≥ 1440px ---------- */
@media (min-width: 1440px) {
  .hero__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .panel { padding: 56px 80px; }
}

/* Dispositivos táctiles: sin cursor personalizado ni hover persistente */
@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

/* Impresión */
@media print {
  .site-header, .drawer, .wa-float, .cursor, .intro, video, .qband__marquee { display: none !important; }
  .js .reveal, .js .reveal-scale, .js .split .line__inner { opacity: 1 !important; transform: none !important; }
  body { color: #000; }
}