.agentes-page {
  --ag-black: #0a0a0a;
  --ag-violet-deep: #150a26;
  --ag-violet: #3a1f6b;
  --ag-pink-fog: #8b86c4;
  --ag-gold: #e8b85c;
  --ag-yellow: #f5c542;
  --ag-text-light: #f4eee9;
  --ag-ink: #141a24;
  --ag-muted: #71767a;
}

.agentes-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: var(--ag-black);
  padding: clamp(120px, 18vh, 200px) clamp(20px, 5vw, 56px) clamp(64px, 10vh, 120px);
  text-align: center;
}

.agentes-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(60% 50% at 50% 20%, rgba(232, 184, 92, 0.14), transparent 60%),
    radial-gradient(80% 65% at 50% 0%, var(--ag-violet-deep), var(--ag-black) 70%);
}

.agentes-hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 62% 52% at 50% 48%, rgba(8, 5, 16, 0.55), transparent 72%);
}

.agentes-hero__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.agentes-orb {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(60px);
  mix-blend-mode: screen;
  will-change: transform;
}

.agentes-orb--1 {
  width: clamp(320px, 36vw, 620px);
  height: clamp(320px, 36vw, 620px);
  left: -10%;
  top: 4%;
  background: radial-gradient(circle, var(--ag-violet) 0%, var(--ag-violet) 35%, transparent 72%);
  opacity: 0.95;
  animation: agentesDrift1 22s ease-in-out infinite;
}

.agentes-orb--2 {
  width: clamp(260px, 30vw, 520px);
  height: clamp(260px, 30vw, 520px);
  right: -8%;
  top: 26%;
  background: radial-gradient(circle, var(--ag-pink-fog) 0%, var(--ag-pink-fog) 30%, transparent 74%);
  opacity: 0.65;
  animation: agentesDrift2 26s ease-in-out infinite;
}

.agentes-orb--3 {
  width: clamp(220px, 24vw, 420px);
  height: clamp(220px, 24vw, 420px);
  left: 36%;
  bottom: -12%;
  background: radial-gradient(circle, var(--ag-gold) 0%, var(--ag-gold) 30%, transparent 76%);
  opacity: 0.55;
  animation: agentesDrift3 30s ease-in-out infinite;
}

@keyframes agentesDrift1 {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(4%, 6%) scale(1.08);
  }
}

@keyframes agentesDrift2 {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-6%, -4%) scale(1.05);
  }
}

@keyframes agentesDrift3 {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-3%, -8%) scale(1.1);
  }
}

.agentes-hero__content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.agentes-title {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(38px, 6vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ag-text-light);
  margin: 0 0 clamp(18px, 2.6vh, 28px);
  text-shadow: 0 8px 50px rgba(0, 0, 0, 0.5);
  text-wrap: balance;
}

.agentes-title em {
  font-style: normal;
  color: var(--ag-yellow);
}

.agentes-subtitle {
  font-family: var(--font-sans-regular), system-ui, sans-serif;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: rgba(244, 238, 233, 0.78);
  max-width: 52ch;
  margin: 0 0 clamp(28px, 4vh, 44px);
}

.agentes-scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 238, 233, 0.55);
}

.agentes-scroll-cue svg {
  animation: agentesScrollHint 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes agentesScrollHint {
  0% {
    transform: translateY(0);
    opacity: 0.55;
  }

  60% {
    transform: translateY(6px);
    opacity: 1;
  }

  100% {
    transform: translateY(0);
    opacity: 0.55;
  }
}

.agentes-grid-section {
  background: #fff;
  padding: clamp(64px, 10vh, 120px) clamp(20px, 5vw, 56px) clamp(96px, 12vh, 160px);
}

.agentes-grid-intro {
  max-width: 62ch;
  margin: 0 auto clamp(40px, 6vh, 64px);
  text-align: center;
}

.agentes-grid-intro h2 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px);
  color: var(--ag-ink);
  margin: 0 0 12px;
}

.agentes-grid-intro p {
  font-family: var(--font-sans-regular), system-ui, sans-serif;
  color: var(--ag-muted);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.agentes-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 32px);
}

@media (max-width: 900px) {
  .agentes-grid {
    grid-template-columns: 1fr;
  }
}

.agente-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  padding: clamp(28px, 3.4vw, 44px);
  background: #f7f6f9;
  border: 1px solid rgba(20, 26, 36, 0.08);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
  text-decoration: none;
  color: inherit;
}

.agente-card:hover,
.agente-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(20, 10, 40, 0.14);
}

.agente-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}

