/* ═══════════════════════════════════════════════════════════════
   DECISIONES INTEGRADAS — DESIGN SYSTEM v4.2
   Aesthetic: Blue Intelligence — Clarity, Trust, Precision
   Fonts: Outfit (display/ui) + Playfair Display (serif accent)
   Paleta: Azul marino → Azul vivo → Cyan · Blancos y grises fríos
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,400;1,600&display=swap');

:root {
  --navy:       #003B5C;
  --navy-2:     #001D33;
  --blue:       #0077B6;
  --blue-light: #0096C7;
  --cyan:       #00B4D8;
  --cyan-light: #90E0EF;
  --white:      #FFFFFF;
  --gray-50:    #F0F6FA;
  --gray-100:   #E5EFF5;
  --gray-200:   #CBD8E3;
  --gray-300:   #A0B4C2;
  --text-h:     #0A2540;
  --text-b:     #334155;
  --text-s:     #5A7184;
  --text-m:     #8FA3B3;
  --on-dark-h:  #FFFFFF;
  --on-dark-b:  rgba(255,255,255,0.85);
  --on-dark-s:  rgba(255,255,255,0.62);
  --on-dark-m:  rgba(255,255,255,0.40);
  --border-light: rgba(0,119,182,0.15);
  --border-dark:  rgba(255,255,255,0.12);
  --accent-glow:  rgba(0,180,216,0.18);
  --accent-line:  rgba(0,180,216,0.28);
  --success:    #2DC653;
  --success-bg: rgba(45,198,83,0.10);
  --danger:     #DC2626;
  --danger-bg:  rgba(220,38,38,0.08);
  --grad-blue:  linear-gradient(135deg, #0077B6, #00B4D8);
  --grad-navy:  linear-gradient(155deg, #001D33 0%, #002845 40%, #003B5C 100%);
  --ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:   cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   0.18s;
  --dur-mid:    0.36s;
  --dur-slow:   0.62s;
  --container:  1280px;
  --nav-h:      72px;
  --r-sm:       8px;
  --r-md:       14px;
  --r-lg:       22px;
  --r-full:     100px;
  /* Aliases retrocompat */
  --dk:var(--navy);--bl:var(--blue);--cy:var(--cyan);--sf:var(--gray-50);--tx:var(--text-b);--sl:var(--text-s);
  --gold:var(--blue);--gold-2:var(--cyan);--gold-3:var(--cyan-light);--gold-glow:var(--accent-glow);--gold-line:var(--accent-line);--gold-muted:rgba(0,180,216,0.08);
  --ink:var(--navy-2);--ink-2:#000E1C;--ink-3:var(--navy);--slate:#0D4F7A;--slate-2:var(--blue);--slate-3:var(--blue-light);
  --ice:var(--on-dark-h);--ice-2:var(--on-dark-b);--ice-3:var(--on-dark-s);
  --smoke:rgba(255,255,255,0.06);--smoke-2:rgba(255,255,255,0.10);--smoke-3:rgba(255,255,255,0.16);
  --radius-sm:var(--r-sm);--radius-md:var(--r-md);--radius-lg:var(--r-lg);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Outfit', sans-serif;
  background: var(--white);
  color: var(--text-b);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── TIPOGRAFÍA ── */
.t-display { font-family: 'Playfair Display', serif; font-weight: 700; line-height: 1.07; color: var(--text-h); }
.t-display--xl  { font-size: clamp(2.8rem, 6vw, 5rem); }
.t-display--lg  { font-size: clamp(2rem, 4vw, 3.2rem); }
.t-display--md  { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.t-display--sm  { font-size: clamp(1.2rem, 2vw, 1.8rem); }
.on-dark .t-display,.di-section--dark .t-display,.di-section--navy .t-display { color: var(--on-dark-h); }

.t-serif { font-family: 'Playfair Display', serif; font-style: italic; color: var(--text-s); }
.on-dark .t-serif,.di-section--dark .t-serif,.di-section--navy .t-serif { color: var(--on-dark-b); }
.t-serif--lg { font-size: clamp(1rem, 2.2vw, 1.4rem); }
.t-serif--md { font-size: clamp(0.9rem, 1.6vw, 1.1rem); }

.t-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--blue); }
.on-dark .t-label,.di-section--dark .t-label,.di-section--navy .t-label { color: var(--cyan); }

.t-body  { font-size: 0.95rem; line-height: 1.78; color: var(--text-b); }
.t-small { font-size: 0.82rem; line-height: 1.65; color: var(--text-s); }
.on-dark .t-body,.di-section--dark .t-body { color: var(--on-dark-b); }
.on-dark .t-small,.di-section--dark .t-small { color: var(--on-dark-s); }

