/* =========================================================
   COMPONENTES · botones, tarjetas, formularios, badges,
   dropdowns, marquee, breadcrumb, paginación, filtros, prosa
   ========================================================= */

/* ---------- Botones ---------- */
.btn {
  --btn-bg: var(--brand-600); --btn-fg: #fff; --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 12px 24px; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-bd);
  font-weight: 700; font-size: var(--fs-sm); letter-spacing: .005em; line-height: 1.2; white-space: nowrap;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.btn:hover { --btn-bg: var(--brand-700); transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgb(var(--brand-dark-rgb) / .55); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--t) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn--lg { min-height: 56px; padding: 16px 32px; font-size: 1rem; }
.btn--sm { min-height: 40px; padding: 8px 16px; font-size: var(--fs-xs); }
.btn--block { width: 100%; }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--navy); --btn-bd: var(--line-strong); }
.btn--outline:hover { --btn-bg: var(--navy); --btn-fg: #fff; --btn-bd: var(--navy); box-shadow: 0 8px 20px -10px rgb(var(--navy-rgb) / .5); }
.btn--white { --btn-bg: #fff; --btn-fg: var(--navy-900); }
.btn--white:hover { --btn-bg: var(--navy-900); --btn-fg: #fff; box-shadow: 0 10px 24px -10px rgb(var(--navy-950-rgb) / .6); }
.btn--ghost-dark { --btn-bg: rgba(255, 255, 255, .06); --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .28); }
.btn--ghost-dark:hover { --btn-bg: #fff; --btn-fg: var(--navy-900); --btn-bd: #fff; box-shadow: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn .spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; display: none; }
.btn.is-loading .spinner { display: block; }
.btn.is-loading .arrow { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .btn .spinner { animation: spin .8s linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }

.text-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--brand-700); }
.text-link svg { width: 16px; height: 16px; transition: transform var(--t) var(--ease); }
.text-link:hover svg { transform: translateX(3px); }

/* ---------- Badges, chips y etiquetas ---------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2); padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-600);
}
.chip svg { width: 16px; height: 16px; color: var(--brand-600); }
.chip-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.badge {
  display: inline-flex; align-items: center; justify-self: start; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  background: var(--brand-50); color: var(--brand-700);
}
.badge--navy { background: var(--navy-50); color: var(--navy); }
.badge--dark { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .16); }

.pill-kicker {
  display: inline-flex; align-items: center; gap: var(--s-2); padding: 6px 14px 6px 6px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-on-dark);
}
.pill-kicker b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); }
.pill-kicker b svg { width: 14px; height: 14px; color: #fff; }

.draft-note {
  display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4) var(--s-5); border-radius: var(--r-md);
  background: var(--warning-bg); color: var(--warning-ink); font-size: var(--fs-sm); font-weight: 600; border: 1px solid #F1DFA6;
}
.draft-note svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }

/* ---------- Checklist ---------- */
.checklist { display: grid; gap: var(--s-3); margin-top: var(--s-2); }
.checklist li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--ink-600); }
.checklist li::before {
  content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%;
  background: var(--brand-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8320B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* ---------- Dropdown (navegación de escritorio) ---------- */
.dropdown {
  position: absolute; z-index: var(--z-dropdown); top: calc(100% + 8px); left: -8px; min-width: 280px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: var(--s-2);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t);
}
.dropdown::before { content: ""; position: absolute; inset: -10px 0 auto; height: 10px; } /* puente para hover */
.dropdown.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dropdown a {
  display: flex; align-items: center; gap: var(--s-3); padding: 10px 12px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dropdown a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); flex: none; transition: background-color var(--t-fast) var(--ease); }
.dropdown a:hover, .dropdown a:focus-visible, .dropdown a[aria-current="page"] { background: var(--brand-50); color: var(--brand-700); }
.dropdown a:hover::before, .dropdown a:focus-visible::before, .dropdown a[aria-current="page"]::before { background: var(--brand); }
.dropdown a[aria-current="page"] { font-weight: 700; }

