/* ==========================================================================
   Tema Idea Creativa — diseño propio para IdeaStack.
   Colores del logo (azul #3D5AFE → violeta #6A3DF0, tinta #1C1B33, lavanda #8C9BFF),
   títulos en Bricolage Grotesque y textos en Hanken Grotesk. Grilla y utilidades de Bootstrap 5.
   ========================================================================== */

:root {
  --ic-blue: #3d5afe;
  --ic-violet: #6a3df0;
  --ic-grad: linear-gradient(135deg, #3d5afe 0%, #6a3df0 100%);
  --ic-ink: #1c1b33;
  --ic-fg: #1c1b33;          /* color de títulos y texto fuerte (en oscuro, claro) */
  --ic-solid: #1c1b33;       /* fondo de botones/estados «elegidos» (en oscuro, blanco) */
  --ic-on-solid: #ffffff;
  --ic-ink-2: #262544;
  --ic-lav: #8c9bff;
  --ic-tint: #eceeff;
  --ic-paper: #f6f7fb;
  --ic-card: #ffffff;
  --ic-line: #e3e5f0;
  --ic-line-dark: rgba(255, 255, 255, .12);
  --ic-text: #2b2a40;
  --ic-muted: #575a73;
  --ic-on-dark: #e6e7f5;
  --ic-muted-dark: #a9abc6;

  --ic-font-head: "Bricolage Grotesque", system-ui, sans-serif;
  --ic-font-body: "Hanken Grotesk", system-ui, sans-serif;

  --ic-radius: 24px;
  --ic-radius-md: 18px;
  --ic-radius-sm: 12px;
  --ic-shadow: 0 1px 2px rgba(28, 27, 51, .04), 0 18px 40px -18px rgba(28, 27, 51, .18);
  --ic-shadow-lg: 0 2px 4px rgba(28, 27, 51, .04), 0 30px 60px -24px rgba(61, 90, 254, .35);
  --ic-ease: cubic-bezier(.16, 1, .3, 1);
  --ic-section: clamp(4.5rem, 9vw, 7.5rem);

  --bs-body-font-family: var(--ic-font-body);
  --bs-body-color: var(--ic-text);
  --bs-body-bg: var(--ic-paper);
  --bs-link-color-rgb: 61, 90, 254;
  --bs-link-hover-color-rgb: 106, 61, 240;
  --bs-border-color: var(--ic-line);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: var(--ic-font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ic-text);
  background: var(--ic-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, .ic-display {
  font-family: var(--ic-font-head);
  color: var(--ic-fg);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.08;
}
h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); letter-spacing: -.015em; }
p { margin-bottom: 1rem; }
a { color: var(--ic-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ic-violet); }
img { max-width: 100%; height: auto; }
::selection { background: var(--ic-blue); color: #fff; }
:focus-visible { outline: 3px solid var(--ic-lav); outline-offset: 3px; border-radius: 6px; }
.lead { font-size: clamp(1.1rem, 1.5vw, 1.25rem); color: var(--ic-muted); line-height: 1.6; }
.text-muted-ic { color: var(--ic-muted) !important; }
.skip-link { position: absolute; left: 1rem; top: 1rem; z-index: 2000; }

/* ---------- Texto con la marca ---------- */
.ic-grad-text {
  background: var(--ic-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Palabra clave del título: píldora con el degradé (como «creativa» en el logo) */
/* Píldora por renglón: si la frase corta en dos líneas, cada línea lleva su propia píldora. */
.ic-hl {
  display: inline;
  padding: 0 .28em .04em;
  border-radius: .38em;
  background: var(--ic-grad);
  color: #fff;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  line-height: 1.22;
}
.ic-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .9rem .4rem .7rem;
  border: 1px solid var(--ic-line);
  border-radius: 999px;
  background: var(--ic-card);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ic-fg);
}
.ic-eyebrow::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--ic-grad);
  box-shadow: 0 0 0 4px var(--ic-tint);
}
.ic-dark .ic-eyebrow, .ic-cta .ic-eyebrow { background: transparent; border-color: var(--ic-line-dark); color: var(--ic-on-dark); }
.ic-dark .ic-eyebrow::before, .ic-cta .ic-eyebrow::before { box-shadow: 0 0 0 4px rgba(140, 155, 255, .18); }