/* ── LAYOUT ── */
.di-container { max-width: var(--container); margin: 0 auto; padding: 0 clamp(20px, 4vw, 52px); }
.di-section   { padding: clamp(70px, 10vw, 118px) 0; position: relative; background: var(--white); }
.di-section--alt   { background: var(--gray-50); }
.di-section--dark  { background: var(--navy-2); }
.di-section--navy  { background: var(--navy); }
.di-section--slate { background: var(--navy); }
.di-section--edge  { background: var(--navy-2); }
.di-section::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--accent-line),transparent); }
.di-section--dark::before,.di-section--navy::before,.di-section--slate::before { background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent); }

/* ── SECTION HEADER ── */
.di-section-header { text-align: center; margin-bottom: clamp(38px, 5.5vw, 65px); }
.di-section-header .t-label { display: block; margin-bottom: 12px; }
.di-section-header .t-display { display: block; margin-bottom: 14px; }
.di-section-header .t-display span { color: var(--blue); }
.di-section--dark .di-section-header .t-display span,
.di-section--navy .di-section-header .t-display span,
.di-section--slate .di-section-header .t-display span { color: var(--cyan); }
.di-section-header .t-serif { display: block; margin-bottom: 18px; }
.di-section-header .sep { display:block; width:44px; height:3px; border-radius:2px; background:var(--grad-blue); margin:0 auto; box-shadow:0 0 14px var(--accent-glow); }

/* ── BOTONES ── */
.di-btn { position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:9px; padding:0.82rem 2rem; font-family:'Outfit',sans-serif; font-size:0.85rem; font-weight:700; letter-spacing:0.4px; border-radius:var(--r-full); cursor:pointer; text-decoration:none; transition:all var(--dur-mid) var(--ease); border:none; white-space:nowrap; }
.di-btn svg { width:15px; height:15px; transition:transform var(--dur-fast); flex-shrink:0; }
.di-btn:hover svg { transform:translateX(4px); }
.di-btn--gold { background:var(--grad-blue); color:#fff; box-shadow:0 6px 22px rgba(0,119,182,0.36); }
.di-btn--gold:hover { transform:translateY(-3px); box-shadow:0 12px 36px rgba(0,119,182,0.50); }
.di-btn--ghost { background:transparent; color:var(--blue); border:1.5px solid rgba(0,119,182,0.32); }
.di-btn--ghost:hover { background:rgba(0,119,182,0.06); border-color:var(--blue); }
.on-dark .di-btn--ghost,.di-section--dark .di-btn--ghost,.di-section--navy .di-btn--ghost,.di-section--slate .di-btn--ghost { color:rgba(255,255,255,0.88); border-color:rgba(255,255,255,0.25); }
.on-dark .di-btn--ghost:hover,.di-section--dark .di-btn--ghost:hover,.di-section--navy .di-btn--ghost:hover,.di-section--slate .di-btn--ghost:hover { background:rgba(255,255,255,0.10); border-color:var(--cyan); color:#fff; }
.di-btn--ice { background:rgba(255,255,255,0.10); color:#fff; border:1.5px solid rgba(255,255,255,0.22); backdrop-filter:blur(8px); }
.di-btn--ice:hover { background:rgba(255,255,255,0.16); border-color:var(--cyan); }
.di-btn::after { content:''; position:absolute; width:0; height:0; border-radius:50%; background:rgba(255,255,255,0.22); transform:translate(-50%,-50%); transition:width .5s,height .5s,opacity .5s; opacity:0; left:var(--ripple-x,50%); top:var(--ripple-y,50%); }
.di-btn.rippling::after { width:300px; height:300px; opacity:0; }

/* ── TARJETAS ── */
.di-card { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--r-md); position:relative; overflow:hidden; transition:all var(--dur-mid) var(--ease); }
.di-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad-blue); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-mid) var(--ease); }
.di-card:hover { transform:translateY(-6px); box-shadow:0 18px 46px rgba(0,59,92,0.11),0 0 0 1px rgba(0,180,216,0.14); border-color:var(--border-light); }
.di-card:hover::before { transform:scaleX(1); }
.di-card--gold-top { border-top:3px solid var(--blue); }
.di-card--gold-top::before { display:none; }

/* Tarjetas sobre oscuro */
.di-section--dark .di-card,.di-section--navy .di-card,.di-section--slate .di-card { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.10); }
.di-section--dark .di-card:hover,.di-section--navy .di-card:hover { box-shadow:0 18px 46px rgba(0,0,0,0.3); border-color:rgba(0,180,216,0.30); }

