/* ==========================================================================
   Instinto Café Premium — sistema de la Home (póster tipográfico, scroll largo)

   Estructura tomada de la referencia: hero pineado con secuencia de imágenes,
   titulares revelados letra por letra desde un fantasma al 22%, capítulos con
   foto sticky, una banda invertida, una sección full-bleed y tarjetas.
   Paleta y tipografía 100% Instinto.

   Mapeo de roles:
     canvas (Ember Rust)      -> #4D200F
     superficie (Dark Spice)  -> #3A1709
     profundo (Charred Clove) -> #2A0F06
     hairline (Cardamom)      -> #6B3419
     acento (Tiger Gold)      -> #FEF3E2  crema Instinto
     acento suave (Saffron)   -> #C9A98A
     acento de tueste (Chili) -> #C68A4E  (solo badges)
   ========================================================================== */

/* ---------- Tipografía de marca ----------
   HONERA es la misma letra del wordmark del logo. Es un solo peso, así que se
   declara cubriendo 400-700 para que el navegador no le invente una negrita
   sintética en los titulares. Bodoni Moda queda de respaldo por si aparece
   algún glifo que HONERA no trae (punto medio, guion largo). */
@font-face {
  font-family: 'HONERA';
  src: url('https://instintocafepremium.com/wp-content/uploads/instinto-gsap/honera.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --i-canvas: #4D200F;
  --i-surface: #3A1709;
  --i-deep: #2A0F06;
  --i-line: #6B3419;
  --i-accent: #FEF3E2;
  --i-soft: #C9A98A;
  --i-roast: #C68A4E;

  --i-font-display: 'HONERA', 'Bodoni Moda', 'Didot', Georgia, serif;
  --i-font-ui: 'Jost', ui-sans-serif, system-ui, sans-serif;

  /* Escala: el hero manda, igual que en la referencia (213 / 72) */
  --i-hero: clamp(58px, 14.6vw, 213px);
  --i-hero-sub: clamp(28px, 5vw, 72px);
  --i-display: clamp(56px, 13vw, 180px);
  --i-h2: clamp(42px, 7.2vw, 101px);
  --i-h3: clamp(32px, 4.8vw, 65px);
  --i-h4: clamp(22px, 2.3vw, 29px);
  --i-sub: clamp(16px, 1.4vw, 18px);
  --i-cap: 11px;

  --i-gutter: clamp(24px, 4.4vw, 64px);
  --i-sec-gap: clamp(64px, 9vw, 120px);
  --i-radius-card: 6px;
  --i-radius-pill: 9999px;
}

/* ---------- Lienzo ---------- */

body.it-home-body {
  padding-top: 0;                 /* el header flota sobre el hero */
  background: var(--i-canvas);
}

.it-home {
  width: 100%;
  background: var(--i-canvas);
  color: var(--i-accent);
  font-family: var(--i-font-ui);
  overflow-x: clip;
}

.it-home *,
.it-home *::before,
.it-home *::after { box-sizing: border-box; }

.it-home h1, .it-home h2, .it-home h3,
.it-home h4, .it-home p { margin: 0; }

/* ---------- Header sobre el póster ----------
   Los colores del header viven en su _cssCustom (selectores de ID), así que
   aquí se invierten con !important sobre las clases semánticas h-*.
   El isotipo se sirve en versión crema desde PHP (filtro en el sandbox). */

body.it-home-body .js-header {
  background: transparent;
  border-bottom: 0;
}

body.it-home-body .h-brand,
body.it-home-body .h-account-icon { color: var(--i-accent) !important; }

body.it-home-body .h-brand-sub { color: rgba(254, 243, 226, 0.62) !important; }

body.it-home-body .h-navlink { color: rgba(254, 243, 226, 0.78) !important; }
body.it-home-body .h-navlink:hover { color: var(--i-accent) !important; }
body.it-home-body .h-navlink.h-navlink--active { color: var(--i-accent) !important; }

body.it-home-body .h-search {
  background: transparent !important;
  border-color: rgba(254, 243, 226, 0.32) !important;
}
body.it-home-body .h-search-label,
body.it-home-body .h-search-icon { color: rgba(254, 243, 226, 0.6) !important; }

body.it-home-body .h-iconbtn {
  background: transparent !important;
  border: 1px solid rgba(254, 243, 226, 0.4) !important;
}
body.it-home-body .h-account { border-color: rgba(254, 243, 226, 0.45) !important; }

/* ---------- Secciones ---------- */

.it-sec {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--i-sec-gap) var(--i-gutter);
}