.agente-card--marketing .agente-card__icon {
  background: linear-gradient(135deg, #249bf0, #0774c4);
}

.agente-card--copiloto .agente-card__icon {
  background: linear-gradient(135deg, var(--ag-violet), var(--ag-violet-deep));
}

/* Las cabezas sustituyen a los iconos SVG. Se conserva el cuadro con
   degradado: es lo que da a cada tarjeta su color propio, y sobre él la
   silueta oscura del muñeco recorta bien.
   `contain` es obligatorio: los dos archivos tienen proporciones
   distintas (386x324 y 295x324), y sin él uno saldría más grande que el
   otro dentro del mismo cuadro. */
.agente-card__icon img {
  /* Medidas fijas, no 100%: el cuadro centra con place-items, así que el
     elemento no se estira y un `height: 100%` cae a `auto` — la cabeza
     del asistente (295x324) crecía según su proporción y se salía 4 px.
     44 = 56 del cuadro menos 6 de aire a cada lado. */
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}

/* ── Saludos del hueco entre el hero y la parrilla ──────────────────
   Cuelgan de .agentes-grid-section y suben con translateY para invadir
   el hueco del hero. No pueden vivir dentro del hero: ese lleva
   overflow:hidden y los cortaría por la cintura.
   El bloque de texto de la intro mide 535 px como mucho y va centrado,
   así que a los lados sobra sitio de sobra en pantallas anchas. */
.agentes-grid-section {
  position: relative;
}

.ag-saludo {
  position: absolute;
  top: 0;
  z-index: 1;
  height: auto;
  width: clamp(130px, 13vw, 220px);
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.45));
  /* Ojo: el desplazamiento hacia arriba NO va en `transform`, sino en el
     `top` de cada modificador. La animación de entrada anima `y` con
     GSAP, que reescribe la matriz de transform por completo: un
     translateY aquí se perdería en cuanto arrancara el tween y los
     muñecos caerían de golpe fuera del hueco. */
}

/* El copiloto saluda con la mano del lado derecho del dibujo, así que a
   la izquierda su gesto apunta hacia el centro. Con el asistente pasa lo
   contrario: su mano está a la izquierda, y por eso va a la derecha. */
.ag-saludo--copiloto {
  left: clamp(16px, 6vw, 120px);
  /* 913x1080 -> el alto es 1.183 veces el ancho. Subimos el 78% de ese
     alto para que quede de pie sobre la línea: 0.78 x 1.183 = 0.923. */
  top: calc(clamp(130px, 13vw, 220px) * -0.923);
}

.ag-saludo--asistente {
  right: clamp(16px, 6vw, 120px);
  /* 891x1080 -> 1.212 veces el ancho; 0.78 x 1.212 = 0.945. */
  top: calc(clamp(130px, 13vw, 220px) * -0.945);
}

/* Por debajo de este ancho la intro ocupa casi todo y los muñecos se le
   montarían encima. */
@media (max-width: 1080px) {
  .ag-saludo {
    display: none;
  }
}



.agente-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  width: fit-content;
  margin-bottom: 16px;
}

.agente-card__status--live {
  background: rgba(36, 155, 240, 0.12);
  color: #0774c4;
}

.agente-card__status--pilot {
  background: rgba(58, 31, 107, 0.1);
  color: var(--ag-violet);
}

.agente-card__status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.agente-card h3 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 27px);
  color: var(--ag-ink);
  margin: 0 0 10px;
}

.agente-card p.agente-card__desc {
  font-family: var(--font-sans-regular), system-ui, sans-serif;
  color: var(--ag-muted);
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 20px;
}

.agente-card__features {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.agente-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-sans-regular), system-ui, sans-serif;
  font-size: 14.5px;
  color: var(--ag-ink);
  line-height: 1.5;
}

.agente-card__features svg {
  flex: none;
  margin-top: 2px;
  color: var(--ag-gold);
}

.agente-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ag-ink);
  margin-top: auto;
}

