/* ============================================================
   Growth y media buying (growth.html), tono ámbar p-growth.
   Se apoya en el "Sistema visual" de styles.css; aquí va solo lo
   propio de esta página: el ciclo del héroe, las cifras, los
   croquis de servicios, el embudo con IA, los pasos conectados,
   los casos, el chat de preguntas y la flecha al blanco.
   Colores solo con tokens; todo lo decorativo con aria-hidden.
   ============================================================ */

/* Trazo y relleno "recortados" con el color del fondo del dibujo */
.gr-knock {
  fill: none;
  stroke: var(--art-bg);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gr-knock-wide { stroke-width: 6; }

.gr-knock-fill { fill: var(--art-bg); }

/* Puntos tenues (botones de ventana en el tablero) */
.gr-dim { fill: var(--art-muted); }

/* ---------- Héroe: ciclo anuncio → embudo → ventas → ROAS ---------- */
.gr-hero-art { max-width: 440px; }

/* Clics: caen al embudo, convergen en el cuello y llegan a las monedas */
.gr-drops circle {
  opacity: 0;
  animation: gr-fall 7.5s linear infinite;
}

.gr-drops circle:nth-child(2) { animation-delay: -2.5s; }
.gr-drops circle:nth-child(3) { animation-delay: -5s; }

@keyframes gr-fall {
  0% { transform: translate(0, 0); opacity: 0; }
  8% { opacity: 1; }
  22% { transform: translate(0, 32px); }
  62% { transform: translate(var(--dx), 126px); }
  78% { transform: translate(var(--dx), 170px); opacity: 1; }
  84%, 100% { transform: translate(var(--dx), 174px); opacity: 0; }
}

/* ---------- Entradas con .reveal y realce al pasar el cursor ----------
   .reveal usa transform; el realce usa translate para no chocar con
   ella (y sin el retraso escalonado de la entrada). Solo se animan
   transform, translate y opacity. */
.js .p-growth :is(.service, .stat-row.tiles li, .gr-cases li).reveal {
  transition:
    opacity 0.6s ease var(--delay, 0s),
    transform 0.6s ease var(--delay, 0s),
    translate 0.3s var(--ease-out);
}

.p-growth :is(.service, .stat-row.tiles li, .gr-cases li).reveal.is-visible:is(:hover, :focus-within) { translate: 0 -3px; }

/* Las cifras ya suben con transform en styles.css: aquí solo translate
   (así no suben 6 px en dos tiempos) */
.p-growth .stat-row.tiles li.reveal.is-visible:is(:hover, :focus-within) { transform: none; }

/* Sombra suave: vive en ::after y solo cambia su opacidad */
.p-growth :is(.service-grid.cards > .service, .stat-row.tiles li, .gr-cases li)::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 18px 36px -24px color-mix(in srgb, var(--accent) 60%, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.p-growth :is(.service-grid.cards > .service, .stat-row.tiles li, .gr-cases li):is(:hover, :focus-within)::after { opacity: 1; }

/* ---------- Cifras ---------- */
.gr-stats .wrap { position: relative; }

/* Los íconos toman el acento (no el gris de .stat-row span) */
.p-growth .stat-row .icon-badge {
  --badge: 52px;
  border-radius: 14px;
  color: var(--accent);
  max-width: none;
  margin-bottom: 0.6rem;
}

/* Sin recorte para que se vea la sombra; la barra sigue la esquina */
.p-growth .stat-row.tiles li {
  overflow: visible;
  border-radius: 4px;
}

.p-growth .stat-row.tiles li::before { border-radius: 3px 3px 0 0; }

/* Curva de crecimiento a lo ancho, detrás del botón */
.gr-rise {
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 150px;
  pointer-events: none;
}

.gr-rise-area { fill: color-mix(in srgb, var(--accent) 7%, transparent); }

.gr-rise-line {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 38%, transparent);
  stroke-width: 1.5;
}

/* ---------- Servicios: ícono y croquis de cada servicio ---------- */
.gr-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.gr-mini {
  width: 120px;
  flex: none;
  margin-top: 0.1rem;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.p-growth .service-grid.cards > .service { border-radius: 4px; }

.service:is(:hover, :focus-within) .gr-mini { opacity: 1; }

/* Quietos hasta que se pasa el cursor o se enfoca la tarjeta */
.gr-mini [class*="anim-"] { animation-play-state: paused; }
.service:is(:hover, :focus-within) .gr-mini [class*="anim-"] { animation-play-state: running; }

.gr-lift,
.gr-grow {
  transform-box: fill-box;
  transition: transform 0.45s var(--ease-out);
}

.gr-grow { transform-origin: bottom; }

.service:is(:hover, :focus-within) .gr-lift { transform: translateY(-4px); }
.service:is(:hover, :focus-within) .gr-grow { transform: scaleY(1.12); }

/* Tabla de cohortes: intensidad del acento por celda */
.gr-cohort .c1 { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
.gr-cohort .c2 { fill: color-mix(in srgb, var(--accent) 24%, transparent); }
.gr-cohort .c3 { fill: color-mix(in srgb, var(--accent) 42%, transparent); }
.gr-cohort .c4 { fill: color-mix(in srgb, var(--accent) 66%, transparent); }
.gr-cohort .gr-hot { fill: var(--accent); }

/* ---------- IA: embudo asistido ----------
   La píldora con destello de la etiqueta viene de .ai-section en styles.css */
.gr-ai-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 1rem 3rem;
  align-items: center;
  margin-bottom: 0.4rem;
}

.gr-ai-art {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 360px;
  margin-bottom: 1.4rem;
  pointer-events: none;
}

/* Halo suave detrás del embudo */
.gr-ai-art::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18% -8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--art-glow), transparent);
}

