/* ============================================================
   ABEX — hoja de estilos
   Comparte los tokens del sitio (ver ameba.css) y agrega lo
   propio de esta pagina. Namespace .ab-*
   ============================================================ */

:root {
  --ab-ink:     #071828;
  --ab-ink-2:   #05121E;
  --ab-teal:    #066174;
  --ab-teal-l:  #4E93A6;
  --ab-teal-d:  #032931;
  --ab-gold:    #E7C873;
  --ab-pale:    #E8F4F6;
  --ab-border:  #E6E8EA;
  --ab-grey:    #636363;
  --ab-steel:   #9FBAC7;
  --ab-steel-2: #B2CED4;
  --ab-red:     #D96A6A;   /* solo para señalar la brecha */
  --ab-green:   #6FA97F;

  --ab-r:   24px;
  --ab-r-s: 14px;
  --ab-sh:   0 2px 8px rgba(99,99,99,.2);
  --ab-sh-h: 0 18px 44px rgba(7,24,40,.16);
  --ab-ease: cubic-bezier(.22,.8,.28,1);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--ab-ink); background: #fff;
       font-family: "Be Vietnam Pro", Arial, Helvetica, sans-serif;
       -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }

/* ---------- seccion ---------- */
.ab-s { position: relative; padding: 88px 20px; overflow: clip; }
@media (min-width: 640px)  { .ab-s { padding-left: var(--smpx-section);  padding-right: var(--smpx-section); } }
@media (min-width: 1024px) { .ab-s { padding: 120px var(--lgpx-section); } }
@media (min-width: 1536px) { .ab-s { padding-left: var(--2xlpx-section); padding-right: var(--2xlpx-section); } }