.agente-card__cta svg {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.agente-card:hover .agente-card__cta svg {
  transform: translateX(5px);
}

.agentes-page--atmos .agentes-grid-section {
  background: transparent;
}

.agentes-page--atmos .agentes-grid-intro h2 {
  color: var(--cp-on-band);
}

.agentes-page--atmos .agentes-grid-intro p {
  color: var(--cp-on-band-soft);
}

.agentes-page--atmos .agente-card {
  background: rgba(5, 22, 40, 0.82);
  border-color: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.agentes-page--atmos .agente-card::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -18%;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(52px);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.agentes-page--atmos .agente-card--marketing::before {
  background: radial-gradient(closest-side, #249bf0 0%, rgba(36, 155, 240, 0) 76%);
}

.agentes-page--atmos .agente-card--copiloto::before {
  background: radial-gradient(closest-side, #8b4fb0 0%, rgba(139, 79, 176, 0) 76%);
}

.agentes-page--atmos .agente-card:hover::before,
.agentes-page--atmos .agente-card:focus-visible::before {
  opacity: 0.65;
  transform: scale(1.12);
}

.agentes-page--atmos .agente-card:hover,
.agentes-page--atmos .agente-card:focus-visible {
  box-shadow: 0 24px 60px rgba(2, 10, 22, 0.55);
}

.agentes-page--atmos .agente-card>* {
  position: relative;
  z-index: 1;
}

.agentes-page--atmos .agente-card h3,
.agentes-page--atmos .agente-card__cta {
  color: var(--cp-on-band);
}

.agentes-page--atmos .agente-card p.agente-card__desc,
.agentes-page--atmos .agente-card__features li {
  color: var(--cp-on-band-soft);
}

.agentes-page--atmos .agente-card__status--live {
  background: rgba(36, 155, 240, 0.2);
  color: #9ad4ff;
}

.agentes-page--atmos .agente-card__status--pilot {
  background: rgba(139, 79, 176, 0.24);
  color: #e0bff2;
}

.agentes-page--asistente {
  --as-accent: #249bf0;
  --as-accent-deep: #0774c4;
  --as-chat-ink: #1a1a2e;
  --as-bot-bg: #f3f0ff;
}

.agentes-page--asistente .ag-atmos .agentes-orb--2::before {
  background: radial-gradient(closest-side, #249bf0 0%, #249bf0 18%, rgba(36, 155, 240, 0) 90%);
  opacity: 0.62;
}

.agentes-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.ag-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 15.5px;
  font-weight: 500;
  padding: 14px 26px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.ag-btn svg {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.ag-btn:hover svg,
.ag-btn:focus-visible svg {
  transform: translateX(4px);
}

.ag-btn--primary {
  background: var(--ag-yellow);
  color: #191308;
  box-shadow: 0 10px 34px rgba(245, 197, 66, 0.26);
}

.ag-btn--primary:hover,
.ag-btn--primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(245, 197, 66, 0.36);
}

.ag-btn--ghost {
  color: var(--ag-text-light);
  border-color: rgba(244, 238, 233, 0.3);
}

.ag-btn--ghost:hover,
.ag-btn--ghost:focus-visible {
  border-color: var(--ag-text-light);
  background: rgba(244, 238, 233, 0.07);
}

.ag-btn--onlight {
  background: var(--ag-ink);
  color: #fff;
}

.ag-btn--onlight:hover,
.ag-btn--onlight:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(20, 26, 36, 0.26);
}

.ag-split {
  background: #fff;
  padding: clamp(72px, 11vh, 132px) clamp(20px, 5vw, 56px);
}

.ag-split--tinted {
  background: #f7f6f9;
}

.ag-split__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}

.ag-split--flip .ag-split__media {
  order: -1;
}

@media (max-width: 940px) {
  .ag-split__inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .ag-split--flip .ag-split__media {
    order: 0;
  }
}

.ag-prose h2 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ag-ink);
  margin: 0 0 18px;
}

.ag-prose p {
  font-family: var(--font-sans-regular), system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--ag-muted);
  margin: 0 0 16px;
  max-width: 46ch;
}

.ag-prose strong {
  color: var(--ag-ink);
  font-weight: 600;
}

.ag-chat {
  --as-accent: #249bf0;
  --as-accent-deep: #0774c4;
  --as-chat-ink: #1a1a2e;
  --as-bot-bg: #f3f0ff;

  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(63, 113, 207, 0.2);
  border: 1px solid rgba(20, 26, 36, 0.07);
}

.ag-chat__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--as-chat-ink), #16213e);
  color: #fff;
}

.ag-chat__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* Blanco, no el degradado de acento: la cabeza es azul marino y encima
     del color se difuminaba. Es el mismo criterio que sigue el chat real
     del widget, y estas maquetas deben parecerse a él. */
  background: #fff;
  flex: none;
  overflow: hidden;
}

.ag-chat__avatar img {
  /* Medidas fijas y no 100%: el contenedor centra con place-items, así
     que el elemento no se estira y un porcentaje de altura caería a
     `auto`, deformando la imagen (295x324, más alta que ancha). */
  width: 29px;
  height: 29px;
  object-fit: contain;
  display: block;
}

.ag-chat__name {
  font-family: var(--font-sans-regular), system-ui, sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.2;
  color: #fff;
}

.ag-chat__status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans-regular), system-ui, sans-serif;
  font-size: 12px;
  color: #fff;
  margin-top: 2px;
}

.ag-chat__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ddc84;
}

.ag-chat__body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
}

.ag-msg {
  max-width: 84%;
  font-family: var(--font-sans-regular), system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  padding: 11px 15px;
  border-radius: 16px;
}