.it-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ---------- Hero con secuencia de imágenes ---------- */

.it-seq-hero {
  position: relative;
  width: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: clamp(118px, 13vh, 176px) var(--i-gutter) clamp(44px, 6vh, 80px);
}

.it-seq-mount {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--i-deep);
}

.it-seq-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Sin velo: la secuencia se ve limpia, en su propia capa. La legibilidad de la
   crema se resuelve con sombra en el texto (ver bloque de ajustes al final),
   nunca con un fondo encima de la imagen. */

/* Antes de que existan los frames: degradado de marca, se ve intencional */
.it-seq-mount.it-seq--empty {
  background:
    radial-gradient(120% 90% at 72% 18%, #6B3419 0%, transparent 58%),
    radial-gradient(90% 80% at 12% 88%, #3A1709 0%, transparent 62%),
    var(--i-canvas);
}

.it-hero-line {
  font-family: var(--i-font-display);
  font-weight: 700;
  font-size: var(--i-hero);
  line-height: 0.80;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--i-accent);
}

.it-hero-sub {
  font-family: var(--i-font-display);
  font-weight: 700;
  font-size: var(--i-hero-sub);
  line-height: 0.90;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--i-accent);
}

/* Indicador de scroll del hero */
.it-scrollcue {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-family: var(--i-font-ui);
  font-weight: 500;
  font-size: var(--i-cap);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(254, 243, 226, 0.7);
}

/* ---------- Tipografía ---------- */

.it-eyebrow {
  font-family: var(--i-font-ui);
  font-weight: 500;
  font-size: var(--i-cap);
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--i-accent);
}

.it-display,
.it-h2,
.it-h3,
.it-h4 {
  font-family: var(--i-font-display);
  font-weight: 700;
  color: var(--i-accent);
  text-transform: uppercase;
  text-wrap: balance;
}

.it-display { font-size: var(--i-display); line-height: 0.80; letter-spacing: -0.02em; }
.it-h2      { font-size: var(--i-h2);      line-height: 0.90; letter-spacing: -0.016em; }
.it-h3      { font-size: var(--i-h3);      line-height: 0.95; letter-spacing: -0.01em; }
.it-h4      { font-size: var(--i-h4);      line-height: 1.10; letter-spacing: -0.005em; text-transform: none; }

.it-body {
  font-family: var(--i-font-ui);
  font-weight: 400;
  font-size: var(--i-sub);
  line-height: 1.38;
  color: var(--i-soft);
  max-width: 46ch;
}

.it-body--micro {
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--i-accent);
  max-width: 40ch;
}

.it-num {
  font-family: var(--i-font-display);
  font-weight: 700;
  font-size: clamp(38px, 4.4vw, 65px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--i-accent);
}

/* ---------- Revelado letra por letra ---------- */

.it-word { display: inline-block; white-space: nowrap; }
.it-char { display: inline-block; will-change: opacity; }

/* Estado fantasma antes de que GSAP tome el control (y si GSAP no carga,
   el texto queda legible al 100% gracias a la regla de no-js de abajo) */
.gsap-split.is-armed .it-char { opacity: 0.22; }

/* ---------- Controles: todo píldora ---------- */

.it-pill,
.it-home a.it-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--i-font-ui);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--i-accent);
  background: transparent;
  border: 1px solid var(--i-accent);
  border-radius: var(--i-radius-pill);
  padding: 10px 20px;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
  cursor: pointer;
}
.it-pill:hover { background: var(--i-accent); color: var(--i-deep); }

.it-pill--filled,
.it-home a.it-pill--filled { background: var(--i-accent); color: var(--i-deep); }
.it-pill--filled:hover { background: var(--i-soft); border-color: var(--i-soft); color: var(--i-deep); }

.it-pill--ghost,
.it-home a.it-pill--ghost {
  border-color: transparent;
  padding-inline: 0;
  background: transparent;
}
.it-pill--ghost:hover { background: transparent; color: var(--i-soft); }