.ab-dark  { background: linear-gradient(180deg, var(--ab-ink) 0%, var(--ab-teal-d) 100%); color: #fff; }
.ab-deep  { background: var(--ab-ink-2); color: #fff; }
.ab-light { background: linear-gradient(180deg, #FFF 0%, #F2F2F2 100%); }
.ab-white { background: #fff; }

/* ---------- tipografia ---------- */
.ab-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px;
             letter-spacing: .16em; text-transform: uppercase; font-weight: 700; margin-bottom: 18px; }
.ab-kicker::before { content: ""; width: 26px; height: 2px; background: var(--ab-gold); }
.ab-dark .ab-kicker, .ab-deep .ab-kicker { color: var(--ab-gold); }
.ab-light .ab-kicker, .ab-white .ab-kicker { color: var(--ab-teal); }

.ab-h2 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.1; font-weight: 700;
         letter-spacing: -.015em; margin: 0 0 20px; text-wrap: balance; }
.ab-h3 { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.25; font-weight: 700; margin: 0 0 10px; }
.ab-lead { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.65; margin: 0 0 16px; }
.ab-dark .ab-lead, .ab-deep .ab-lead { color: #DCE7EA; }
.ab-light .ab-lead, .ab-white .ab-lead { color: var(--ab-grey); }
.ab-measure { max-width: 68ch; }
.ab-center { text-align: center; }
.ab-center.ab-measure { margin-inline: auto; }

/* ---------- botones ---------- */
.ab-btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 10px;
          font-weight: 700; line-height: 1.2; border: 1px solid transparent;
          transition: transform .25s var(--ab-ease), background-color .25s, color .25s, border-color .25s; }
.ab-btn:hover { transform: translateY(-2px); }
.ab-btn-gold  { background: var(--ab-gold); color: var(--ab-ink); }
.ab-btn-gold:hover { background: #f1da9d; }
.ab-btn-line  { border-color: rgba(255,255,255,.7); color: #fff; }
.ab-btn-line:hover { background: #fff; color: var(--ab-ink); }
.ab-btns { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- grillas ---------- */
.ab-grid { display: grid; gap: 20px; }
.ab-g2 { grid-template-columns: 1fr; }
.ab-g3 { grid-template-columns: 1fr; }
.ab-g4 { grid-template-columns: 1fr; }
@media (min-width: 560px)  { .ab-g4 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 760px)  { .ab-g2 { grid-template-columns: repeat(2,1fr); }
                             .ab-g3 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1100px) { .ab-g3 { grid-template-columns: repeat(3,1fr); }
                             .ab-g4 { grid-template-columns: repeat(4,1fr); } }

/* ---------- tarjetas ---------- */
.ab-card { background: #fff; border-radius: var(--ab-r); padding: 28px; box-shadow: var(--ab-sh);
           height: 100%; transition: transform .35s var(--ab-ease), box-shadow .35s var(--ab-ease); }
.ab-card:hover { transform: translateY(-6px); box-shadow: var(--ab-sh-h); }
.ab-card p { color: var(--ab-grey); line-height: 1.6; margin: 0; }

.ab-cardd { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
            border-radius: var(--ab-r); padding: 28px; height: 100%;
            transition: transform .35s var(--ab-ease), background-color .35s, border-color .35s; }
.ab-cardd:hover { transform: translateY(-6px); background: rgba(255,255,255,.09); border-color: var(--ab-gold); }
.ab-cardd p { color: #C6D6DA; line-height: 1.6; margin: 0; }

/* min-width:auto en items de grid estira la columna en vez de dejar que el
   contenido desborde; hay que anularlo para que los contenedores recorten */
.ab-grid > *, .ab-vs > *, .ab-scrolly > *, .ab-gapgrid > * { min-width: 0; }

/* ---------- reveal ---------- */
.ab-r { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ab-ease), transform .8s var(--ab-ease); }
.ab-r.in { opacity: 1; transform: none; }

/* ============================================================
   HERO
   ============================================================ */
.ab-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column;
           justify-content: center; padding: 120px 20px 72px; color: #fff;
           background: radial-gradient(120% 90% at 78% 18%, #0B3341 0%, #071828 46%, #05121E 100%); }
@media (min-width: 640px)  { .ab-hero { padding-inline: var(--smpx-section); } }
@media (min-width: 1024px) { .ab-hero { padding-inline: var(--lgpx-section); } }
@media (min-width: 1536px) { .ab-hero { padding-inline: var(--2xlpx-section); } }
.ab-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.ab-hero-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(5,18,30,.94) 0%, rgba(5,18,30,.7) 42%, rgba(5,18,30,.1) 78%); }
.ab-hero-in { position: relative; z-index: 2; max-width: 780px; }

.ab-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px; border-radius: 999px;
              border: 1px solid rgba(231,200,115,.45); background: rgba(231,200,115,.08);
              color: var(--ab-gold); font-size: 12.5px; letter-spacing: .12em;
              text-transform: uppercase; font-weight: 700; margin-bottom: 26px; }
.ab-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--ab-gold);
                animation: ab-pulse 2.4s ease-in-out infinite; }
@keyframes ab-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(1.5); } }

.ab-hero h1 { font-size: clamp(46px, 8vw, 104px); line-height: .96; font-weight: 700;
              letter-spacing: -.03em; margin: 0 0 14px; }
.ab-hero h1 .ab-grad {
  background: linear-gradient(96deg, #fff 0%, #F3E6C4 34%, var(--ab-gold) 72%, #D8B45F 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ab-hero-sub { font-size: clamp(18px, 2.2vw, 25px); line-height: 1.35; color: #C9DBE0;
               font-weight: 300; margin: 0 0 26px; }
.ab-hero-q { font-size: clamp(19px, 2vw, 24px); line-height: 1.45; font-weight: 700;
             color: #fff; margin: 0 0 30px; max-width: 26ch; text-wrap: balance; }
.ab-hero-q b { color: var(--ab-gold); font-weight: 700; }

/* la entrada escalonada (.am-up) y la pista de scroll (.am-cue) viven en
   ameba.css, que esta pagina tambien carga: un solo lugar para las dos. */


/* ============================================================
   LA BRECHA — cifras y barras
   ============================================================ */
.ab-gapgrid { display: grid; gap: 16px; grid-template-columns: repeat(2,1fr); }
@media (min-width: 900px) { .ab-gapgrid { grid-template-columns: repeat(4,1fr); } }
.ab-gapcard { border: 1px solid rgba(255,255,255,.16); border-radius: var(--ab-r-s); padding: 22px;
              background: rgba(255,255,255,.035); position: relative; overflow: hidden; }
.ab-gapcard::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
                     background: linear-gradient(90deg, var(--ab-gold), transparent);
                     transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ab-ease) .2s; }
.ab-gapcard.in::after { transform: scaleX(1); }
.ab-gapn { font-size: clamp(38px, 5vw, 56px); line-height: 1; font-weight: 700; color: var(--ab-gold);
           font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ab-gapn small { font-size: .5em; margin-left: 3px; font-weight: 700; }
.ab-gapl { font-size: 14px; line-height: 1.45; color: #C6D6DA; margin-top: 10px; }

.ab-fig { background: #08202C; border: 1px solid rgba(255,255,255,.14); border-radius: var(--ab-r);
          padding: 24px; }
.ab-light .ab-fig, .ab-white .ab-fig { background: #08202C; border-color: #0E3444; }
.ab-fig svg { display: block; width: 100%; height: auto; }
.ab-cap { font-size: 13px; line-height: 1.5; color: var(--ab-steel); margin: 14px 0 0; }

/* ============================================================
   SUPUESTO vs REALIDAD
   ============================================================ */
.ab-vs { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 900px) { .ab-vs { grid-template-columns: 1fr auto 1fr; gap: 28px; } }
.ab-vs-col { border-radius: var(--ab-r); padding: 30px; height: 100%; }
.ab-vs-a { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); }
.ab-vs-b { background: linear-gradient(160deg, rgba(231,200,115,.14), rgba(231,200,115,.04));
           border: 1px solid rgba(231,200,115,.42); }
.ab-vs-h { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
           margin: 0 0 18px; }
.ab-vs-a .ab-vs-h { color: var(--ab-steel); }
.ab-vs-b .ab-vs-h { color: var(--ab-gold); }
.ab-vs-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ab-vs-col li { position: relative; padding-left: 30px; line-height: 1.55; color: #DCE7EA; font-size: 15.5px; }
.ab-vs-col li::before { position: absolute; left: 0; top: 1px; font-size: 15px; font-weight: 700; }
.ab-vs-a li::before { content: "✕"; color: var(--ab-steel); }
.ab-vs-b li::before { content: "✓"; color: var(--ab-gold); }
.ab-vs-mid { display: grid; place-items: center; }
.ab-vs-mid span { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
                  border: 1px solid rgba(255,255,255,.22); color: var(--ab-steel); font-size: 12px;
                  font-weight: 700; letter-spacing: .06em; background: var(--ab-ink); }
@media (max-width: 899px) { .ab-vs-mid { display: none; } }

/* ============================================================
   TABLA COMPARATIVA
   ============================================================ */
.ab-tablewrap { position: relative; border-radius: var(--ab-r); border: 1px solid var(--ab-border);
                background: #fff; overflow: hidden; }
.ab-tablescroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* aviso de que la tabla se desliza cuando no cabe */
@media (max-width: 899px) {
  .ab-tablewrap::after { content: ""; position: absolute; top: 1px; right: 0; bottom: 1px; width: 52px;
    background: linear-gradient(90deg, rgba(255,255,255,0), #fff 72%); pointer-events: none; }
  .ab-tablehint { display: block; }
}
.ab-tablehint { display: none; margin: 12px 0 0; font-size: 13px; color: var(--ab-grey); }
.ab-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.ab-table th, .ab-table td { padding: 20px 22px; text-align: left; vertical-align: top;
                             border-top: 1px solid var(--ab-border); font-size: 15.5px; line-height: 1.5; }
.ab-table thead th { border-top: 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
                     color: var(--ab-grey); font-weight: 700; padding-bottom: 14px; }
.ab-table thead th:nth-child(3) { color: var(--ab-teal); }
.ab-table tbody th { font-weight: 700; color: var(--ab-ink); width: 24%; }
.ab-table td:nth-child(2) { color: var(--ab-grey); }
.ab-table td:nth-child(3) { color: var(--ab-ink); font-weight: 700; background: rgba(232,244,246,.5); }
.ab-table tbody tr { transition: background-color .25s; }
.ab-table tbody tr:hover { background: rgba(232,244,246,.35); }
.ab-punch { margin-top: 26px; padding: 24px 26px; border-radius: var(--ab-r-s);
            background: var(--ab-ink); color: #fff; font-size: 16.5px; line-height: 1.6; }
.ab-punch b { color: var(--ab-gold); }

/* ============================================================
   SCROLLYTELLING — los tres modulos
   ============================================================ */
.ab-scrolly { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .ab-scrolly { grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: start; } }
/* sin separacion entre pasos: los rieles se unen en una sola linea de tiempo
   y el aire lo da el padding interno de cada paso */
.ab-steps { display: grid; gap: 0; }
.ab-step { border-left: 2px solid rgba(255,255,255,.14); padding: 22px 0 22px 26px;
           transition: border-color .5s var(--ab-ease), opacity .5s var(--ab-ease); }
@media (min-width: 1000px) { .ab-step { padding: 4.5vh 0 4.5vh 26px; } }
@media (min-width: 1000px) { .ab-step { opacity: .35; } }
.ab-step.on { opacity: 1; border-left-color: var(--ab-gold); }
.ab-step-n { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
             border: 1px solid rgba(255,255,255,.3); font-size: 13px; font-weight: 700; margin-bottom: 14px;
             transition: background-color .5s, color .5s, border-color .5s; }
.ab-step.on .ab-step-n { background: var(--ab-gold); color: var(--ab-ink); border-color: var(--ab-gold); }
.ab-step h3 { font-size: clamp(19px, 2vw, 24px); margin: 0 0 10px; font-weight: 700; }
.ab-step p { color: #C6D6DA; line-height: 1.65; margin: 0; font-size: 15.5px; }
.ab-step p b { color: #fff; }
.ab-sticky { position: relative; }
@media (min-width: 1000px) { .ab-sticky { position: sticky; top: 14vh; } }

/* ---------- diagrama de los tres modulos (cajas HTML) ---------- */
.ab-pipe { position: relative; padding-right: 44px; }
@media (min-width: 760px) { .ab-pipe { padding-right: 54px; } }
.ab-pipe-node {
  border: 1px solid rgba(255,255,255,.2); border-radius: 12px; padding: 15px 16px;
  background: rgba(255,255,255,.05); color: #DCE7EA; text-align: center;
  font-size: 14.5px; line-height: 1.35; font-weight: 700;
  transition: background-color .55s var(--ab-ease), border-color .55s var(--ab-ease),
              color .55s var(--ab-ease);
}
.ab-pipe-node.is-out { background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.13);
                       color: var(--ab-steel); font-weight: 400; }
.ab-node.on { background: rgba(231,200,115,.16); border-color: var(--ab-gold); color: #fff; }

.ab-pipe-arrow { height: 28px; position: relative; }
.ab-pipe-arrow::before, .ab-pipe-arrow::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  transition: background-color .55s var(--ab-ease), border-top-color .55s var(--ab-ease),
              opacity .55s var(--ab-ease);
}
.ab-pipe-arrow::before { top: 1px; height: 19px; width: 2px; background: var(--ab-steel); opacity: .45; }
.ab-pipe-arrow::after { bottom: 1px; border: 5px solid transparent;
                        border-top-color: var(--ab-steel); opacity: .45; }
.ab-edge.on::before { background: var(--ab-gold); opacity: 1; }
.ab-edge.on::after  { border-top-color: var(--ab-gold); opacity: 1; }

/* la realimentacion: las nuevas obras cambian las expectativas del ciclo siguiente */
.ab-pipe-loop { position: absolute; right: 0; top: 29px; bottom: 29px; width: 30px;
                border: 2px dashed var(--ab-gold); border-left: 0; border-radius: 0 14px 14px 0;
                opacity: .9; }
@media (min-width: 760px) { .ab-pipe-loop { width: 38px; } }
.ab-pipe-loop::after { content: ""; position: absolute; left: -2px; top: -7px;
                       border: 6px solid transparent; border-right-color: var(--ab-gold); }

/* ============================================================
   HORIZONTE RODANTE
   El riel es el horizonte completo; la ventana es lo que alcanza
   a ver cada evaluación. Los años son el control.
   ============================================================ */
.ab-roll { border: 1px solid rgba(255,255,255,.16); border-radius: var(--ab-r);
           padding: 42px 24px 22px; background: #08202C; }
.ab-years { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px;
            position: relative; }
.ab-year { appearance: none; font: inherit; border: 0; border-radius: 6px;
           background: rgba(255,255,255,.06); color: var(--ab-steel);
           text-align: center; padding: 16px 1px; font-size: 11.5px; font-weight: 700;
           transition: background-color .45s var(--ab-ease), color .45s var(--ab-ease); }
button.ab-year { cursor: pointer; }
button.ab-year:hover { background: rgba(231,200,115,.28); color: #fff; }
button.ab-year:focus-visible { outline: 2px solid var(--ab-gold); outline-offset: 2px; }
.ab-year.lit { background: rgba(231,200,115,.2); color: #fff; }

.ab-win { position: absolute; top: -9px; bottom: -9px; border: 2px solid var(--ab-gold);
          border-radius: 10px; background: rgba(231,200,115,.08); pointer-events: none;
          box-shadow: 0 0 0 1px rgba(231,200,115,.12), 0 10px 28px rgba(231,200,115,.10);
          transition: left .75s var(--ab-ease), width .75s var(--ab-ease); }
.ab-win b { position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
            background: var(--ab-gold); color: var(--ab-ink); font-size: 10.5px;
            font-weight: 700; padding: 3px 12px; border-radius: 999px; white-space: nowrap; }
[data-pinned="true"] .ab-win { border-style: solid; box-shadow: 0 0 0 1px rgba(231,200,115,.3), 0 10px 30px rgba(231,200,115,.18); }
.ab-rollhint { margin: 22px 0 0; font-size: 12.5px; color: var(--ab-steel); }
.ab-rollaxis { display: none; justify-content: space-between; margin-top: 10px;
               font-size: 11.5px; font-weight: 700; color: var(--ab-steel); }
@media (max-width: 900px) {
  .ab-year { font-size: 0; padding: 15px 1px; }
  .ab-rollaxis { display: flex; }
  .ab-win b { font-size: 10px; padding: 2px 9px; }
}

/* ============================================================
   RESULTADOS — toggle de casos
   ============================================================ */
.ab-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.07);
          border: 1px solid rgba(255,255,255,.16); gap: 4px; }
.ab-seg button { appearance: none; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700;
                 padding: 9px 20px; border-radius: 999px; border: 0; background: transparent;
                 color: #C6D6DA; transition: all .3s var(--ab-ease); }
.ab-seg button[aria-pressed="true"] { background: var(--ab-gold); color: var(--ab-ink); }

/* ============================================================
   PREGUNTAS
   ============================================================ */
.ab-qlist { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.ab-qlist li { position: relative; padding-left: 26px; line-height: 1.55; font-size: 15.5px; color: var(--ab-grey); }
.ab-qlist li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 7px; height: 7px;
                       border-radius: 2px; background: var(--ab-gold); transform: rotate(45deg); }

/* ---------- ajustes de telefono ----------
   El texto largo centrado se lee mal en columnas angostas. */
@media (max-width: 760px) {
  .ab-s { padding: 64px 20px; }
  .ab-center .ab-lead, .ab-measure.ab-center { text-align: left; }
  .ab-center .ab-h2 { text-align: left; }
  .ab-s.ab-center .ab-h2, .ab-s.ab-center .ab-lead { text-align: center; }
  .ab-btns { flex-direction: column; align-items: stretch; }
  .ab-btn { justify-content: center; }
  .ab-card, .ab-cardd, .ab-vs-col { padding: 22px; }
  .ab-fig { padding: 14px; }
  .ab-hero { min-height: 92svh; }
}

/* ---------- accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .ab-r, .am-up { opacity: 1; transform: none; }
  .ab-step { opacity: 1; }
}
.ab-skip { position: absolute; left: -9999px; }
.ab-skip:focus { left: 20px; top: 20px; z-index: 99; background: #fff; color: var(--ab-ink);
                 padding: 12px 18px; border-radius: 8px; }
html { scroll-behavior: smooth; }

/* ---------- animaciones de las ilustraciones ---------- */
@keyframes ab-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ab-draw { to { stroke-dashoffset: 0; } }
@keyframes ab-dash { to { stroke-dashoffset: -84; } }
.ab-bar { transform-origin: bottom; transform: scaleY(0); }
.in .ab-bar, .ab-fig.in .ab-bar { animation: ab-rise .9s var(--ab-ease) forwards; }
.ab-trace { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); }
.in .ab-trace, .ab-fig.in .ab-trace { animation: ab-draw 1.7s var(--ab-ease) forwards; }
.ab-flowline { stroke-dasharray: 6 6; animation: ab-dash 2.4s linear infinite; }

/* misma pista de desplazamiento que en la tabla comparativa */
.ab-tablescroll::-webkit-scrollbar { height: 5px; }
.ab-tablescroll::-webkit-scrollbar-track { background: rgba(7,24,40,.08); border-radius: 3px; }
.ab-tablescroll::-webkit-scrollbar-thumb { background: rgba(6,97,116,.5); border-radius: 3px; }
.ab-tablescroll { scrollbar-width: thin; scrollbar-color: rgba(6,97,116,.5) rgba(7,24,40,.08); }