/* ==========================================================================
   Bloques de sección reutilizables (usan solo tokens de xternall-ui.css)
   Cada bloque empieza con "BLOQUE:" para ubicarlo y convertirlo en plantilla.
   ========================================================================== */

.x-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.x-skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--x-navy); color: #fff; }
.x-skip:focus { top: 12px; color: #fff; }
.x-h-accent { color: var(--x-blue); }
.x-on-dark .x-h-accent { color: var(--x-blue-200); }
.x-ico { width: 20px; height: 20px; flex: none; }
section[id] { scroll-margin-top: 90px; }

/* Encabezado partido: título a la izquierda, texto a la derecha */
.x-split-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px 64px; align-items: end; margin-bottom: 48px; }
.x-split-head p { margin: 0; font-size: 17px; }
.x-section-head p { margin: 16px 0 0; }

/* --------------------------------------------------------------------------
   BLOQUE: hero-form — hero con foto duotono + formulario de demo
   -------------------------------------------------------------------------- */
.b-hero { padding: 88px 0 168px; }
.b-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.b-hero__copy .x-display { margin-bottom: 20px; }
.b-hero__law { margin: 0 0 8px; font-size: 22px; font-weight: 700; color: #fff; }
.b-hero__desc { margin: 0 0 28px; max-width: 520px; font-size: var(--x-fs-lead); font-weight: 300; line-height: 1.5; color: rgba(255,255,255,.92); }
.b-hero .x-checklist { margin-bottom: 24px; font-size: 17px; color: #fff; }
.b-hero__connect { display: flex; align-items: center; gap: 10px; margin: 0 0 28px; color: rgba(255,255,255,.9); font-size: 15px; }
.b-hero__connect .x-ico { color: #fff; }
.b-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

.b-demo { background: #fff; border-radius: var(--x-r-lg); padding: 36px; box-shadow: 0 30px 60px -20px rgba(20, 30, 90, .45); color: var(--x-text); }
.b-demo .x-h4 { margin-bottom: 6px; }
.b-demo__intro { margin: 0 0 22px; color: var(--x-muted); }
.b-demo .x-input, .b-demo .x-select { border-color: var(--x-border); }
.b-demo .x-label small { font-weight: 400; color: var(--x-muted); }
.b-demo .x-check { margin: 4px 0 18px; }
.b-demo__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.b-demo__error { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--x-danger-bg); color: #b4202e; font-size: 14px; }
.b-demo__success { display: grid; justify-items: center; gap: 10px; padding: 32px 8px; text-align: center; }
.b-demo__success .x-icon { margin: 0; background: var(--x-success-bg); color: var(--x-success); }
.b-demo__success strong { font-size: 20px; color: var(--x-navy); }
.b-demo__success p { margin: 0; color: var(--x-muted); }
.x-btn[aria-busy="true"] { opacity: .75; pointer-events: none; }
.x-spin { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: x-spin .8s linear infinite; }
@keyframes x-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   BLOQUE: strip — franja blanca superpuesta al hero
   -------------------------------------------------------------------------- */
.b-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; padding: 26px 40px; }
.b-strip > span { font-size: 19px; font-weight: 700; color: var(--x-navy); }
.b-strip__items { display: flex; gap: 12px; flex-wrap: wrap; }
.b-strip__items span { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: var(--x-info-bg); color: var(--x-navy); font-weight: 700; font-size: 15px; }
.b-strip__items .x-ico { color: var(--x-blue); }

/* --------------------------------------------------------------------------
   BLOQUE: product-demo — ventana de producto interactiva
   -------------------------------------------------------------------------- */
.b-window { max-width: 1040px; margin: 0 auto; background: #fff; border: 1px solid var(--x-border); border-radius: 24px; box-shadow: var(--x-shadow); overflow: hidden; }
.b-window__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--x-border); background: var(--x-bg-50); }
.b-window__title { display: flex; align-items: center; gap: 12px; }
.b-window__mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--x-info-bg); }
.b-window__mark img { width: 20px; height: 20px; }
.b-window__title strong { display: block; color: var(--x-navy); font-size: 16px; }
.b-window__title small { display: block; color: var(--x-muted); font-size: 13px; }
.b-window__body { padding: 20px 24px 8px; }
.b-window__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 16px; }
.b-window__hint { font-size: 13px; color: var(--x-muted); }
.b-window__foot { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--x-border); font-size: 13px; color: var(--x-muted); background: var(--x-bg-50); }
.b-window__foot .x-ico { width: 16px; height: 16px; color: var(--x-blue); }
[role="tabpanel"][hidden] { display: none; }