/* ---------- Imágenes enmarcadas ---------- */
.media { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md); background: var(--navy-50); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--16x9 { aspect-ratio: 16 / 9; }

/* ---------- Rotador de pantallas ----------
   Mismo notebook + teléfono; solo cambian las pantallas, con fundido en el lugar (no desliza).
   Los PNG miden 2500×1666 y traen aire transparente: el marco recorta al área con contenido
   (x 372–2124, y 284–1508 → 1752×1224) sin tocar los archivos. JS: reveal.js [data-rotator]. */
.screens { max-width: 1040px; margin-inline: auto; display: grid; gap: var(--s-8); justify-items: center; }
.screens__stage { position: relative; width: 100%; perspective: 1800px; }
.screens__stage::before { /* halo azul de marca bajo el dispositivo */
  content: ""; position: absolute; inset: 20% 10% 0; z-index: 0; filter: blur(24px);
  background: radial-gradient(50% 50% at 50% 50%, rgb(var(--blue-light-rgb) / .30), transparent 70%);
}
.screens__frame {
  position: relative; z-index: var(--z-base); overflow: hidden; aspect-ratio: 1752 / 1224;
  /* leve profundidad al hacer scroll (--tilt lo calcula reveal.js en [data-tilt]) */
  transform: rotateX(calc(var(--tilt, 0) * 10deg)) translateY(calc(var(--tilt, 0) * 32px));
  transform-origin: 50% 100%; will-change: transform;
}
/* La saliente (.is-prev) queda opaca debajo y solo la entrante (.is-active) hace el fundido encima:
   así el dispositivo, idéntico en las tres, nunca se ve desteñido a mitad del cambio. */
.screens__slide {
  position: absolute; left: -21.23%; top: -23.2%; width: 142.69%; max-width: none; height: auto;
  opacity: 0;
}
.screens__slide.is-prev { opacity: 1; z-index: 1; }
.screens__slide.is-active { opacity: 1; z-index: 2; transition: opacity var(--t-fade) var(--ease); }

