/* index.css — ajustes sobre el estilo base.
   Scopeado a body.idx2 dentro de index.html. Carga DESPUÉS de styles.css.
   Paleta industrial intacta. */

/* ===================================================================
   TIPOGRAFÍA — pareja editorial:
   · Cinzel (caps romanas, con peso) para TÍTULOS de display.
   · EB Garamond para todo el contenido serif (citas, nombres, itálicas).
   El cuerpo en sans (Roboto) se mantiene.
   =================================================================== */
body.idx2 {
  --font-serif: "Roboto Serif", Georgia, serif;
  --container: 1640px;     /* más ancho: la página se ve estirada, no angosta */
}

/* Títulos de display → Cinzel con más peso */
body.idx2 .h-display,
body.idx2 .hero-title,
body.idx2 .h-section,
body.idx2 .concept-title,
body.idx2 .cases-title,
body.idx2 .final-cta-title,
body.idx2 .testimonial-section-title,
body.idx2 .testimonial-title-bold {
  font-family: "Roboto", Georgia, serif;
  font-weight: 700;
}
/* Énfasis (líneas de acento) un punto más pesadas */
body.idx2 .hero-enfocar,
body.idx2 .concept-title-l2,
body.idx2 .cases-title-bold,
body.idx2 .testimonial-title-bold {
  font-weight: 800;
}

/* Hero en caps Cinzel: tamaño y ritmo controlados */
body.idx2 .hero-content {
  justify-content: center;
  gap: clamp(10px, 1.6vh, 22px);   /* poco espacio título ↔ texto */
}
body.idx2 .hero-title {
  font-size: clamp(40px, 7.4vw, 116px);
  line-height: 1.05;
  letter-spacing: 0.005em;
  max-width: 16ch;
  margin-top: 18px;
}
body.idx2 .h-section {
  line-height: 1.08;
}
body.idx2 .concept-title,
body.idx2 .cases-title {
  line-height: 1.1;
}

/* =================== 1 · HERO — todo a la izquierda =================== */
body.idx2 .hero-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2.6vw, 34px);
}
body.idx2 .hero-sub {
  text-align: left;        /* sin justificar, no se ve forzado */
  max-width: 56ch;
  font-size: clamp(16px, 1.5vw, 22px);
}
body.idx2 .hero-actions {
  margin-top: 0;
  justify-self: start;     /* botón pegado a la izquierda, bajo el texto */
}