.it-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--i-font-ui);
  font-weight: 500;
  font-size: var(--i-cap);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--i-radius-pill);
  padding: 5px 14px;
  background: var(--i-accent);
  color: var(--i-deep);
  white-space: nowrap;
}
.it-badge--roast { background: var(--i-roast); color: var(--i-deep); }
.it-badge--soft  { background: var(--i-surface); color: var(--i-accent); border: 1px solid var(--i-line); }

.it-input,
.it-home input.it-input {
  width: 100%;
  max-width: 340px;
  font-family: var(--i-font-ui);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--i-accent);
  background: transparent;
  border: 1px solid var(--i-line);
  border-radius: var(--i-radius-pill);
  padding: 14px 20px;
  outline: none;
  transition: border-color .25s ease;
}
.it-input::placeholder { color: rgba(254, 243, 226, 0.55); text-transform: uppercase; letter-spacing: 0.14em; }
.it-input:focus { border-color: var(--i-accent); box-shadow: none; }

/* ---------- Superficies ---------- */

.it-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  background: var(--i-surface);
  border-radius: var(--i-radius-card);
  padding: 16px;
  box-shadow: none;
}
.it-card--deep { background: var(--i-deep); }

/* ---------- Divisor punteado ---------- */

.it-rule {
  width: 100%;
  height: 1px;
  border: 0;
  border-top: 1px dotted var(--i-accent);
  opacity: 0.5;
  margin: 0;
}

/* ---------- Composición ---------- */

.it-stack   { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; }
.it-row     { display: flex; flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; width: auto; }
.it-between { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; width: 100%; flex-wrap: wrap; }
.it-center  { align-items: center; text-align: center; }
.it-center .it-body { margin-inline: auto; }

.it-split {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  width: 100%;
}
.it-split--rev { grid-template-columns: 0.88fr 1.12fr; }

.it-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  width: 100%;
}

/* ---------- Capítulo con foto sticky ---------- */

.it-chapter {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  width: 100%;
}

.it-chapter__media {
  position: sticky;
  top: 16vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--i-surface);
  border-radius: var(--i-radius-card);
  overflow: hidden;
}
.it-chapter__media img { width: 46%; height: auto; display: block; }

.it-chapter__body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(56px, 11vh, 140px);
  width: 100%;
  padding-block: clamp(16px, 5vh, 64px);
}

.it-beat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

/* ---------- Lista de especificaciones con filas punteadas ---------- */

.it-speclist { display: flex; flex-direction: column; width: 100%; }

.it-specrow {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 20px 0;
  border-bottom: 1px dotted rgba(254, 243, 226, 0.42);
}
.it-speclist > .it-specrow:first-child { border-top: 1px dotted rgba(254, 243, 226, 0.42); }

/* ---------- Items numerados ---------- */

.it-numlist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.2vw, 56px);
  width: 100%;
}

.it-numitem {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding-top: 20px;
  border-top: 1px dotted currentColor;
}

.it-numitem__n {
  font-family: var(--i-font-display);
  font-weight: 700;
  font-size: clamp(42px, 5.4vw, 78px);
  line-height: 0.88;
  letter-spacing: -0.02em;
}

/* ---------- Banda invertida (crema) ---------- */

.it-band { background: var(--i-accent); color: var(--i-canvas); }

.it-band .it-display,
.it-band .it-h2,
.it-band .it-h3,
.it-band .it-h4,
.it-band .it-eyebrow,
.it-band .it-num,
.it-band .it-numitem__n { color: var(--i-canvas); }

.it-band .it-body { color: #6B3419; }
.it-band .it-body--micro { color: var(--i-canvas); }
.it-band .it-rule { border-top-color: var(--i-canvas); }

.it-band .it-pill { color: var(--i-canvas); border-color: var(--i-canvas); }
.it-band .it-pill:hover { background: var(--i-canvas); color: var(--i-accent); }
.it-band .it-pill--filled { background: var(--i-canvas); color: var(--i-accent); }
.it-band .it-pill--filled:hover { background: var(--i-surface); border-color: var(--i-surface); color: var(--i-accent); }

.it-band .it-card { background: rgba(77, 32, 15, 0.07); }
.it-band .it-specrow { border-bottom-color: rgba(77, 32, 15, 0.34); }
.it-band .it-wm { opacity: 0.09; }
.it-band .it-wm img { filter: invert(1) sepia(1) saturate(2) hue-rotate(340deg); }

/* ---------- Sección full-bleed con overlay ---------- */

.it-full {
  position: relative;
  width: 100%;
  min-height: 84svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--i-sec-gap) var(--i-gutter);
  overflow: hidden;
  background:
    radial-gradient(100% 80% at 50% 12%, #6B3419 0%, transparent 60%),
    radial-gradient(80% 70% at 82% 92%, #3A1709 0%, transparent 62%),
    var(--i-deep);
}

.it-full__bg { position: absolute; inset: 0; z-index: 0; }
.it-full__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.it-full > .it-wrap { z-index: 2; }
.it-full::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(42, 15, 6, 0.42);
}

/* ---------- Tarjetas de ritual ---------- */

.it-rcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
}

