/* MirAI — La pauta en la home: el celeste de Meta junto al verde de marca

   Dos colores con un significado que no cambia en ninguna sección:

   · CELESTE (--pauta-*, anclado en #1877F2, el azul de Meta y el mismo de la sección
     Ads del panel): la pauta. Lo que TRAE a la gente — Meta y Google Ads en el hub, el
     nodo de la pauta en "Un solo equipo", el primer y el último paso del flujo, el
     agente de campañas.
   · VERDE (--verde-*, theme-verde.css): la atención. Lo que el agente hace con esa
     gente.
   · EL PUENTE (--puente): el degradé celeste → verde, solo donde una cosa se convierte
     en la otra (el título de "Un solo equipo", los tramos del flujo que unen la pauta
     con la atención, el gráfico de barras de la escena 3D).

   Se carga después de theme-verde.css y todo va bajo .theme-verde (solo páginas
   públicas). Texto chico en celeste usa --pauta-700 (5,9:1 sobre blanco); el #1877F2
   queda para rellenos, bordes y texto grande (4,2:1). */

:root {
  --pauta-800: #0B4AA8;
  --pauta-700: #0F5FD1;
  --pauta-600: #1877F2;
  --pauta-500: #3D8FF5;
  --pauta-400: #6AAAF8;
  --pauta-300: #9CC8FB;
  --pauta-200: #C9E1FD;
  --pauta-50:  #F4F8FF;
  --pauta-glow: rgba(24, 119, 242, 0.16);
  /* A mitad de camino: el celeste de marca y un verde azulado. Sin esas dos paradas,
     el degradé directo azul → verde pasa por un gris apagado. */
  --celeste: #1491C7;
  --turquesa: #0F8A86;
  --puente: linear-gradient(90deg, var(--pauta-600) 0%, var(--celeste) 36%, var(--turquesa) 66%, var(--verde-600) 100%);
}

.theme-verde .text-puente,
.theme-verde .text-pauta {
  background: var(--puente);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.theme-verde .text-pauta { background-image: linear-gradient(90deg, var(--pauta-700), var(--celeste)); }

/* ====== El cambio: Meta y Google Ads entran al hub ====== */
.theme-verde .cambio-node--pauta > circle { stroke: var(--pauta-600); stroke-width: 1.6; fill: rgba(244, 248, 255, 0.95); }
.theme-verde .cambio-spoke--pauta { stroke: var(--pauta-600); opacity: 0.42; }
.theme-verde .cambio-pulse-dot.cambio-pulse-dot--pauta { fill: var(--pauta-600); }
.cambio-node__label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: rgba(0, 0, 0, 0.55);
}
.cambio-node--pauta .cambio-node__label { fill: var(--pauta-700); }

/* ====== Un solo equipo ====== */
/* El circuito: tres nodos en las mismas tres columnas que las tarjetas de abajo, así
   cada nodo queda arriba de su pieza. El del medio es un aro vacío: ahí se acopla la
   mascota (scene3d.jsx mide .paquete__core). Sin escena, el aro tiene su centro verde. */