/* =================== 2 · CLIENTES — menos aire + cinta gris =========== */
body.idx2 .logo-wall-section {
  padding: clamp(20px, 4vw, 52px) 0;
}
body.idx2 .logo-wall-eyebrow {
  margin-bottom: clamp(12px, 2.5vw, 28px);
}
.idx2-ticker {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
  padding: 13px 0;
}
.idx2-ticker-track {
  display: inline-block;
  animation: idx2-ticker 40s linear infinite;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.idx2-ticker-track .name { padding: 0 16px; }
.idx2-ticker-track .sep { color: var(--accent); }
@keyframes idx2-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =================== 3 · ESTRATEGIA → CONCEPTO — menos separación ===== */
body.idx2 .pitch-divider     { margin-bottom: clamp(16px, 2vw, 40px); }
body.idx2 .pitch-paragraphs  { margin-bottom: clamp(16px, 2vw, 36px); }
body.idx2 .pitch-compare     { padding-top: clamp(16px, 2vw, 30px); }
/* Acortar el hueco entre la sección Estrategia y Concepto */
body.idx2 .pitch-section     { padding-bottom: clamp(36px, 5vw, 80px); }
body.idx2 .concept-section   { padding-top: clamp(36px, 5vw, 80px); }
/* "Lo habitual" — mejor contraste con el fondo oscuro */
body.idx2 .contrast-item--bad        { color: rgba(244, 244, 243, 0.82); }
body.idx2 .contrast-item--bad .ci-icon { color: rgba(244, 244, 243, 0.5); }
body.idx2 .contrast-group-label      { color: rgba(244, 244, 243, 0.6); }

/* =================== 4 · VISIÓN / Sobre Juan Mario — EB Garamond ===== */
body.idx2 .vision-quote {
  font-weight: 400;
  font-size: clamp(20px, 3vw, 40px);
  line-height: 1.22;
  letter-spacing: -0.005em;
}

/* =================== 5 · HABLEMOS — AHORA centrado + entrada ========= */
/* "AHORA" centrado horizontalmente y apoyado sobre el borde inferior */
body.idx2 .final-cta-section { text-align: left; }
body.idx2 .cta-bg-word {
  font-family: "Roboto Serif", Georgia, serif;
  color: rgba(28, 28, 30, 0.03);
  font-weight: 700;
  left: 50%;
  right: auto;
  top: auto;
  bottom: -0.12em;
  transform: translateX(-50%);
}
/* Entrada (título) más grande */
body.idx2 .final-cta-title {
  font-size: clamp(34px, 8vw, 124px);
  line-height: 1;
}
/* Texto de abajo con letras más separadas */
body.idx2 .final-cta-tag {
  letter-spacing: 0.26em;
}

/* =================== 6 · ANIMACIONES sutiles (premium) ============== */
/* Reveal al entrar en viewport — variantes direccionales.
   Las clases las añade el JS; sin JS todo permanece visible. */
body.idx2 .idx2-rv {
  opacity: 0;
  transition:
    opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.8s ease;
  will-change: opacity, transform;
}
body.idx2 .idx2-rv.rv-up    { transform: translateY(26px); }
body.idx2 .idx2-rv.rv-fade  { transform: none; }
body.idx2 .idx2-rv.rv-left  { transform: translateX(-36px); }
body.idx2 .idx2-rv.rv-right { transform: translateX(36px); }
body.idx2 .idx2-rv.rv-scale { transform: scale(0.93); }
body.idx2 .idx2-rv.rv-soft  { transform: translateY(20px); filter: blur(7px); }
body.idx2 .idx2-rv.rv-line  { transform: scaleX(0); transform-origin: left center; }
body.idx2 .idx2-rv.idx2-on {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Entrada del hero al cargar */
@keyframes idx2-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
body.idx2 .hero-eyebrow { animation: idx2-rise 0.8s 0.05s both cubic-bezier(0.22, 0.61, 0.36, 1); }
body.idx2 .hero-title   { animation: idx2-rise 0.9s 0.16s both cubic-bezier(0.22, 0.61, 0.36, 1); }
body.idx2 .hero-bottom  { animation: idx2-rise 0.9s 0.3s  both cubic-bezier(0.22, 0.61, 0.36, 1); }

/* Botones — premium: elevación + brillo que cruza + flecha que se desliza */
body.idx2 .btn {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    background 0.35s ease,
    color 0.3s ease,
    box-shadow 0.4s ease,
    border-color 0.3s ease;
}
body.idx2 .btn .arrow {
  display: inline-flex;
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Brillo diagonal que cruza en hover */
body.idx2 .btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -45%;
  width: 38%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
}
body.idx2 .btn:hover { transform: translateY(-2px); }
body.idx2 .btn-primary:hover { box-shadow: 0 14px 36px -14px rgba(0, 0, 0, 0.5); }
body.idx2 .btn:hover .arrow { transform: translateX(5px); }
body.idx2 .btn:hover::after { opacity: 1; animation: idx2-shine 0.85s ease; }
@keyframes idx2-shine {
  from { left: -45%; }
  to   { left: 130%; }
}
/* Botón fantasma / sobre fondo oscuro: borde que se enciende */
body.idx2 .btn-ghost:hover,
body.idx2 .btn-on-deep-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}
/* Botón del hero: flecha con un guiño sutil en reposo */
@keyframes idx2-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}
body.idx2 .hero-actions .btn .arrow { animation: idx2-nudge 2.6s ease-in-out infinite; }
body.idx2 .hero-actions .btn:hover .arrow { animation: none; transform: translateX(5px); }

@media (prefers-reduced-motion: reduce) {
  body.idx2 .idx2-rv { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  body.idx2 .hero-eyebrow,
  body.idx2 .hero-title,
  body.idx2 .hero-bottom { animation: none !important; }
  body.idx2 .btn::after { display: none !important; }
  body.idx2 .hero-actions .btn .arrow { animation: none !important; }
}