/* ==========================================================================
   IdeaCenter — capa propia sobre la plantilla Amplio (template.min.css)
   Se carga después de la plantilla. Colores: skin "mint" de la plantilla
   (--brand #7ef0c4, --brand-2 #1f5eff, --ink #121212, --paper #f5f2eb).
   Acá solo va lo que la plantilla no trae: piezas del producto (bandeja,
   bloque de código), estados sin imagen y utilidades que reemplazan estilos inline.
   ========================================================================== */

/* ─── Skin "ideacenter": colores del logo nuevo (docs/logos_ideacenter) ───
   Degradado del logo azul #3D5AFE → violeta #6A3DF0, tinta #1C1B33 y lila #8C9BFF.
   --brand  = relleno claro con texto tinta (botón principal, resaltados): lila azulado.
   --brand-2 = color fuerte (enlaces, acentos): el azul del logo.  --coral = el violeta.
   El papel deja el beige de Amplio por un blanco azulado que acompaña al azul.
   Por ahora solo lo usa la portada (layouts/app → $newBrand), para validarlo.      */
[data-skin="ideacenter"] {
  --brand: #a9b5ff;
  --brand-2: #3d5afe;
  --coral: #6a3df0;
  --ink: #1c1b33;
  --on-brand-2: #ffffff;
}
[data-bs-theme="light"][data-skin="ideacenter"] {
  --paper: #f5f6fb;
  --surface: #ffffff;
  --surface-2: #e9ebf7;
  --muted: #5c5f78;
  --line: rgba(28, 27, 51, .12);
  --bs-link-color-rgb: 28, 27, 51;
}
[data-bs-theme="dark"][data-skin="ideacenter"] {
  --paper: #0e0f1f;
  --surface: #16182e;
  --surface-2: #1e2140;
  --muted: #a4a7c2;
  --line: rgba(233, 235, 247, .12);
}

/* Logo nuevo (sections/brand-logo): a color en claro, blanco en oscuro. */
.brand-logo { display: block; height: 42px; width: auto; }
.brand-logo--white { display: none; }
[data-bs-theme="dark"] .brand-logo--color { display: none; }
[data-bs-theme="dark"] .brand-logo--white { display: block; }
.site-footer .brand-logo { height: 46px; }
.pl-logo-mark { width: 64px; height: 64px; }

/* Cuadros de íconos en todo el sitio: cuadro negro (tinta del logo) con ícono blanco, sin importar la variante is-*.
   Al pasar el mouse por la tarjeta, el cuadro toma el azul del logo. En oscuro se agrega un borde para que el cuadro
   no se pierda sobre la tarjeta. */
[data-skin="ideacenter"] :is(.h12-plat-ic, .h12-badge-ic, .mega-ico, .icon-card .ic, .contact-tile .ic, .sys-link-card .ic,
  .wg-hs-logo, .ic-srv-icon, .ic-quote-ic)[class] { background: #1c1b33; color: #fff; }
[data-skin="ideacenter"] :is(.mega-item:hover .mega-ico, .icon-card:hover .ic, .sys-link-card:hover .ic)[class] { background: #3d5afe; color: #fff; }
[data-bs-theme="dark"][data-skin="ideacenter"] :is(.h12-plat-ic, .h12-badge-ic, .mega-ico, .icon-card .ic, .contact-tile .ic,
  .sys-link-card .ic, .wg-hs-logo, .ic-srv-icon, .ic-quote-ic) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }

/* «Pedir demo ↗», «Leer el artículo ↗» y demás links con flecha sobre fondo claro: el lila no se lee, va en azul.
   Sobre fondos oscuros (promo del menú con foto, bandas .bg-ink) sigue en lila. */
[data-bs-theme="light"][data-skin="ideacenter"] .link-arrow:not(.mega-promo *, .bg-ink *) { color: var(--brand-2); }

/* Frases grandes (.statement) sobre fondo oscuro: la parte secundaria en violeta claro, no en gris. */
[data-skin="ideacenter"] .bg-ink .statement .faded { color: #c9d0ff; }

/* Footer: el fondo beige del skin "mint" pasa al gris azulado del skin nuevo. */
[data-skin="ideacenter"] .site-footer.ic-footer-compact { background: var(--surface-2); }

/* ─── Retrasos de animación (.reveal) sin estilos inline ─────────────── */
.rd-1 { --d: .08s; }
.rd-2 { --d: .16s; }
.rd-3 { --d: .24s; }
.rd-4 { --d: .32s; }

.ic-head-narrow { max-width: 680px; }
.ic-cta-text { max-width: 34rem; }

/* ─── Header: promo del mega-menú sin foto ───────────────────────────── */
.mega-promo.is-plain { background: var(--ink); color: #fff; border-radius: var(--radius-sm); display: flex; align-items: flex-end; min-height: 100%; text-decoration: none; }
.mega-promo.is-plain .mega-promo-body { position: static; padding: 1.25rem; display: grid; gap: .4rem; }
.mega-promo.is-plain small { color: rgba(255,255,255,.7); }
.mega-promo.is-plain .link-arrow { color: var(--brand); }
.mega-ico .fa, .mega-ico .fas, .mega-ico .far, .mega-ico .fab { font-size: 1rem; }

/* ─── Estados sin imagen ─────────────────────────────────────────────── */
.ic-photo-empty, .ic-media-empty, .ic-plat-ink {
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--brand-2), var(--ink));
  color: rgba(255,255,255,.85);
}
.ic-photo-empty i { font-size: clamp(4rem, 14cqw, 7rem); }
.ic-media-empty i { font-size: 2.6rem; }
.ic-plat-ink::after { display: none; }

/* ─── Hero: tarjetas del producto ────────────────────────────────────── */
.ic-tick-text b { font-size: 1.15em; }
.h12-mad-av { font-size: .75em; font-weight: 700; }
.ic-mad-bubbles { display: flex; flex-direction: column; gap: .45em; padding: .2em .85em .8em; }
.ic-bubble { max-width: 88%; padding: .5em .75em; border-radius: 1em; font-size: .74em; line-height: 1.4; }
.ic-bubble.is-bot { align-self: flex-start; background: color-mix(in srgb, var(--brand-2) 12%, var(--surface)); border-bottom-left-radius: .3em; }
.ic-bubble.is-me  { align-self: flex-end; background: color-mix(in srgb, var(--brand) 45%, var(--surface)); border-bottom-right-radius: .3em; }

/* ─── Bento / soluciones ─────────────────────────────────────────────── */
.h12-plat-ic .fa, .h12-plat-ic .fas, .h12-plat-ic .far, .h12-plat-ic .fab,
.h12-badge-ic .fa, .h12-badge-ic .fas, .h12-badge-ic .fab { font-size: 1.05rem; }
.ic-audit-solo { grid-template-columns: 1fr; }
.ic-audit-solo .h12-audit-body { max-width: 980px; }
.ic-checks-cols { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem 2rem; }
.ic-checks-cols small { color: var(--muted); }
.ic-tag-on-brand { background: var(--brand); color: var(--ink); }
.ic-tag-brand { background: var(--brand); color: var(--ink); }
.ic-tag-soft { font-size: .7rem; vertical-align: middle; }
.ic-srv-icon { display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 35%, var(--surface)); color: var(--ink); font-size: 2.2rem; }

