/*
 * «Para agentes» (v2, 24-sep-2026). Lleva la piel de la portada v4: reutiliza TAL CUAL las piezas de
 * `web/inicio.css` (`.web-hero*`, `.web-encabezado*`, `.web-num`, `.web-estacion-rotulo`,
 * `.web-pregunta*`, `.web-cierre*`) y la tarjeta real de la app (`tarjeta.css`). Aqui solo va lo
 * propio de esta pagina: la conversacion del hero, las rejillas de lecturas, puntos y pasos, y sus
 * ajustes a <=900px. Mismo aviso que `base.css`: Propshaft mete este fichero en la app entera, asi
 * que todo selector lleva el prefijo `.web-` o `.web` de ancestro.
 *
 * Lo que se fue con la v2: la escena de la API personal (`.web-agentes-escena*`), el tile unico de
 * «dotoo API» (`.web-agentes-tile*`) y el aviso final (`.web-agentes-aviso*`), sustituidos por la
 * conversacion, las cuatro lecturas y el cierre de la portada.
 */

/* ---------- 1. Hero ---------- */
/* La rejilla es la de la portada; la columna del arte baja de 540 a 480 porque la conversacion es
   una ventana de texto, no una postal. */
.web-agentes-hero .web-hero-cont{ grid-template-columns: minmax(0, 1fr) 480px; }
.web .web-agentes-estado{ display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.web-agentes-acciones{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

/* ---------- 2. La conversacion ---------- */
/* Una ventana con el chasis de la app (contorno fino, radio 26, sombra dura) y dos burbujas: la
   tuya a la derecha en vainilla —el color de «tu» en la lista de miembros del hero de la portada—
   y la del agente a la izquierda, en blanco, con las dos tarjetas de reto dentro. */
.web-agentes-conversacion{ margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.web-agentes-ventana{
  display: flex; flex-direction: column; gap: 14px; padding: 22px 20px;
  background: var(--fondo); border: var(--contorno) solid var(--tinta); border-radius: 26px;
  box-shadow: 0 2px 0 var(--som);
}
.web-agentes-burbuja{ margin: 0; border: var(--contorno) solid var(--tinta); border-radius: 20px; }
.web .web-agentes-burbuja--tuya{
  align-self: flex-end; max-width: 80%; padding: 10px 16px; border-bottom-right-radius: 6px;
  background: var(--vainilla-cl); font-size: 15px; line-height: 1.4; color: var(--tinta);
}
.web-agentes-burbuja--agente{
  align-self: stretch; display: flex; flex-direction: column; gap: 10px;
  padding: 14px 14px 16px; border-bottom-left-radius: 6px; background: var(--fondo);
}
.web .web-agentes-burbuja--agente > p{ font-size: 15px; line-height: 1.45; color: var(--tinta); padding: 0 2px; }
.web .web-agentes-burbuja--agente > .web-agentes-quien{
  font-size: 11px; font-weight: var(--peso-fuerte); letter-spacing: .08em; color: var(--tinta3);
}
.web-agentes-retos{ display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.web-agentes-retos .tarjeta{ margin-bottom: 0; }
.web-agentes-retos .t-meta > .t-descripcion{ font-size: 12.5px; }
/* «También por MCP» en las lecturas que sirve el MCP remoto: el lavanda claro de los rótulos. */
.web-agentes-mcp-chip{
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  background: var(--lavanda-cl); border: var(--contorno) solid var(--tinta); border-radius: 999px;
  font-size: 11px; font-weight: var(--peso-fuerte); color: var(--tinta);
}
/* `ventana_abierta`: el chip «+1» del hero de la portada, en menta claro. */
.web-agentes-hoy{
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  background: var(--menta-cl); border: var(--contorno) solid var(--tinta); border-radius: 999px;
  font-size: 11px; font-weight: var(--peso-fuerte); color: var(--tinta);
}
.web .web-agentes-nota{ padding: 0 8px; font-size: 13px; line-height: 1.5; font-weight: 700; color: var(--tinta2); }

/* ---------- 3. Que puede consultar ---------- */
.web-agentes-consulta{ padding: 96px 0 48px; background: var(--fondo); --cinta: var(--cielo); }
.web-agentes-lecturas{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
  margin: 0; padding: 0; list-style: none;
}
.web-agentes-lecturas .tarjeta{ height: 100%; margin-bottom: 0; }
.web-agentes-lecturas .t-meta > .t-descripcion{ -webkit-line-clamp: 3; font-size: 13px; }
/* «Abrir página completa»: debajo de las cinco lecturas de muestra, hacia `/agentes/operaciones`. */
.web .web-agentes-completa{ margin-top: 24px; }
/* La subpágina `/agentes/operaciones`: cabecera de la referencia (`api.css`) y la lista entera. */
.web .web-agentes-entradilla{ font-size: 19px; line-height: 1.55; font-weight: 700; color: var(--tinta2); text-wrap: pretty; }
.web-agentes-consulta--completa{ padding-top: 56px; }

/* ---------- 4. Tu mandas ---------- */
/* El lavanda claro de la seccion de la mascota de la portada: un tramo de color entre dos tramos
   blancos, sin separadores. */
.web-agentes-control{ padding: 88px 0; background: var(--lavanda-cl); }
.web-agentes-puntos{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  margin: 0; padding: 0; list-style: none;
}
.web-agentes-punto{ display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 22px; border-radius: 20px; }
.web-agentes-punto svg{
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px;
  fill: none; stroke: var(--menta-d); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.web-agentes-punto span{ font-size: 15px; line-height: 1.5; font-weight: 700; color: var(--tinta2); }
.web-agentes-punto b{ display: block; margin-bottom: 4px; font-size: 16px; font-weight: var(--peso-fuerte); color: var(--tinta); }

/* ---------- 5. Como se pide ---------- */
.web-agentes-pasos{ padding: 96px 0 88px; background: var(--fondo); --cinta: var(--cielo); }
.web-agentes-pasos-cuerpo{
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: start;
}
.web-agentes-pasos-lista{
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px;
  margin: 0; padding: 0; list-style: none;
}
/* El video con el chasis de la ventana de la conversacion (contorno fino, radio, sombra dura). */
.web-agentes-video{
  margin: 0; overflow: hidden; background: var(--fondo);
  border: var(--contorno) solid var(--tinta); border-radius: 26px; box-shadow: 0 2px 0 var(--som);
}
.web-agentes-video video{ display: block; width: 100%; height: auto; }
/* «Claude | ChatGPT» sobre el video (26-sep-2026): el `.opciones`/`.op` de la app (§ 13 de
   `application.css`) redeclarado aqui, porque la web solo enlaza `stylesheets/web/`. Radio de verdad
   e invisible (teclado y lector lo encuentran), y su :checked pinta la pastilla en --vainilla con
   sombra --vainilla-s; la no elegida en --pista con --som. Cero JS: el mismo :checked esconde el
   video de la otra herramienta. */
.web-agentes-demo{ position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.web-agentes-demo > input{ position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.web-agentes-demo-opciones{ display: flex; gap: 7px; }
.web-agentes-demo-op{
  flex: 1 1 0; min-height: 44px; display: flex; align-items: center; justify-content: center;
  background: var(--pista); border: var(--contorno) solid var(--tinta); border-radius: 999px;
  box-shadow: 0 1.5px 0 var(--som); cursor: pointer;
  font-size: 13px; font-weight: var(--peso-fuerte); letter-spacing: -.01em; color: var(--tinta2);
}
.web-agentes-demo-op:active{ transform: translateY(0.5px); box-shadow: 0 1px 0 var(--som); }
#web-agentes-demo-claude:checked ~ .web-agentes-demo-opciones [for="web-agentes-demo-claude"],
#web-agentes-demo-chatgpt:checked ~ .web-agentes-demo-opciones [for="web-agentes-demo-chatgpt"]{
  background: var(--vainilla); box-shadow: 0 1.5px 0 var(--vainilla-s); color: var(--tinta);
}
#web-agentes-demo-claude:focus-visible ~ .web-agentes-demo-opciones [for="web-agentes-demo-claude"],
#web-agentes-demo-chatgpt:focus-visible ~ .web-agentes-demo-opciones [for="web-agentes-demo-chatgpt"]{
  outline: 4px solid var(--lavanda-d); outline-offset: 3px;
}
#web-agentes-demo-claude:checked ~ .web-agentes-video .web-agentes-video-chatgpt,
#web-agentes-demo-chatgpt:checked ~ .web-agentes-video .web-agentes-video-claude{ display: none; }
.web-agentes-paso{ display: flex; align-items: flex-start; gap: 16px; }
.web-agentes-paso .web-num{ flex: none; }
.web-agentes-paso-cuerpo{ display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 6px; }
.web .web-agentes-paso .web-estacion-nombre{ margin: 0; }
.web .web-agentes-paso-texto{ margin: 0; font-size: 16px; line-height: 1.5; text-wrap: pretty; }

/* ---------- 6. Cierre ---------- */
/* Sin tope de ancho: ver § 6b. */
.web .web-agentes-cierre .web-inicio-p{ max-width: none; }

/* ---------- 6b. Titulares a todo el ancho ---------- */
/* Decisión de Guillem (26-sep-2026): en Para agentes los h1/h2 y sus subtítulos ocupan todo el
   ancho de su contenedor. Las piezas son las compartidas de `inicio.css` (`.web-encabezado` 640px,
   `.web-encabezado-sub` 540px, `.web-hero-sub` 520px, `text-wrap: balance` en h1/h2), que en la
   portada se quedan como están: aquí se anulan solo bajo `.web-agentes` (/agentes y
   /agentes/operaciones, es y en). La referencia /agentes/api hace lo mismo en `api.css`. */
.web-agentes .web-encabezado{ max-width: none; }
.web .web-agentes .web-encabezado-sub,.web .web-agentes-hero .web-hero-sub{ max-width: none; }
/* Los párrafos de cuerpo también (Guillem, 26-sep-2026): las respuestas de preguntas
   (`.web-pregunta p`, 620px en `inicio.css`). */
.web .web-agentes .web-pregunta p{ max-width: none; }
.web-agentes .web-encabezado h2,.web-agentes-hero .web-hero-texto h1,
.web-agentes .web-cierre-cont h2{ text-wrap: wrap; }

/* ---------- 7. <=900px: se apila ---------- */
@media (max-width: 900px){
  .web-agentes-hero .web-hero-cont{ grid-template-columns: minmax(0, 1fr); }
  /* Los dos botones ocupan la columna, como `.cta` dentro de la app. */
  .web-agentes-acciones{ flex-direction: column; align-self: stretch; }

  .web-agentes-ventana{ padding: 16px 12px; border-radius: 22px; }
  .web .web-agentes-burbuja--tuya{ font-size: 14px; }
  .web-agentes-burbuja--agente{ padding: 12px 10px 14px; }
  .web .web-agentes-burbuja--agente > p{ font-size: 14px; }

  .web-agentes-consulta{ padding: 56px 0 32px; }
  .web-agentes-lecturas{ grid-template-columns: minmax(0, 1fr); gap: 12px; }

  .web-agentes-control{ padding: 56px 0; }
  .web-agentes-puntos{ grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .web-agentes-punto{ padding: 16px 16px 18px; }

  .web-agentes-pasos{ padding: 56px 0 48px; }
  .web-agentes-pasos-cuerpo{ grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .web-agentes-pasos-lista{ gap: 20px; }
  .web-agentes-video{ border-radius: 20px; }
  .web .web-agentes-paso-texto{ font-size: 15px; }
}

@media (min-width: 901px) and (max-width: 1100px){
  .web-agentes-puntos{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}