.it-rcard__media {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--i-surface);
  border-radius: var(--i-radius-card);
  overflow: hidden;
}
.it-rcard__media img { width: 42%; height: auto; display: block; opacity: 0.92; }

/* ---------- Producto en crudo, sin marco ---------- */

.it-product,
.it-home .it-product img {
  display: block;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.it-product img { width: 100%; }

.it-product--hero { width: clamp(116px, 13.2vw, 190px); margin-inline: auto; }
.it-product--side { width: clamp(180px, 26vw, 400px); margin-left: auto; }
.it-product--wide { width: clamp(200px, 30vw, 440px); margin-inline: auto; }

/* ---------- Watermark botánico ---------- */

.it-wm {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.07;
  width: clamp(300px, 40vw, 620px);
}
/* La rotación vive en la imagen, no en el contenedor: así GSAP puede animar
   el transform del contenedor (parallax) sin pisar la inclinación. */
.it-wm img { width: 100%; height: auto; display: block; }
.it-wm--tl { top: -4%;   left: -8%; }
.it-wm--tl img { transform: rotate(-12deg); }
.it-wm--br { bottom: -8%; right: -10%; }
.it-wm--br img { transform: rotate(168deg); }
.it-wm--r  { top: 6%;    right: -12%; }
.it-wm--r img { transform: rotate(14deg); }

/* ---------- Palabra gigante ---------- */

.it-wordmark {
  font-family: var(--i-font-display);
  font-weight: 700;
  font-size: clamp(72px, 19vw, 280px);
  line-height: 0.78;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--i-accent);
  width: 100%;
  text-align: center;
  white-space: nowrap;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .it-split,
  .it-split--rev,
  .it-chapter { grid-template-columns: 1fr; align-items: start; }
  .it-grid-3,
  .it-numlist { grid-template-columns: 1fr; }
  .it-chapter__media { position: static; aspect-ratio: 16 / 10; }
  .it-chapter__body { gap: clamp(40px, 7vh, 72px); }
  .it-product--side { margin-left: 0; }
  .it-wm { opacity: 0.05; }
}

@media (max-width: 640px) {
  .it-seq-hero { min-height: 92svh; padding-top: 118px; }
  .it-between { align-items: flex-start; flex-direction: column; }
  .it-specrow { flex-direction: column; align-items: flex-start; gap: 6px; }
  .it-body { max-width: none; }
}

/* ---------- Accesibilidad ---------- */

@media (prefers-reduced-motion: reduce) {
  .it-home * { animation: none !important; transition: none !important; }
  .gsap-split.is-armed .it-char { opacity: 1; }
  .it-chapter__media { position: static; }
}

/* ---------- Neutralizar el width:1100px por defecto de .brxe-container ----------
   Los elementos posicionados en absoluto (inset:0) lo heredan y dejan de ser
   full-bleed: el canvas de la secuencia se quedaba en 1100px dentro de un hero
   de 1425px. Con width:auto el inset:0 vuelve a mandar. */
.it-seq-mount,
.it-full__bg {
  width: auto;
  max-width: none;
}


/* ---------- Ajuste del hero: la secuencia limpia, el texto a la izquierda ----------
   La toma cierra con la taza ocupando del ~38% del encuadre hacia la derecha,
   asi que la columna de texto se limita al tercio izquierdo y nunca la tapa.
   El velo sobre la imagen se elimino: la crema se mantiene legible con sombra
   en el propio texto, no con un fondo encima de la secuencia. */

.it-seq-hero {
  justify-content: center;
  align-items: flex-start;
}

.it-hero-copy {
  width: min(440px, 33vw);
  max-width: 100%;
  margin-inline: 0;
  align-items: flex-start;
  text-align: left;
}