/* ─── Precios ────────────────────────────────────────────────────────── */
/* La grilla va sin título propio (el encabezado de la página hace de título): menos aire arriba. */
.section.ic-plans-section { padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.plan .price .ic-currency { font-size: 1rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; color: var(--muted); vertical-align: super; }
.plan .price.mt-2:not(:has(span)) { font-size: 2.6rem; }

/* ─── Bloque de código (API) ─────────────────────────────────────────── */
.ic-code {
  background: #0c0c0e; color: #e8e8e3; border-radius: 18px;
  border: 1px solid rgba(255,255,255,.1); overflow: hidden;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 13px;
}
.ic-code-head { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ic-code-dots { display: flex; gap: 6px; margin-right: 10px; padding-left: 4px; }
.ic-code-dots span { width: 10px; height: 10px; border-radius: 50%; background: #3a3a33; }
.ic-code-tab { border: 0; background: transparent; color: #8f8f84; font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 6px; cursor: pointer; }
.ic-code-tab:hover { color: #fff; }
.ic-code-tab.is-active { background: rgba(255,255,255,.08); color: #fff; }
.ic-code-copy { margin-left: auto; border: 0; background: transparent; color: #8f8f84; width: 30px; height: 28px; border-radius: 6px; cursor: pointer; }
.ic-code-copy:hover { color: #fff; background: rgba(255,255,255,.08); }
.ic-code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font: inherit; line-height: 1.65; color: inherit; white-space: pre; }
.ic-code pre[hidden] { display: none; }
.ic-code .tk-c { color: #7c7c72; }
.ic-code .tk-k { color: #8fb0ff; }
.ic-code .tk-s { color: var(--brand); }
.ic-code .tk-p { color: #f5c978; }
.h12-out .ic-code { margin-bottom: 0; }

/* Desarrolladores (layout de la calculadora): chips informativos, no clicables */
.ic-goals-static { flex-wrap: wrap; }
.ic-goals-static .btn { cursor: default; pointer-events: none; font-weight: 500; font-size: .88rem; }
.ic-goals-static .btn .bi { color: var(--brand); }
.h12-calc-box .ic-code { font-size: 12.5px; }

/* Código y tablas dentro del contenido del CMS (.prose) */
.prose pre { background: #0c0c0e; color: #e8e8e3; border-radius: 14px; padding: 16px 18px; font-size: 13px; line-height: 1.65; overflow-x: auto; }
.prose :not(pre) > code { background: var(--surface-2); color: var(--text); padding: 2px 6px; border-radius: 6px; font-size: .88em; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; }
.prose th, .prose td { padding: .75rem .9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { font-weight: 600; background: var(--surface-2); }
.ic-table-wrap { overflow-x: auto; }

/* ─── Newsletter del footer (estilo .footer-news, sin el JS de la plantilla) ─ */
.ic-news { display: flex; gap: .4rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .3rem .3rem 1.1rem; }
.ic-news input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); }
.ic-news input:focus { outline: none; }
.ic-news:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-2) 35%, transparent); }

/* ─── Formulario de contacto ─────────────────────────────────────────── */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ic-form-message { border-radius: var(--radius-sm); }

/* ─── Contenido de casos ─────────────────────────────────────────────── */
.ic-cs-title { max-width: 18ch; }
.ic-404-title { font-size: clamp(1.9rem, 4vw, 3rem); }
.ic-404-lead { max-width: 36rem; }
.ic-legal-head { letter-spacing: .12em; }

/* ─── Footer sin la palabra gigante: las columnas quedan sobre la barra inferior ─ */
.ic-footer-compact > .container { padding-bottom: clamp(2.5rem, 5vw, 4rem); }

/* Footer con fondo surface-2 de la plantilla (#ECE8DE) */
.site-footer.ic-footer-compact { background: #ECE8DE; }

/* ─── Hero: slider de index-9, un poco más bajo que en la plantilla ───────── */
.ic-hero-slider .wg-hs-slide { min-height: min(680px, 80vh); }
.ic-hero-slider .wg-hs-title { font-size: clamp(2.3rem, 4.6vw, 4.1rem); max-width: 19ch; margin-block: 1rem 1rem; }
.ic-hero-slider .wg-hs-inner { padding-top: clamp(1.5rem, 4vw, 3.5rem); }
@media (max-width: 991.98px) { .ic-hero-slider .wg-hs-slide { min-height: 0; } }
/* Velo oscuro: las fotos claras no deben comerse el texto blanco */
.ic-hero-slider .wg-hs-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,12,.72) 0%, rgba(10,10,12,.35) 60%, rgba(10,10,12,.2) 100%); }
.wg-hs-logo .fa, .wg-hs-logo .fas, .wg-hs-logo .fab, .wg-hs-logo .far { font-size: 1.1rem; }

/* Alturas de las barras de la tarjeta (en la plantilla iban como estilos inline) */
.wg-hs-bars span:nth-child(1) { --i: 0; } .wg-hs-bars span:nth-child(2) { --i: 1; } .wg-hs-bars span:nth-child(3) { --i: 2; }
.wg-hs-bars span:nth-child(4) { --i: 3; } .wg-hs-bars span:nth-child(5) { --i: 4; } .wg-hs-bars span:nth-child(6) { --i: 5; }
.wg-hs-bars span:nth-child(7) { --i: 6; }
.ic-bars-1 span:nth-child(1){--h:22%} .ic-bars-1 span:nth-child(2){--h:30%} .ic-bars-1 span:nth-child(3){--h:38%} .ic-bars-1 span:nth-child(4){--h:52%} .ic-bars-1 span:nth-child(5){--h:66%} .ic-bars-1 span:nth-child(6){--h:78%} .ic-bars-1 span:nth-child(7){--h:100%}
.ic-bars-2 span:nth-child(1){--h:18%} .ic-bars-2 span:nth-child(2){--h:26%} .ic-bars-2 span:nth-child(3){--h:24%} .ic-bars-2 span:nth-child(4){--h:44%} .ic-bars-2 span:nth-child(5){--h:58%} .ic-bars-2 span:nth-child(6){--h:84%} .ic-bars-2 span:nth-child(7){--h:100%}
.ic-bars-3 span:nth-child(1){--h:30%} .ic-bars-3 span:nth-child(2){--h:42%} .ic-bars-3 span:nth-child(3){--h:36%} .ic-bars-3 span:nth-child(4){--h:60%} .ic-bars-3 span:nth-child(5){--h:54%} .ic-bars-3 span:nth-child(6){--h:80%} .ic-bars-3 span:nth-child(7){--h:100%}

/* Desarrolladores: el panel de cifras sube al tope y la lista va debajo, en la columna derecha */
#api .h12-out { margin-top: clamp(0rem, 2vw, 1.5rem); }
.ic-dev-list { margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid rgba(255,255,255,.12); }
.ic-dev-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.ic-dev-grid li { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-size: .92rem; font-weight: 500; line-height: 1.35; }
.ic-dev-grid .bi { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--ink); font-size: .85rem; }
@media (max-width: 991.98px) { .ic-dev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .ic-dev-grid { grid-template-columns: 1fr; } }

/* Encabezado de páginas internas: lead + botón en la tarjeta .quote.is-brand de la plantilla (leadCard) */
.ic-hero-card { margin-bottom: 0; }
/* Páginas de canal: encabezado compacto (migas + título); la tarjeta de resumen va en la columna lateral */
.ic-hero-tight { padding-bottom: .5rem; }
.ic-hero-tight + .section { padding-top: 2rem !important; }
.ic-hero-card blockquote { font-size: 1.1rem; }
.ic-quote-ic { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--brand); font-size: 1rem; }
.ic-quote-cta { margin-top: -.2rem; }

/* Blog: botón de búsqueda de la barra lateral (en la plantilla iba con estilo inline) */
.ic-search-btn { width: 38px; height: 38px; }