/* Wots · Chief of Agents — page-producto.css
   Solo /producto. Requiere base.css + pages.css. Prefijos: .prod-* (página). */

/* ---- Índice de módulos (pegado bajo la nav en todos los tamaños) ---- */
.prod-index { position: sticky; top: var(--nav-h); z-index: 30; background: rgba(2,8,23,.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.prod-index .container { display: flex; align-items: center; gap: 18px; }
.prod-index__t { flex: none; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.prod-index__list { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-block: 8px; }
.prod-index__list::-webkit-scrollbar { display: none; }
.prod-index__list li { flex: none; }
.prod-index__list a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); white-space: nowrap; border: 1px solid transparent; transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
.prod-index__list a .icon { color: var(--green-2); opacity: .8; }
/* Ítem activo: con JS lo marca el IntersectionObserver de page-producto.js (aria-current);
   sin JS, el respaldo es :target (por eso la regla :target se apaga cuando hay JS). */
.prod-index__list a[aria-current="true"] { color: var(--ink); background: var(--green-a10); border-color: var(--green-a35); }
html:not(.js) body:has(#multicanalidad:target) .prod-index a[href="#multicanalidad"], html:not(.js) body:has(#agentes:target) .prod-index a[href="#agentes"], html:not(.js) body:has(#inbox:target) .prod-index a[href="#inbox"], html:not(.js) body:has(#flujos:target) .prod-index a[href="#flujos"], html:not(.js) body:has(#pipelines:target) .prod-index a[href="#pipelines"], html:not(.js) body:has(#analitica:target) .prod-index a[href="#analitica"], html:not(.js) body:has(#wotshub:target) .prod-index a[href="#wotshub"] { color: var(--ink); background: var(--green-a10); border-color: var(--green-a35); }
/* html ya trae scroll-padding-top: nav + 16px; aquí solo se suma la altura del índice sticky */
.prod-page .module { scroll-margin-top: 58px; }
@media (max-width: 1023px) {
  /* Sigue pegado: es la única forma de saltar de un módulo a otro sin volver 5.000 px arriba. */
  .prod-index .container { width: 100%; padding-left: var(--gutter); }
  .prod-index__t { display: none; }
  .prod-index__list { padding-right: var(--gutter); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .prod-index__list a { min-height: 44px; border-color: var(--line); background: var(--surface); }
  .prod-index__list a[aria-current="true"] { border-color: var(--green-a35); background: var(--green-a10); }
  .prod-page .module { scroll-margin-top: 62px; }
}

/* ---- Intro ---- */
.prod-intro { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 4vw, 64px); align-items: start; padding-block: clamp(28px, 4vw, 56px) clamp(16px, 2vw, 24px); }
.prod-intro__aside .card__title { font-size: 1.0625rem; }
@media (max-width: 1024px) { .prod-intro { grid-template-columns: 1fr; } }

/* ---- Módulos: texto ---- */
.prod-page .module__grid { align-items: start; }
.prod-page .module__head h2 { text-wrap: balance; }
.prod-page .module__dl dd a { color: var(--green-2); text-decoration: underline; text-decoration-color: rgba(74,222,128,.4); text-underline-offset: 3px; }
.prod-caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-2); }
.prod-caps li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; }
.prod-caps li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: var(--green-a16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ADE80' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat; }
@media (max-width: 480px) { .prod-caps { grid-template-columns: 1fr; } }

/* ---- Bloque «Se conecta» ---- */
.prod-connect { padding-block: clamp(28px, 4vw, 56px); border-top: 1px solid var(--line); }
.prod-connect .callout p + p { margin-top: 6px; }
.prod-connect .callout .link-arrow { padding: 4px 0; text-decoration: none; }

@media (hover: hover) and (pointer: fine) {
  .prod-index__list a:hover { color: var(--ink); border-color: var(--green-a35); }
}

/* ---- Cabecera de página ----
   A 480 px y menos el H1 caía en 4 líneas (a 390 y a 360, el ancho real del parque Android chileno):
   cuatro puntos menos de cuerpo y balance de líneas lo dejan en 3 sin tocar el copy. */
@media (max-width: 480px) {
  .prod-page .page-header h1 { font-size: 28px; letter-spacing: -.032em; text-wrap: balance; }
}
@media (max-width: 380px) { .prod-page .page-header h1 { font-size: 26px; } }

/* ---- Precio (la P/R de la home, con FAQPage propio) ---- */
.prod-faq { border-top: 1px solid var(--line); }
.prod-faq .block__foot { color: var(--muted); font-size: var(--fs-sm); }
.prod-faq .block__foot .link-arrow { padding: 4px 0; text-decoration: none; }