.b-table-wrap { overflow-x: auto; }
.b-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.b-table th { padding: 10px 12px; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--x-muted); border-bottom: 1px solid var(--x-border); white-space: nowrap; }
.b-table td { padding: 8px 12px; border-bottom: 1px solid var(--x-line); color: var(--x-navy); white-space: nowrap; }
.b-table tr:last-child td { border-bottom: 0; }
.b-table tbody tr { transition: background var(--x-ease); }
.b-table tbody tr:hover { background: var(--x-bg-50); }
.b-table .x-person { padding: 6px 8px; margin-left: -8px; width: auto; }

.b-week { display: grid; gap: 6px; }
.b-week__row { display: grid; grid-template-columns: minmax(200px, 1.2fr) 2fr 60px minmax(150px, auto); align-items: center; gap: 16px; padding: 4px 0; }
.b-week__track { height: 10px; border-radius: 999px; background: var(--x-bg-soft); overflow: hidden; }
.b-week__track span { display: block; height: 100%; border-radius: inherit; background: var(--x-success); }
.b-week__track span.amber { background: var(--x-warning); }
.b-week__row > strong { color: var(--x-navy); text-align: right; }
.b-note { margin: 14px 0 12px; font-size: 13px; color: var(--x-muted); }

.b-evidence { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-bottom: 16px; }
.b-evidence > div { padding: 22px; border-radius: 18px; background: var(--x-bg-50); border: 1px solid var(--x-border); }
.b-evidence .x-icon { width: 46px; height: 46px; margin-bottom: 14px; border-radius: 12px; }
.b-evidence .x-icon svg { width: 22px; height: 22px; }
.b-evidence h4 { margin: 0 0 6px; font: 700 17px/1.3 var(--x-font-alt); color: var(--x-navy); }
.b-evidence p { margin: 0 0 14px; font-size: 14px; color: var(--x-muted); }