.ag-msg--bot {
  background: var(--as-bot-bg);
  color: var(--ag-ink);
  border-bottom-left-radius: 5px;
  align-self: flex-start;
}

.ag-msg--user {
  background: var(--as-accent);
  color: #fff;
  border-bottom-right-radius: 5px;
  align-self: flex-end;
}

.ag-msg strong {
  font-weight: 600;
}

.ag-chat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 18px 16px;
}

.ag-chip {
  font-family: var(--font-sans-regular), system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--as-accent-deep);
  background: #fff;
  border: 1px solid rgba(36, 155, 240, 0.32);
  border-radius: 999px;
  padding: 7px 13px;
}

.ag-chat__foot {
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(20, 26, 36, 0.07);
}

.ag-chat__fake-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(20, 26, 36, 0.12);
  border-radius: 999px;
  padding: 9px 9px 9px 16px;
  font-family: var(--font-sans-regular), system-ui, sans-serif;
  font-size: 13.5px;
  color: #8b8f95;
}

.ag-chat__send {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--as-accent), var(--as-accent-deep));
  flex: none;
}

.ag-chat__disclaimer {
  margin: 10px 0 0;
  text-align: center;
  font-family: var(--font-sans-regular), system-ui, sans-serif;
  font-size: 11.5px;
  color: #9a9ea3;
}

.ag-knows {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ag-knows li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 15px 0;
  border-top: 1px solid rgba(20, 26, 36, 0.1);
  font-family: var(--font-sans-regular), system-ui, sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ag-muted);
}

.ag-knows li:last-child {
  border-bottom: 1px solid rgba(20, 26, 36, 0.1);
}

.ag-knows b {
  font-weight: 600;
  color: var(--ag-ink);
}

.ag-knows__mark {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--as-accent);
  transform: translateY(-2px);
}

.ag-close {
  position: relative;
  overflow: hidden;
  background: var(--ag-black);
  padding: clamp(80px, 13vh, 150px) clamp(20px, 5vw, 56px);
  text-align: center;
}

.ag-close__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
}

.ag-close h2,
.ag-close p {
  text-wrap: balance;
}

.ag-close h2 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ag-text-light);
  margin: 0 0 18px;
}

.ag-close p {
  font-family: var(--font-sans-regular), system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(244, 238, 233, 0.75);
  max-width: 52ch;
  margin: 0 auto 34px;
}

body.agentes-page--atmos {
  background: #072038;
}

.agentes-page--atmos #main-content.page {
  background: transparent;
}

.agentes-page--atmos .agentes-hero,
.agentes-page--atmos .ag-feature,
.agentes-page--atmos .ag-split,
.agentes-page--atmos .ag-close {
  background: transparent;
}

.agentes-page--atmos .agentes-hero__bg {
  display: none;
}

.ag-atmos {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(58% 52% at 10% 6%, rgba(115, 57, 144, 0.3), transparent 72%),
    radial-gradient(54% 48% at 92% 14%, rgba(49, 62, 180, 0.3), transparent 72%),
    radial-gradient(62% 52% at 16% 96%, rgba(90, 215, 223, 0.14), transparent 72%),
    radial-gradient(54% 48% at 88% 92%, rgba(49, 62, 180, 0.24), transparent 72%),
    #072038;
  --u: max(100vw, 100vh);
  --f: 0.7;
}

@media (orientation: portrait) {
  .ag-atmos {
    --f: 0.85;
  }
}

.ag-atmos__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 62% 85% at 50% 50%,
      rgba(7, 32, 56, 0.6) 0%,
      rgba(7, 32, 56, 0.34) 55%,
      rgba(7, 32, 56, 0.06) 100%);
}

.ag-atmos .agentes-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  inset: auto;
  border-radius: 50%;
  mix-blend-mode: normal;
  will-change: transform;
  animation: none;
  background: none;
  filter: none;
  opacity: 1;
}

.ag-atmos .agentes-orb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  filter: blur(40px);
}

.ag-atmos .agentes-orb--1 {
  width: calc(var(--u) * var(--f) * 1.5);
  height: calc(var(--u) * var(--f) * 0.95);
  transform: translate(-50%, -50%);
}