/* Resplandor suave (sin borde visible) detrás del dibujo */
.gr-ai .deco-blob { background: radial-gradient(closest-side, var(--art-glow), transparent); }

.gr-ai-cards > .service {
  background: linear-gradient(165deg, var(--surface) 55%, var(--accent-faint));
}

/* ---------- Cómo trabajo: pasos unidos por una línea de avance ---------- */
.gr-steps { gap: 2rem 2.6rem; }

.gr-steps > .service {
  border-top: 0;
  padding-top: 0;
}

.gr-steps > .service::before { content: none; }

.gr-step-head {
  position: relative;
  margin-bottom: 0.7rem;
}

.gr-step-head .icon-badge { display: grid; }

/* Número del paso: sello sobre la esquina de la insignia */
.gr-step-head .step-num {
  position: absolute;
  top: -0.6rem;
  left: calc(var(--badge-w, 84px) - 1.45rem);
  width: 2.1rem;
  height: 2.1rem;
  font-size: 0.78rem;
  background: var(--accent);
  color: var(--paper);
  border: 3px solid var(--accent-faint);
}

/* Línea de avance: se llena al aparecer y un destello la recorre */
.gr-step-link {
  position: absolute;
  top: 40.5px;
  left: calc(84px + 1rem);
  right: -1.6rem;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  pointer-events: none;
}

.gr-step-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--accent) 38%, transparent);
  transform-origin: left;
  transition: transform 1.1s var(--ease-out) calc(var(--delay, 0s) + 0.5s);
}

.js .reveal:not(.is-visible) .gr-step-link::before { transform: scaleX(0); }

.gr-step-link i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--accent) 20%, transparent 21%);
  transform: translateX(-22%);
  animation: gr-travel 5s var(--ease-io) 1.6s infinite;
}

/* El destello pasa del paso 1 al 2 y luego del 2 al 3 */
.gr-steps > .service:nth-child(2) .gr-step-link i { animation-delay: 4.1s; }

@keyframes gr-travel {
  0% { transform: translateX(-22%); }
  50%, 100% { transform: translateX(100%); }
}

@keyframes gr-travel-y {
  0% { transform: translateY(-22%); }
  50%, 100% { transform: translateY(100%); }
}

/* Trayectoria al alza en la franja vacía junto al título: queda por
   encima de los pasos a cualquier ancho y se desvanece hacia abajo
   (sin Σ: cortado se leía como un ">" detrás del texto) */
.gr-method-rise {
  position: absolute;
  z-index: -1;
  top: 0.75rem;
  right: max(20px, calc((100% - 1060px) / 2 + 20px));
  width: min(42%, 420px);
  height: auto;
  overflow: visible;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, transparent, var(--ink) 40%);
  mask-image: linear-gradient(to top, transparent, var(--ink) 40%);
}

.gr-mr-bar { fill: color-mix(in srgb, var(--accent) 15%, transparent); }

.gr-mr-line {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 55%, transparent);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.gr-mr-dot { fill: color-mix(in srgb, var(--accent) 60%, transparent); }
.gr-mr-end { fill: var(--accent); }

.gr-mr-ring {
  fill: var(--accent-faint);
  stroke: color-mix(in srgb, var(--accent) 55%, transparent);
  stroke-width: 1.6;
}

/* ---------- Trayectoria: casos por sector en tarjetas ---------- */
.gr-cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 1.2rem;
}

.gr-cases li {
  gap: 0.65rem;
  padding: 1.3rem 1.4rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
}

.gr-cases li::before { inset: 0; }

.gr-cases li:is(:hover, :focus-within) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  border-left-color: var(--accent);
}
.gr-cases li:is(:hover, :focus-within) .icon-badge { transform: translateY(-3px) rotate(-6deg); }

.gr-case-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.gr-case-head strong { line-height: 1.3; }

/* Íconos en el acento (no el gris de .highlight-list span) */
.gr-cases .icon-badge {
  --badge: 52px;
  border-radius: 14px;
  color: var(--accent);
}