/* ---------- Botones ---------- */
.ic-btn {
  --ic-btn-pad: .85rem 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: var(--ic-btn-pad);
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-family: var(--ic-font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .35s var(--ic-ease), box-shadow .35s var(--ic-ease), background-color .2s, color .2s, border-color .2s;
}
.ic-btn i { transition: transform .35s var(--ic-ease); }
.ic-btn:hover i { transform: translate(2px, -2px); }
.ic-btn-primary { background: var(--ic-grad); color: #fff; box-shadow: 0 14px 30px -14px rgba(61, 90, 254, .8); }
.ic-btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 20px 36px -14px rgba(106, 61, 240, .85); }
.ic-btn-ink { background: var(--ic-solid); color: var(--ic-on-solid); }
.ic-btn-ink:hover { color: #fff; background: #2a2950; transform: translateY(-2px); }
.ic-btn-ghost { border-color: var(--ic-fg); color: var(--ic-fg); background: transparent; }
.ic-btn-ghost:hover { background: var(--ic-solid); color: var(--ic-on-solid); }
.ic-btn-light { background: #fff; color: var(--ic-fg); }
.ic-btn-light:hover { color: var(--ic-fg); transform: translateY(-2px); }
.ic-dark .ic-btn-ghost { border-color: rgba(255, 255, 255, .35); color: #fff; }
.ic-dark .ic-btn-ghost:hover { background: #fff; color: var(--ic-fg); }
.ic-btn-sm { --ic-btn-pad: .6rem 1.1rem; font-size: .9375rem; }
.ic-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  color: var(--ic-fg);
  text-decoration: none;
}
.ic-link i { transition: transform .35s var(--ic-ease); color: var(--ic-blue); }
.ic-link:hover { color: var(--ic-blue); }
.ic-link:hover i { transform: translateX(4px); }
.ic-dark .ic-link { color: #fff; }
.ic-dark .ic-link i { color: var(--ic-lav); }

/* ---------- Secciones ---------- */
.ic-section { padding: var(--ic-section) 0; position: relative; }
.ic-section-sm { padding: calc(var(--ic-section) * .6) 0; }
.ic-section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.ic-section-head h2 { margin: 1rem 0 1rem; }
.ic-section-head .lead { margin: 0; }
.ic-section-head.text-center { margin-left: auto; margin-right: auto; }
.ic-white { background: var(--ic-card); }
.ic-dark {
  background: var(--ic-ink);
  color: var(--ic-on-dark);
}
.ic-dark h1, .ic-dark h2, .ic-dark h3, .ic-dark h4 { color: #fff; }
.ic-dark .lead, .ic-dark .text-muted-ic { color: var(--ic-muted-dark) !important; }
/* Sobre fondo oscuro el degradé se aclara (lavanda), como «creativa» en el logo blanco */
.ic-dark .ic-grad-text, .ic-cta .ic-grad-text { background: linear-gradient(135deg, #8c9bff 0%, #c4b5ff 100%); -webkit-background-clip: text; background-clip: text; }
.ic-newsletter-msg.text-success { color: #86e3b0 !important; }
.ic-newsletter-msg.text-danger { color: #ffa3ad !important; }
/* Puntos de fondo sutiles (sin imágenes) */
.ic-dots { position: relative; isolation: isolate; }
.ic-dots::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(28, 27, 51, .08) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.ic-dark.ic-dots::before { background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); }

/* ---------- Tarjetas ---------- */
.ic-card {
  position: relative;
  height: 100%;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--ic-card);
  border: 1px solid var(--ic-line);
  border-radius: var(--ic-radius);
  transition: transform .5s var(--ic-ease), box-shadow .5s var(--ic-ease), border-color .3s;
}
.ic-card-hover:hover { transform: translateY(-6px); box-shadow: var(--ic-shadow-lg); border-color: transparent; }
.ic-dark .ic-card { background: var(--ic-ink-2); border-color: var(--ic-line-dark); }
/* Cuadro de ícono con el degradé y el ícono blanco, como el símbolo del logo */
.ic-tile {
  display: inline-grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 14px;
  background: var(--ic-grad);
  color: #fff;
  font-size: 1.3rem;
  box-shadow: 0 12px 24px -12px rgba(61, 90, 254, .8);
  flex-shrink: 0;
}
.ic-tile-lg { width: 4rem; height: 4rem; border-radius: 18px; font-size: 1.6rem; }
/* Número de las tarjetas: sólido y suave, visible sin competir con el título */
.ic-num {
  font-family: var(--ic-font-head);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.02em;
  color: #9da1c4;
}
[data-theme="dark"] .ic-num { color: #6f7397; }
.ic-tag {
  display: inline-flex;
  align-items: center;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: var(--ic-tint);
  color: #2c3fbf;
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
}
.ic-dark .ic-tag { background: rgba(140, 155, 255, .14); color: #c7ceff; }

/* ---------- Header (mismo esquema que IdeaCenter) ---------- */
.ic-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  padding: .9rem 0;
  background: transparent;
}
.ic-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(246, 247, 251, .86);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  opacity: 0;
  transition: opacity .3s;
}
.ic-header.is-scrolled::before { opacity: 1; }
.ic-brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.ic-brand img { height: 2.5rem; width: auto; }

/* Barra blanca redondeada con los ítems */
.ic-nav-bar {
  align-items: center;
  gap: .1rem;
  padding: .3rem;
  background: var(--ic-card);
  border: 1px solid rgba(28, 27, 51, .12);
  border-radius: 999px;
}
.ic-nav-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--ic-fg);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.ic-nav-link:hover { color: var(--ic-fg); background: rgba(28, 27, 51, .05); }
.ic-nav-link.active, .ic-nav-link.show { background: #e9ebf7; color: var(--ic-fg); }
.ic-nav-link.dropdown-toggle::after { margin-left: .15rem; vertical-align: .15em; border-top-width: .3em; }
@media (max-width: 1199.98px) { .ic-nav-link { padding: .5rem .7rem; font-size: .92rem; } }

/* Botones redondos (búsqueda, menú) y botón oscuro */
.ic-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(28, 27, 51, .12);
  border-radius: 50%;
  background: var(--ic-card);
  color: var(--ic-fg);
  font-size: 1.05rem;
  transition: background-color .2s, color .2s, border-color .2s;
}
.ic-icon-btn:hover { background: var(--ic-solid); border-color: var(--ic-solid); color: var(--ic-on-solid); }
.ic-icon-btn .bi-list { font-size: 1.4rem; }
.ic-header-cta { --ic-btn-pad: .85rem 1.4rem; }
/* Celular: logo + búsqueda + modo oscuro + menú tienen que entrar en 360 px */
@media (max-width: 575.98px) {
  .ic-brand img { height: 2rem; }
  .ic-icon-btn { width: 2.45rem; height: 2.45rem; font-size: .95rem; }
  .ic-header .gap-2 { gap: .35rem !important; }
}

/* Mega-menú de Servicios */
.ic-mega {
  --bs-dropdown-padding-y: 0;
  display: none;
  grid-template-columns: 1fr 15.5rem;
  gap: 1rem;
  width: min(54rem, calc(100vw - 2rem));
  left: 50% !important;
  transform: translateX(-50%);
  margin-top: .85rem !important;
  padding: 1rem;
  border: 1px solid var(--ic-line);
  border-radius: 18px;
  background: var(--ic-card);
  box-shadow: 0 1px 2px rgba(28, 27, 51, .04), 0 24px 48px -18px rgba(28, 27, 51, .28);
}
.ic-mega.show { display: grid; }
.ic-mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; }
.ic-mega-item { display: flex; gap: .85rem; padding: .8rem; border-radius: 14px; color: var(--ic-fg); text-decoration: none; transition: background-color .2s; }
.ic-mega-item:hover { background: var(--ic-paper); color: var(--ic-fg); }
.ic-mega-ico { flex-shrink: 0; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 11px; background: var(--ic-grad); color: #fff; font-size: 1rem; }
.ic-mega-item strong { display: block; font-size: .95rem; line-height: 1.3; }
.ic-mega-item small { display: block; margin-top: .2rem; font-size: .82rem; line-height: 1.4; color: var(--ic-muted); }
.ic-mega-foot { display: flex; gap: 1.5rem; margin-top: .5rem; padding: .9rem .8rem 0; border-top: 1px solid var(--ic-line); }
.ic-mega-foot a { font-size: .9rem; font-weight: 600; color: var(--ic-fg); text-decoration: none; }
.ic-mega-foot a:hover { color: var(--ic-blue); }
.ic-mega-promo { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 17rem; overflow: hidden; border-radius: 14px; background: var(--ic-ink); color: #fff; text-decoration: none; isolation: isolate; }
.ic-mega-promo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ic-ease); }
.ic-mega-promo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(61, 90, 254, .15) 0%, rgba(106, 61, 240, .55) 45%, rgba(28, 27, 51, .92) 100%); }
.ic-mega-promo:hover { color: #fff; }
.ic-mega-promo:hover img { transform: scale(1.05); }
.ic-mega-promo-body { display: flex; flex-direction: column; gap: .4rem; padding: 1.1rem; }
.ic-mega-promo-tag { align-self: flex-start; padding: .2rem .6rem; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: .75rem; font-weight: 700; }
.ic-mega-promo strong { font-family: var(--ic-font-head); font-size: 1.15rem; line-height: 1.2; }
.ic-mega-promo small { font-size: .82rem; color: rgba(255, 255, 255, .82); line-height: 1.4; }
.ic-mega-promo-link { margin-top: .3rem; font-size: .88rem; font-weight: 700; color: #c7ceff; }

/* Búsqueda */
.ic-search-modal .modal-content { border: 0; border-radius: 22px; padding: .5rem; box-shadow: 0 30px 80px -20px rgba(28, 27, 51, .45); }
.ic-search-modal .modal-backdrop, .modal-backdrop.show { opacity: .4; }
.ic-search-form { display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; border-bottom: 1px solid var(--ic-line); }
.ic-search-form .bi-search { font-size: 1.25rem; color: var(--ic-blue); }
.ic-search-form input { flex: 1; min-width: 0; border: 0; outline: none; font-size: 1.2rem; color: var(--ic-fg); background: transparent; }
.ic-search-hints { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: 1rem; font-size: .9rem; color: var(--ic-muted); }

/* Panel del celular */
.ic-offcanvas { background: var(--ic-ink); color: var(--ic-on-dark); width: min(22rem, 88vw) !important; }
.ic-offcanvas .offcanvas-header { border-bottom: 1px solid var(--ic-line-dark); }
.ic-offcanvas .btn-close { filter: invert(1); opacity: .8; }
.ic-offcanvas .nav-link { padding: .8rem 0; font-family: var(--ic-font-head); font-size: 1.6rem; font-weight: 700; color: #fff; border-bottom: 1px solid var(--ic-line-dark); cursor: pointer; }
.ic-offcanvas .nav-link.active, .ic-offcanvas .nav-link:hover { color: var(--ic-lav); }
.ic-offcanvas-sub summary { list-style: none; }
.ic-offcanvas-sub summary::-webkit-details-marker { display: none; }
.ic-offcanvas-sub summary::after { content: "\F282"; font-family: "bootstrap-icons"; float: right; font-size: 1rem; margin-top: .5rem; transition: transform .3s; }
.ic-offcanvas-sub[open] summary::after { transform: rotate(180deg); }
.ic-offcanvas-sub a { display: block; padding: .5rem 0 .5rem 1rem; color: var(--ic-on-dark); text-decoration: none; border-left: 2px solid var(--ic-line-dark); }
.ic-offcanvas-sub a:hover { color: #fff; border-color: var(--ic-lav); }
.ic-offcanvas .ic-contact-mini a { color: var(--ic-on-dark); text-decoration: none; }

/* ---------- Hero ---------- */
.ic-hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 6.5rem); overflow: hidden; }
.ic-hero h1 { margin: 1.4rem 0 1.4rem; }
.ic-hero .lead { max-width: 34rem; }
.ic-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.ic-trust { display: flex; flex-wrap: wrap; gap: 1.75rem 2.5rem; margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid var(--ic-line); }
.ic-trust strong { display: block; font-family: var(--ic-font-head); font-size: 2rem; line-height: 1; color: var(--ic-fg); letter-spacing: -.03em; }
.ic-trust span { font-size: .9rem; color: var(--ic-muted); }

/* Composición del hero: proyecto real en una ventana + tarjetas flotantes */
.ic-hero-visual { position: relative; padding: 2rem 0 2.5rem 1rem; }
.ic-window {
  position: relative;
  background: var(--ic-card);
  border: 1px solid var(--ic-line);
  border-radius: var(--ic-radius);
  box-shadow: var(--ic-shadow-lg);
  overflow: hidden;
  transform: rotate(1.5deg);
}
.ic-window-bar { display: flex; align-items: center; gap: .4rem; padding: .8rem 1rem; border-bottom: 1px solid var(--ic-line); }
.ic-window-bar span { width: .6rem; height: .6rem; border-radius: 50%; background: #dfe1ee; }
.ic-window-bar em { margin-left: .75rem; font-style: normal; font-size: .78rem; color: var(--ic-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-window img { display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.ic-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1.05rem;
  background: var(--ic-card);
  border: 1px solid var(--ic-line);
  border-radius: var(--ic-radius-md);
  box-shadow: var(--ic-shadow);
  font-size: .875rem;
  line-height: 1.3;
}
.ic-float strong { display: block; font-family: var(--ic-font-head); font-size: 1.35rem; color: var(--ic-fg); letter-spacing: -.02em; }
.ic-float .ic-tile { width: 2.5rem; height: 2.5rem; font-size: 1rem; border-radius: 11px; }
.ic-float-a { left: -1.25rem; bottom: .5rem; }
.ic-float-b { right: -.75rem; top: .25rem; }
.ic-chip {
  position: absolute;
  padding: .45rem .9rem;
  border-radius: 999px;
  background: var(--ic-ink);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  box-shadow: var(--ic-shadow);
}
.ic-chip i { color: var(--ic-lav); margin-right: .3rem; }
.ic-chip-a { right: 12%; bottom: -.25rem; }
.ic-chip-b { left: -.5rem; top: 46%; background: var(--ic-card); color: var(--ic-fg); border: 1px solid var(--ic-line); }
.ic-chip-b i { color: var(--ic-blue); }
@media (prefers-reduced-motion: no-preference) {
  .ic-float-a { animation: ic-bob 6s ease-in-out infinite; }
  .ic-float-b { animation: ic-bob 7s ease-in-out -2s infinite; }
}
@keyframes ic-bob { 50% { transform: translateY(-10px); } }

/* ---------- Héroe con slider (esquema de IdeaCenter, en el degradé de la marca) ---------- */
/* Tipografía del slider: la misma de IdeaCenter (Inter / Inter Display, licencia OFL), solo dentro del slider. */
@font-face { font-family: "IC Inter"; src: url("../fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IC Inter"; src: url("../fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IC Inter"; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "IC Inter Display"; src: url("../fonts/InterDisplay-Bold.woff2") format("woff2"); font-weight: 700 800; font-display: swap; }
.ic-hs, .ic-hs .ic-btn { font-family: "IC Inter", system-ui, sans-serif; }
.ic-hs .ic-hs-title, .ic-hs .ic-hs-metric .n, .ic-hs .ic-hs-card-top strong { font-family: "IC Inter Display", "IC Inter", system-ui, sans-serif; }
.ic-hs .ic-hs-title { font-weight: 700; letter-spacing: -.035em; }
.ic-hs .ic-hs-metric .n { font-weight: 700; letter-spacing: -.04em; }
.ic-btn-outline-light { border-color: rgba(255, 255, 255, .55); color: #fff; background: transparent; }
.ic-btn-outline-light:hover { background: #fff; border-color: #fff; color: var(--ic-fg); }
.ic-hs { padding: 0 1rem 1rem; }
.ic-hs-frame {
  position: relative;
  min-height: clamp(36rem, 82vh, 44rem);
  border-radius: 36px;
  overflow: hidden;
  background: var(--ic-ink);
  isolation: isolate;
}
.ic-hs-slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; opacity: 0; visibility: hidden; transition: opacity .9s var(--ic-ease), visibility .9s; }
.ic-hs-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.ic-hs-bg { position: absolute; inset: 0; z-index: -1; }
.ic-hs-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 7s ease-out; }
.ic-hs-slide.is-active .ic-hs-bg img { transform: scale(1); }
/* El color: degradé de la marca sobre la foto (más intenso a la izquierda, donde va el texto) */
/* Velo sobre la foto. Por defecto, el de IdeaCenter (casi negro, más denso a la izquierda y abajo);
   con el ajuste hero_slider_tone = brand, el degradé azul→violeta de la marca. */
.ic-hs-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 10, 12, .86) 0%, rgba(10, 10, 12, .58) 45%, rgba(10, 10, 12, .08) 82%),
    linear-gradient(0deg, rgba(10, 10, 12, .78) 0%, rgba(10, 10, 12, 0) 50%),
    linear-gradient(90deg, rgba(10, 10, 12, .72) 0%, rgba(10, 10, 12, .35) 60%, rgba(10, 10, 12, .2) 100%);
}
.ic-hs[data-tone="brand"] {
  --ic-hs-a: 38, 56, 196;   /* azul oscuro */
  --ic-hs-b: 52, 48, 186;   /* mezcla */
  --ic-hs-c: 72, 40, 170;   /* violeta */
}
.ic-hs[data-tone="brand"] .ic-hs-bg::after {
  background:
    linear-gradient(100deg, rgba(var(--ic-hs-a), .95) 0%, rgba(var(--ic-hs-b), .88) 38%, rgba(var(--ic-hs-c), .55) 68%, rgba(var(--ic-hs-c), .28) 100%),
    linear-gradient(0deg, rgba(24, 20, 100, .5) 0%, rgba(24, 20, 100, 0) 45%);
}
.ic-hs[data-tone="brand"] .ic-hs-frame { background: var(--ic-grad); }
.ic-hs-inner { padding: clamp(1.75rem, 5vw, 4.5rem) clamp(1.5rem, 5vw, 4.5rem) clamp(7.5rem, 11vw, 8.5rem); color: #fff; }
.ic-hs-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem 1rem .45rem .75rem; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .85rem; font-weight: 600; }
.ic-hs-pill .dot { width: .55rem; height: .55rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); }
.ic-hs-title { margin: 1.25rem 0 1rem; font-size: clamp(2.4rem, 5.2vw, 4.4rem); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; color: #fff; max-width: 15ch; }
/* Frase destacada: sin fondo, en el lavanda del logo (como «creativa» en la versión blanca) */
.ic-hs-hl { color: var(--ic-lav); }
.ic-hs-lead { max-width: 34rem; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; color: rgba(255, 255, 255, .9); margin: 0; }
.ic-hs-card {
  margin-left: auto;
  max-width: 25rem;
  padding: 1.4rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 24px;
  background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  color: #fff;
}
.ic-hs-card-top { display: flex; align-items: center; gap: .85rem; }
.ic-hs-card-top strong { display: block; font-size: 1.05rem; line-height: 1.2; }
.ic-hs-card-top small { display: block; font-size: .85rem; color: rgba(255, 255, 255, .75); }
.ic-hs-card-ico { flex-shrink: 0; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 13px; background: #fff; color: var(--ic-blue); font-size: 1.15rem; }
.ic-hs-card-tag { margin-left: auto; padding: .35rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.ic-hs-metric { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 1.4rem 0 1.1rem; }
.ic-hs-metric .n { font-family: var(--ic-font-head); font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.ic-hs-metric p { margin: .3rem 0 0; font-size: .9rem; color: rgba(255, 255, 255, .85); }
.ic-hs-bars { display: flex; align-items: flex-end; gap: .3rem; height: 3.5rem; }
.ic-hs-bars span { width: .5rem; border-radius: 99px; background: rgba(255, 255, 255, .35); }
.ic-hs-bars span:nth-child(1) { height: 20%; } .ic-hs-bars span:nth-child(2) { height: 32%; } .ic-hs-bars span:nth-child(3) { height: 45%; }
.ic-hs-bars span:nth-child(4) { height: 58%; } .ic-hs-bars span:nth-child(5) { height: 72%; } .ic-hs-bars span:nth-child(6) { height: 86%; }
.ic-hs-bars span:nth-child(7) { height: 100%; background: #fff; }
.ic-hs-bars.v2 span:nth-child(3) { height: 70%; } .ic-hs-bars.v2 span:nth-child(5) { height: 50%; }
.ic-hs-bars.v3 span:nth-child(2) { height: 55%; } .ic-hs-bars.v3 span:nth-child(6) { height: 64%; }
.ic-hs-card-text { margin: 0; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .22); font-size: .92rem; line-height: 1.55; color: rgba(255, 255, 255, .88); }
/* Pasos con barra de progreso + botones */
.ic-hs-controls { position: absolute; left: clamp(1.5rem, 5vw, 4.5rem); right: clamp(1.5rem, 5vw, 4.5rem); bottom: clamp(1.25rem, 3vw, 2.25rem); z-index: 3; display: flex; align-items: flex-end; gap: 1.5rem; }
.ic-hs-steps { flex: 1; display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.ic-hs-step { width: 100%; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .7); text-align: left; font-size: .85rem; font-weight: 600; }
.ic-hs-step .lbl { display: block; margin-bottom: .55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-hs-step .lbl span { font-weight: 500; }
.ic-hs-step .bar { display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.ic-hs-step .bar i { display: block; height: 100%; width: 100%; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
.ic-hs-step[aria-current="true"] { color: #fff; }
.ic-hs-step.is-done .bar i { transform: scaleX(1); }
.ic-hs-btns { display: flex; gap: .5rem; }
.ic-hs-btn { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.1rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .2s, color .2s; }
.ic-hs-btn:hover { background: #fff; color: var(--ic-blue); }
/* Entrada del contenido de cada lámina */
@media (prefers-reduced-motion: no-preference) {
  .ic-hs-anim { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ic-ease), transform .8s var(--ic-ease); }
  .ic-hs-slide.is-active .ic-hs-anim { opacity: 1; transform: none; }
  .ic-hs-slide.is-active .ic-hs-anim[data-step="1"] { transition-delay: .12s; }
  .ic-hs-slide.is-active .ic-hs-anim[data-step="2"] { transition-delay: .24s; }
  .ic-hs-slide.is-active .ic-hs-anim[data-step="3"] { transition-delay: .36s; }
  .ic-hs-slide.is-active .ic-hs-anim[data-step="4"] { transition-delay: .5s; }
}
@media (max-width: 767.98px) {
  .ic-hs { padding: 0 .5rem .5rem; }
  .ic-hs-frame { border-radius: 24px; min-height: 40rem; }
  .ic-hs-steps .lbl span { display: none; }
  .ic-hs-controls { flex-direction: column; align-items: stretch; gap: .9rem; }
  .ic-hs-btns { justify-content: flex-end; }
  .ic-hs-inner { padding-bottom: 9.5rem; }
}

/* ---------- Cinta de tecnologías ---------- */
.ic-marquee { border-block: 1px solid var(--ic-line); background: var(--ic-card); overflow: hidden; }
.ic-marquee-inner { display: flex; align-items: center; gap: 1.25rem; padding: 1.3rem 0; }
.ic-marquee-label { flex-shrink: 0; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ic-muted); }
.ic-marquee-track { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ic-marquee-list { display: flex; flex-shrink: 0; gap: 2.75rem; padding-right: 2.75rem; margin: 0; list-style: none; }
.ic-marquee-list li { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--ic-font-head); font-weight: 700; font-size: 1.15rem; color: var(--ic-fg); white-space: nowrap; }
.ic-marquee-list i { color: var(--ic-blue); font-size: 1.15rem; }
@media (prefers-reduced-motion: no-preference) {
  .ic-marquee-list { animation: ic-marquee 38s linear infinite; }
  .ic-marquee-track:hover .ic-marquee-list { animation-play-state: paused; }
}
@keyframes ic-marquee { to { transform: translateX(-100%); } }

/* ---------- Servicios ---------- */
.ic-service { display: flex; flex-direction: column; }
.ic-service-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.75rem; }
.ic-service h3 { margin-bottom: .75rem; }
.ic-service p { color: var(--ic-muted); margin-bottom: 1.5rem; }
.ic-service .ic-link { margin-top: auto; }
.ic-service-features { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.5rem 0 1.5rem; padding: 0; list-style: none; }

/* ---------- Nosotros / cifras ---------- */
.ic-about-media { position: relative; }
.ic-about-media img { width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; border-radius: var(--ic-radius); }
.ic-about-badge {
  position: absolute;
  right: -1rem;
  bottom: 2rem;
  padding: 1.25rem 1.4rem;
  border-radius: var(--ic-radius-md);
  background: var(--ic-grad);
  color: #fff;
  box-shadow: var(--ic-shadow-lg);
}
.ic-about-badge strong { display: block; font-family: var(--ic-font-head); font-size: 2.6rem; line-height: 1; letter-spacing: -.04em; }
.ic-about-badge span { font-size: .9rem; opacity: .9; }
.ic-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem 1.5rem; margin: 1.75rem 0 2rem; padding: 0; list-style: none; }
.ic-checks li { display: flex; gap: .6rem; font-weight: 600; color: var(--ic-fg); }
.ic-checks i { flex-shrink: 0; display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--ic-tint); color: var(--ic-blue); font-size: .8rem; margin-top: .15rem; }
.ic-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding-top: 1.75rem; border-top: 1px solid var(--ic-line); }
.ic-stats strong { display: block; font-family: var(--ic-font-head); font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1; color: var(--ic-fg); letter-spacing: -.035em; }
.ic-stats span { font-size: .9rem; color: var(--ic-muted); }

/* ---------- Página de cada servicio: fotos cuadradas que acompañan al texto ---------- */
.ic-svc-media img,
.ic-svc-placeholder { aspect-ratio: 1 / 1; }
.ic-svc-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  border-radius: var(--ic-radius);
  background: radial-gradient(120% 90% at 20% 10%, rgba(140, 155, 255, .55), transparent 60%), var(--ic-grad);
  color: rgba(255, 255, 255, .9);
  font-size: clamp(4rem, 9vw, 6.5rem);
}
.ic-svc-placeholder-row { aspect-ratio: 7 / 5; font-size: 3.5rem; }
.ic-svc-placeholder-alt { background: radial-gradient(120% 90% at 80% 90%, rgba(106, 61, 240, .6), transparent 60%), var(--ic-ink); }
.ic-svc-icon {
  position: absolute;
  top: 1.5rem;
  left: -1rem;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--ic-radius-md);
  background: var(--ic-card);
  color: var(--ic-blue);
  font-size: 1.6rem;
  box-shadow: var(--ic-shadow-lg);
}
.ic-svc-media-right .ic-svc-chip { top: auto; bottom: 2rem; right: auto; left: -1rem; }
.ic-svc-prose p { color: var(--ic-muted); }
.ic-svc-prose p:last-child { margin-bottom: 0; }
.ic-svc-item .ic-tile { margin-bottom: 1.5rem; }
.ic-svc-item h3 { font-size: 1.2rem; margin-bottom: .6rem; }
.ic-svc-item p { color: var(--ic-muted); margin: 0; }
.ic-svc-other { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: inherit; }
.ic-svc-other-body { flex: 1; min-width: 0; }
.ic-svc-other-body strong { display: block; font-family: var(--ic-font-head); font-size: 1.1rem; color: var(--ic-fg); }
.ic-svc-other-body span { display: block; margin-top: .2rem; font-size: .9rem; color: var(--ic-muted); }
.ic-svc-other-go { color: var(--ic-blue); transition: transform .3s var(--ic-ease, ease); }
.ic-svc-other:hover .ic-svc-other-go { transform: translateX(.3rem); }
.ic-service-row-link { color: inherit; text-decoration: none; }
.ic-service-row-link:hover { color: var(--ic-blue); }
@media (max-width: 575.98px) {
  .ic-svc-icon { left: .75rem; width: 3.25rem; height: 3.25rem; font-size: 1.3rem; }
  .ic-svc-media-right .ic-svc-chip { left: .75rem; }
}

/* ---------- Proyectos ---------- */
.ic-project { display: block; text-decoration: none; color: inherit; }
.ic-project-media { position: relative; overflow: hidden; border-radius: var(--ic-radius); background: var(--ic-tint); aspect-ratio: 4 / 3; }
.ic-project-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ic-ease); }
.ic-project:hover .ic-project-media img { transform: scale(1.05); }
.ic-project-media .ic-tag { position: absolute; left: 1rem; top: 1rem; background: rgba(255, 255, 255, .92); color: var(--ic-fg); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ic-project-arrow {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--ic-grad);
  color: #fff;
  transform: scale(.6);
  opacity: 0;
  transition: transform .5s var(--ic-ease), opacity .3s;
}
.ic-project:hover .ic-project-arrow, .ic-project:focus-visible .ic-project-arrow { transform: scale(1); opacity: 1; }
.ic-project h3 { margin: 1.1rem 0 .3rem; transition: color .2s; }
.ic-project:hover h3 { color: var(--ic-blue); }
.ic-project p { color: var(--ic-muted); margin: 0; font-size: .975rem; }

/* ---------- Proceso ---------- */
.ic-steps { counter-reset: step; }
.ic-step { padding-top: 1.5rem; border-top: 1px solid var(--ic-line-dark); }
.ic-step-n { display: block; font-family: var(--ic-font-head); font-size: 3rem; font-weight: 800; line-height: 1; margin-bottom: 1.25rem; letter-spacing: -.04em; }
.ic-step h3 { font-size: 1.3rem; margin-bottom: .6rem; }
.ic-step p { color: var(--ic-muted-dark); margin: 0; font-size: .975rem; }

/* ---------- Testimonios ---------- */
.ic-quote { display: flex; flex-direction: column; }
.ic-quote-mark { display: block; height: 2.6rem; font-family: var(--ic-font-head); font-size: 5.5rem; font-weight: 800; line-height: 1; margin-bottom: .75rem; }
.ic-quote blockquote { font-size: 1.1rem; line-height: 1.6; color: var(--ic-fg); margin: 0 0 1.75rem; }
.ic-quote footer { display: flex; align-items: center; gap: .85rem; margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--ic-line); }
.ic-quote footer img { width: 2.9rem; height: 2.9rem; border-radius: 50%; object-fit: cover; }
.ic-quote footer strong { display: block; color: var(--ic-fg); line-height: 1.2; }
.ic-quote footer span { font-size: .875rem; color: var(--ic-muted); }
.ic-avatar-fallback { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--ic-grad); color: #fff; font-weight: 700; }

/* ---------- Blog ---------- */
.ic-post { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; background: var(--ic-card); border: 1px solid var(--ic-line); border-radius: var(--ic-radius); overflow: hidden; transition: transform .5s var(--ic-ease), box-shadow .5s var(--ic-ease); }
.ic-post:hover { transform: translateY(-6px); box-shadow: var(--ic-shadow-lg); color: inherit; }
.ic-post-media { aspect-ratio: 16 / 10; background: var(--ic-tint); overflow: hidden; }
.ic-post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ic-ease); }
.ic-post:hover .ic-post-media img { transform: scale(1.05); }
.ic-post-media-empty { display: grid; place-items: center; height: 100%; background: var(--ic-grad); color: rgba(255, 255, 255, .85); font-size: 2.5rem; }
.ic-post-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
.ic-post-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .85rem; color: var(--ic-muted); margin-bottom: .75rem; }
.ic-post h3 { font-size: 1.25rem; margin-bottom: .6rem; }
.ic-post p { color: var(--ic-muted); font-size: .975rem; margin-bottom: 1.25rem; }
.ic-post .ic-link { margin-top: auto; }

/* ---------- Preguntas frecuentes ---------- */
.ic-faq { border-top: 1px solid var(--ic-line); }
.ic-faq details { border-bottom: 1px solid var(--ic-line); }
.ic-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  font-family: var(--ic-font-head);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ic-fg);
  cursor: pointer;
  list-style: none;
}
.ic-faq summary::-webkit-details-marker { display: none; }
.ic-faq summary::after {
  content: "\F64D";
  font-family: "bootstrap-icons";
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--ic-line);
  font-size: 1rem;
  transition: transform .4s var(--ic-ease), background-color .2s, color .2s;
}
/* .is-open lo maneja site.js (cambia antes de que termine la animación de cierre); sin JS vale [open]. */
.ic-faq details.is-open summary::after,
html:not(.js) .ic-faq details[open] summary::after { transform: rotate(45deg); background: var(--ic-grad); border-color: transparent; color: #fff; }
.ic-faq details.is-open summary { color: var(--ic-blue); }
/* La altura se anima en .ic-faq-answer (sin relleno, para que llegue de verdad a 0) y el relleno va adentro. */
.ic-faq-answer { overflow: hidden; color: var(--ic-muted); }
.ic-faq-answer-inner { padding: 0 3.5rem 1.4rem 0; }
.ic-faq-answer p:last-child { margin-bottom: 0; }

/* Columna izquierda de las preguntas frecuentes: fija al hacer scroll, con foto compuesta */
.ic-faq-aside { position: sticky; top: 6.5rem; }
.ic-faq-visual { position: relative; margin-top: 2rem; }
.ic-faq-photo { position: relative; aspect-ratio: 5 / 4; border-radius: var(--ic-radius); box-shadow: var(--ic-shadow-lg); }
.ic-faq-photo img { width: 100%; height: 100%; object-fit: cover; }
/* El degradé de la marca sube desde abajo para que el texto se lea sobre la foto */
.ic-faq-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 27, 51, 0) 30%, rgba(61, 90, 254, .55) 62%, rgba(46, 30, 140, .95) 100%); pointer-events: none; }
.ic-faq-help { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem; color: #fff; }
.ic-faq-help strong { display: block; font-family: var(--ic-font-head); font-size: 1.35rem; line-height: 1.2; }
.ic-faq-help > span { display: block; margin-top: .3rem; font-size: .95rem; color: rgba(255, 255, 255, .85); }
.ic-faq-chip {
  position: absolute;
  top: 1.25rem;
  right: -1rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 1rem;
  border-radius: 999px;
  background: var(--ic-card);
  color: var(--ic-fg);
  font-size: .85rem;
  font-weight: 700;
  box-shadow: var(--ic-shadow);
}
.ic-faq-chip-dot { width: .6rem; height: .6rem; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .2); }
@media (prefers-reduced-motion: no-preference) { .ic-faq-chip-dot { animation: ic-pulse 1.8s ease-in-out infinite; } }
@media (max-width: 991.98px) { .ic-faq-aside { position: static; } .ic-faq-visual { max-width: 30rem; } .ic-faq-chip { right: .75rem; } }