.ag-atmos .agentes-orb--1::before {
  background: radial-gradient(closest-side, #5ad7df 0%, #5ad7df 18%, rgba(90, 215, 223, 0) 90%);
  opacity: 0.55;
  animation: agentesDrift1 26s ease-in-out infinite;
}

.ag-atmos .agentes-orb--2 {
  width: calc(var(--u) * var(--f) * 1.25);
  height: calc(var(--u) * var(--f) * 1.25);
  transform: translate(-50%, -50%);
}

.ag-atmos .agentes-orb--2::before {
  background: radial-gradient(closest-side, #733990 0%, #733990 18%, rgba(115, 57, 144, 0) 90%);
  opacity: 0.88;
  animation: agentesDrift2 31s ease-in-out infinite;
}

.ag-atmos .agentes-orb--3 {
  width: calc(var(--u) * var(--f) * 1.3);
  height: calc(var(--u) * var(--f) * 1.3);
  transform: translate(-50%, -50%);
}

.ag-atmos .agentes-orb--3::before {
  background: radial-gradient(closest-side, #313eb4 0%, #313eb4 18%, rgba(49, 62, 180, 0) 90%);
  opacity: 0.85;
  animation: agentesDrift3 36s ease-in-out infinite;
}

.ag-atmos__noise {
  position: absolute;
  inset: 0;
  background-image: url("../images/agentes-ia/bg-noise.png");
  background-repeat: repeat;
  opacity: 0.18;
  mix-blend-mode: overlay;
}

@media (max-width: 700px) {
  .ag-atmos .agentes-orb::before {
    filter: blur(24px);
  }
}

.agentes-page--copiloto {
  --cp-navy: #0a2a4a;
  --cp-navy-deep: #072038;
  --cp-yellow: #f5c542;
  --cp-mist: #f4f7fa;
  --cp-band: #072038;
  --cp-band-alt: #0a2942;
}

.agentes-page--atmos {
  --cp-on-band: #fff5e9;
  --cp-on-band-soft: #ffffff;
}

.agentes-page--atmos .agentes-title,
.agentes-page--atmos .ag-close h2 {
  color: var(--cp-on-band);
}

.agentes-page--atmos .agentes-subtitle,
.agentes-page--atmos .ag-close p {
  color: var(--cp-on-band-soft);
}

.agentes-page--atmos .ag-status {
  color: var(--cp-on-band-soft);
  border-color: rgba(255, 255, 255, 0.34);
}

.agentes-page--atmos .agentes-scroll-cue {
  color: rgba(255, 255, 255, 0.72);
}

.agentes-page--atmos .ag-prose h2 {
  color: var(--cp-on-band);
}

.agentes-page--atmos .ag-prose p {
  color: var(--cp-on-band-soft);
}

.agentes-page--atmos .ag-prose strong,
.agentes-page--atmos .ag-knows b {
  color: var(--cp-on-band);
}

.agentes-page--atmos .ag-knows li {
  color: var(--cp-on-band-soft);
  border-top-color: rgba(255, 255, 255, 0.16);
}

.agentes-page--atmos .ag-knows li:last-child {
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

.agentes-page--atmos .ag-knows__mark {
  background: var(--ag-yellow);
}

.agentes-page--atmos .ag-btn--onlight {
  background: var(--cp-on-band);
  color: #191308;
}

.ag-feature {
  position: relative;
  overflow: hidden;
  background: transparent;
  padding: clamp(72px, 11vh, 130px) clamp(20px, 5vw, 56px);
}

.ag-feature__glow {
  position: absolute;
  inset: -16% -12%;
  z-index: -1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.75;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
      rgba(58, 31, 107, 0.95) 0%,
      rgba(29, 95, 158, 0.62) 46%,
      transparent 74%);
}

.ag-feature--warm .ag-feature__glow {
  background: radial-gradient(ellipse at center,
      rgba(245, 197, 66, 0.36) 0%,
      rgba(232, 184, 92, 0.2) 42%,
      transparent 72%);
}

.ag-feature__head {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto clamp(36px, 5.5vh, 62px);
  text-align: center;
}

.ag-feature__head h2 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 3.8vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--cp-on-band);
  margin: 0 0 16px;
  text-wrap: balance;
}

.ag-feature__head h2 em {
  font-style: normal;
  color: var(--cp-yellow);
}

.ag-feature__head p {
  font-family: var(--font-sans-regular), system-ui, sans-serif;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.65;
  color: var(--cp-on-band-soft);
  margin: 0 auto 14px;
  max-width: 62ch;
  text-wrap: pretty;
}

.ag-feature__head p:last-child {
  margin-bottom: 0;
}

.ag-feature__head strong {
  color: var(--cp-on-band);
  font-weight: 600;
}

.ag-feature__media {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
}

.ag-feature .ag-shot {
  border-color: rgba(238, 244, 250, 0.14);
  box-shadow:
    0 2px 0 rgba(238, 244, 250, 0.06) inset,
    0 30px 80px rgba(3, 12, 24, 0.6);
}

.ag-feature--pareja .ag-feature__inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}

.ag-feature--pareja .ag-feature__head {
  text-align: left;
  max-width: 46ch;
  margin: 0;
}

.ag-feature--pareja .ag-feature__head p {
  margin-left: 0;
  margin-right: 0;
}