/* Herramientas: insignia y chips con realce */
.gr-tools {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.8rem;
}

.gr-tools .chip-row { flex: 1; min-width: 0; }

.p-growth .chip { transition: transform 0.25s var(--ease-out); }

.p-growth .chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

/* ---------- Preguntas: conversación con respuesta rápida ---------- */
.gr-faq .split { align-items: center; }

.gr-faq-art { max-width: 330px; }

/* Puntos de "escribiendo…" */
.gr-type {
  opacity: 0.3;
  animation: gr-typing 4.8s ease-in-out var(--t, 0s) infinite;
}

@keyframes gr-typing {
  0%, 40%, 100% { opacity: 0.3; }
  15% { opacity: 1; }
}

/* ---------- Contacto: flecha en el centro de las ondas ----------
   Las ondas de .cta::before tienen su centro a 90 px del borde
   derecho; la punta de la flecha (x = 280 de 320) cae ahí. */
.gr-cta-arrow {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 50px;
  width: 320px;
  height: 160px;
  margin-top: -80px;
  overflow: visible;
  pointer-events: none;
}

.gr-quiver {
  transform-box: view-box;
  transform-origin: 280px 80px;
  animation: gr-quiver 7s var(--ease-io) infinite;
}

@keyframes gr-quiver {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-2.5deg); }
}

/* Los valores con su ícono vienen de .values-inline en styles.css */

/* ---------- Pantallas medianas y pequeñas ---------- */
@media (max-width: 1080px) {
  .gr-cta-arrow { display: none; }
}

/* Cifras en 2 x 2 (evita una fila con una sola tarjeta) */
@media (min-width: 561px) and (max-width: 1000px) {
  .gr-stats .stat-row.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  /* Pasos en línea de tiempo vertical: insignia a la izquierda */
  .gr-steps { grid-template-columns: 1fr; }

  .gr-steps > .service {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 1.2rem;
    row-gap: 0.4rem;
    align-content: start;
  }

  .gr-step-head {
    grid-row: span 2;
    margin-bottom: 0;
    --badge-w: 64px;
  }

  .gr-step-head .icon-badge { --badge: 64px; border-radius: 18px; }

  .gr-step-link {
    top: calc(64px + 0.5rem);
    bottom: calc(-2rem + 0.5rem);
    left: 30.5px;
    right: auto;
    width: 3px;
    height: auto;
  }

  .gr-step-link::before { transform-origin: top; }
  .js .reveal:not(.is-visible) .gr-step-link::before { transform: scaleY(0); }

  .gr-step-link i {
    background: linear-gradient(180deg, transparent, var(--accent) 20%, transparent 21%);
    transform: translateY(-22%);
    animation-name: gr-travel-y;
  }
}

/* IA: sin espacio para 3 columnas, una tarjeta por fila (evita el 2 + 1
   con una tarjeta huérfana); en tabletas, la insignia a la izquierda */
@media (max-width: 860px) {
  .gr-ai-cards { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 561px) and (max-width: 860px) {
  .gr-ai-cards > .service {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.2rem;
    align-content: start;
  }

  .gr-ai-cards > .service > .icon-badge:first-child {
    grid-row: span 2;
    margin-bottom: 0;
  }
}

@media (max-width: 820px) {
  .gr-hero-art { max-width: min(330px, 88%); }
  .gr-ai-head { grid-template-columns: 1fr; }
  .gr-ai-art { justify-self: center; max-width: min(320px, 90%); margin-bottom: 1.8rem; }
  /* El chat vuelve al tope compartido de .split-art en el celular */
  .gr-faq-art { max-width: min(260px, 75%); }
}

@media (max-width: 560px) {
  /* Cifras: insignia a la izquierda, número y texto a la derecha */
  .gr-stats .stat-row.tiles li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    row-gap: 0.2rem;
  }

  .p-growth .gr-stats .stat-row .icon-badge {
    grid-row: span 2;
    margin-bottom: 0;
  }

  .gr-mini { width: 104px; }
  .gr-rise { height: 70px; }
  .gr-method-rise { top: 0.5rem; width: min(52%, 210px); }
  .gr-tools { align-items: flex-start; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .gr-drops circle { animation: none; opacity: 0; }
  .gr-type,
  .gr-quiver,
  .gr-step-link i { animation: none; }
  .gr-step-link i { opacity: 0; }
  .gr-type { opacity: 0.7; }

  .p-growth :is(.service, .stat-row.tiles li, .gr-cases li).reveal.is-visible:is(:hover, :focus-within),
  .service:is(:hover, :focus-within) :is(.gr-lift, .gr-grow),
  .gr-cases li:is(:hover, :focus-within) .icon-badge,
  .p-growth .chip:hover { translate: none; transform: none; }
}