/* ---------- CTA ---------- */
.ic-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 4.5rem);
  border-radius: calc(var(--ic-radius) + 8px);
  background: var(--ic-ink);
  color: var(--ic-on-dark);
  isolation: isolate;
}
.ic-cta::before {
  content: "";
  position: absolute;
  right: -10%;
  top: -40%;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  background: var(--ic-grad);
  filter: blur(80px);
  opacity: .55;
  z-index: -1;
}
.ic-cta h2 { color: #fff; margin: 1rem 0 1rem; }
.ic-cta .lead { color: var(--ic-muted-dark); }

/* ---------- Encabezado de páginas internas ---------- */
/* Grilla marcada (72 px) que se desvanece desde la derecha + dos manchas lavanda en las esquinas, como IdeaCenter */
.ic-page-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.75rem, 5vw, 4rem); }
.ic-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(61, 90, 254, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 90, 254, .16) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 60% 35%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 85% at 60% 35%, #000 25%, transparent 78%);
}
.ic-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(28rem 26rem at 96% 0%, rgba(140, 155, 255, .55), transparent 70%),
    radial-gradient(26rem 24rem at 2% 100%, rgba(169, 181, 255, .5), transparent 70%);
}
.ic-page-hero h1 { font-size: clamp(2.3rem, 4.4vw, 3.5rem); margin: 1.1rem 0 1rem; }
.ic-page-hero .lead { max-width: 44rem; }
/* Versión centrada (páginas internas) */
.ic-page-hero-center { text-align: center; }
.ic-page-hero-center h1 { max-width: 22ch; margin: 1.5rem auto 1.1rem; }
.ic-page-hero-center .lead { margin: 0 auto; max-width: 40rem; }
.ic-page-hero-center .ic-hero-actions { justify-content: center; }
.ic-crumbs.ic-crumbs-pill { display: inline-flex; padding: .35rem .95rem; border: 1px solid var(--ic-line); border-radius: 999px; background: var(--ic-card); box-shadow: 0 6px 18px -12px rgba(28, 27, 51, .25); }
.ic-crumbs-pill [aria-current="page"] { color: var(--ic-fg); font-weight: 600; }
/* Foto de la página debajo del encabezado */
/* Sin foto debajo del encabezado, la sección siguiente (que viene con pt-0) igual deja aire */
.ic-page-hero + .ic-section.pt-0 { padding-top: clamp(1.5rem, 3vw, 2.5rem) !important; }
.ic-ph-media { margin-top: clamp(1.5rem, 3vw, 2.5rem); margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.ic-ph-banner { position: relative; }
.ic-ph-banner .ic-parallax { border-radius: var(--ic-radius); aspect-ratio: 21 / 8; box-shadow: var(--ic-shadow-lg); }
.ic-ph-banner .ic-parallax img { width: 100%; height: 100%; object-fit: cover; }
.ic-ph-mark { position: absolute; left: 1.5rem; bottom: -1.5rem; display: grid; place-items: center; width: 4.25rem; height: 4.25rem; border-radius: 20px; background: var(--ic-card); box-shadow: var(--ic-shadow); }
.ic-ph-mark img { width: 2.9rem; height: 2.9rem; }
.ic-ph-strip { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1rem; }
.ic-ph-strip figure { margin: 0; border-radius: var(--ic-radius-md); aspect-ratio: 4 / 3; box-shadow: var(--ic-shadow); }
.ic-ph-strip figure img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767.98px) {
  .ic-ph-banner .ic-parallax { aspect-ratio: 4 / 3; }
  .ic-ph-strip { grid-template-columns: 1fr 1fr; }
  .ic-ph-strip figure:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}