.screens__controls { display: none; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--s-3); }
.js .screens__controls { display: flex; }   /* sin JS se ve la primera pantalla, sin controles */
.screens__tabs { display: inline-flex; gap: 4px; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); box-shadow: var(--shadow-sm); }
.screens__tab {
  --c: var(--navy);
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 8px 16px; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink-600);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.screens__tab svg { width: 18px; height: 18px; color: var(--c); transition: color var(--t) var(--ease); }
.screens__tab:hover { background: var(--surface); color: var(--navy); }
.screens__tab[aria-pressed="true"] { background: var(--navy); color: #fff; }
.screens__tab[aria-pressed="true"] svg { color: #fff; }
.screens__tab::after { /* progreso hasta la próxima pantalla */
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 2px;
  background: rgb(255 255 255 / .85); transform: scaleX(0); transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
  .screens.is-playing .screens__tab[aria-pressed="true"]::after { animation: screens-progress var(--rotator-interval, 4500ms) linear forwards; }
}
@keyframes screens-progress { to { transform: scaleX(1); } }
@media (max-width: 479px) {
  .screens__tab { padding: 8px 12px; font-size: var(--fs-xs); }
}
.screens__pause {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); color: var(--navy); box-shadow: var(--shadow-sm);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.screens__pause:hover { background: var(--navy); color: #fff; }
.screens__pause svg { width: 18px; height: 18px; }
.screens__pause .icon-play { display: none; }
.screens:not(.is-playing) .screens__pause .icon-pause { display: none; }
.screens:not(.is-playing) .screens__pause .icon-play { display: block; }

/* ---------- Tarjeta Genesys (banda) ---------- */
.genesys-card {
  display: grid; gap: var(--s-5); align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  padding: var(--s-6);
}
.genesys-card__icon { width: 56px; height: 56px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600); }
.genesys-card__icon svg { width: 28px; height: 28px; }
.genesys-card__text { font-size: var(--fs-base); color: var(--ink-600); line-height: 1.5; }
.genesys-card__text strong { display: block; color: var(--navy-900); font-weight: 800; font-size: var(--fs-h3); letter-spacing: -0.02em; margin-bottom: 2px; }
@media (min-width: 768px) {
  .genesys-card { grid-template-columns: auto 1fr auto; gap: var(--s-6); padding: var(--s-8) var(--s-10); }
}

/* ---------- Tarjeta de canal ---------- */
.channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
@media (min-width: 720px) { .channel-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); } }
.channel {
  --c: var(--navy);
  position: relative; display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-6) var(--s-4);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  text-align: center; font-weight: 700; font-size: var(--fs-sm); color: var(--navy-900);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.channel__icon {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  color: var(--c); background: color-mix(in srgb, var(--c) 11%, #fff);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease);
}
.channel__icon svg { width: 28px; height: 28px; }
.channel:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--c) 35%, #fff); }
.channel:hover .channel__icon { background: var(--c); color: #fff; transform: scale(1.04); }
.channel--gmail { --c: #C5372C; }
.channel--whatsapp { --c: #128C4A; }
.channel--telegram { --c: #1E88C7; }
.channel--instagram { --c: #C13584; }
.channel--messenger { --c: #7B3FE4; }
.channel--twitter { --c: #1A8CD8; }
.channel--skype { --c: #0A84C6; }
.channel--sms { --c: var(--navy); }
.channel--webchat { --c: var(--brand-600); }
.channel--teams { --c: #5059C9; }

/* ---------- Tarjeta azul con ícono (feature) ---------- */
.feature {
  position: relative; overflow: hidden; isolation: isolate; display: grid; align-content: start; gap: var(--s-4);
  padding: var(--s-8); border-radius: var(--r-xl); color: var(--ink-on-dark);
  background: linear-gradient(165deg, var(--navy) 0%, var(--navy-900) 100%);
  box-shadow: var(--shadow-md);
  transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.feature::before { content: ""; position: absolute; z-index: -1; width: 220px; height: 220px; right: -90px; top: -90px; border-radius: 50%; background: radial-gradient(circle, rgb(var(--blue-light-rgb) / .35), transparent 70%); transition: transform var(--t-slow) var(--ease); }
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.feature:hover::before { transform: scale(1.25); }
.feature h3 { color: #fff; font-size: var(--fs-h3); margin-top: var(--s-2); }
.feature p { font-size: var(--fs-base); line-height: 1.65; }

.icon-tile { width: 56px; height: 56px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--brand-gradient); color: #fff; box-shadow: 0 12px 24px -10px rgb(var(--blue-rgb) / .6); }
.icon-tile svg { width: 28px; height: 28px; }
.icon-tile--soft { background: var(--blue-50); color: var(--brand-blue); box-shadow: none; }

/* ---------- Tarjeta de beneficio (clara) ---------- */
.benefit {
  display: grid; align-content: start; gap: var(--s-3); padding: var(--s-8);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.benefit:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.benefit h3 { font-size: var(--fs-h3); margin-top: var(--s-2); }
.benefit p { color: var(--ink-600); font-size: var(--fs-base); line-height: 1.65; }

/* ---------- Pasos numerados ---------- */
.steps { display: grid; gap: var(--s-5); counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { position: relative; padding: var(--s-6); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); counter-increment: step; }
.step::before { content: counter(step, decimal-leading-zero); display: block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; color: var(--brand-700); margin-bottom: var(--s-3); }
.step h3 { font-size: var(--fs-h3); }
.step p { margin-top: var(--s-2); font-size: var(--fs-base); color: var(--ink-600); }

/* ---------- Tarjeta de post ---------- */
.post-card {
  position: relative; display: grid; grid-template-rows: auto 1fr; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* Proporción 32:15: la de casi todas las imágenes destacadas del blog (banners con el título escrito en la imagen) */
.post-card__media { aspect-ratio: 32 / 15; overflow: hidden; background: var(--navy-50); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.post-card__media--contain img { object-fit: contain; }   /* otra proporción: se ve completa, sin recortar texto */
.post-card:hover .post-card__media img { transform: scale(1.03); }
.post-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); padding: var(--s-6); }
.post-card__title { font-size: var(--fs-h3); line-height: 1.3; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; } /* toda la tarjeta clickeable */
.post-card__title a:focus-visible { outline: none; }
.post-card:focus-within { outline: 3px solid var(--brand); outline-offset: 3px; }
.post-card__excerpt { color: var(--ink-600); font-size: var(--fs-base); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
/* Botón "Leer más" al pie de la tarjeta: queda sobre el link estirado del título (z-index) */
.post-card__btn { position: relative; z-index: 1; margin-top: auto; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-size: var(--fs-xs); color: var(--ink-500); font-weight: 600; }
.post-meta span + span::before { content: "·"; margin-right: var(--s-3); color: var(--line-strong); }
.on-dark .post-meta { color: var(--ink-on-dark-muted); }

.post-card--featured { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .post-card--featured { grid-template-rows: none; grid-template-columns: 1.3fr 1fr; }
  .post-card--featured .post-card__media { aspect-ratio: auto; min-height: 100%; }
  .post-card--featured .post-card__body { padding: var(--s-10); align-content: center; }
  .post-card--featured .post-card__title { font-size: var(--fs-h3); }
}

/* ---------- Tarjeta de recurso ---------- */
.resource {
  display: grid; grid-template-rows: auto 1fr; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.resource:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.resource__media { aspect-ratio: 3 / 2; background: var(--navy-50); }
.resource__media img { width: 100%; height: 100%; object-fit: cover; }
.resource__body { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-6); }
.resource__body h3 { font-size: var(--fs-h3); line-height: 1.3; }
.resource__body p { color: var(--ink-600); font-size: var(--fs-base); }
.resource__foot { margin-top: auto; padding-top: var(--s-2); }

/* ---------- Filtros (solo CSS, radios + :has) ---------- */
.filters { border: 0; padding: 0; margin: 0 0 var(--s-10); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.filters legend { float: left; margin-right: var(--s-3); font-size: var(--fs-sm); font-weight: 700; color: var(--navy-900); }
.filters input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.filters label {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line-strong); background: #fff; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-600); cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.filters label:hover { border-color: var(--navy); color: var(--navy); }
.filters input:checked + label { background: var(--navy); border-color: var(--navy); color: #fff; }
.filters input:focus-visible + label { outline: 3px solid var(--brand); outline-offset: 3px; }

/* ---------- Filtro por categoría del blog (cada filtro es su propia página, sin JS) ---------- */
.cat-filter { margin-bottom: var(--s-10); }
.cat-filter ul { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cat-filter a {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 8px 16px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line-strong); background: #fff; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-600);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.cat-filter a:hover { border-color: var(--navy); color: var(--navy); }
.cat-filter a[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.cat-filter__n { font-size: var(--fs-xs); opacity: .7; }

/* ---------- Breadcrumb ---------- */
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); font-weight: 600; }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink-500); }
.breadcrumb li + li::before { content: ""; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; }
.breadcrumb a { color: var(--brand-navy); transition: color var(--t-fast) var(--ease); }
.breadcrumb a:hover { color: var(--brand-700); }
.breadcrumb [aria-current="page"] { color: var(--ink-600); }

/* ---------- Paginación ---------- */
.pagination { margin-top: var(--s-12); }
.pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.pagination a, .pagination span {
  display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: #fff; font-weight: 700; font-size: var(--fs-sm); color: var(--ink-600);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pagination a:hover { border-color: var(--navy); color: var(--navy); }
.pagination [aria-current="page"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.pagination [aria-disabled="true"] { opacity: .45; }
.pagination svg { width: 16px; height: 16px; }

/* ---------- Marquee de logos ---------- */
.marquee {
  overflow: hidden; position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track { display: flex; width: max-content; }
.marquee__list { display: flex; align-items: center; gap: clamp(40px, 5vw, 80px); padding-right: clamp(40px, 5vw, 80px); }
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee 38s linear infinite; }
  .marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { mask-image: none; -webkit-mask-image: none; }
  .marquee__track { width: auto; justify-content: center; padding-inline: var(--gutter); }
  .marquee__list { flex-wrap: wrap; justify-content: center; padding-right: 0; gap: var(--s-6) var(--s-10); }
  .marquee__list[aria-hidden="true"] { display: none; }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* Logos normalizados: misma altura óptica, gris por defecto y color en hover */
.logo-item { display: grid; place-items: center; height: 56px; min-width: 120px; }
/* Los PNG de partners ya vienen normalizados por altura óptica en un lienzo de 56px: todos con la misma altura */
.logo-item img { height: 56px; width: auto; filter: grayscale(1); opacity: .6; transition: filter var(--t) var(--ease), opacity var(--t) var(--ease); }
.logo-item:hover img { filter: none; opacity: 1; }

/* ---------- Grilla de clientes (fondo oscuro) ---------- */
/* Flex con ancho fijo por columna: la última fila incompleta queda centrada */
.client-grid { --cols: 2; --gap: var(--s-3); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
@media (min-width: 600px) { .client-grid { --cols: 3; } }
@media (min-width: 960px) { .client-grid { --cols: 5; --gap: var(--s-4); } }
.client {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  display: grid; place-items: center; height: 88px; padding: var(--s-4); border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08);
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.client:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
/* Los PNG ya vienen en blanco y normalizados por altura óptica en un lienzo de 48px: sin filtros */
.client img { height: 48px; width: auto; max-width: 100%; object-fit: contain; opacity: .85; transition: opacity var(--t) var(--ease); }
.client:hover img { opacity: 1; }
.client--extra { display: none; }
.client-grid.is-expanded .client--extra { display: grid; }
@media (prefers-reduced-motion: no-preference) {
  .client-grid.is-expanded .client--extra { animation: fadeUp var(--t-slow) var(--ease) both; }
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }
.toggle-more svg { transition: transform var(--t) var(--ease); }
.toggle-more[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---------- Banda CTA con degradé de marca ---------- */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: clamp(20px, 2vw, var(--r-2xl)); padding: clamp(40px, 6vw, 80px) clamp(24px, 6vw, 80px);
  background: linear-gradient(110deg, var(--magenta) 0%, #E23F4C 50%, var(--brand) 100%);
  color: #fff; display: grid; gap: var(--s-8); align-items: center;
}
.cta-band::before, .cta-band::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .18); }
.cta-band::before { width: 520px; height: 520px; right: -160px; top: -220px; }
.cta-band::after { width: 340px; height: 340px; right: -60px; top: -120px; }
.cta-band h2 { color: #fff; font-size: var(--fs-h2); max-width: 640px; }
.cta-band__buttons { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.cta-band__buttons .btn { min-width: 160px; }
.cta-band__buttons .btn svg { width: 20px; height: 20px; }
.btn--wa svg { color: #128C4A; }
.btn--tg svg { color: #1E88C7; }
.btn--ig svg { color: #C13584; }
.cta-band__buttons .btn:hover svg { color: #fff; }
@media (min-width: 1024px) { .cta-band { grid-template-columns: 1.2fr 1fr; } .cta-band__buttons { justify-content: flex-end; } }

/* ---------- Formulario ---------- */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-md); padding: clamp(24px, 4vw, 40px); }
.form-card__title { font-size: var(--fs-h3); margin-bottom: var(--s-6); }
.form { display: grid; gap: var(--s-5); }
.form__row { display: grid; gap: var(--s-5); }
@media (min-width: 600px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { position: relative; }
.field input {
  width: 100%; height: 60px; padding: 24px 16px 8px; border-radius: var(--r-md);
  background: #fff; border: 1.5px solid var(--line-strong); font-size: 1rem; color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
  appearance: none;
}
.field input:hover { border-color: var(--line-hover); }
.field input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgb(var(--navy-rgb) / .14); }
.field label {
  position: absolute; left: 17px; top: 19px; font-size: 1rem; color: var(--ink-500); pointer-events: none;
  transform-origin: 0 0; transition: transform var(--t) var(--ease), color var(--t) var(--ease);
}
.field input:focus + label, .field input:not(:placeholder-shown) + label { transform: translateY(-11px) scale(.78); color: var(--navy); font-weight: 600; }
.field input[aria-invalid="true"] { border-color: var(--danger); background: #FFF8F8; }
.field input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(198, 40, 40, .14); }
.field input[aria-invalid="true"] + label { color: var(--danger); }
.field input:disabled { background: var(--surface); cursor: not-allowed; }
.field__error { display: none; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--danger); }
.field__error svg { width: 16px; height: 16px; flex: none; }
.field__error.is-visible { display: flex; }
.field__hint { margin-top: 6px; font-size: var(--fs-xs); color: var(--ink-500); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: grid; gap: var(--s-3); }
.form__note { font-size: var(--fs-xs); color: var(--ink-500); text-align: center; }
.form__note a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.form-status { display: none; align-items: flex-start; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; }
.form-status.is-success { display: flex; background: var(--success-bg); color: var(--success); }
.form-status.is-error { display: flex; background: var(--danger-bg); color: var(--danger); }
.form-status svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }

.genesys-mini { margin-top: var(--s-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); padding: var(--s-5) var(--s-6); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); }
.genesys-mini p { font-weight: 700; color: var(--navy-900); flex: 1 1 160px; }

/* ---------- Redes sociales y compartir ---------- */
.social { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.social a {
  width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #fff;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.social a:hover { background: var(--brand-600); border-color: var(--brand-600); transform: translateY(-2px); }
.social svg { width: 20px; height: 20px; }
.social--light a { background: #fff; border-color: var(--line); color: var(--navy); }
.social--light a:hover { color: #fff; }

/* ---------- Autor ---------- */
.author { display: flex; gap: var(--s-4); align-items: center; }
.author img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.author__name { font-weight: 700; color: var(--navy-900); }
.author__role { font-size: var(--fs-xs); color: var(--ink-500); }
.on-dark .author__name { color: #fff; }
.on-dark .author__role { color: var(--ink-on-dark-muted); }
.author-box { display: grid; gap: var(--s-4); padding: var(--s-6); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); }
.author-box p { font-size: var(--fs-base); color: var(--ink-600); }

/* ---------- Índice (TOC) ---------- */
.toc__title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); margin-bottom: var(--s-3); }
.toc ol { display: grid; gap: 2px; border-left: 2px solid var(--line); counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: flex; gap: var(--s-2); padding: 6px 12px; margin-left: -2px; border-left: 2px solid transparent;
  font-size: var(--fs-sm); color: var(--ink-600); line-height: 1.4;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.toc a::before { content: counter(toc) "."; color: var(--ink-500); font-weight: 700; min-width: 1.4em; }
.toc a:hover { color: var(--navy); border-color: var(--line-strong); }
.toc a.is-active { color: var(--brand-700); border-color: var(--brand); font-weight: 600; }
.toc-details { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); background: #fff; }
.toc-details summary { cursor: pointer; font-weight: 700; color: var(--navy-900); }
.toc-details .toc { margin-top: var(--s-3); }

/* ---------- Prosa (artículos y documentos legales) ---------- */
.prose { max-width: var(--measure); font-size: var(--fs-base); line-height: 1.75; color: var(--ink); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--fs-h2); margin-top: 2em; }
.prose h3 { font-size: var(--fs-h3); margin-top: 1.6em; }
.prose p, .prose li { color: var(--ink-600); }
.prose a { color: var(--brand-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.4em; display: grid; gap: .5em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--brand); }
.prose strong { color: var(--navy-900); }
.prose blockquote { border-left: 4px solid var(--brand); padding: var(--s-2) 0 var(--s-2) var(--s-6); font-size: var(--fs-h3); font-weight: 600; color: var(--navy-900); line-height: 1.5; }
.prose figure { margin-block: 2em; }
.prose figure img { border-radius: var(--r-lg); width: 100%; }
.prose figcaption { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--ink-500); text-align: center; }

/* Variante para artículos del blog: ~70ch y line-height 1.7 */
.prose--article { line-height: 1.7; overflow-wrap: break-word; }   /* URLs largas escritas como texto en las fuentes */
.prose--article > :first-child { margin-top: 0; }
.prose--article h2 + *, .prose--article h3 + * { margin-top: .6em; }
.prose--article blockquote p { color: inherit; }
.prose--article figure img { height: auto; }
.prose--article code { font-size: .9em; padding: .1em .35em; border-radius: var(--r-sm); background: var(--navy-50); color: var(--navy-900); }
.prose--article hr { border: 0; border-top: 1px solid var(--line); margin-block: 2em; }

/* ---------- Artículo del blog: hero, portada, cuerpo y pie ---------- */
.post-hero .page-hero__inner { max-width: 860px; }
.post-hero { padding-bottom: calc(clamp(48px, 6vw, 88px) + clamp(56px, 7vw, 104px) * .6); }
.post-cover { max-width: calc(860px + var(--gutter) * 2); margin-top: calc(clamp(56px, 7vw, 104px) * -0.6); position: relative; z-index: var(--z-raised); }
.post-cover .media { box-shadow: var(--shadow-lg); background: #fff; }
.post-cover img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; }   /* proporción natural: los banners traen texto */
.post-body { padding-block: var(--section-y); }
.post-body .article-layout { max-width: var(--measure); margin-inline: auto; }
.post-foot { display: grid; gap: var(--s-6); padding-top: var(--s-8); border-top: 1px solid var(--line); }
.post-tags p, .share p { font-size: var(--fs-sm); font-weight: 700; color: var(--navy-900); }
.tag-list { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.tag { padding: 4px 12px; border-radius: var(--r-pill); background: var(--navy-50); color: var(--navy); font-size: var(--fs-xs); font-weight: 600; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }

/* Headings numerados del documento legal */
.prose--legal { counter-reset: legal; }
.prose--legal h2 { counter-increment: legal; counter-reset: legal-sub; scroll-margin-top: calc(var(--header-h) + 24px); display: flex; gap: .5em; }
.prose--legal h2::before { content: counter(legal) "."; color: var(--brand-700); }
.prose--legal h3 { counter-increment: legal-sub; }
.prose--legal h3::before { content: counter(legal) "." counter(legal-sub) " "; color: var(--ink-500); }
.prose--legal > h2:first-of-type { margin-top: 0; }

/* =========================================================
   COMPONENTES DE ACENTO (parametrizados por variable de color)
   Las páginas definen --accent, --accent-strong, --accent-on-dark y --accent-ink
   (ver pages.css). Sin esas variables, todo cae al naranjo de marca.
   ========================================================= */

/* ---------- Badge píldora con ícono ---------- */
.badge-pill {
  display: inline-flex; align-items: center; gap: var(--s-2); justify-self: start;
  padding: 6px 14px 6px 10px; border-radius: var(--r-pill);
  background: var(--accent-strong, var(--brand-600)); color: #fff;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.badge-pill svg { width: 16px; height: 16px; flex: none; }

/* ---------- Botón en color de acento ---------- */
.btn--accent { --btn-bg: var(--accent, var(--brand-600)); --btn-fg: var(--accent-ink, #fff); }
.btn--accent:hover {
  --btn-bg: color-mix(in srgb, var(--accent, var(--brand-600)) 82%, #fff);
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--accent, var(--brand-600)) 70%, transparent);
}

/* ---------- Barra corta bajo el título ---------- */
.has-bar::after {
  content: ""; display: block; width: 48px; height: 4px; border-radius: 2px; margin-top: var(--s-4);
  background: var(--bar-color, var(--brand-navy));
}
.on-dark .has-bar::after { background: var(--bar-color-dark, var(--accent, var(--brand))); }
.section-head--center .has-bar::after, .has-bar--center::after { margin-inline: auto; }

/* ---------- Título de dos tonos: primeras palabras fuertes en acento, resto liviano ---------- */
.title-2t { font-weight: 500; color: var(--brand-navy); }
.title-2t strong { font-weight: 800; color: var(--accent-strong, var(--brand-700)); }
.on-dark .title-2t { color: #fff; }
.on-dark .title-2t strong { color: var(--accent-on-dark, var(--brand-300)); }

/* ---------- Ícono sobre el título de sección ---------- */
.sec-icon { width: 40px; height: 40px; color: var(--accent-strong, var(--brand-600)); margin-bottom: var(--s-1); }
.on-dark .sec-icon { color: var(--accent-on-dark, var(--brand-300)); }
.section-head--center .sec-icon { margin-inline: auto; }

/* ---------- Borde superior en arco convexo, con un círculo naranjo montado sobre la curva ----------
   La "tapa" es media elipse de 120% del ancho y --curve-h de alto, que sube sobre la sección anterior
   (cuyo padding inferior siempre es mayor que --curve-h). */
.curve-top { --curve-h: clamp(28px, 4.5vw, 64px); --curve-dot: clamp(20px, 2.2vw, 34px); position: relative; isolation: isolate; }
.curve-top::before {
  content: ""; position: absolute; z-index: -1; left: -10%; right: -10%;
  top: calc(var(--curve-h) * -1); height: calc(var(--curve-h) + 2px);
  background: var(--curve-bg, var(--brand-navy));
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.curve-top::after { /* punto en x = 75%: allí el arco está a 0,909·h sobre el borde recto */
  content: ""; position: absolute; left: 75%; width: var(--curve-dot); aspect-ratio: 1; border-radius: 50%;
  top: calc(var(--curve-h) * -0.909 - var(--curve-dot) / 2); transform: translateX(-50%);
  background: var(--curve-dot-color, var(--brand));
}

/* ---------- Flecha curva que apunta a un CTA secundario ---------- */
.cta-arrow { width: 64px; height: 48px; flex: none; color: var(--brand-navy); }
.on-dark .cta-arrow { color: #fff; }
.cta-with-arrow { display: inline-flex; align-items: center; gap: var(--s-2); }
@media (max-width: 479px) { .cta-arrow { display: none; } }

/* ---------- Círculo de color detrás de personas recortadas + punto naranjo ---------- */
.has-circle { position: relative; isolation: isolate; }
.has-circle::before {
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(86%, 440px); aspect-ratio: 1; border-radius: 50%;
  background: var(--circle-color, var(--accent, var(--brand-navy)));
}
.has-dot { position: relative; }
.has-dot::after {
  content: ""; position: absolute; z-index: 1; width: clamp(16px, 1.8vw, 26px); aspect-ratio: 1; border-radius: 50%;
  top: var(--dot-top, 12%); right: var(--dot-right, 8%); background: var(--brand);
}

/* ---------- Breadcrumb sobre fondo oscuro ---------- */
.on-dark .breadcrumb li { color: var(--ink-on-dark-muted); }
.on-dark .breadcrumb a { color: #fff; }
.on-dark .breadcrumb a:hover { color: var(--accent-on-dark, var(--brand-300)); }
.on-dark .breadcrumb [aria-current="page"] { color: var(--ink-on-dark); }

/* ---------- Alternador de idioma de una imagen (es/en) ----------
   Dos imágenes del mismo tamaño apiladas en la misma celda; solo la activa es opaca y entra con fundido.
   Sin controles (decisión del cliente). Con prefers-reduced-motion queda fija en español. */
.lang-swap { display: grid; justify-items: center; width: 100%; }
.lang-swap__slide { grid-area: 1 / 1; display: flex; justify-content: center; opacity: 0; transition: opacity var(--t-fade) var(--ease); }
.lang-swap__slide.is-active { opacity: 1; }
.lang-swap__slide picture { display: contents; }