.ag-feature__panel {
  border-radius: 22px;
  padding: clamp(26px, 4vw, 54px);
  display: grid;
  place-items: center;
  border: 1px solid rgba(238, 244, 250, 0.12);
  background:
    linear-gradient(158deg,
      rgba(58, 31, 107, 0.92) 0%,
      rgba(29, 95, 158, 0.5) 58%,
      rgba(7, 32, 56, 0.92) 100%);
}

.ag-feature__panel .ag-chat {
  max-width: 400px;
  width: 100%;
}

@media (max-width: 940px) {
  .ag-feature--pareja .ag-feature__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ag-feature--pareja .ag-feature__head {
    text-align: center;
    max-width: 62ch;
    margin: 0 auto;
  }
}

.ag-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans-regular), system-ui, sans-serif;
  font-size: 13.5px;
  color: rgba(244, 238, 233, 0.82);
  border: 1px solid rgba(244, 238, 233, 0.24);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: clamp(20px, 3vh, 30px);
}

.ag-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cp-yellow);
}

.ag-shot {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--cp-mist);
  border: 1px solid rgba(10, 42, 74, 0.14);
  box-shadow: 0 26px 66px rgba(10, 42, 74, 0.2);
}

.ag-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.ag-shot.is-pending {
  aspect-ratio: 16 / 9;
}

.ag-shot.is-pending img {
  display: none;
}

.ag-shot.is-pending .ag-shot__pending {
  display: grid;
}

.ag-shot__pending {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  place-items: center;
  padding: 24px;
  text-align: center;
  font-family: var(--font-sans-regular), system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: #6b7480;
  background: repeating-linear-gradient(45deg, #eef2f6 0 12px, #e6ecf2 12px 24px);
}

.ag-shot__pending code {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--cp-navy);
  word-break: break-all;
}

.ag-flipscene {
  --img-w: 1917;
  --img-h: 1078;
  --card-x: 637;
  --card-y: 357;
  --card-w: 647;
  --card-h: 352;
}

.ag-flipscene .ag-shot {
  perspective: 1600px;
}

.ag-flip__hole {
  position: absolute;
  left: calc(100% * (var(--card-x) - 3) / var(--img-w));
  top: calc(100% * (var(--card-y) - 3) / var(--img-h));
  width: calc(100% * (var(--card-w) + 6) / var(--img-w));
  height: calc(100% * (var(--card-h) + 6) / var(--img-h));
  background: #fff;
}

.ag-flip__btn {
  position: absolute;
  left: calc(100% * var(--card-x) / var(--img-w));
  top: calc(100% * var(--card-y) / var(--img-h));
  width: calc(100% * var(--card-w) / var(--img-w));
  height: calc(100% * var(--card-h) / var(--img-h));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.ag-flip__inner {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
}

.ag-flipscene.is-flipped .ag-flip__inner {
  transform: rotateY(180deg);
}

.ag-flip__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(3, 12, 24, 0.22);
}

.ag-flip__face--back {
  transform: rotateY(180deg);
}