.ic-crumbs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; font-size: .9rem; color: var(--ic-muted); }
.ic-crumbs li + li::before { content: "/"; margin-right: .4rem; color: #b5b8cd; }
.ic-crumbs a { color: var(--ic-muted); text-decoration: none; }
.ic-crumbs a:hover { color: var(--ic-blue); }

/* ---------- Contenido editable (páginas, artículos) ---------- */
.ic-prose { font-size: 1.0625rem; line-height: 1.75; }
.ic-prose > * + * { margin-top: 1.1rem; }
.ic-prose h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-top: 2.5rem; }
.ic-prose h3 { margin-top: 2rem; }
.ic-prose img { border-radius: var(--ic-radius-md); }
.ic-prose ul, .ic-prose ol { padding-left: 1.25rem; }
.ic-prose li + li { margin-top: .4rem; }
.ic-prose blockquote { padding: 1.25rem 1.5rem; border-left: 4px solid var(--ic-blue); background: var(--ic-tint); border-radius: 0 var(--ic-radius-sm) var(--ic-radius-sm) 0; color: var(--ic-fg); }
.ic-prose a { font-weight: 600; }
.ic-prose table { width: 100%; border-collapse: collapse; }
.ic-prose th, .ic-prose td { padding: .6rem .75rem; border-bottom: 1px solid var(--ic-line); }