.paquete__rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  max-width: 1040px;
  height: 150px;
  margin: 92px auto 0;
}
.paquete__node {
  position: relative;
  z-index: 1;
  width: 112px;
  height: 112px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.82);
  border: 1.5px solid var(--rule-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.paquete__node--pauta { border-color: var(--pauta-500); box-shadow: 0 0 0 8px var(--pauta-glow), 0 18px 36px -20px rgba(24, 119, 242, 0.6); }
.paquete__node--dashboard { border-color: rgba(0, 0, 0, 0.28); color: #111; box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.04), 0 18px 36px -20px rgba(0, 0, 0, 0.4); }
.paquete__node--agente {
  width: 140px;
  height: 140px;
  background: transparent;
  border: 1.5px dashed rgba(21, 77, 50, 0.4);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.paquete__core {
  width: 104px;
  height: 104px;
  border-radius: 999px;
  background: var(--verde-700);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--mono);
  box-shadow: 0 0 0 8px var(--verde-glow);
}
.paquete__core b { font-size: 12px; letter-spacing: 0.12em; font-weight: 600; }
.paquete__core small { font-size: 10px; letter-spacing: 0.1em; opacity: 0.5; }
body.has-scene3d .theme-verde .paquete__core { background: transparent; box-shadow: none; }
body.has-scene3d .theme-verde .paquete__core > * { visibility: hidden; }

.paquete__link { position: absolute; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; }
.paquete__link--a { left: calc(100% / 6 + 66px); right: calc(50% + 78px); background: linear-gradient(90deg, var(--pauta-500), var(--verde-500)); }
.paquete__link--b { left: calc(50% + 78px); right: calc(100% / 6 + 66px); background: linear-gradient(90deg, var(--verde-500), #222); }
.paquete__link em {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-style: normal;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Un punto que viaja por la línea: sin escena es lo que muestra que algo fluye. Con
   escena, en el primer tramo viajan las burbujas 3D y el punto sobra. */
.paquete__link i {
  position: absolute;
  top: -3px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  animation: paqueteDot 2.6s cubic-bezier(.45, 0, .55, 1) infinite;
}
.paquete__link--a i { --from: var(--pauta-600); --to: var(--verde-500); }
.paquete__link--b i { --from: var(--verde-500); --to: #222; animation-delay: 1.3s; }
body.has-scene3d .theme-verde .paquete__link--a i { display: none; }
@keyframes paqueteDot {
  0% { left: 0; background: var(--from); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: calc(100% - 8px); background: var(--to); opacity: 0; }
}

/* El arco de vuelta, del agente a la pauta: la parte que una agencia sola no hace. Sale
   de al lado del aro del agente (no de su centro: le pasaría por encima a la mascota)
   y cae con una flecha sobre el nodo de la pauta. */
.paquete__arc {
  position: absolute;
  left: calc(100% / 6 + 26px);
  right: calc(50% + 26px);
  bottom: calc(50% + 60px);
  height: 58px;
  border: 2px dashed var(--pauta-400);
  border-bottom: none;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.paquete__arc::before {
  content: "";
  position: absolute;
  left: -7px;
  bottom: -10px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid var(--pauta-500);
}
.paquete__arc em {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-style: normal;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pauta-700);
  background: rgba(244, 248, 255, 0.96);
  border: 1px solid var(--pauta-200);
  border-radius: 999px;
  padding: 4px 12px;
}

/* Las tarjetas son las del agente de campañas (.campana-grid / .campana-card, con su
   apertura al pasar el mouse en theme-verde.css). Lo que cambia: adentro de la
   descripción va también la lista, así que se abre más alto, y la luz de cada una es
   del color de su pieza. */
.theme-verde .paquete__grid { margin-top: 44px; }
.paquete-card__list { list-style: none; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 8px; }
.paquete-card__list li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.4; color: var(--muted-strong); }
.paquete-card__list li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 3px;
  width: 4px;
  height: 8px;
  border: solid var(--pc, var(--verde-600));
  border-width: 0 1.7px 1.7px 0;
  transform: rotate(45deg);
}
.paquete-card--pauta { --pc: var(--pauta-600); }
.paquete-card--agente { --pc: var(--verde-600); }
.paquete-card--dashboard { --pc: #222; }
@media (hover: hover) and (min-width: 901px) {
  .theme-verde .paquete__grid .campana-card:hover .campana-card__desc,
  .theme-verde .paquete__grid .campana-card:focus-visible .campana-card__desc { max-height: 320px; }
  .theme-verde .campana-grid .paquete-card--pauta:hover,
  .theme-verde .campana-grid .paquete-card--pauta:focus-visible { box-shadow: 0 24px 48px -20px rgba(24, 119, 242, 0.42); }
  .theme-verde .campana-grid .paquete-card--dashboard:hover,
  .theme-verde .campana-grid .paquete-card--dashboard:focus-visible { box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.32); }
}

@media (max-width: 760px) {
  .paquete__rail { height: 112px; margin-top: 72px; }
  .paquete__node { width: 72px; height: 72px; }
  .paquete__node svg { width: 22px; height: 22px; }
  .paquete__node--agente { width: 92px; height: 92px; }
  .paquete__core { width: 70px; height: 70px; }
  .paquete__core b { font-size: 9px; }
  .paquete__core small { font-size: 8px; }
  .paquete__link--a { left: calc(100% / 6 + 42px); right: calc(50% + 52px); }
  .paquete__link--b { left: calc(50% + 52px); right: calc(100% / 6 + 42px); }
  .paquete__link em { display: none; }
  .paquete__arc { left: calc(100% / 6 + 14px); right: calc(50% + 18px); bottom: calc(50% + 40px); height: 40px; }
  .paquete__arc em { font-size: 9px; padding: 3px 9px; top: -32px; left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .paquete__link i { animation: none; display: none; }
}

/* ====== Agente de campañas: la sección de la pauta ====== */
.pauta-section { isolation: isolate; }
/* Un lavado celeste arriba y verde abajo: la sección se reconoce por su color sin
   pintar ningún fondo entero (la escena 3D tiene que seguir viéndose). Se esfuma
   arriba y abajo: cortado en el borde de la sección se leía como una franja. */
.theme-verde .pauta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55% 45% at 12% 18%, rgba(24, 119, 242, 0.11), rgba(24, 119, 242, 0) 70%),
    radial-gradient(45% 40% at 92% 40%, rgba(20, 145, 199, 0.08), rgba(20, 145, 199, 0) 70%),
    radial-gradient(50% 40% at 80% 90%, rgba(42, 128, 84, 0.08), rgba(42, 128, 84, 0) 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 180px, #000 calc(100% - 180px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 180px, #000 calc(100% - 180px), transparent 100%);
}
.theme-verde .pauta-section .section-head__tag { color: var(--pauta-700); }
.theme-verde .pauta-section .section-head__tag::before,
.theme-verde .pauta-section .section-head__tag::after { background: var(--pauta-500); }
@media (hover: hover) and (min-width: 901px) {
  .theme-verde .pauta-section .campana-grid .campana-card:hover { box-shadow: 0 24px 48px -20px rgba(24, 119, 242, 0.4); }
  .theme-verde .pauta-section .campana-grid .campana-card:focus-visible { box-shadow: 0 0 0 3px var(--pauta-300), 0 24px 48px -20px rgba(24, 119, 242, 0.4); }
}

/* ====== Flujo: el primer y el último paso son la pauta ====== */
@media (min-width: 901px) {
  .theme-verde .flow { grid-template-columns: repeat(7, 1fr); }
}
.theme-verde .flow__tile--pauta { border-color: rgba(24, 119, 242, 0.4); background: rgba(244, 248, 255, 0.9); }
.theme-verde .flow__tile--pauta-brand { background: var(--pauta-600); border-color: var(--pauta-600); }
.theme-verde .flow__step--pauta .flow__num { background: var(--pauta-600); }
.theme-verde .flow__step--pauta.is-done .flow__num,
.theme-verde .flow__step--pauta.is-current .flow__num { background: var(--pauta-500); }
.theme-verde .flow__step--pauta.is-current .flow__tile {
  border-color: var(--pauta-500);
  box-shadow: 0 0 0 5px var(--pauta-glow), 0 18px 32px -16px rgba(24, 119, 242, 0.55);
}
.theme-verde .flow__step--pauta.is-current .flow__label { color: var(--pauta-800); }
.theme-verde .flow__step--pauta:hover .flow__tile { border-color: var(--pauta-500); }
@media (min-width: 901px) {
  .theme-verde .flow__step--from-pauta::after { background: linear-gradient(90deg, var(--pauta-500), var(--verde-500)); }
  .theme-verde .flow__step--to-pauta::after { background: linear-gradient(90deg, var(--verde-500), var(--pauta-500)); }
}