.ag-flip__crop {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.ag-flip__crop img {
  position: absolute;
  width: calc(100% * var(--img-w) / var(--card-w));
  height: auto;
  left: calc(-100% * var(--card-x) / var(--card-w));
  top: calc(-100% * var(--card-y) / var(--card-h));
  max-width: none;
}

.ag-flip__hint {
  display: block;
  width: fit-content;
  margin: 18px auto 0;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--cp-yellow, #f5c542);
  border: 1px solid rgba(245, 197, 66, 0.42);
  border-radius: 999px;
  padding: 9px 20px;
  animation: agFlipLatido 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes agFlipLatido {

  0%,
  100% {
    border-color: rgba(245, 197, 66, 0.42);
    box-shadow: 0 0 0 0 rgba(245, 197, 66, 0);
  }

  50% {
    border-color: rgba(245, 197, 66, 0.85);
    box-shadow: 0 0 22px 0 rgba(245, 197, 66, 0.22);
  }
}

.ag-flipscene.is-flipped .ag-flip__hint {
  animation: none;
  color: var(--cp-on-band-soft, var(--ag-muted));
  border-color: rgba(238, 244, 250, 0.22);
}

.ag-flipscene:hover .ag-flip__hint {
  border-color: var(--cp-yellow, #f5c542);
}

.ag-flip__btn:focus-visible {
  outline: 2px solid var(--as-accent, #249bf0);
  outline-offset: 6px;
  border-radius: 16px;
}

@media (prefers-reduced-motion: reduce) {

  .agentes-orb,
  .ag-atmos .agentes-orb::before,
  .agentes-scroll-cue svg,
  .ag-flip__hint {
    animation: none;
  }

  .ag-btn,
  .ag-btn svg,
  .agente-card,
  .ag-flip__inner {
    transition: none;
  }
}

/* El nombre del producto dentro del H1: lo necesita el buscador, pero no
   debe competir visualmente con el titular. Va encima, más pequeño y en
   el dorado de la marca. */
.agentes-title__marca {
  display: block;
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ag-gold, #FFDE59);
  margin-bottom: clamp(8px, 1.2vh, 14px);
  text-shadow: none;
}

/* ── Preguntas frecuentes ─────────────────────────────────────
   Con <details> nativo: sin JavaScript, accesible con teclado y con el
   texto siempre en el HTML, que es lo que necesita el buscador para
   leerlo aunque el acordeón esté cerrado. */
.ag-faq__head {
  margin-bottom: clamp(20px, 3vh, 34px);
}

.ag-faq__lista {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ag-faq__item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .18s, background .18s;
}

.ag-faq__item[open] {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--ag-gold, #e8b85c);
}

.ag-faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  font-size: clamp(15px, 1.7vw, 18px);
  font-weight: 600;
  color: var(--ag-text-light, #fff);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ag-faq__item summary::-webkit-details-marker {
  display: none;
}

/* Signo + que gira a × al abrir */
.ag-faq__item summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--ag-gold, #e8b85c);
  transition: transform .2s;
}

.ag-faq__item[open] summary::after {
  transform: rotate(45deg);
}

.ag-faq__respuesta {
  padding: 0 22px 20px;
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}

.ag-faq__respuesta p {
  margin: 0 0 12px;
}

.ag-faq__respuesta p:last-child {
  margin-bottom: 0;
}

/* La tabla comparativa se desplaza sola en móvil en lugar de
   desbordar la página. */
.ag-faq__tabla-wrap {
  overflow-x: auto;
  margin-top: 14px;
}

.ag-faq__tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(13px, 1.4vw, 14.5px);
  min-width: 480px;
}

.ag-faq__tabla th,
.ag-faq__tabla td {
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.ag-faq__tabla thead th {
  background: rgba(255, 255, 255, 0.07);
  color: var(--ag-text-light, #fff);
  font-weight: 700;
}

.ag-faq__tabla tbody td:first-child {
  color: var(--ag-text-light, #fff);
  font-weight: 600;
}

/* Fecha de actualización al pie del cierre: señal de frescura discreta. */
.ag-close__fecha {
  margin-top: clamp(22px, 3vh, 34px);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* ── Mascotas del Copiloto ────────────────────────────────────
   Decorativas. Se colocan en el espacio que las columnas de texto
   dejan libre en pantallas anchas, nunca encima de lo que hay que
   leer, y desaparecen en cuanto ese espacio deja de existir. */
.ag-mascota {
  position: absolute;
  z-index: 1;
  height: auto;
  pointer-events: none;
  user-select: none;
  /* Las ilustraciones vienen recortadas al contorno; una sombra suave
     las asienta sobre el fondo en vez de dejarlas flotando. */
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45));
}

/* Hero: saluda desde el hueco de la izquierda, que es donde los tres
   orbes de la atmósfera concentran su luz y la silueta oscura del
   personaje recorta mejor.
   Su marco es .agentes-hero__content, no la sección: `bottom: 0` lo deja
   apoyado en la última línea del texto y sigue solo a cualquier cambio de
   titular. El horizontal, en cambio, se mide desde el borde de la ventana
   como antes: `50% - 50vw` es la distancia del bloque centrado a ese borde
   (50% es media anchura del bloque), y encima va el mismo margen de siempre.
   z-index negativo: el muñeco queda por detrás del texto sin salirse del
   contexto de apilado del bloque, así que sigue por encima del fondo. */
.ag-mascota--hero {
  bottom: 0;
  left: calc(50% - 50vw + clamp(10px, 4vw, 70px));
  width: clamp(150px, 15vw, 250px);
  z-index: -1;
}

/* Avisos: asoma por detrás del panel del chat, del lado contrario al
   globo de diálogo para que este no quede recortado. */
.ag-mascota--avisos {
  left: -6%;
  bottom: -8%;
  width: clamp(160px, 17vw, 260px);
  z-index: 0;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.4));
}

/* La sección recorta su contenido para contener el resplandor, pero el
   muñeco tiene que sobresalir por la derecha de la captura. `body` ya
   lleva overflow-x:hidden, así que soltar el recorte aquí no puede
   provocar barra horizontal. */
.ag-feature--rebosa {
  overflow: visible;
}

/* Agarrado a la esquina superior derecha de la captura de la consigna.
   El dibujo trae su propio filo con esquina redondeada, y su vértice cae
   al 56.37% desde el borde derecho del archivo y al 54.54% desde el
   superior (medido sobre el canal alfa: la arista vertical arranca en
   x=380 y la horizontal termina en y=589, de 871x1080). Anclamos el
   elemento a la esquina y lo desplazamos por esas fracciones: como
   translate() se calcula sobre el propio tamaño del elemento, el vértice
   queda clavado en la esquina sea cual sea el ancho.
   El ancho va en % del contenedor, no en vw, para que el muñeco escale
   con la captura y el grosor de ambos filos siga cuadrando. */
.ag-mascota--consigna {
  top: 0;
  right: 0;
  /* El 56.37% del dibujo queda a la derecha del filo, así que necesita ese
     hueco libre entre la captura y el borde de la ventana. Ese hueco es el
     relleno de la sección, más lo que sobre al toparse la captura en 1180.
     Donde no alcanza, el muñeco se encoge en vez de salir cortado: `body`
     recorta en el borde del viewport. El factor 1.7 (en vez de
     1/0.5637 = 1.774) deja margen para la barra de desplazamiento, que
     100vw cuenta y la maqueta no. */
  width: min(21%, calc(max(clamp(20px, 5vw, 56px), (100vw - 1180px) / 2) * 1.7));
  transform: translate(56.37%, -54.54%);
  z-index: 2;
  filter: drop-shadow(0 12px 26px rgba(10, 42, 74, 0.35));
}

/* Por debajo de este ancho las columnas ocupan todo y las mascotas se
   montarían sobre el texto. */
@media (max-width: 1100px) {
  .ag-mascota--hero {
    display: none;
  }
}

@media (max-width: 900px) {
  .ag-mascota--avisos {
    display: none;
  }
}

/* El muñeco sólo cabe a un tamaño legible cuando sobran unos 90 px a la
   derecha de la captura, y eso ocurre a partir de ~1360 px de ventana.
   Por debajo la fórmula lo encogería hasta volverlo un borrón, así que
   preferimos no mostrarlo: es decoración, no información. */
@media (max-width: 1360px) {
  .ag-mascota--consigna {
    display: none;
  }
}

/* ══ Mascotas de la página del Asistente ════════════════════════════
   Ninguna se coloca con `transform`: la animación de entrada anima `y`
   con GSAP, que reescribe la matriz de transform por completo, y un
   desplazamiento puesto aquí se perdería al arrancar el tween. */

/* Hero: su marco es .agentes-hero__content, no la sección. El hero
   centra ese bloque con flex, así que `bottom: 0` la deja apoyada en la
   última línea del texto y sigue sola a cualquier cambio de titular.
   El horizontal se mide desde el borde de la ventana: `50% - 50vw` es la
   distancia del bloque centrado hasta ese borde (50% es media anchura
   del bloque), y encima va el margen deseado. */
.ag-mascota--as-hero {
  bottom: 0;
  right: calc(50% - 50vw + clamp(10px, 4vw, 70px));
  width: clamp(150px, 15vw, 250px);
  z-index: -1;
}

/* Bloque invertido: el muñeco cuelga de .ag-split__media, la columna que
   contiene la maqueta de chat y que mide exactamente lo mismo que ella.
   Por eso `bottom: 0` lo deja a la altura del pie del chat, y no hundido
   contra el borde de la sección como pasaría anclándolo a esta.
   El `left` negativo lo saca de la columna hacia el margen: la maqueta va
   centrada dentro de ella y deja unos 69 px libres a cada lado.
   z-index 0 lo pone por DETRÁS del chat, que es lo que lo hace leerse
   como asomado y no pegado al lado. */
.ag-split--conmascota .ag-split__media {
  position: relative;
}

.ag-mascota--as-trabajo {
  left: -120px;
  bottom: 0;
  width: clamp(100px, 10vw, 165px);
  z-index: 0;
  filter: drop-shadow(0 14px 30px rgba(10, 42, 74, 0.28));
}

/* Cierre: cuelga de .ag-close__inner, así que `bottom: 0` lo alinea con
   el pie del bloque de texto.
   Ese bloque mide 720 px y va centrado, de modo que `50% - 50vw` da la
   distancia hasta el borde de la ventana (50% es media anchura del
   bloque) y encima se suma el margen que queremos dejar. */
.ag-mascota--as-cierre {
  bottom: 0;
  right: calc(50% - 50vw + clamp(10px, 5vw, 110px));
  width: clamp(120px, 12vw, 200px);
}

/* Por debajo de estos anchos las columnas ocupan todo el ancho y las
   mascotas se montarían sobre el texto. El bloque invertido apila a
   940 px, así que la suya desaparece antes que las otras dos. */
@media (max-width: 1080px) {

  .ag-mascota--as-hero,
  .ag-mascota--as-cierre {
    display: none;
  }
}

@media (max-width: 1000px) {
  .ag-mascota--as-trabajo {
    display: none;
  }
}