/* ---------- Formularios ---------- */
.ic-form .form-label { font-weight: 600; color: var(--ic-fg); font-size: .95rem; }
.ic-form .form-control, .ic-form .form-select {
  padding: .8rem 1rem;
  border: 1px solid var(--ic-line);
  border-radius: var(--ic-radius-sm);
  background: var(--ic-paper);
  font-size: 1rem;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.ic-form .form-control:focus, .ic-form .form-select:focus { background: #fff; border-color: var(--ic-blue); box-shadow: 0 0 0 4px rgba(61, 90, 254, .15); }
.ic-form .form-control.is-invalid { border-color: #d63a4a; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ic-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ic-chips .btn { border: 1px solid var(--ic-line); border-radius: 999px; background: var(--ic-card); color: var(--ic-fg); font-weight: 600; font-size: .9rem; padding: .5rem 1rem; }
.ic-chips .btn-check:checked + .btn { background: var(--ic-solid); border-color: var(--ic-solid); color: var(--ic-on-solid); }
.ic-chips .btn-check:focus-visible + .btn { outline: 3px solid var(--ic-lav); outline-offset: 2px; }
.ic-contact-item { display: flex; gap: 1rem; align-items: flex-start; }
.ic-contact-item + .ic-contact-item { margin-top: 1.4rem; }
.ic-contact-item small { display: block; color: var(--ic-muted); font-size: .85rem; }
.ic-contact-item a, .ic-contact-item span { color: var(--ic-fg); font-weight: 600; text-decoration: none; }
.ic-dark .ic-contact-item a, .ic-dark .ic-contact-item span { color: #fff; }
.ic-dark .ic-contact-item small { color: var(--ic-muted-dark); }

/* ---------- Footer ---------- */
.ic-footer { background: var(--ic-ink); color: var(--ic-muted-dark); padding-top: clamp(4rem, 8vw, 6rem); }
.ic-footer img.ic-footer-logo { height: 2.3rem; width: auto; }
.ic-footer h2 { font-family: var(--ic-font-body); font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 1.25rem; }
.ic-footer ul { list-style: none; margin: 0; padding: 0; }
.ic-footer li + li { margin-top: .6rem; }
.ic-footer a { color: var(--ic-muted-dark); text-decoration: none; transition: color .2s; }
.ic-footer a:hover { color: #fff; }
.ic-socials { display: flex; gap: .5rem; margin-top: 1.5rem; }
.ic-socials a { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--ic-line-dark); color: #fff; transition: background-color .2s, border-color .2s; }
.ic-socials a:hover { background: var(--ic-grad); border-color: transparent; color: #fff; }
.ic-news { display: flex; gap: .4rem; padding: .35rem; border: 1px solid var(--ic-line-dark); border-radius: 999px; background: rgba(255, 255, 255, .04); }
.ic-news input { flex: 1; min-width: 0; padding: .55rem .9rem; border: 0; background: transparent; color: #fff; outline: none; }
.ic-news input::placeholder { color: #8a8cab; }
.ic-news:focus-within { border-color: var(--ic-lav); }
.ic-news button { flex-shrink: 0; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: var(--ic-grad); color: #fff; }
.ic-footer-bottom { margin-top: clamp(3rem, 6vw, 4.5rem); padding: 1.5rem 0; border-top: 1px solid var(--ic-line-dark); font-size: .9rem; }
.ic-footer-bottom a + a::before { content: "·"; margin: 0 .5rem; color: #5d5f80; }
.ic-arca { display: inline-block; line-height: 0; border-radius: .35rem; overflow: hidden; transition: transform .2s; }
.ic-arca:hover { transform: translateY(-2px); }
.ic-arca img { width: 44px; height: auto; }

/* ---------- Flotantes ---------- */
.ic-whatsapp {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1040;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  font-size: 1.6rem;
  box-shadow: 0 14px 30px -12px rgba(37, 211, 102, .8);
  transition: transform .3s var(--ic-ease);
}
.ic-whatsapp:hover { color: #fff; transform: scale(1.08); }

/* ---------- Paginación ---------- */
.ic-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: 3rem; }
.ic-pagination a, .ic-pagination span { display: grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 .9rem; border-radius: 999px; border: 1px solid var(--ic-line); background: var(--ic-card); color: var(--ic-fg); font-weight: 600; text-decoration: none; }
.ic-pagination a:hover { border-color: var(--ic-blue); color: var(--ic-blue); }
.ic-pagination .is-current { background: var(--ic-solid); border-color: var(--ic-solid); color: var(--ic-on-solid); }
.ic-pagination .is-disabled { opacity: .45; }

/* ---------- Fotos de las secciones ---------- */
/* Banner ancho con una tarjeta flotante (portada → servicios) */
.ic-banner { position: relative; }
.ic-banner .ic-parallax { border-radius: var(--ic-radius); aspect-ratio: 21 / 7; }
.ic-banner .ic-parallax img { width: 100%; height: 100%; object-fit: cover; }
.ic-banner-badge {
  position: absolute;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .9rem 1.2rem .9rem .9rem;
  border-radius: var(--ic-radius-md);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--ic-shadow);
}
.ic-banner-badge strong { display: block; font-family: var(--ic-font-head); font-size: 1.15rem; color: var(--ic-fg); line-height: 1.2; }
.ic-banner-badge span:not(.ic-tile) { font-size: .9rem; color: var(--ic-muted); }
@media (max-width: 575.98px) { .ic-banner .ic-parallax { aspect-ratio: 4 / 3; } }
/* Foto al costado (preguntas frecuentes) y en la sección oscura del proceso */
.ic-side-photo .ic-parallax, .ic-process-photo { border-radius: var(--ic-radius); }
.ic-side-photo .ic-parallax { aspect-ratio: 4 / 3; }
.ic-side-photo img, .ic-process-photo img { width: 100%; height: 100%; object-fit: cover; }
.ic-process-photo { aspect-ratio: 16 / 9; box-shadow: 0 0 0 1px var(--ic-line-dark); }
/* Llamado final con foto de fondo bajo el color de la marca */
.ic-cta-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .28; mix-blend-mode: luminosity; }
.ic-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(28, 27, 51, .96) 0%, rgba(28, 27, 51, .8) 55%, rgba(61, 90, 254, .35) 100%); }
/* ---------- Páginas internas ---------- */
.ic-card.ic-dark { background: var(--ic-ink); border-color: transparent; color: var(--ic-on-dark); }
.ic-card.ic-dark h2, .ic-card.ic-dark h3 { color: #fff; }

/* Servicios: una fila por servicio */
.ic-service-list { border-top: 1px solid var(--ic-line); }
.ic-service-row {
  display: grid;
  grid-template-columns: 9rem 1fr auto;
  gap: 1.5rem 2.5rem;
  align-items: start;
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-bottom: 1px solid var(--ic-line);
  scroll-margin-top: 6rem;
}
/* Cabeza de cada servicio: número grande en el degradé, a la altura del título, y el ícono debajo */
.ic-service-row-head { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.ic-service-row-head .ic-num {
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.05em;
  background: var(--ic-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="dark"] .ic-service-row-head .ic-num { background: linear-gradient(135deg, #8c9bff 0%, #c4b5ff 100%); -webkit-background-clip: text; background-clip: text; }
.ic-service-row h2 { font-size: clamp(1.6rem, 2.8vw, 2.25rem); margin-bottom: .75rem; }
.ic-service-row .lead { font-size: 1.1rem; margin-bottom: 0; }
.ic-service-row .ic-checks { margin-bottom: 0; }
/* Foto de cada servicio + botón «Consultar» */
.ic-service-row { grid-template-columns: 9rem 1fr 19rem; }
.ic-service-row-media { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.ic-service-row-media .ic-parallax { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--ic-radius-md); }
.ic-service-row-media .ic-parallax img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 991.98px) {
  .ic-service-row { grid-template-columns: 6rem 1fr; }
  .ic-service-row-media { grid-column: 2; flex-direction: row; align-items: center; }
  .ic-service-row-media .ic-parallax { max-width: 16rem; }
}
@media (max-width: 767.98px) {
  .ic-service-row { grid-template-columns: 1fr; }
  .ic-service-row-head { flex-direction: row-reverse; justify-content: space-between; align-items: center; }
  .ic-service-row-media { grid-column: auto; flex-direction: column; align-items: flex-start; }
  .ic-service-row-media .ic-parallax { max-width: none; }
}

/* Ficha del proyecto */
.ic-facts { margin: 0; padding: 1.5rem; background: var(--ic-card); border: 1px solid var(--ic-line); border-radius: var(--ic-radius); }
.ic-facts > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--ic-line); }
.ic-facts > div:first-child { padding-top: 0; }
.ic-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.ic-facts dt { font-size: .85rem; font-weight: 600; color: var(--ic-muted); }
.ic-facts dd { margin: 0; font-weight: 600; color: var(--ic-fg); }
.ic-window-flat { transform: none; }
.ic-window-flat .ic-parallax img { width: 100%; object-fit: cover; display: block; }

/* Filtros (portfolio y categorías del blog) */
.ic-filter { display: flex; flex-wrap: wrap; gap: .5rem; }
.ic-filter button, .ic-filter a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.05rem;
  border: 1px solid var(--ic-line);
  border-radius: 999px;
  background: var(--ic-card);
  color: var(--ic-fg);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s;
}
.ic-filter span { font-size: .78rem; padding: .05rem .45rem; border-radius: 999px; background: var(--ic-tint); color: #2c3fbf; }
.ic-filter button:hover, .ic-filter a:hover { border-color: var(--ic-fg); }
.ic-filter [aria-pressed="true"], .ic-filter [aria-current="page"] { background: var(--ic-solid); border-color: var(--ic-solid); color: var(--ic-on-solid); }
.ic-filter [aria-pressed="true"] span, .ic-filter [aria-current="page"] span { background: rgba(255, 255, 255, .16); color: #fff; }
.ic-hide { display: none !important; }

/* Blog */
.ic-blog-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2.5rem; }
.ic-search { position: relative; flex: 0 1 22rem; }
.ic-search i { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--ic-muted); }
.ic-search input { width: 100%; padding: .75rem 1rem .75rem 2.75rem; border: 1px solid var(--ic-line); border-radius: 999px; background: var(--ic-card); }
.ic-search input:focus { outline: none; border-color: var(--ic-blue); box-shadow: 0 0 0 4px rgba(61, 90, 254, .15); }
.ic-featured {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  overflow: hidden;
  background: var(--ic-card);
  border: 1px solid var(--ic-line);
  border-radius: var(--ic-radius);
  color: inherit;
  text-decoration: none;
  transition: box-shadow .5s var(--ic-ease), transform .5s var(--ic-ease);
}
.ic-featured:hover { color: inherit; transform: translateY(-4px); box-shadow: var(--ic-shadow-lg); }
.ic-featured-media { min-height: 18rem; background: var(--ic-tint); overflow: hidden; }
.ic-featured-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ic-ease); }
.ic-featured:hover .ic-featured-media img { transform: scale(1.04); }
.ic-featured-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.75rem, 4vw, 3rem); }
.ic-featured-body h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 1rem; }
.ic-featured-body p { color: var(--ic-muted); margin-bottom: 1.5rem; }
@media (max-width: 767.98px) { .ic-featured { grid-template-columns: 1fr; } .ic-featured-media { min-height: 13rem; } }

/* Blog (esquema del de IdeaCenter): destacado, filas y barra lateral */
.ic-bpill { position: absolute; left: .85rem; top: .85rem; padding: .3rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .94); color: #1c1b33; font-size: .78rem; font-weight: 600; box-shadow: 0 4px 12px -6px rgba(28, 27, 51, .3); }
.ic-bmeta { margin: 0 0 .6rem; font-size: .9rem; color: var(--ic-muted); }
.ic-bexcerpt { color: var(--ic-muted); margin-bottom: 0; }
.ic-bfeat { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.ic-bfeat-media { position: relative; display: block; overflow: hidden; border-radius: var(--ic-radius); aspect-ratio: 4 / 3; background: var(--ic-tint); }
.ic-bfeat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ic-ease); }
.ic-bfeat:hover .ic-bfeat-media img { transform: scale(1.04); }
.ic-bfeat h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.12; margin: 0 0 1rem; }
.ic-bfeat h2 a, .ic-brow h3 a { color: var(--ic-fg); text-decoration: none; transition: color .2s; }
.ic-bfeat h2 a:hover, .ic-brow h3 a:hover { color: var(--ic-blue); }
.ic-bfeat .ic-bexcerpt { font-size: 1.08rem; margin-bottom: 1.4rem; }
.ic-brow { display: grid; grid-template-columns: 14rem 1fr; gap: 1.75rem; align-items: start; padding-bottom: 1.75rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--ic-line); }
.ic-brow:last-of-type { border-bottom: 0; }
.ic-brow-media { position: relative; display: block; overflow: hidden; border-radius: var(--ic-radius-md); aspect-ratio: 16 / 10; background: var(--ic-tint); }
.ic-brow-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ic-ease); }
.ic-brow:hover .ic-brow-media img { transform: scale(1.05); }
.ic-brow h3 { font-size: 1.35rem; line-height: 1.25; margin: 0 0 .55rem; }
.ic-bside { position: sticky; top: 6.5rem; display: grid; gap: 1.25rem; }
.ic-bbox { padding: 1.4rem; border: 1px solid var(--ic-line); border-radius: var(--ic-radius-md); background: var(--ic-card); }
.ic-bbox-title { font-family: var(--ic-font-body); font-size: 1rem; font-weight: 700; color: var(--ic-fg); margin: 0 0 .9rem; }
.ic-bsearch { display: flex; align-items: center; gap: .4rem; padding: .3rem .3rem .3rem 1rem; border: 1px solid var(--ic-line); border-radius: 999px; background: var(--ic-paper); }
.ic-bsearch:focus-within { border-color: var(--ic-blue); box-shadow: 0 0 0 4px rgba(61, 90, 254, .15); }
.ic-bsearch input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ic-text); outline: none; }
.ic-bsearch button { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 50%; background: var(--ic-solid); color: var(--ic-on-solid); }
.ic-bcats { list-style: none; margin: 0; padding: 0; }
.ic-bcats li + li { border-top: 1px solid var(--ic-line); }
.ic-bcats a { display: flex; justify-content: space-between; padding: .65rem 0; color: var(--ic-text); text-decoration: none; }
.ic-bcats a:hover, .ic-bcats a[aria-current="page"] { color: var(--ic-blue); }
.ic-bcats span { font-size: .85rem; color: var(--ic-muted); }
.ic-brecent { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ic-brecent a { display: flex; gap: .85rem; align-items: center; text-decoration: none; }
.ic-brecent-img { flex-shrink: 0; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; overflow: hidden; border-radius: 12px; background: var(--ic-grad); color: #fff; }
.ic-brecent-img img { width: 100%; height: 100%; object-fit: cover; }
.ic-brecent strong { display: block; font-size: .92rem; line-height: 1.3; color: var(--ic-fg); }
.ic-brecent small { display: block; margin-top: .25rem; font-size: .8rem; color: var(--ic-muted); }
.ic-brecent a:hover strong { color: var(--ic-blue); }
.ic-bbox-news { background: var(--ic-grad); border-color: transparent; color: #fff; }
.ic-bbox-news .ic-bbox-title { color: #fff; }
.ic-bbox-news p { color: rgba(255, 255, 255, .88); font-size: .92rem; }
.ic-bnews { display: grid; gap: .5rem; }
.ic-bnews input { padding: .7rem 1rem; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; outline: none; }
.ic-bnews input::placeholder { color: rgba(255, 255, 255, .75); }
.ic-bnews input:focus { border-color: #fff; }
.ic-bnews .ic-btn { background: #fff; color: #1c1b33; box-shadow: none; }
.ic-bbox-news .ic-newsletter-msg.text-success { color: #fff !important; }
.ic-bbox-news .ic-newsletter-msg.text-danger { color: #ffd6db !important; }
@media (max-width: 991.98px) { .ic-bside { position: static; } }
@media (max-width: 767.98px) {
  .ic-bfeat { grid-template-columns: 1fr; }
  .ic-brow { grid-template-columns: 1fr; gap: 1rem; }
}
[data-theme="dark"] .ic-bfeat h2 a:hover, [data-theme="dark"] .ic-brow h3 a:hover, [data-theme="dark"] .ic-brecent a:hover strong, [data-theme="dark"] .ic-bcats a:hover { color: var(--ic-lav); }

/* Artículo */
.ic-reading { position: fixed; top: 0; left: 0; right: 0; z-index: 1050; height: 3px; pointer-events: none; }
.ic-reading span { display: block; height: 100%; width: 100%; background: var(--ic-grad); transform-origin: 0 50%; transform: scaleX(0); }
.ic-post-title { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin: 1.1rem 0 1.1rem; }
.ic-post-cover { border-radius: var(--ic-radius); aspect-ratio: 16 / 8; }
.ic-post-cover img { width: 100%; height: 100%; object-fit: cover; }
.ic-post-lead { font-size: 1.25rem; color: var(--ic-fg); font-weight: 500; margin-bottom: 2rem; }
.ic-post-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--ic-line); }
.ic-share { display: flex; align-items: center; gap: .5rem; }
.ic-share span { font-weight: 700; color: var(--ic-fg); margin-right: .25rem; }
.ic-share a { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--ic-line); color: var(--ic-fg); transition: background-color .2s, color .2s, border-color .2s; }
.ic-share a:hover { background: var(--ic-grad); border-color: transparent; color: #fff; }

/* Contacto */
.ic-contact-card { padding: clamp(1.75rem, 3vw, 2.5rem); }
.ic-contact-card .ic-contact-item a:hover { color: var(--ic-lav); }
/* Mapa con el color de la marca: el mapa en grises y encima una capa del degradé en modo «color»
   (el embed de Google no se puede estilizar por dentro). La capa no toma clics. */
.ic-map { position: relative; overflow: hidden; border-radius: var(--ic-radius); border: 1px solid var(--ic-line); isolation: isolate; }
/* Mapa gris claro (Leaflet + CARTO Positron): calles blancas, sin comercios, pin negro y controles discretos. */
.ic-map-canvas { width: 100%; height: clamp(24rem, 45vw, 32rem); background: #f2f2f2; z-index: 0; }
.ic-map .leaflet-control-zoom { border: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); border-radius: 8px; overflow: hidden; }
.ic-map .leaflet-control-zoom a { width: 2.4rem; height: 2.4rem; line-height: 2.4rem; color: #333; }
.ic-map .leaflet-control-attribution { font-size: .7rem; background: rgba(255, 255, 255, .8); }
.ic-map-pin { background: none; border: 0; }
/* OpenStreetMap en gris claro (como el estilo «plata» de Google) */
.ic-map .leaflet-tile-pane { filter: grayscale(1) brightness(1.06) contrast(.92); }
.ic-map-go { position: absolute; right: 1rem; bottom: 1.75rem; z-index: 500; }
[data-theme="dark"] .ic-map .leaflet-tile-pane { filter: grayscale(1) invert(.92) contrast(.9); }

/* 404 */
.ic-404 { font-family: var(--ic-font-head); font-weight: 800; font-size: clamp(7rem, 22vw, 14rem); line-height: .9; letter-spacing: -.06em; margin: 0 0 1rem; }

/* ---------- Animaciones (site.js). Sin JS o con «reducir movimiento» todo se ve quieto. ---------- */
/* Scroll suave (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Preloader: el símbolo late y se va al cargar la página */
.ic-preloader { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .ic-preloader {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    background: var(--ic-ink);
    transition: opacity .6s var(--ic-ease), visibility .6s;
  }
  .js .ic-preloader img { width: 4rem; height: 4rem; animation: ic-pulse 1.1s ease-in-out infinite; }
  .js.is-loaded .ic-preloader { opacity: 0; visibility: hidden; }
}
@keyframes ic-pulse { 50% { transform: scale(.88); opacity: .75; } }

/* Header que se esconde al bajar */
.ic-header { transition: transform .45s var(--ic-ease), border-color .3s, box-shadow .3s; }
.ic-header.is-hidden { transform: translateY(-100%); }

@media (prefers-reduced-motion: no-preference) {
  /* Bloques que suben al entrar */
  .js .ic-reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ic-ease), transform .9s var(--ic-ease); }
  .js .ic-reveal.is-in { opacity: 1; transform: none; }
  .js .ic-reveal[data-delay="1"] { transition-delay: .08s; }
  .js .ic-reveal[data-delay="2"] { transition-delay: .16s; }
  .js .ic-reveal[data-delay="3"] { transition-delay: .24s; }

  /* Títulos palabra por palabra */
  .ic-split.is-split .ic-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
  .ic-split.is-split .ic-w-in { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ic-ease); }
  .ic-split.is-split.is-in .ic-w-in { transform: none; }
  /* La palabra destacada: el degradé barre de izquierda a derecha y aparece el texto */
  .ic-split.is-split .ic-hl {
    background-size: 0% 100%;
    background-repeat: no-repeat;
    color: transparent;
    transition: background-size .9s var(--ic-ease), color .4s ease;
  }
  .ic-split.is-split.is-in .ic-hl { background-size: 100% 100%; color: #fff; }

  /* Botones: el texto rueda hacia arriba y entra una copia */
  .ic-btn-roll { display: inline-block; overflow: hidden; vertical-align: top; height: 1.2em; }
  .ic-btn-roll-in { display: block; position: relative; transition: transform .5s var(--ic-ease); }
  .ic-btn-roll-in::after { content: attr(data-text); content: attr(data-text) / ""; position: absolute; left: 0; top: 100%; white-space: nowrap; }
  .ic-btn:hover .ic-btn-roll-in, .ic-btn:focus-visible .ic-btn-roll-in { transform: translateY(-100%); }
  [data-magnetic] { transition: transform .5s var(--ic-ease), box-shadow .35s var(--ic-ease); }

  /* Elementos que siguen al mouse */
  [data-depth] { transition: translate .6s var(--ic-ease); }
}

/* Imágenes con parallax: la imagen es un poco más grande que su caja y se desplaza */
.ic-parallax { overflow: hidden; }
.ic-parallax img { transform: scale(1.14); will-change: transform; }
@media (prefers-reduced-motion: reduce) { .ic-parallax img { transform: none; } }

/* Volver arriba: anillo con el progreso de lectura */
.ic-to-top {
  --p: 0;
  position: fixed;
  right: 1.45rem;
  bottom: 5.6rem;
  z-index: 1040;
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(var(--ic-blue) calc(var(--p) * 1%), var(--ic-line) 0);
  color: var(--ic-fg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s, visibility .3s, transform .4s var(--ic-ease);
}
.ic-to-top::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ic-card); }
.ic-to-top i { position: relative; font-size: 1.1rem; }
.ic-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

/* Carrusel de testimonios (scroll con snap + flechas) */
.ic-slider-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3rem) / 3);
  column-gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: .25rem;
}
.ic-slider-track::-webkit-scrollbar { display: none; }
.ic-slide { scroll-snap-align: start; }
.ic-slider-nav { display: flex; gap: .5rem; }
.ic-slider-nav button {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--ic-line);
  border-radius: 50%;
  background: var(--ic-card);
  color: var(--ic-fg);
  font-size: 1.1rem;
  transition: background-color .2s, color .2s, border-color .2s, opacity .2s;
}
.ic-slider-nav button:hover:not(:disabled) { background: var(--ic-solid); border-color: var(--ic-solid); color: var(--ic-on-solid); }
.ic-slider-nav button:disabled { opacity: .4; cursor: default; }
@media (max-width: 991.98px) { .ic-slider-track { grid-auto-columns: calc((100% - 1.5rem) / 2); } }
@media (max-width: 575.98px) { .ic-slider-track { grid-auto-columns: 86%; } }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .ic-hero-visual { margin-top: 2.5rem; padding-left: 0; }
  .ic-float-a { left: .5rem; }
  .ic-float-b { right: .5rem; }
  .ic-about-badge { right: 1rem; }
}
@media (max-width: 575.98px) {
  body { font-size: 1rem; }
  .ic-stats { grid-template-columns: 1fr 1fr; }
  .ic-float-b, .ic-chip-b { display: none; }
  .ic-faq-answer-inner { padding-right: 0; }
  .ic-hero-actions .ic-btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Modo oscuro (html[data-theme="dark"]): lo elige el botón del header y se recuerda; si no se eligió, sigue al
   sistema. Mismas variables, tonos de noche con la paleta de la marca.
   ========================================================================== */
[data-theme="dark"] {
  --ic-paper: #0e0d1c;
  --ic-card: #17162b;
  --ic-line: rgba(255, 255, 255, .1);
  --ic-text: #d6d8ec;
  --ic-muted: #a6a9c4;
  --ic-fg: #f3f3fb;
  --ic-tint: rgba(140, 155, 255, .14);
  --ic-solid: #ffffff;
  --ic-on-solid: #1c1b33;
  --ic-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 40px -18px rgba(0, 0, 0, .6);
  --ic-shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 30px 60px -24px rgba(61, 90, 254, .45);
  --bs-link-color-rgb: 140, 155, 255;
  --bs-link-hover-color-rgb: 196, 181, 255;
  color-scheme: dark;
}
[data-theme="dark"] .ic-prose a { color: var(--ic-lav); }
/* Degradé de los títulos: en oscuro, la versión lavanda (como «creativa» en el logo blanco) */
[data-theme="dark"] .ic-grad-text { background: linear-gradient(135deg, #8c9bff 0%, #c4b5ff 100%); -webkit-background-clip: text; background-clip: text; }
[data-theme="dark"] .ic-dots::before { background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px); }
[data-theme="dark"] .ic-tag, [data-theme="dark"] .ic-filter span { color: #c7ceff; }
[data-theme="dark"] .ic-crumbs li + li::before { color: #5d6080; }
[data-theme="dark"] .ic-link i { color: var(--ic-lav); }
[data-theme="dark"] .ic-link:hover { color: var(--ic-lav); }
[data-theme="dark"] .ic-btn-ink:hover { background: #e6e7f5; color: var(--ic-on-solid); }
[data-theme="dark"] .ic-btn-light { background: #fff; color: #1c1b33; }
[data-theme="dark"] .ic-project:hover h3, [data-theme="dark"] .ic-faq details.is-open summary { color: var(--ic-lav); }
/* Header y menú */
[data-theme="dark"] .ic-header::before { background: rgba(14, 13, 28, .82); }
[data-theme="dark"] .ic-nav-bar, [data-theme="dark"] .ic-icon-btn { border-color: var(--ic-line); }
[data-theme="dark"] .ic-nav-link:hover { background: rgba(255, 255, 255, .06); }
[data-theme="dark"] .ic-nav-link.active, [data-theme="dark"] .ic-nav-link.show { background: rgba(140, 155, 255, .18); }
[data-theme="dark"] .ic-mega { box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .7); }
[data-theme="dark"] .ic-search-modal .modal-content { background: var(--ic-card); color: var(--ic-text); }
[data-theme="dark"] .ic-search-form .btn-close { filter: invert(1); }
/* Logo: en oscuro, la versión blanca */
.ic-logo-dark { display: none !important; }
[data-theme="dark"] .ic-logo-light { display: none !important; }
[data-theme="dark"] .ic-logo-dark { display: inline-block !important; }
/* Superficies y bloques con colores fijos de modo claro */
[data-theme="dark"] .ic-window-bar span { background: rgba(255, 255, 255, .18); }
[data-theme="dark"] .ic-banner-badge { background: rgba(23, 22, 43, .9); }
[data-theme="dark"] .ic-collage figure { border-color: var(--ic-card); }
[data-theme="dark"] .ic-project-media .ic-tag { background: rgba(23, 22, 43, .88); color: #fff; }
[data-theme="dark"] .ic-form .form-control, [data-theme="dark"] .ic-form .form-select { color: var(--ic-text); }
[data-theme="dark"] .ic-form .form-control:focus, [data-theme="dark"] .ic-form .form-select:focus { background: var(--ic-card); color: var(--ic-text); }
[data-theme="dark"] .ic-form .form-control::placeholder { color: #7d80a0; }
[data-theme="dark"] .ic-prose blockquote { color: var(--ic-fg); }
/* Las secciones que ya eran oscuras se separan un poco del fondo de la página */
[data-theme="dark"] .ic-dark, [data-theme="dark"] .ic-footer, [data-theme="dark"] .ic-cta, [data-theme="dark"] .ic-card.ic-dark { background-color: #1a1932; }
[data-theme="dark"] .ic-dark .ic-card { background: #22213d; }

/* Botón de modo oscuro: luna en claro, sol en oscuro */
.ic-theme-toggle .bi-sun { display: none; }
[data-theme="dark"] .ic-theme-toggle .bi-sun { display: inline-block; }
[data-theme="dark"] .ic-theme-toggle .bi-moon-stars { display: none; }

/* Encabezado de páginas internas en oscuro */
[data-theme="dark"] .ic-page-hero::before {
  background-image:
    linear-gradient(rgba(140, 155, 255, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 155, 255, .12) 1px, transparent 1px);
}
[data-theme="dark"] .ic-page-hero::after {
  background:
    radial-gradient(28rem 26rem at 96% 0%, rgba(106, 61, 240, .38), transparent 70%),
    radial-gradient(26rem 24rem at 2% 100%, rgba(61, 90, 254, .3), transparent 70%);
}