/* Diálogo de colaborador */
.b-dialog { width: min(440px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 24px; box-shadow: 0 30px 80px -10px rgba(20, 30, 90, .4); color: var(--x-text); }
.b-dialog::backdrop { background: rgba(35, 46, 97, .45); backdrop-filter: blur(2px); }
.b-dialog__inner { position: relative; padding: 28px; }
.b-dialog__close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--x-bg-soft); color: var(--x-navy); cursor: pointer; }
.b-dialog__close:hover { background: var(--x-info-bg); }
.b-dialog h3 { margin: 0 40px 4px 0; font-size: 22px; color: var(--x-navy); }
.b-dialog__sub { margin: 0 0 18px; font-size: 13px; color: var(--x-muted); }
.b-dialog__total { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.b-dialog__total strong { font-size: 34px; line-height: 1; color: var(--x-navy); }
.b-dialog__total > span { color: var(--x-muted); font-size: 14px; }
.b-dialog__detail { margin: 14px 0; }
.b-dialog__times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.b-dialog__times span { display: grid; gap: 2px; justify-items: start; padding: 12px; border-radius: 14px; background: var(--x-bg-soft); font-size: 13px; color: var(--x-muted); }
.b-dialog__times .x-ico { width: 16px; height: 16px; color: var(--x-blue); }
.b-dialog__times b { font-size: 16px; color: var(--x-navy); }
.b-dialog__legal { margin: 0; font-size: 12px; color: var(--x-muted); }

/* --------------------------------------------------------------------------
   BLOQUE: steps — pasos con número
   -------------------------------------------------------------------------- */
.b-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.b-step__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.b-step__top .x-icon { margin: 0; }
.b-step__num { font-size: 40px; font-weight: 700; line-height: 1; color: var(--x-bg-ice); -webkit-text-stroke: 1px rgba(95,120,252,.35); }
.b-step small { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--x-blue); }
.b-callout { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 36px auto 0; padding: 14px 22px; width: fit-content; max-width: 100%; border-radius: 999px; background: #fff; border: 1px solid var(--x-border); color: var(--x-navy); font-weight: 500; font-size: 15px; }
.b-callout .x-ico { color: var(--x-blue); }

/* --------------------------------------------------------------------------
   BLOQUE: attention — tarjetas de alerta con acción
   -------------------------------------------------------------------------- */
.b-attention { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.b-attention .x-alert { flex-direction: column; gap: 0; padding: 24px; box-shadow: var(--x-shadow); }
.b-attention .x-alert .x-icon { width: 46px; height: 46px; margin-bottom: 16px; border-radius: 12px; }
.b-attention .x-alert .x-icon svg { width: 22px; height: 22px; }
.b-attention .x-alert--danger .x-icon { background: var(--x-danger-bg); color: var(--x-danger); }
.b-attention .x-alert:not(.x-alert--danger):not(.x-alert--info) .x-icon { background: var(--x-warning-bg); color: #c57a0a; }
.b-attention .x-alert p { flex: 1; margin-bottom: 18px; }
.b-attention__action { display: inline-flex; align-items: center; gap: 6px; padding-top: 14px; width: 100%; border-top: 1px solid var(--x-line); font-size: 14px; font-weight: 700; color: var(--x-blue); }
.b-attention__action .x-ico { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   BLOQUE: scenarios — tabs con escenario y ejemplo
   -------------------------------------------------------------------------- */
.b-scenarios { max-width: 1040px; margin: 0 auto; }
.b-scenarios > .x-tabs { display: flex; width: fit-content; margin: 0 auto 32px; background: #fff; box-shadow: var(--x-shadow-sm); }
.b-scenarios .x-tab { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; font-size: 15px; }
.b-scenarios .x-tab .x-ico { width: 18px; height: 18px; }
.b-scenario { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; padding: 40px; }
.b-scenario h3 { margin: 0 0 12px; }
.b-scenario > div > p { margin: 0 0 24px; font-size: 17px; }
.b-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.b-tags span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--x-bg-soft); font-size: 14px; font-weight: 500; color: var(--x-navy); }
.b-tags .x-ico { width: 16px; height: 16px; color: var(--x-blue); }
.b-example { padding: 24px; border-radius: 20px; background: var(--x-bg-50); border: 1px solid var(--x-border); }
.b-example > .x-eyebrow { font-size: 12px; margin-bottom: 16px; }
.b-example__person { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.b-example__person strong { display: block; color: var(--x-navy); }
.b-example__person small { color: var(--x-muted); }
.b-example__schedule { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-block: 1px solid var(--x-border); font-size: 14px; }
.b-example__schedule strong { color: var(--x-navy); }
.b-example__result { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px; border-radius: 14px; background: var(--x-success-bg); }
.b-example__result .x-ico { color: var(--x-success); margin-top: 2px; }
.b-example__result.amber { background: var(--x-warning-bg); }
.b-example__result.amber .x-ico { color: #c57a0a; }
.b-example__result strong { display: block; color: var(--x-navy); }
.b-example__result small { color: var(--x-muted); font-size: 13px; }

/* --------------------------------------------------------------------------
   BLOQUE: evidence-timeline — texto + calendario de reducción
   -------------------------------------------------------------------------- */
.b-evidence-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.b-evidence-split .x-h2 { margin-bottom: 18px; }
.b-evidence-split > div > p { margin: 0 0 24px; font-size: 17px; }
.b-points { display: grid; gap: 12px; margin-bottom: 28px; }
.b-points span { display: flex; align-items: center; gap: 12px; font-weight: 500; color: var(--x-navy); }
.b-points .x-ico { padding: 6px; width: 32px; height: 32px; border-radius: 10px; background: var(--x-info-bg); color: var(--x-blue); }
.b-source { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.b-source .x-ico { width: 16px; height: 16px; }
.b-timeline { padding: 36px; }
.b-timeline .x-h4 { margin-bottom: 28px; }
.b-timeline .x-hours__bar { justify-content: flex-start; }
.b-timeline .b-note { margin-top: 20px; }

/* --------------------------------------------------------------------------
   BLOQUE: integration — flujo de conexión + pasos
   -------------------------------------------------------------------------- */
.b-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 16px; max-width: 980px; margin: 0 auto 56px; }
.b-flow__node { display: grid; justify-items: center; gap: 6px; padding: 28px 20px; text-align: center; border-radius: 20px; background: #fff; border: 1px solid var(--x-border); box-shadow: var(--x-shadow); }
.b-flow__node .x-icon { margin-bottom: 6px; }
.b-flow__node strong { color: var(--x-navy); font-size: 17px; }
.b-flow__node span { font-size: 14px; color: var(--x-muted); }
.b-flow__node--brand { background: var(--x-blue); border-color: var(--x-blue); box-shadow: var(--x-shadow-blue); }
.b-flow__node--brand .x-logo img { height: 28px; }
.b-flow__node--brand .x-logo__tag { background: #fff; color: var(--x-blue); }
.b-flow__node--brand span { color: rgba(255,255,255,.9); }
.b-flow__arrow { color: var(--x-blue); opacity: .6; }
.b-flow__arrow svg { width: 28px; height: 28px; }
.b-setup { max-width: 980px; margin: 0 auto; padding: 0; }

/* --------------------------------------------------------------------------
   BLOQUE: faq — dos columnas
   -------------------------------------------------------------------------- */
.b-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.b-faq__intro { position: sticky; top: 110px; }
.b-faq__intro .x-h2 { margin-bottom: 16px; }
.b-faq__intro p { margin: 0 0 28px; font-size: 17px; }

/* --------------------------------------------------------------------------
   BLOQUE: closing — cierre azul
   -------------------------------------------------------------------------- */
.b-closing { padding: 96px 0; text-align: center; }
.b-closing .x-h2 { max-width: 760px; margin: 0 auto 16px; }
.b-closing .x-lead { max-width: 560px; margin: 0 auto 32px; }

/* --------------------------------------------------------------------------
   BLOQUE: footer — homologado con el footer de xternall.com
   Medidas fijas (no cambiar por landing):
     · Producto (franja superior) ... 16px / 700 / navy
     · Títulos de columna ........... 16px / 700 / azul
     · Contacto y direcciones ....... 14px / 500 / texto
     · Aviso de privacidad y © ...... 14px / 300 / texto
     Móvil (≤767px): contacto centrado, oficinas y legales en colapsables
     (título 16/700 azul, contenido 14/300 navy) y © en barra gris.
   -------------------------------------------------------------------------- */
.b-footer { font-size: 14px; color: var(--x-text); }
.b-footer__top { background: var(--x-bg-footer); padding: 32px 0; }
.b-footer__top-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.b-footer__logo img { height: 40px; width: auto; }
.b-footer__product { font-size: 16px; font-weight: 700; color: var(--x-navy); text-align: center; }
.b-footer__social { display: flex; justify-content: flex-end; gap: 8px; margin: 0; padding: 0; list-style: none; }
.b-footer__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 3px; background: var(--x-blue); color: #fff; transition: background-color var(--x-ease); }
.b-footer__social a:hover { background: var(--x-navy); color: #fff; }
.b-footer__social svg { width: 20px; height: 20px; }
.b-footer__main { background: var(--x-bg-soft); padding: 36px 0 24px; }
.b-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-bottom: 28px; border-bottom: 1px solid #d2d2e0; }
.b-footer__title { margin: 0 0 18px; font-size: 16px; font-weight: 700; color: var(--x-blue); }
.b-footer__item { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; color: var(--x-text); font-weight: 500; line-height: 1.45; }
.b-footer__item:hover { color: var(--x-navy); }
.b-footer__item svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--x-text); }
.b-footer__bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px 24px; padding-top: 18px; font-weight: 300; font-size: 14px; }
.b-footer__bottom > span { font-size: 14px; font-weight: 300; text-align: center; }
/* Footer móvil: contacto centrado + colapsables con slide (700ms, como Divi) */
.b-footer__mobile, .b-footer__copybar { display: none; }
.b-footer__mcontact { display: grid; justify-items: center; gap: 4px; margin-bottom: 36px; text-align: center; }
.b-footer__mcontact .b-footer__title { margin-bottom: 8px; }
.b-footer__mcontact a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--x-navy); }
.b-footer__mcontact svg { width: 14px; height: 14px; }
.b-fold { margin-bottom: 15px; border-radius: 10px; }
.b-fold summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 6px 0; list-style: none; cursor: pointer;
  font: 700 16px/1.3 var(--x-font); color: var(--x-blue);
}
.b-fold summary::-webkit-details-marker { display: none; }
.b-fold__icon { flex: none; width: 36px; height: 36px; color: var(--x-blue); transition: transform .3s ease; }
.b-fold[open] .b-fold__icon { transform: rotate(180deg); }
.b-fold__body { overflow: hidden; padding: 14px 0 6px; font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--x-navy); }
.b-fold__body a { display: block; margin-bottom: 16px; color: var(--x-navy); }
.b-fold__body a svg { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.b-gti { margin: 0 0 8px; font-weight: 700; color: #4d4d4d; }
.b-gti__ti { color: #c71516; }   /* marca Grupo TI México, tal cual en xternall.com */
.b-footer__copybar { padding: 18px var(--x-gutter); background: var(--x-dots); color: #fff; font-size: 14px; font-weight: 300; text-align: center; }
.b-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.b-footer__legal a { font-size: 14px; font-weight: 300; color: var(--x-text); }
.b-footer__legal a:hover { color: var(--x-navy); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .b-attention { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .b-hero__grid, .b-evidence-split, .b-faq, .b-scenario { grid-template-columns: 1fr; }
  .b-hero__grid { gap: 40px; }
  .b-split-head, .x-split-head { grid-template-columns: 1fr; }
  .b-faq { gap: 32px; }
  .b-faq__intro { position: static; }
  .b-evidence-split { gap: 40px; }
  .b-flow { grid-template-columns: 1fr; max-width: 420px; }
  .b-flow__arrow { justify-self: center; transform: rotate(90deg); }
  .b-footer__cols { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
}
@media (max-width: 767px) {
  .b-hero { padding: 48px 0 120px; }
  .b-demo { padding: 24px 20px; }
  .b-strip { padding: 22px; }
  .b-strip > span { font-size: 17px; }
  .b-steps, .b-evidence, .b-attention { grid-template-columns: 1fr; }
  .b-window { border-radius: 20px; }
  .b-window__head, .b-window__body { padding-inline: 16px; }
  .b-window__head .x-badge { display: none; }
  .b-week__row { grid-template-columns: 1fr auto; gap: 6px 12px; padding: 8px 0; border-bottom: 1px solid var(--x-line); }
  .b-week__track { grid-column: 1 / -1; grid-row: 2; }
  .b-week__row > .x-badge { grid-column: 1 / -1; justify-self: start; }
  .b-scenario { padding: 24px; }
  .b-scenarios > .x-tabs { width: 100%; }
  .b-scenarios .x-tab { flex: 1; justify-content: center; padding: 12px 10px; }
  .b-timeline { padding: 24px; }
  .b-closing { padding: 64px 0; }
  .b-footer__top-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .b-footer__social { justify-content: center; }
  .b-footer__top { padding: 45px 0 20px; }
  .b-footer__main { padding: 60px 0 25px; }
  .b-footer__cols, .b-footer__bottom { display: none; }
  .b-footer__mobile, .b-footer__copybar { display: block; }
  .b-dialog__times { grid-template-columns: 1fr 1fr 1fr; }
}