/* ── METRIC CARD ── */
.di-metric { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--r-md); padding:1.8rem 1.4rem; text-align:center; transition:all var(--dur-mid) var(--ease); position:relative; overflow:hidden; }
.di-metric::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 100%,rgba(0,180,216,0.10),transparent 60%); opacity:0; transition:opacity var(--dur-mid); }
.di-metric:hover { transform:translateY(-5px); box-shadow:0 14px 38px rgba(0,59,92,0.10); }
.di-metric:hover::after { opacity:1; }
.di-metric__icon  { font-size:1.7rem; margin-bottom:0.5rem; display:block; }
.di-metric__num   { font-family:'Outfit',sans-serif; font-size:2.7rem; font-weight:800; color:var(--blue); line-height:1; margin-bottom:0.35rem; letter-spacing:-1px; }
.di-metric__label { font-size:0.8rem; color:var(--text-s); font-weight:600; }
.di-section--dark .di-metric,.di-section--navy .di-metric,.di-section--slate .di-metric { background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.10); }
.di-section--dark .di-metric__num,.di-section--navy .di-metric__num,.di-section--slate .di-metric__num { color:var(--cyan); }
.di-section--dark .di-metric__label,.di-section--navy .di-metric__label,.di-section--slate .di-metric__label { color:var(--on-dark-s); }

/* ── PILL ── */
.di-pill { display:inline-flex; align-items:center; gap:6px; padding:0.38rem 0.9rem; background:rgba(0,119,182,0.07); border:1px solid var(--accent-line); border-radius:var(--r-full); font-size:0.7rem; font-weight:700; color:var(--blue); letter-spacing:0.8px; text-transform:uppercase; }
.on-dark .di-pill,.di-section--dark .di-pill,.di-section--navy .di-pill,.di-section--slate .di-pill { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.18); color:rgba(255,255,255,0.88); }
.di-pill--success { border-color:rgba(45,198,83,0.35); color:#059669; background:rgba(45,198,83,0.08); }
.di-pill--danger  { border-color:rgba(220,38,38,0.3); color:var(--danger); background:var(--danger-bg); }

/* ── SCROLL REVEAL ── */
.sr { opacity:0; transform:translateY(28px); transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out); }
.sr.sr--left  { transform:translateX(-36px); }
.sr.sr--right { transform:translateX(36px); }
.sr.sr--scale { transform:scale(0.94); }
.sr.visible   { opacity:1; transform:none; }
.sr-d1{transition-delay:0.08s}.sr-d2{transition-delay:0.17s}.sr-d3{transition-delay:0.26s}.sr-d4{transition-delay:0.35s}.sr-d5{transition-delay:0.44s}.sr-d6{transition-delay:0.53s}

/* ── CAROUSEL ── */
.di-carousel{position:relative;overflow:hidden}
.di-carousel__track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;user-select:none;padding-bottom:4px}
.di-carousel__track::-webkit-scrollbar{display:none}
.di-carousel__track:active{cursor:grabbing}
.di-carousel__item{flex:0 0 calc(33.333% - 14px);scroll-snap-align:start}
.di-carousel__controls{display:flex;align-items:center;justify-content:space-between;margin-top:28px}
.di-carousel__dots{display:flex;gap:8px}
.di-carousel__dot{width:6px;height:6px;border-radius:50%;background:var(--gray-300);cursor:pointer;transition:all var(--dur-mid)}
.di-carousel__dot.active{background:var(--blue);width:22px;border-radius:3px}
.on-dark .di-carousel__dot,.di-section--dark .di-carousel__dot,.di-section--navy .di-carousel__dot{background:rgba(255,255,255,0.22)}
.on-dark .di-carousel__dot.active,.di-section--dark .di-carousel__dot.active,.di-section--navy .di-carousel__dot.active{background:var(--cyan)}
.di-carousel__btn{width:42px;height:42px;border-radius:50%;background:rgba(0,119,182,0.08);border:1.5px solid var(--border-light);color:var(--blue);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--dur-fast)}
.di-carousel__btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.on-dark .di-carousel__btn,.di-section--dark .di-carousel__btn,.di-section--navy .di-carousel__btn{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.18);color:rgba(255,255,255,0.80)}
.on-dark .di-carousel__btn:hover,.di-section--dark .di-carousel__btn:hover,.di-section--navy .di-carousel__btn:hover{background:var(--cyan);color:var(--navy);border-color:var(--cyan)}
.di-carousel__btn svg{width:16px;height:16px}
@media(max-width:900px){.di-carousel__item{flex:0 0 calc(60% - 10px)}}
@media(max-width:600px){.di-carousel__item{flex:0 0 85%}}