.it-hero-line { font-size: clamp(38px, 5.9vw, 88px); }
.it-hero-sub  { font-size: clamp(18px, 2.4vw, 34px); }

.it-seq-hero .it-hero-line,
.it-seq-hero .it-hero-sub,
.it-seq-hero .it-eyebrow,
.it-seq-hero .it-body--micro,
.it-seq-hero .it-scrollcue {
  text-shadow: 0 1px 20px rgba(42, 15, 6, 0.55), 0 1px 3px rgba(42, 15, 6, 0.38);
}

/* El header ya no tiene velo debajo: la sombra lo mantiene legible sobre el cielo */
body.it-home-body .js-header .h-brand,
body.it-home-body .js-header .h-brand-sub,
body.it-home-body .js-header .h-navlink,
body.it-home-body .js-header .h-search-label,
body.it-home-body .js-header .h-search-icon {
  text-shadow: 0 1px 14px rgba(42, 15, 6, 0.65);
}

@media (max-width: 900px) {
  /* En pantallas angostas la taza se va al centro: el texto sube a la zona alta */
  .it-seq-hero { justify-content: flex-start; }
  .it-hero-copy { width: 100%; }
}

/* ---------- Hero en dos tiempos ----------
   Los dos bloques de texto ocupan la misma celda de grid: se relevan en el
   mismo punto de la pantalla, sin saltos de layout y sin transforms de
   centrado que peleen con los que anima GSAP. */

.it-hero-stage {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(440px, 33vw);
  max-width: 100%;
  /* .brxe-container trae margenes automaticos: centrarian la columna */
  margin-left: 0;
  margin-right: auto;
}
.it-hero-stage > * { grid-area: 1 / 1; align-self: center; }

.it-hero-intro,
.it-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  text-align: left;
  gap: 22px;
}

.it-hero-intro-line {
  font-family: var(--i-font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 48px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--i-accent);
}

.it-seq-hero .it-hero-intro-line {
  text-shadow: 0 1px 20px rgba(42, 15, 6, 0.55), 0 1px 3px rgba(42, 15, 6, 0.38);
}

@media (max-width: 900px) {
  .it-hero-stage { width: 100%; }
}

/* ---------- Ajuste para la secuencia de la bolsa ----------
   En esta toma el producto esta al centro del encuadre y arranca cerca del 34%,
   asi que la columna de texto se angosta y el titular baja de escala para no
   pisarlo nunca. El canvas ademas corre el recorte a la derecha (ver ANCHOR_X
   en animations.js), lo que abre mas aire del lado del texto. */

.it-hero-stage { width: min(390px, 27vw); }

.it-hero-line       { font-size: clamp(34px, 5.6vw, 78px); }
.it-hero-sub        { font-size: clamp(16px, 2.1vw, 30px); }
.it-hero-intro-line { font-size: clamp(22px, 2.9vw, 40px); }

/* El logo ahora es el lockup completo (horizontal): manda el alto, el ancho sigue */
.h-logo {
  height: 34px;
  width: auto;
  max-width: none;
}

/* El lockup ya dice INSTINTO y CAFE PREMIUM: los textos sueltos del header sobran */
.h-brand,
.h-brand-sub { display: none; }

@media (max-width: 900px) {
  .it-hero-stage { width: 100%; }
}
@media (max-width: 640px) {
  .h-logo { height: 27px; }
}

/* ---------- Filas alineadas a la izquierda ----------
   .brxe-container trae margenes automaticos: cualquier fila con ancho propio
   (como la de los botones del hero) terminaba centrada dentro de su columna,
   desalineada del texto que tiene encima. */

.it-hero-copy .it-row,
.it-hero-intro .it-row,
.it-stack .it-row {
  margin-left: 0;
  margin-right: auto;
  justify-content: flex-start;
}

/* ---------- Paginas internas ----------
   Reusan el mismo sistema de la home: mismo lienzo, misma escala tipografica
   y el mismo contenedor de 1440 centrado. */

.it-qa {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vh, 44px);
  width: 100%;
}

/* Aviso de borrador: visible a proposito, para que nadie lo confunda con texto final */
.it-notice {
  width: 100%;
  border: 1px dotted var(--i-accent);
  border-radius: var(--i-radius-card);
  background: rgba(254, 243, 226, 0.05);
  padding: 16px 20px;
  font-family: var(--i-font-ui);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--i-accent);
  max-width: none;
}