/* ── FAQ ── */
.di-faq-item{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r-md);margin-bottom:8px;overflow:hidden;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.di-faq-item:hover{border-color:rgba(0,180,216,0.32);box-shadow:0 4px 14px rgba(0,59,92,0.06)}
.di-faq-item.active{border-color:rgba(0,119,182,0.38)}
.di-faq__q{padding:1.2rem 1.4rem;display:flex;justify-content:space-between;align-items:center;gap:14px;cursor:pointer;font-weight:600;font-size:0.95rem;color:var(--text-h);transition:color var(--dur-fast)}
.di-faq__q:hover{color:var(--blue)}
.di-faq-item.active .di-faq__q{color:var(--blue)}
.di-faq__icon{width:26px;height:26px;border-radius:50%;background:rgba(0,119,182,0.07);border:1.5px solid var(--border-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--dur-mid);color:var(--blue)}
.di-faq-item.active .di-faq__icon{background:var(--blue);color:#fff;transform:rotate(180deg)}
.di-faq__a{max-height:0;overflow:hidden;transition:max-height 0.4s var(--ease),padding 0.3s;color:var(--text-b);font-size:0.9rem;line-height:1.8}
.di-faq-item.active .di-faq__a{max-height:400px;padding:0 1.4rem 1.4rem;border-top:1px solid var(--gray-100)}

/* ── CHART ── */
.di-chart-wrapper{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r-md);padding:1.8rem}
.di-chart-wrapper h3{font-size:0.95rem;font-weight:700;color:var(--text-h);margin-bottom:1.2rem}
.di-chart-wrapper .chart-note{font-size:0.74rem;color:var(--text-m);margin-top:1rem;line-height:1.6;padding-top:0.9rem;border-top:1px solid var(--gray-100)}
.di-section--dark .di-chart-wrapper,.di-section--navy .di-chart-wrapper{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.10)}
.di-section--dark .di-chart-wrapper h3{color:var(--on-dark-h)}
.di-section--dark .di-chart-wrapper .chart-note{color:var(--on-dark-s);border-color:rgba(255,255,255,0.06)}

/* ── CONNECTOR ── */
.di-connector{display:flex;align-items:center;justify-content:center;gap:16px;padding:24px 0}
.di-connector__line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--accent-line),transparent)}
.di-connector__node{width:40px;height:40px;border-radius:50%;background:var(--white);border:1.5px solid var(--border-light);display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:0.7rem;font-weight:700;transition:all var(--dur-mid)}
.di-connector__node.active{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 0 18px rgba(0,119,182,0.35)}

/* ── PROGRESS BAR ── */
.di-progress-bar{position:fixed;top:var(--nav-h);left:0;right:0;height:2px;z-index:1001;background:var(--grad-blue);transform-origin:left;transform:scaleX(0);transition:transform 0.15s linear;box-shadow:0 0 10px var(--accent-glow)}

/* ── INTERACTIVE Q ── */
.di-question{margin-bottom:2rem}
.di-question__prompt{font-size:1rem;font-weight:600;color:var(--text-h);margin-bottom:1.1rem;line-height:1.5}
.di-question__options{display:flex;flex-wrap:wrap;gap:10px}
.di-question__opt{padding:0.6rem 1.2rem;background:var(--gray-50);border:1.5px solid var(--gray-200);border-radius:var(--r-sm);font-size:0.88rem;font-weight:500;color:var(--text-b);cursor:pointer;transition:all var(--dur-fast)}
.di-question__opt:hover{border-color:var(--accent-line);color:var(--blue);background:rgba(0,119,182,0.05)}
.di-question__opt.selected{background:rgba(0,119,182,0.07);border-color:var(--blue);color:var(--blue)}
.di-question__feedback{margin-top:1rem;padding:1rem 1.2rem;background:rgba(45,198,83,0.06);border:1px solid rgba(45,198,83,0.22);border-radius:var(--r-sm);font-size:0.88rem;color:#059669;line-height:1.65;display:none}
.di-question__feedback.visible{display:block;animation:fadeSlideUp 0.4s var(--ease)}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ── GRIDS ── */
.di-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.di-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.di-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.di-grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
@media(max-width:960px){.di-grid-4{grid-template-columns:repeat(2,1fr)}.di-grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.di-grid-4,.di-grid-3,.di-grid-2{grid-template-columns:1fr}}

/* ── UTILS ── */
.u-gold{color:var(--blue)}.u-success{color:var(--success)}.u-center{text-align:center}
.u-mt-sm{margin-top:1rem}.u-mt-md{margin-top:2rem}.u-mt-lg{margin-top:3.5rem}
.u-mb-sm{margin-bottom:1rem}.u-relative{position:relative}.u-z1{z-index:1;position:relative}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--gray-50)}
::-webkit-scrollbar-thumb{background:rgba(0,119,182,0.22);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,119,182,0.45)}

::selection{background:rgba(0,180,216,0.18);color:var(--navy)}

@keyframes connPulse{0%,100%{transform:scale(1);opacity:0.6}50%{transform:scale(1.3);opacity:0}}