/* ============================================================
 * DalaPower — Landing comercial (v2 · premium / editorial)
 * Built on tokens.css (DalaPower Design System)
 * ============================================================ */
@import url('tokens.css');

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--neutral-0); overflow-x: hidden; color: var(--navy-700); }
.site { min-height: 100vh; position: relative; }
img { display: block; max-width: 100%; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 720px) { .container { padding: 0 24px; } }

/* ---------- editorial section scaffolding ---------- */
.section { padding: 140px 0; position: relative; }
.section--alt { background: var(--neutral-50); }
.section--navy { background: var(--dp-navy); color: #fff; position: relative; overflow: hidden;
  background-image: radial-gradient(125% 92% at 50% -22%, #3a5070 0%, #2a3b51 52%, #1c2839 100%); }
/* combined treatment — A: tonal depth (on the section) · B: monogram + F: panel grid (in an injected .navy-deco child, since ::before/::after don't paint on these sections) */
.section--navy > .container { position: relative; z-index: 1; }
.navy-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.navy-deco .nd-mono {
  position: absolute; width: 380px; height: 380px; right: -56px; bottom: -96px;
  background: url("assets/monogram.png") center / contain no-repeat; opacity: 0.10;
  animation: navyMono 26s var(--ease-in-out) infinite alternate; will-change: transform;
}
.navy-deco .nd-panels {
  position: absolute; width: 560px; height: 380px; left: -64px; top: -80px;
  background-image: linear-gradient(rgba(165,198,236,0.34) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(165,198,236,0.34) 1.5px, transparent 1.5px);
  background-size: 54px 32px;
  transform: perspective(820px) rotateX(52deg) rotateZ(26deg);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 78%);
  mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 78%);
  opacity: 0.7;
}
@keyframes navyMono {
  0%   { transform: rotate(-8deg) translateY(0); }
  100% { transform: rotate(-4deg) translateY(-16px); }
}
/* subtle per-section variation — swap the corners so the four navy sections don't read identical */
#compromiso .nd-mono { right: auto; bottom: auto; left: -64px; top: -56px; width: 280px; height: 280px; opacity: 0.07; }
#compromiso .nd-panels { left: auto; top: auto; right: -64px; bottom: -80px; transform: perspective(820px) rotateX(52deg) rotateZ(-26deg); }
#aliados .nd-mono { right: auto; left: -56px; bottom: -96px; }
#aliados .nd-panels { left: auto; right: -64px; top: -80px; transform: perspective(820px) rotateX(52deg) rotateZ(-26deg); }
.cta-card .nd-mono { right: auto; left: -58px; bottom: -52px; width: 270px; height: 270px; opacity: 0.08; }
.cta-card .nd-panels { left: auto; right: -56px; top: -70px; width: 480px; height: 330px; transform: perspective(800px) rotateX(52deg) rotateZ(-26deg); }
@media (prefers-reduced-motion: reduce) {
  .navy-deco .nd-mono { animation: none; }
}
.section--tight { padding: 110px 0; }

.kicker { display: flex; align-items: baseline; gap: 16px; margin-bottom: 34px; }
.kicker .idx {
  font-family: var(--font-impact); font-weight: 700; font-size: 15px;
  letter-spacing: 0.14em; color: var(--green-600);
}
.section--navy .kicker .idx { color: var(--yellow-500); }
.kicker .lbl {
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--navy-400);
}
.section--navy .kicker .lbl { color: rgba(255,255,255,0.5); }
.kicker .rule { flex: 1; height: 1px; background: var(--border-subtle); align-self: center; transform: scaleX(0); transform-origin: left center; transition: transform 820ms var(--ease-out) 180ms; }
.kicker.is-in .rule, [data-reveal].is-in .kicker .rule { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .kicker .rule { transform: none; transition: none; } }
@media print { .kicker .rule { transform: none; } }
.section--navy .kicker .rule { background: rgba(255,255,255,0.14); }

/* Editorial display title — Barlow Condensed, tall and serious */
.display {
  font-family: var(--font-impact); font-weight: 700;
  font-size: clamp(40px, 5.6vw, 76px); line-height: 1.07; letter-spacing: -0.005em;
  text-transform: uppercase; color: var(--navy-700); margin: 0; text-wrap: balance;
}
.section--navy .display { color: #fff; }
.display .grn { color: var(--green-600); }
.display .ylw { color: var(--yellow-500); }
.section--navy .display .grn { color: var(--green-400); }

/* Softer Nunito heading for sub-sections / cards */
.h-soft { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; color: var(--navy-700); margin: 0; }

.lede { font-size: 19px; line-height: 1.6; color: var(--navy-500); max-width: 580px; margin: 22px 0 0; text-wrap: pretty; }
.section--navy .lede { color: rgba(255,255,255,0.7); }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  border-radius: var(--radius-pill); border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 16px 30px; text-decoration: none; position: relative;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    transform 90ms var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.btn svg { width: 17px; height: 17px; transition: transform var(--dur-med) var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--green-500); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--green-600); box-shadow: var(--shadow-md); }
.btn-primary:hover svg { transform: translateX(4px); }
.btn-yellow { background: var(--yellow-500); color: var(--navy-700); }
.btn-yellow:hover { background: var(--yellow-400); }
.btn-yellow:hover svg { transform: translateX(4px); }
.btn-ghost { background: transparent; color: var(--navy-700); padding-left: 14px; padding-right: 14px; }
.btn-ghost:hover { color: var(--green-700); }
.btn-ghost:hover svg { transform: translateX(3px); }
.btn-light { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(6px); }
.btn-light:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.4); }
.btn-light:hover svg { transform: translateX(3px); }
/* hero primary — "Solar Glow" (Option A): warm vertical fill + arrow in a dark disc */
.btn-solar { background: linear-gradient(180deg, #ffd64f 0%, var(--yellow-500) 100%); color: var(--navy-800); padding: 12px 14px 12px 28px; gap: 14px; box-shadow: 0 12px 30px -12px rgba(249,188,0,0.55), inset 0 1px 0 rgba(255,255,255,0.5); }
.btn-solar:hover { background: linear-gradient(180deg, #ffde6b 0%, var(--yellow-500) 100%); transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(249,188,0,0.68), inset 0 1px 0 rgba(255,255,255,0.5); }
.btn-solar:active { transform: scale(0.98); }
.btn-solar .btn-chip { width: 32px; height: 32px; border-radius: 50%; background: var(--navy-700); color: var(--yellow-400); display: grid; place-items: center; flex-shrink: 0; transition: transform var(--dur-med) var(--ease-out); }
.btn-solar .btn-chip svg { width: 16px; height: 16px; transition: none; }
.btn-solar:hover .btn-chip { transform: translateX(3px); }
.btn-outline { background: transparent; color: var(--navy-700); border: 1.5px solid var(--border-default); }
.btn-outline:hover { border-color: var(--green-500); color: var(--green-700); }
.section--navy .btn-outline { color: #fff; border-color: rgba(255,255,255,0.3); }
.section--navy .btn-outline:hover { border-color: var(--yellow-500); color: var(--yellow-500); }
.btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* ============================================================
 * NAV — transparent over hero, solid on scroll
 * ============================================================ */
.nav-wrap {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav-wrap.solid { background: rgba(255,255,255,0.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: var(--border-subtle); box-shadow: var(--shadow-xs); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 32px; height: 80px; }
.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo img { height: 38px; width: auto; display: block; transition: filter var(--dur-med) var(--ease-out); }
.nav-wrap.over-hero .nav-logo img { filter: brightness(0) invert(1); }
.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-link {
  font-family: var(--font-body); font-size: 14px; font-weight: 600; white-space: nowrap;
  color: var(--navy-500); text-decoration: none; background: none; border: 0; cursor: pointer;
  position: relative; padding: 6px 0; transition: color var(--dur-fast) var(--ease-out);
}
.nav-wrap.over-hero .nav-link { color: rgba(255,255,255,0.82); }
.nav-link:hover { color: var(--green-700); }
.nav-wrap.over-hero .nav-link:hover { color: #fff; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--green-500); border-radius: 2px; transition: right var(--dur-med) var(--ease-out); }
.nav-wrap.over-hero .nav-link::after { background: var(--yellow-500); }
.nav-link:hover::after { right: 0; }
.nav-right { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.nav-wrap.over-hero .nav-cta-txt { color: #fff; }
@media (max-width: 920px) { .nav-links { display: none; } }

/* ============================================================
 * HERO — full-bleed photo + scrim + condensed headline + glass cards
 * ============================================================ */
.hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden; padding: 124px 0 64px; }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); animation: kenburns 22s var(--ease-in-out) infinite alternate; }
@keyframes kenburns { from { transform: scale(1.08) translate(0,0); } to { transform: scale(1.18) translate(-2%, -2%); } }
.hero-scrim { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(180deg, rgba(20,29,42,0.55) 0%, rgba(20,29,42,0.20) 30%, rgba(20,29,42,0.45) 62%, rgba(20,29,42,0.92) 100%); }
.hero-scrim::after { content: ""; position: absolute; inset: 0; background: linear-gradient(95deg, rgba(20,29,42,0.78) 0%, rgba(20,29,42,0.30) 46%, transparent 72%); }
.hero-inner { position: relative; z-index: 3; width: 100%; }
.hero-grid { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 56px; align-items: flex-end; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em;
  color: #fff; padding: 9px 16px 9px 13px; margin-bottom: 28px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-pill); backdrop-filter: blur(8px);
}
.hero-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-400); box-shadow: 0 0 0 0 rgba(46,185,87,0.5); animation: pulse 2.4s var(--ease-out) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(46,185,87,0.5); } 70% { box-shadow: 0 0 0 8px rgba(46,185,87,0); } 100% { box-shadow: 0 0 0 0 rgba(46,185,87,0); } }
.hero h1 {
  font-family: var(--font-impact); font-weight: 700; text-transform: uppercase;
  font-size: clamp(48px, 8vw, 116px); line-height: 0.98; letter-spacing: -0.01em;
  color: #fff; margin: 0 0 26px; text-wrap: balance;
}
.hero h1 .ylw { color: var(--yellow-500); }
.hero h1 .ln { display: block; overflow: hidden; padding-top: 0.12em; margin-top: -0.12em; }
.hero h1 .ln > span { display: block; transform: translateY(104%); transition: transform 900ms var(--ease-out); }
.hero.in h1 .ln > span { transform: translateY(0); }
.hero.force h1 .ln > span { transform: none !important; transition: none !important; }
@media print { .hero h1 .ln > span { transform: none !important; } }
.hero h1 .ln:nth-child(2) > span { transition-delay: 90ms; }
.hero h1 .ln:nth-child(3) > span { transition-delay: 180ms; }
.hero-sub { font-size: 19px; line-height: 1.6; color: rgba(255,255,255,0.84); max-width: 540px; margin: 0 0 34px; text-wrap: pretty; }
.hero-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.hero-meta {
  margin-top: 40px; display: flex; flex-wrap: wrap; align-items: stretch; width: fit-content; max-width: 100%;
  background: rgba(20,29,42,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-lg); padding: 6px;
}
.hero-meta .m { padding: 14px 26px; position: relative; }
.hero-meta .m .mi { display: inline-flex; color: var(--yellow-500); margin-bottom: 9px; }
.hero-meta .m:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 20%; bottom: 20%; width: 1px; background: rgba(255,255,255,0.18); }
.hero-meta .m b { display: block; font-family: var(--font-impact); font-weight: 700; font-size: 36px; color: var(--yellow-500); line-height: 0.9; letter-spacing: 0.01em; }
.hero-meta .m span { font-size: 12.5px; color: rgba(255,255,255,0.82); margin-top: 8px; display: block; max-width: 150px; line-height: 1.35; }

/* hero floating glass data card */
.hero-card {
  background: rgba(255,255,255,0.94); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl); padding: 24px 24px 22px; backdrop-filter: blur(10px);
}
.hc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.hc-label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--navy-400); text-transform: uppercase; }
.hc-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; color: var(--green-700); background: var(--green-50); padding: 4px 9px; border-radius: var(--radius-pill); }
.hc-chip svg { width: 12px; height: 12px; }
.hc-num { font-family: var(--font-impact); font-weight: 700; font-size: 46px; color: var(--navy-700); line-height: 1.05; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.hc-num .pre { color: var(--green-600); }
.hc-num .u { font-size: 17px; color: var(--navy-400); font-weight: 600; font-family: var(--font-body); }
.hc-sub { font-size: 12px; color: var(--navy-400); margin-top: 2px; }
.hc-chart { margin-top: 16px; height: 64px; position: relative; }
.hc-chart svg { width: 100%; height: 100%; overflow: visible; }
.hc-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 10px; }
.hc-foot .av { width: 26px; height: 26px; border-radius: 50%; background: var(--green-100); color: var(--green-700); display: grid; place-items: center; }
.hc-foot .av svg { width: 14px; height: 14px; }
.hc-foot .t { font-size: 11.5px; color: var(--navy-500); line-height: 1.3; }

/* hero industrial savings simulator */
.hero-card.sim { padding: 22px 22px 20px; }
.sim-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.sim-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--navy-500); }
.sim-eyebrow svg { color: var(--navy-400); }
.sim-live { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green-700); background: var(--green-50); padding: 4px 9px 4px 8px; border-radius: var(--radius-pill); }
.sim-live .d { width: 6px; height: 6px; border-radius: 50%; background: var(--green-500); animation: pulse 2.2s var(--ease-out) infinite; }
.sim-compare { display: flex; flex-direction: column; gap: 14px; }
.sim-row .sim-rt { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
.sim-row .sim-rt span { font-size: 12.5px; font-weight: 600; color: var(--navy-500); }
.sim-row .sim-rt b { font-family: var(--font-impact); font-weight: 700; font-size: 19px; color: var(--navy-700); font-variant-numeric: tabular-nums; }
.sim-row .sim-rt b.grn { color: var(--green-600); }
.sim-bar { height: 9px; border-radius: var(--radius-pill); background: var(--neutral-100); overflow: hidden; }
.sim-bar .fill { display: block; height: 100%; width: 0; border-radius: var(--radius-pill); transition: width 1100ms var(--ease-out); }
.sim-bar .fill.base { background: var(--navy-300); }
.sim-bar .fill.base.on { width: 100%; }
.sim-bar .fill.dp { background: var(--green-500); }
.sim-bar .fill.dp.on { width: 80%; transition-delay: 180ms; }
.sim-result { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 20px 0; padding: 18px 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.sim-lbl { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--navy-400); margin-bottom: 6px; }
.sim-big { font-family: var(--font-impact); font-weight: 700; font-size: 44px; line-height: 0.9; color: var(--green-600); font-variant-numeric: tabular-nums; }
.sim-big .cur { font-size: 26px; vertical-align: 7px; margin-right: 1px; }
.sim-big .per { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--navy-400); }
.sim-badge { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background: var(--yellow-500); color: var(--navy-700); font-family: var(--font-impact); font-weight: 700; font-size: 23px; line-height: 1; transform: scale(0); transition: transform 600ms var(--ease-out) 480ms; }
.sim-badge.on { transform: scale(1); }
.sim-badge small { font-family: var(--font-body); font-weight: 700; font-size: 8px; letter-spacing: 0.02em; text-transform: uppercase; margin-top: 3px; opacity: 0.82; }
.sim-year .sim-yh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sim-year .sim-yh > span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--navy-500); }
.sim-year .sim-yh > span svg { color: var(--green-600); }
.sim-year .sim-yh b { font-family: var(--font-impact); font-weight: 700; font-size: 17px; color: var(--green-600); font-variant-numeric: tabular-nums; }
.sim-months { display: flex; align-items: flex-end; gap: 5px; height: 40px; }
.sim-months .mb { flex: 1; background: var(--green-100); border-radius: 3px 3px 0 0; height: 4%; transition: height 700ms var(--ease-out); }
.sim-months .mb:nth-child(n+11) { background: var(--green-500); }
.sim-note { margin-top: 14px; font-size: 10.5px; color: var(--navy-300); }
@media (prefers-reduced-motion: reduce) {
  .sim-bar .fill.base.on { width: 100%; } .sim-bar .fill.dp.on { width: 80%; }
  .sim-badge.on { transform: scale(1); } .sim-live .d { animation: none; }
}
.hero-scroll { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 3; color: rgba(255,255,255,0.6); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.hero-scroll .mouse { width: 22px; height: 34px; border: 1.5px solid rgba(255,255,255,0.4); border-radius: 12px; position: relative; }
.hero-scroll .mouse::after { content: ""; position: absolute; top: 6px; left: 50%; width: 3px; height: 6px; background: #fff; border-radius: 2px; transform: translateX(-50%); animation: scrolldot 1.8s var(--ease-in-out) infinite; }
@keyframes scrolldot { 0% { opacity: 0; transform: translate(-50%,0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,12px); } }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero { min-height: auto; padding-top: 140px; }
  .hero-card { max-width: 420px; }
}

/* ============================================================
 * LOGOS MARQUEE
 * ============================================================ */
.logos { padding: 40px 0; border-bottom: 1px solid var(--border-subtle); background: var(--neutral-0); }
.logos .lbl { text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy-300); margin-bottom: 26px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 52px; width: max-content; animation: marquee 36s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.logo-chip { display: flex; align-items: center; gap: 13px; opacity: 0.78; transition: opacity var(--dur-med) var(--ease-out); white-space: nowrap; }
.logo-chip:hover { opacity: 1; }
.logo-chip .thumb { width: 48px; height: 48px; border-radius: 12px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-xs); background: var(--neutral-100); }
.logo-chip .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.logo-chip .nm { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--navy-500); letter-spacing: -0.01em; }

/* ============================================================
 * PROBLEMA
 * ============================================================ */
.prob-quote { margin-top: 76px; padding-top: 48px; border-top: 1px solid var(--border-subtle); display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: start; }
.pq-eyebrow { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.pq-eyebrow span:first-child { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy-300); white-space: nowrap; }
.pq-eyebrow .pq-rule { flex: 1; height: 1px; background: var(--border-default); max-width: 220px; }
.prob-quote .q-mark { font-family: var(--font-display); font-size: 150px; font-weight: 900; color: var(--green-500); line-height: 0.6; animation: pqFloat 7s var(--ease-in-out) infinite; }
@keyframes pqFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.prob-quote p { font-family: var(--font-impact); font-weight: 600; text-transform: uppercase; font-size: clamp(36px,5vw,68px); line-height: 1.0; color: var(--navy-700); margin: 0; letter-spacing: -0.01em; }
.prob-quote .pq-line { display: block; overflow: hidden; padding-bottom: 0.1em; }
.prob-quote .pq-inner { display: block; }
.prob-quote.is-in .pq-line:nth-child(1) .pq-inner { animation: pqRise 780ms var(--ease-out) 60ms both; }
.prob-quote.is-in .pq-line:nth-child(2) .pq-inner { animation: pqRise 780ms var(--ease-out) 190ms both; }
@keyframes pqRise { from { transform: translateY(112%); } to { transform: translateY(0); } }
.prob-quote p .grn {
  background: linear-gradient(100deg, var(--green-600) 0%, var(--green-600) 36%, var(--green-400) 50%, var(--green-600) 64%, var(--green-600) 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: pqShimmer 5.5s linear infinite;
}
@keyframes pqShimmer { from { background-position: 125% 0; } to { background-position: -125% 0; } }
.prob-quote .pq-uline { position: relative; white-space: nowrap; }
.prob-quote .pq-uline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.02em; height: 0.09em; border-radius: 2px;
  background: var(--yellow-500); transform: scaleX(0); transform-origin: left;
  transition: transform 720ms var(--ease-out) 640ms;
}
.prob-quote.is-in .pq-uline::after { transform: scaleX(1); }
.prob-quote.reveal-instant .pq-inner { animation: none !important; transform: none !important; }
.prob-quote.reveal-instant .pq-uline::after { transform: scaleX(1) !important; transition: none !important; }
@media print {
  .prob-quote .pq-inner { transform: none; }
  .prob-quote .pq-uline::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .prob-quote .q-mark, .prob-quote p .grn { animation: none; }
  .prob-quote .pq-inner { animation: none; transform: none; }
  .prob-quote .pq-uline::after { transform: scaleX(1); transition: none; }
}
.prob-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.prob-card { position: relative; overflow: hidden; background: var(--neutral-0); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 30px 26px 28px; box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.prob-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-default); transform: translateY(-3px); }
.prob-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--yellow-500); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-med) var(--ease-out); }
.prob-card:hover::before { transform: scaleX(1); }
.prob-ghost { position: absolute; right: 14px; top: 4px; font-family: var(--font-impact); font-weight: 700; font-size: 80px; line-height: 1; color: var(--navy-700); opacity: 0.05; pointer-events: none; }
.prob-tile { width: 54px; height: 54px; border-radius: 14px; background: var(--navy-50); color: var(--navy-600); display: grid; place-items: center; margin-bottom: 22px; transition: background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out); }
.prob-card:hover .prob-tile { background: var(--navy-700); color: var(--yellow-400); }
@media (max-width: 860px) { .prob-grid { grid-template-columns: 1fr; } .prob-quote { grid-template-columns: 1fr; gap: 8px; } }
.prob-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--navy-700); margin: 0 0 11px; letter-spacing: -0.015em; }
.prob-card p { font-size: 14.5px; line-height: 1.58; color: var(--navy-500); margin: 0; }

/* ============================================================
 * SOLUCION — split with media + comparison
 * ============================================================ */
.sol-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.sol-points { list-style: none; padding: 0; margin: 36px 0 0; display: flex; flex-direction: column; gap: 24px; }
.sol-points li { display: flex; gap: 16px; align-items: flex-start; }
.sol-points .check { width: 26px; height: 26px; border-radius: 50%; background: var(--yellow-500); flex-shrink: 0; display: grid; place-items: center; color: #fff; margin-top: 2px; }
.sol-points .check svg { width: 15px; height: 15px; stroke-width: 2.4; }
.sol-points .tx b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--navy-700); margin-bottom: 4px; letter-spacing: -0.01em; }
.sol-points .tx span { font-size: 15px; color: var(--navy-500); line-height: 1.55; }

.sol-media { position: relative; }
.media-frame { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/5; }
.media-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.media-frame:hover img { transform: scale(1.05); }
.media-frame .tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,29,42,0) 40%, rgba(20,29,42,0.5) 100%); }
.compare-card {
  position: absolute; bottom: -28px; right: -28px; width: 320px;
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); padding: 26px 26px 22px;
}
.compare-card .cc-head { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy-400); margin-bottom: 20px; }
.cc-row { margin-bottom: 18px; }
.cc-row .cc-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.cc-row .cc-name { font-size: 12.5px; font-weight: 700; color: var(--navy-600); }
.cc-row .cc-val { font-family: var(--font-impact); font-weight: 700; font-size: 17px; color: var(--navy-700); font-variant-numeric: tabular-nums; }
.cc-track { height: 10px; border-radius: var(--radius-pill); background: var(--neutral-100); overflow: hidden; }
.cc-fill { height: 100%; border-radius: var(--radius-pill); width: 0; transition: width 1100ms var(--ease-out); }
.cc-fill.before { background: var(--navy-300); }
.cc-fill.after { background: var(--green-500); }
.cc-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; }
.cc-foot .lbl { font-size: 12px; color: var(--navy-500); }
.cc-foot .save { font-family: var(--font-impact); font-weight: 700; font-size: 24px; color: var(--green-600); }
.cc-note { font-size: 10.5px; color: var(--navy-300); margin-top: 12px; }
@media (max-width: 900px) { .sol-grid { grid-template-columns: 1fr; gap: 56px; } .compare-card { position: static; width: 100%; margin-top: 18px; right: 0; bottom: 0; } }

/* ============================================================
 * COMO FUNCIONA — numbered editorial steps
 * ============================================================ */
.pasos { margin-top: 64px; display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; }
.paso { background: var(--neutral-0); padding: 38px 32px; position: relative; transition: background var(--dur-med) var(--ease-out); }
.paso:hover { background: var(--neutral-50); }
.paso-n { font-family: var(--font-impact); font-weight: 700; font-size: 44px; color: var(--neutral-200); line-height: 1; margin-bottom: 20px; transition: color var(--dur-med) var(--ease-out); }
.paso:hover .paso-n { color: var(--green-400); }
.paso-ic { position: absolute; top: 40px; right: 32px; color: var(--green-600); }
.paso-ic svg { width: 26px; height: 26px; stroke-width: 1.5; }
.paso h3 { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--navy-700); margin: 0 0 9px; letter-spacing: -0.01em; }
.paso p { font-size: 14px; line-height: 1.55; color: var(--navy-500); margin: 0; }
@media (max-width: 860px) { .pasos { grid-template-columns: 1fr; } }

/* ============================================================
 * MODELO FINANCIERO (navy)
 * ============================================================ */
.modelo-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 80px; align-items: center; }
.modelo-feats { list-style: none; padding: 0; margin: 40px 0 0; display: flex; flex-direction: column; gap: 8px; }
.modelo-feats li { display: flex; gap: 18px; align-items: flex-start; padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.12); }
.modelo-feats li:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.modelo-feats .ic { width: 40px; height: 40px; border-radius: var(--radius-md); background: rgba(249,188,0,0.14); color: var(--yellow-500); display: grid; place-items: center; flex-shrink: 0; }
.modelo-feats .ic svg { width: 21px; height: 21px; stroke-width: 1.6; }
.modelo-feats .tx b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 17px; color: #fff; margin-bottom: 5px; letter-spacing: -0.01em; }
.modelo-feats .tx span { font-size: 14.5px; color: rgba(255,255,255,0.68); line-height: 1.55; }
.modelo-panel { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-xl); padding: 40px; }
.modelo-panel .mp-head { font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow-500); margin-bottom: 28px; }
.mp-stack { display: flex; flex-direction: column; gap: 14px; }
.mp-line { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-radius: var(--radius-md); background: rgba(255,255,255,0.05); }
.mp-line .ln-left { display: flex; align-items: center; gap: 14px; }
.mp-line .ln-ic { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; }
.mp-line .ln-ic svg { width: 18px; height: 18px; stroke-width: 1.6; }
.mp-line .ln-name { font-size: 14px; color: rgba(255,255,255,0.85); font-weight: 600; }
.mp-line .ln-val { font-family: var(--font-impact); font-weight: 700; font-size: 19px; color: #fff; font-variant-numeric: tabular-nums; }
.mp-line.cfe .ln-ic { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); }
.mp-line.dp .ln-ic { background: rgba(249,188,0,0.18); color: var(--yellow-500); }
.mp-line.total { background: var(--green-600); }
.mp-line.total .ln-name { color: #fff; font-weight: 800; }
.mp-line.total .ln-val { font-size: 22px; }
.mp-line.total .ln-ic { background: rgba(255,255,255,0.2); color: #fff; }
.mp-foot { margin-top: 22px; font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.55; }
@media (max-width: 900px) { .modelo-grid { grid-template-columns: 1fr; gap: 48px; } }

/* ============================================================
 * INSTALADORES — segundo público (canal B2B)
 * ============================================================ */
.instaladores-grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 72px; align-items: center; }
.inst-tag { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--yellow-700); background: var(--yellow-50); padding: 7px 15px 7px 12px; border-radius: var(--radius-pill); margin-bottom: 24px; }
.inst-tag svg { width: 15px; height: 15px; }
.inst-feats { list-style: none; padding: 0; margin: 36px 0 34px; display: flex; flex-direction: column; gap: 24px; }
.inst-feats li { display: flex; gap: 16px; align-items: flex-start; }
.inst-feats .ic { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--yellow-50); color: var(--yellow-700); display: grid; place-items: center; flex-shrink: 0; }
.inst-feats .ic svg { width: 22px; height: 22px; stroke-width: 1.6; }
.inst-feats .tx b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--navy-700); margin-bottom: 4px; letter-spacing: -0.01em; }
.inst-feats .tx span { font-size: 14.5px; color: var(--navy-500); line-height: 1.55; }

.flow-panel { background: var(--neutral-0); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 38px 36px; }
.flow-head { font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy-400); margin-bottom: 28px; }
.flow-list { display: flex; flex-direction: column; }
.flow-step { display: flex; gap: 18px; padding-bottom: 26px; position: relative; }
.flow-step:last-child { padding-bottom: 0; }
.flow-step .n { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-impact); font-weight: 700; font-size: 16px; background: var(--navy-100); color: var(--navy-600); z-index: 1; }
.flow-step.green .n { background: var(--green-500); color: #fff; }
.flow-step.yellow .n { background: var(--yellow-500); color: var(--navy-700); }
.flow-step::before { content: ""; position: absolute; left: 18.5px; top: 40px; bottom: 6px; width: 2px; background: var(--border-subtle); }
.flow-step:last-child::before { display: none; }
.flow-step .ft b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--navy-700); margin-bottom: 3px; letter-spacing: -0.01em; }
.flow-step .ft span { font-size: 13.5px; color: var(--navy-500); line-height: 1.5; }
@media (max-width: 900px) { .instaladores-grid { grid-template-columns: 1fr; gap: 48px; } }

/* referenced hard-data callout */
.stat-callout { display: flex; gap: 26px; align-items: stretch; padding: 26px 28px; border-radius: var(--radius-lg); background: var(--neutral-0); border: 1px solid var(--border-subtle); }
.stat-callout.on-navy { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
.stat-callout .sc-figure { display: flex; flex-direction: column; justify-content: flex-start; flex-shrink: 0; padding-right: 26px; border-right: 1px solid var(--border-subtle); }
.stat-callout.on-navy .sc-figure { border-right-color: rgba(255,255,255,0.14); }
.stat-callout .num { font-family: var(--font-impact); font-weight: 700; font-size: 60px; line-height: 0.82; color: var(--green-600); letter-spacing: -0.01em; }
.stat-callout.on-navy .num { color: var(--yellow-500); }
.stat-callout .sc-tag { margin-top: 9px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--navy-400); white-space: nowrap; }
.stat-callout.on-navy .sc-tag { color: rgba(255,255,255,0.5); }
.stat-callout .body { display: flex; flex-direction: column; justify-content: center; }
.stat-callout .body p { margin: 0; font-size: 14.5px; color: var(--navy-700); line-height: 1.55; font-weight: 500; }
.stat-callout.on-navy .body p { color: rgba(255,255,255,0.9); }
.stat-callout .body .src { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 11px; color: var(--navy-400); font-weight: 500; }
.stat-callout .body .src svg { flex-shrink: 0; }
.stat-callout.on-navy .body .src { color: rgba(255,255,255,0.45); }

/* ============================================================
 * ALIADOS — formulario de instaladores (navy)
 * ============================================================ */
.aliados-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 64px; align-items: center; }
.aliados-points { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-direction: column; gap: 15px; }
.aliados-points li { display: flex; gap: 13px; align-items: flex-start; font-size: 15px; color: rgba(255,255,255,0.82); line-height: 1.5; }
.aliados-points .ck { width: 24px; height: 24px; border-radius: 50%; background: var(--green-500); color: #fff; display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }
.aliados-points .ck svg { width: 14px; height: 14px; stroke-width: 2.4; }
.rep-badge { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 11px 18px; border-radius: var(--radius-pill); background: rgba(249,188,0,0.14); border: 1px solid rgba(249,188,0,0.32); color: var(--yellow-500); font-size: 13px; font-weight: 700; }
.rep-badge svg { width: 17px; height: 17px; flex-shrink: 0; }

.form-card { background: var(--neutral-0); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); padding: 34px; }
.form-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 21px; color: var(--navy-700); margin: 0 0 4px; letter-spacing: -0.015em; }
.form-card .sub { font-size: 13.5px; color: var(--navy-500); margin: 0 0 24px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12px; font-weight: 700; color: var(--navy-600); }
.field input, .field select, .field textarea { font-family: var(--font-body); font-size: 14px; color: var(--navy-700); padding: 11px 13px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: #fff; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); width: 100%; }
.field textarea { resize: vertical; min-height: 70px; }
.field input::placeholder, .field textarea::placeholder { color: var(--navy-300); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green-500); box-shadow: var(--ring-focus); }
.field.err input, .field.err select { border-color: var(--status-danger); }
.field .msg { font-size: 11px; color: var(--status-danger); min-height: 13px; line-height: 1.1; }
.form-card .btn { width: 100%; justify-content: center; margin-top: 8px; }
.form-note { font-size: 11px; color: var(--navy-300); margin-top: 13px; text-align: center; line-height: 1.4; }
.form-success { text-align: center; padding: 28px 10px; }
.form-success .ic { width: 64px; height: 64px; border-radius: 50%; background: var(--green-50); color: var(--green-600); display: grid; place-items: center; margin: 0 auto 18px; }
.form-success .ic svg { width: 32px; height: 32px; }
.form-success h3 { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--navy-700); margin: 0 0 8px; }
.form-success p { font-size: 14.5px; color: var(--navy-500); margin: 0; line-height: 1.55; }
@media (max-width: 900px) { .aliados-grid { grid-template-columns: 1fr; gap: 44px; } .form-grid { grid-template-columns: 1fr; } }

/* ============================================================
 * LEAD — "Analiza tu recibo" (clientes · foto + tarjeta de vidrio)
 * ============================================================ */
.lead-sec { position: relative; overflow: hidden; padding: 96px 0 104px; color: #fff; }
.lead-bg { position: absolute; inset: 0; z-index: 0; }
.lead-bg img { width: 100%; height: 100%; object-fit: cover; }
.lead-scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(20,30,45,0.96) 0%, rgba(22,32,47,0.86) 38%, rgba(22,32,47,0.50) 72%, rgba(22,32,47,0.34) 100%); }
.lead-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 0.96fr; gap: 56px; align-items: center; }
.lead-sec .display { color: #fff; }
.lead-sec .display .grn { color: var(--green-400); }
.lead-sec .lede { color: rgba(255,255,255,0.82); max-width: 440px; }
.lead-sec .kicker .idx { color: var(--yellow-500); }
.lead-sec .kicker .lbl { color: rgba(255,255,255,0.55); }
.lead-sec .kicker .rule { background: rgba(255,255,255,0.16); }

/* floating glass savings card */
.lead-glass { margin-top: 30px; max-width: 460px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow-lg); }
.lead-glass .g-row { display: flex; align-items: center; gap: 14px; }
.lead-glass .g-ic { width: 42px; height: 42px; border-radius: 12px; background: rgba(249,188,0,0.18); color: var(--yellow-400); display: grid; place-items: center; flex-shrink: 0; }
.lead-glass .g-tx { min-width: 0; }
.lead-glass .g-lab { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.lead-glass .g-big { font-family: var(--font-impact); font-weight: 800; font-size: 26px; color: #fff; margin-top: 2px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.lead-glass .g-big small { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.6); }
.lead-glass .g-pct { margin-left: auto; font-family: var(--font-impact); font-weight: 800; font-size: 18px; color: rgba(255,255,255,0.3); transition: color var(--dur-med) var(--ease-out); }
.lead-glass.on .g-pct { color: var(--yellow-400); }
.lead-glass .g-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.15); margin: 16px 0 10px; overflow: hidden; }
.lead-glass .g-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green-500), var(--green-400)); width: 0; transition: width 820ms var(--ease-out); }
.lead-glass .g-cmp { display: flex; justify-content: space-between; font-size: 12.5px; color: rgba(255,255,255,0.72); font-variant-numeric: tabular-nums; }
.lead-glass .g-cmp .g { color: var(--green-400); font-weight: 700; }

/* form on photo */
.lead-sec .form-card { background: var(--neutral-0); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); padding: 30px; color: var(--navy-700); }
.lead-sec .form-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 21px; color: var(--navy-700); margin: 0 0 4px; letter-spacing: -0.015em; }
.lead-sec .form-card .sub { font-size: 13.5px; color: var(--navy-500); margin: 0 0 22px; }

/* file dropzone */
.field .opt { font-weight: 500; color: var(--navy-300); }
.dropzone { position: relative; display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 14px; border: 1.5px dashed var(--border-default); border-radius: var(--radius-sm); background: var(--neutral-50); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.dropzone:hover { border-color: var(--green-500); background: var(--green-50); }
.dropzone.has-file { border-style: solid; border-color: var(--green-500); background: var(--green-50); }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dz-empty, .dz-file { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; text-align: center; }
.dz-empty { color: var(--navy-400); }
.dz-empty svg { color: var(--navy-300); flex-shrink: 0; }
.dz-file { color: var(--green-700); word-break: break-all; }
.dz-file svg { color: var(--green-600); flex-shrink: 0; }

/* success check pop */
.form-success .ic.pop { animation: leadPop 520ms var(--ease-out) both; }
@keyframes leadPop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }

@media (max-width: 900px) { .lead-inner { grid-template-columns: 1fr; gap: 40px; } .lead-glass { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .form-success .ic.pop { animation: none; } }

/* ============================================================
 * TESTIMONIOS — slider con motion
 * ============================================================ */
.tslider { margin-top: 50px; }
.tslider-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.tslider-head .hint { font-size: 13px; color: var(--navy-400); display: inline-flex; align-items: center; gap: 8px; }
.tslider-head .hint svg { width: 16px; height: 16px; color: var(--green-600); }
.tslider-arrows { display: flex; gap: 10px; }
.tarrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border-default); background: var(--neutral-0); color: var(--navy-600); display: grid; place-items: center; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.tarrow:hover { border-color: var(--green-500); color: var(--green-700); background: var(--green-50); }
.tarrow:active { transform: scale(0.95); }
.tarrow svg { width: 20px; height: 20px; }
.tslider-vp { overflow: hidden; }
.tslider-track { display: flex; gap: 22px; will-change: transform; transition: transform 620ms var(--ease-out); cursor: grab; }
.tslider-track.dragging { transition: none; cursor: grabbing; }
.tcard { flex: 0 0 auto; background: var(--neutral-0); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 30px 28px; display: flex; flex-direction: column; box-shadow: var(--shadow-xs); }
.tcard .save-chip { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 12px; font-weight: 800; color: var(--green-700); background: var(--green-50); padding: 5px 11px; border-radius: var(--radius-pill); margin-bottom: 16px; }
.tcard .save-chip svg { width: 13px; height: 13px; }
.tcard .stars { display: flex; gap: 3px; color: var(--yellow-500); margin-bottom: 14px; }
.tcard .stars svg { width: 15px; height: 15px; }
.tcard p { font-size: 14.5px; line-height: 1.6; color: var(--navy-600); margin: 0 0 22px; }
.tcard .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.tcard .av { width: 42px; height: 42px; border-radius: 50%; background: var(--navy-100); color: var(--navy-600); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 14px; flex-shrink: 0; }
.tcard .who .n { font-size: 13.5px; font-weight: 800; color: var(--navy-700); display: block; }
.tcard .who .r { font-size: 12px; color: var(--navy-400); }
.tslider-dots { display: flex; gap: 8px; justify-content: center; margin-top: 28px; }
.tdot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-default); border: 0; padding: 0; cursor: pointer; transition: width var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out); }
.tdot.on { width: 26px; border-radius: var(--radius-pill); background: var(--green-500); }

/* national coverage strip */
.coverage { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; padding: 10px 22px 10px 10px; border-radius: var(--radius-pill); background: var(--green-50); color: var(--green-700); font-size: 14px; font-weight: 600; }
.coverage .cv-ic { width: 32px; height: 32px; border-radius: 50%; background: var(--green-500); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.coverage .cv-ic svg { width: 16px; height: 16px; flex-shrink: 0; }
.coverage b { font-weight: 800; }
.coverage.on-navy { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.88); }
.coverage.on-navy .cv-ic { background: var(--green-500); color: #fff; }
@media (prefers-reduced-motion: reduce) { .tslider-track { transition: none; } }

/* ============================================================
 * CONFIANZA
 * ============================================================ */
.testi-grid { margin-top: 60px; display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.testi { background: var(--neutral-0); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 32px 30px; display: flex; flex-direction: column; transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.testi:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.testi .stars { display: flex; gap: 3px; color: var(--yellow-500); margin-bottom: 18px; }
.testi .stars svg { width: 16px; height: 16px; }
.testi p { font-size: 15px; line-height: 1.6; color: var(--navy-600); margin: 0 0 24px; }
.testi .who { display: flex; align-items: center; gap: 13px; margin-top: auto; }
.testi .av { width: 44px; height: 44px; border-radius: 50%; background: var(--navy-100); color: var(--navy-600); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.testi .who .n { font-size: 14px; font-weight: 800; color: var(--navy-700); }
.testi .who .r { font-size: 12.5px; color: var(--navy-400); }
.certs { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.cert-chip { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; background: var(--neutral-0); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 600; color: var(--navy-600); }
.cert-chip svg { width: 17px; height: 17px; color: var(--green-600); stroke-width: 1.8; }
@media (max-width: 900px) { .testi-grid { grid-template-columns: 1fr; } }

/* ============================================================
 * PARA QUIEN — image cards
 * ============================================================ */
.quien-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.quien-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 3/4; box-shadow: var(--shadow-sm); }
.quien-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.quien-card:hover img { transform: scale(1.07); }
.quien-card .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,29,42,0.05) 30%, rgba(20,29,42,0.4) 60%, rgba(20,29,42,0.92) 100%); }
.quien-card .body { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; color: #fff; }
.quien-card .q-ic { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.14); backdrop-filter: blur(6px); display: grid; place-items: center; color: #fff; margin-bottom: 14px; }
.quien-card .q-ic svg { width: 20px; height: 20px; stroke-width: 1.6; }
.quien-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: #fff; margin: 0 0 6px; letter-spacing: -0.01em; }
.quien-card p { font-size: 13px; color: rgba(255,255,255,0.78); margin: 0; line-height: 1.45; }
@media (max-width: 900px) { .quien-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .quien-grid { grid-template-columns: 1fr; } }

/* ============================================================
 * BENEFICIOS
 * ============================================================ */
.benef-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; }
.benef { background: var(--neutral-0); padding: 34px 30px; transition: background var(--dur-med) var(--ease-out); }
.benef:hover { background: var(--neutral-50); }
.benef .b-ic { width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--green-50); color: var(--green-600); display: grid; place-items: center; margin-bottom: 20px; }
.benef .b-ic svg { width: 23px; height: 23px; stroke-width: 1.6; }
.benef h3 { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--navy-700); margin: 0 0 9px; letter-spacing: -0.01em; }
.benef p { font-size: 14px; line-height: 1.55; color: var(--navy-500); margin: 0; }
@media (max-width: 860px) { .benef-grid { grid-template-columns: 1fr; } }

/* ============================================================
 * METRICAS — full-bleed photo "boom" band
 * ============================================================ */
.metricas { position: relative; padding: 130px 0; color: #fff; overflow: hidden; }
.metricas-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.metricas-bg img { position: absolute; top: -12%; left: 0; width: 100%; height: 124%; object-fit: cover; will-change: transform; }
.metricas-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(20,29,42,0.95) 0%, rgba(20,29,42,0.82) 50%, rgba(20,29,42,0.6) 100%); }
.metricas-inner { position: relative; z-index: 2; }
.metricas-head { max-width: 680px; margin-bottom: 64px; }
.metricas-head .display { color: #fff; }
.metricas-head .display .ylw { color: var(--yellow-500); }
.metricas-head p { color: rgba(255,255,255,0.72); font-size: 18px; margin: 20px 0 0; line-height: 1.6; max-width: 580px; }
.metricas-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.metric { position: relative; overflow: hidden; background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-xl); padding: 26px 24px 24px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out); }
.metric:hover { transform: translateY(-4px); border-color: rgba(249,188,0,0.42); background: rgba(255,255,255,0.085); }
.metric .m-ic { width: 46px; height: 46px; border-radius: var(--radius-md); background: rgba(249,188,0,0.16); color: var(--yellow-500); display: grid; place-items: center; margin-bottom: 22px; }
.metric .m-ic svg { width: 24px; height: 24px; stroke-width: 1.6; }
.metric .m-num { font-family: var(--font-impact); font-weight: 700; font-size: clamp(40px,4.4vw,58px); line-height: 0.9; color: #fff; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 6px; }
.metric .m-u { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--yellow-500); letter-spacing: 0.01em; }
.metric .lbl { font-size: 13.5px; color: rgba(255,255,255,0.7); margin-top: 12px; line-height: 1.4; max-width: 90%; }
.metric .m-ghost { position: absolute; right: -14px; bottom: -18px; color: rgba(255,255,255,0.045); pointer-events: none; }
.metric .m-ghost svg { width: 104px; height: 104px; stroke-width: 1.4; }
.metricas-note { margin-top: 44px; font-size: 12px; color: rgba(255,255,255,0.42); }
@media (max-width: 900px) { .metricas-grid { grid-template-columns: repeat(2,1fr); gap: 40px 28px; } }

/* ============================================================
 * CTA FINAL
 * ============================================================ */
.cta-final { padding: 130px 0; background: var(--neutral-50); }
.cta-card { position: relative; overflow: hidden; border-radius: var(--radius-2xl); padding: 76px 64px; box-shadow: var(--shadow-lg); background: var(--dp-navy); background-image: radial-gradient(120% 96% at 50% -26%, #3a5070 0%, #2a3b51 52%, #1c2839 100%); display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 60px; align-items: center; }
.cta-card .inner { position: relative; z-index: 2; max-width: 560px; }

/* right-side reinforcement panel */
.cta-aside { position: relative; z-index: 2; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 30px; border-radius: var(--radius-xl); background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.12); }
.cta-aside-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow-500); }
.cta-aside-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.cta-aside-list li { display: flex; gap: 15px; align-items: flex-start; }
.cta-aside-list .ca-ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: rgba(249,188,0,0.14); color: var(--yellow-400); display: grid; place-items: center; }
.cta-aside-list .ca-tx { display: flex; flex-direction: column; gap: 3px; }
.cta-aside-list .ca-tx b { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: #fff; letter-spacing: -0.01em; }
.cta-aside-list .ca-tx small { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,0.66); }
.cta-aside-foot { display: flex; gap: 9px; align-items: flex-start; margin-top: 4px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,0.6); }
.cta-aside-foot svg { color: var(--green-400); flex-shrink: 0; margin-top: 1px; }
.cta-card .cta-glow { position: absolute; inset: -20%; z-index: 0; pointer-events: none; background: radial-gradient(54% 56% at 90% 8%, rgba(249,188,0,0.09), transparent 60%), radial-gradient(48% 52% at 6% 96%, rgba(21,163,56,0.10), transparent 62%); animation: ctaGlow 30s var(--ease-in-out) infinite alternate; will-change: transform; }
@keyframes ctaGlow { 0% { transform: translate3d(-2%, -1.5%, 0); } 100% { transform: translate3d(2.5%, 1.5%, 0); } }
@media (prefers-reduced-motion: reduce) { .cta-card .cta-glow { animation: none; } }
.cta-card .inner { position: relative; z-index: 2; max-width: 640px; }
.cta-card .display { color: #fff; }
.cta-card .display .ylw { color: var(--yellow-500); }
.cta-card p { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.8); margin: 22px 0 36px; max-width: 520px; }
.cta-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.cta-steps { margin-top: 40px; display: flex; gap: 30px; flex-wrap: wrap; }
.cta-step { display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(255,255,255,0.82); }
.cta-step .num { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.12); color: var(--yellow-500); font-family: var(--font-impact); font-weight: 700; font-size: 14px; display: grid; place-items: center; }
@media (max-width: 860px) { .cta-card { grid-template-columns: 1fr; gap: 36px; } .cta-card .inner { max-width: none; } }
@media (max-width: 720px) { .cta-card { padding: 48px 30px; } }

/* ============================================================
 * FOOTER
 * ============================================================ */
.footer { background: var(--navy-800); color: rgba(255,255,255,0.7); padding: 80px 0 34px; }
.footer-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; }
.footer-logo img { height: 46px; width: auto; margin-bottom: 20px; filter: brightness(0) invert(1); opacity: 0.96; }
.footer-logo p { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,0.6); max-width: 290px; margin: 0; }
.footer h4 { font-family: var(--font-body); font-size: 11.5px; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255,255,255,0.42); font-weight: 700; margin: 0 0 16px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer a, .footer button.linklike { color: rgba(255,255,255,0.78); text-decoration: none; font-size: 14px; font-weight: 500; background: none; border: 0; cursor: pointer; padding: 0; text-align: left; font-family: var(--font-body); }
.footer a:hover, .footer button.linklike:hover { color: #fff; }
.footer-bottom { margin-top: 52px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: rgba(255,255,255,0.45); }
@media (max-width: 900px) { .footer-row { grid-template-columns: 1fr 1fr; gap: 36px; } }

/* ============================================================
 * MOTION — reveals & effects
 * ============================================================ */
/* hero mini-chart draw-on-load */
.hc-area { opacity: 0; animation: areaIn 900ms var(--ease-out) 1s forwards; }
.hc-line { stroke-dasharray: 360; stroke-dashoffset: 360; animation: draw 1700ms var(--ease-out) 350ms forwards; }
.hc-dot { opacity: 0; animation: dotIn 400ms var(--ease-out) 1700ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes areaIn { to { opacity: 1; } }
@keyframes dotIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hc-line { animation: none; stroke-dashoffset: 0; }
  .hc-area, .hc-dot { animation: none; opacity: 1; }
}

[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 760ms var(--ease-out), transform 760ms var(--ease-out); will-change: opacity, transform; }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal="mask"] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 900ms var(--ease-out); }
[data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); }
[data-reveal="scale"] { opacity: 0; transform: scale(0.96); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }
[data-reveal="scale"].is-in { opacity: 1; transform: none; }
[data-reveal].reveal-instant { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
@media print { [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; } }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .hero-bg img { animation: none; transform: scale(1.04); }
  .hero h1 .ln > span { transform: none !important; }
  .marquee-track { animation: none; }
  .hero-scroll .mouse::after, .hero-pill .dot { animation: none; }
}

/* ============================================================
 * NUESTRO POWER — historia, misión, visión, valores
 * ============================================================ */
.np-intro { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; margin-top: 56px; }
.np-intro .np-media { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 5/4; background: var(--navy-100); }
.np-intro .np-media img { width: 100%; height: 100%; object-fit: cover; }
.np-intro h3 { font-family: var(--font-display); font-weight: 800; font-size: 23px; color: var(--navy-700); margin: 0 0 16px; letter-spacing: -0.015em; }
.np-intro p { font-size: 15.5px; line-height: 1.65; color: var(--navy-500); margin: 0 0 14px; }
.np-intro p:last-child { margin-bottom: 0; }
/* Nuestro Power — light brand-texture treatment + framed image badge */
#nuestro-power { position: relative; overflow: hidden; }
#nuestro-power > .container { position: relative; z-index: 1; }
.np-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.np-deco .np-mono { position: absolute; right: -64px; top: -50px; width: 300px; height: 300px; background: url("assets/monogram.png") center/contain no-repeat; opacity: 0.05; }
.np-deco .np-panels { position: absolute; left: -60px; bottom: -90px; width: 520px; height: 360px; background-image: linear-gradient(rgba(42,59,81,0.12) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(42,59,81,0.12) 1.5px, transparent 1.5px); background-size: 52px 30px; transform: perspective(820px) rotateX(54deg) rotateZ(-26deg); -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 76%); mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 76%); opacity: 0.7; }
.np-intro .np-media { border: 1px solid var(--border-subtle); }
.np-media .np-badge { position: absolute; left: 18px; bottom: 18px; z-index: 2; display: flex; align-items: center; gap: 11px; background: rgba(255,255,255,0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: var(--radius-pill); padding: 9px 18px 9px 11px; box-shadow: var(--shadow-md); }
.np-media .np-badge .bi { width: 34px; height: 34px; border-radius: 50%; background: var(--green-500); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.np-media .np-badge b { font-family: var(--font-impact); font-weight: 700; font-size: 17px; color: var(--navy-700); display: block; line-height: 1; }
.np-media .np-badge span { font-size: 11px; color: var(--navy-400); }
.mvv { margin-top: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mvv-card { background: var(--neutral-0); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 30px 28px; }
.mvv-card .mv-ic { width: 46px; height: 46px; border-radius: var(--radius-md); display: grid; place-items: center; margin-bottom: 18px; }
.mvv-card.m .mv-ic { background: var(--green-50); color: var(--green-600); }
.mvv-card.v .mv-ic { background: var(--yellow-50); color: var(--yellow-700); }
.mvv-card.val .mv-ic { background: var(--navy-100); color: var(--navy-600); }
.mvv-card .mv-ic svg { width: 23px; height: 23px; stroke-width: 1.6; }
.mvv-card h4 { font-family: var(--font-body); font-size: 12px; font-weight: 800; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--navy-400); margin: 0 0 12px; }
.mvv-card p { font-size: 14.5px; line-height: 1.6; color: var(--navy-600); margin: 0; }
.mvv-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mvv-card ul li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--navy-700); }
.mvv-card ul li svg { width: 16px; height: 16px; color: var(--green-600); flex-shrink: 0; }
@media (max-width: 900px) { .np-intro { grid-template-columns: 1fr; gap: 40px; } }

/* ============================================================
 * MVV — Misión / Visión / Valores en tarjetas flip al hover
 * ============================================================ */
.mvv { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.flipcard { perspective: 1600px; height: 360px; outline: none; }
.flipcard-inner { position: relative; width: 100%; height: 100%; transition: transform 760ms var(--ease-in-out); transform-style: preserve-3d; }
.flipcard:hover .flipcard-inner, .flipcard:focus-visible .flipcard-inner { transform: rotateY(180deg); }
.flipcard-front, .flipcard-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; }
.flipcard-front { border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); padding: 32px 30px; transition: box-shadow var(--dur-med) var(--ease-out); position: relative; }
.flipcard.m .flipcard-front { background: linear-gradient(160deg, var(--green-50) 0%, var(--neutral-0) 52%); }
.flipcard.v .flipcard-front { background: linear-gradient(160deg, var(--yellow-50) 0%, var(--neutral-0) 52%); }
.flipcard.val .flipcard-front { background: linear-gradient(160deg, var(--navy-50) 0%, var(--neutral-0) 52%); }
.flipcard:hover .flipcard-front { box-shadow: var(--shadow-md); }
.flipcard-front::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2; }
.flipcard-front .fc-watermark { position: absolute; right: -18px; bottom: -22px; opacity: 0.06; pointer-events: none; }
.flipcard-front .fc-watermark svg { width: 168px; height: 168px; stroke-width: 1.2; }
.flipcard.m .fc-watermark { color: var(--green-600); }
.flipcard.v .fc-watermark { color: var(--yellow-700); }
.flipcard.val .fc-watermark { color: var(--navy-500); }
.flipcard-front .fc-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.flipcard-front .mv-ic { width: 64px; height: 64px; border-radius: var(--radius-lg); display: grid; place-items: center; transition: transform var(--dur-med) var(--ease-out); box-shadow: var(--shadow-xs); }
.flipcard:hover .flipcard-front .mv-ic { transform: scale(1.06) rotate(-4deg); }
.flipcard.m .mv-ic { background: var(--green-500); color: #fff; }
.flipcard.v .mv-ic { background: var(--yellow-500); color: var(--navy-700); }
.flipcard.val .mv-ic { background: var(--dp-navy); color: var(--yellow-500); }
.flipcard-front .mv-ic svg { width: 32px; height: 32px; stroke-width: 1.7; }
.flipcard-front .fc-idx { font-family: var(--font-impact); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; color: var(--navy-300); border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 5px 12px; }
.flipcard-front h4 { font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--navy-700); margin: auto 0 8px; letter-spacing: -0.02em; position: relative; z-index: 1; }
.flipcard-front .fc-tag { font-size: 14px; color: var(--navy-400); line-height: 1.45; position: relative; z-index: 1; }
.flipcard-front .fc-hint { margin-top: 22px; display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--navy-500); position: relative; z-index: 1; }
.flipcard-front .fc-hint .ch { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border-default); color: var(--navy-500); transition: background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); }
.flipcard.m:hover .fc-hint .ch { background: var(--green-500); border-color: var(--green-500); color: #fff; }
.flipcard.v:hover .fc-hint .ch { background: var(--yellow-500); border-color: var(--yellow-500); color: var(--navy-700); }
.flipcard.val:hover .fc-hint .ch { background: var(--navy-500); border-color: var(--navy-500); color: #fff; }
.flipcard-front .fc-hint .ch svg { width: 15px; height: 15px; transition: transform var(--dur-slow) var(--ease-out); }
.flipcard:hover .fc-hint .ch svg { transform: rotate(180deg); }
.flipcard-back { transform: rotateY(180deg); background: var(--dp-navy); justify-content: center; padding: 34px 30px; }
.flipcard-back::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.flipcard.m .flipcard-front::before { background: var(--green-500); }
.flipcard.v .flipcard-front::before { background: var(--yellow-500); }
.flipcard.val .flipcard-front::before { background: var(--navy-400); }
.flipcard.m .flipcard-back::before { background: var(--green-500); }
.flipcard.v .flipcard-back::before { background: var(--yellow-500); }
.flipcard.val .flipcard-back::before { background: var(--yellow-500); }
.flipcard-back .bk-ic { width: 40px; height: 40px; border-radius: var(--radius-md); background: rgba(255,255,255,0.1); display: grid; place-items: center; margin-bottom: 16px; }
.flipcard.m .flipcard-back .bk-ic { color: var(--green-400); }
.flipcard.v .flipcard-back .bk-ic, .flipcard.val .flipcard-back .bk-ic { color: var(--yellow-500); }
.flipcard-back .bk-ic svg { width: 21px; height: 21px; stroke-width: 1.6; }
.flipcard-back h4 { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: #fff; margin: 0 0 12px; letter-spacing: -0.01em; }
.flipcard.m .flipcard-back h4 { color: var(--green-400); }
.flipcard.v .flipcard-back h4 { color: var(--yellow-500); }
.flipcard-back p { font-size: 14.5px; line-height: 1.62; color: rgba(255,255,255,0.84); margin: 0; text-wrap: pretty; }
.flipcard-back ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.flipcard-back ul li { display: flex; align-items: center; gap: 11px; font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,0.9); }
.flipcard-back ul li svg { width: 16px; height: 16px; color: var(--green-400); flex-shrink: 0; }
@media (max-width: 860px) { .mvv { grid-template-columns: 1fr; } .flipcard { height: 320px; } }
@media (prefers-reduced-motion: reduce) {
  .flipcard-inner { transition: none; }
  .flipcard:hover .flipcard-inner, .flipcard:focus-visible .flipcard-inner { transform: none; }
  .flipcard-back { position: relative; transform: none; backface-visibility: visible; -webkit-backface-visibility: visible; margin-top: 12px; }
  .flipcard-front .fc-hint { display: none; }
  .flipcard { height: auto; }
}

/* ============================================================
 * COMPROMISO SOCIAL — banda navy interactiva
 * ============================================================ */
#compromiso { position: relative; overflow: hidden; }
#compromiso .container { position: relative; z-index: 1; }
.social-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.social-head .kicker { justify-content: center; }
.social-head .display { color: #fff; }
.social-head .display .ylw { color: var(--yellow-500); }
.social-head .lede { color: rgba(255,255,255,0.72); margin-left: auto; margin-right: auto; }

.social-panel { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: stretch; }

/* selectable pillars (left) */
.social-pillars { display: flex; flex-direction: column; gap: 14px; }
.spill { text-align: left; cursor: pointer; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: 22px 24px; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; transition: background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); width: 100%; font-family: var(--font-body); }
.spill:hover { background: rgba(255,255,255,0.07); }
.spill.on { background: rgba(249,188,0,0.1); border-color: rgba(249,188,0,0.4); }
.spill .sp-ic { width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); display: grid; place-items: center; transition: background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out); }
.spill.on .sp-ic { background: var(--yellow-500); color: var(--navy-700); }
.spill .sp-ic svg { width: 24px; height: 24px; stroke-width: 1.6; }
.spill .sp-tx b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 17px; color: #fff; letter-spacing: -0.01em; margin-bottom: 3px; }
.spill .sp-tx span { font-size: 13px; color: rgba(255,255,255,0.6); }
.spill .sp-arrow { color: rgba(255,255,255,0.3); transition: transform var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out); }
.spill.on .sp-arrow { color: var(--yellow-500); transform: translateX(3px); }
.spill .sp-arrow svg { width: 20px; height: 20px; }

/* media + impact (right) */
.social-stage { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); background: rgba(255,255,255,0.06); min-height: 420px; }
.social-stage .ss-img { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms var(--ease-out), transform 7s var(--ease-out); transform: scale(1.04); }
.social-stage .ss-img.on { opacity: 1; transform: scale(1.12); }
.social-stage .ss-img img, .social-stage .ss-img .fig-fallback { width: 100%; height: 100%; object-fit: cover; }
.social-stage .ss-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,29,42,0.1) 30%, rgba(20,29,42,0.55) 70%, rgba(20,29,42,0.92) 100%); z-index: 1; }
.social-stage .ss-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 32px; }
.social-stage .ss-detail { font-size: 15.5px; line-height: 1.6; color: #fff; margin: 0; max-width: 480px; text-wrap: pretty; transition: opacity var(--dur-med) var(--ease-out); }
.social-stage .ss-tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 7px 14px; border-radius: var(--radius-pill); background: var(--yellow-500); color: var(--navy-700); font-size: 12px; font-weight: 800; letter-spacing: 0.02em; }
.social-stage .ss-tag svg { width: 14px; height: 14px; }

/* impact equation + stats strip */
.social-impact { margin-top: 28px; display: grid; grid-template-columns: auto 1px 1fr; gap: 40px; align-items: center; padding: 32px 40px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-xl); }
.eq { display: flex; align-items: center; gap: 18px; }
.eq-item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.eq-item .eq-ic { width: 56px; height: 56px; border-radius: var(--radius-lg); display: grid; place-items: center; }
.eq-item.mw .eq-ic { background: rgba(255,255,255,0.08); color: #fff; }
.eq-item.sch .eq-ic { background: rgba(249,188,0,0.16); color: var(--yellow-500); }
.eq-item .eq-ic svg { width: 28px; height: 28px; stroke-width: 1.6; }
.eq-item b { font-family: var(--font-impact); font-weight: 700; font-size: 26px; color: #fff; line-height: 1; }
.eq-item span { font-size: 11.5px; color: rgba(255,255,255,0.6); letter-spacing: 0.02em; }
.eq-op { font-family: var(--font-impact); font-weight: 700; font-size: 30px; color: var(--yellow-500); }
.social-impact .divline { width: 1px; height: 64px; background: rgba(255,255,255,0.14); }
.social-stats { display: flex; gap: 40px; }
.sstat b { font-family: var(--font-impact); font-weight: 700; font-size: 40px; color: var(--yellow-500); line-height: 1; font-variant-numeric: tabular-nums; display: block; }
.sstat span { font-size: 12.5px; color: rgba(255,255,255,0.66); margin-top: 8px; display: block; line-height: 1.4; max-width: 140px; }
.social-foot-note { margin-top: 18px; font-size: 11.5px; color: rgba(255,255,255,0.4); text-align: center; }
@media (max-width: 900px) {
  .social-panel { grid-template-columns: 1fr; gap: 28px; }
  .social-stage { min-height: 340px; }
  .social-impact { grid-template-columns: 1fr; gap: 26px; padding: 28px; }
  .social-impact .divline { display: none; }
  .social-stats { justify-content: space-between; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) { .social-stage .ss-img.on { transform: scale(1.04); } }

/* ============================================================
 * FLOATING ACTIONS — WhatsApp + Chatbot IA
 * ============================================================ */
.fab-stack { position: fixed; right: 22px; bottom: 22px; z-index: 200; display: flex; flex-direction: column; gap: 14px; align-items: flex-end; }
.fab { width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-lg); position: relative; transition: transform var(--dur-fast) var(--ease-out); }
.fab:hover { transform: translateY(-2px); }
.fab:active { transform: scale(0.95); }
.fab svg { width: 28px; height: 28px; }
.fab.wa { background: #25D366; color: #fff; }
.fab.chat { background: var(--dp-navy); color: #fff; }
.fab .fab-ping { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(37,211,102,0.5); animation: pulse 2.6s var(--ease-out) infinite; }
.fab.chat .fab-ping { box-shadow: 0 0 0 0 rgba(42,59,81,0.5); animation: pulse 2.6s var(--ease-out) 1.3s infinite; }
.fab-tip { position: absolute; right: 70px; top: 50%; transform: translateY(-50%); background: var(--navy-700); color: #fff; font-size: 12.5px; font-weight: 600; padding: 8px 13px; border-radius: var(--radius-sm); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out); box-shadow: var(--shadow-md); }
.fab-tip::after { content: ""; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-left-color: var(--navy-700); }
.fab:hover .fab-tip { opacity: 1; }

/* chat panel */
.chat-panel { position: fixed; right: 22px; bottom: 22px; z-index: 210; width: 380px; max-width: calc(100vw - 32px); height: 560px; max-height: calc(100vh - 44px); background: var(--neutral-0); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); display: flex; flex-direction: column; overflow: hidden; transform-origin: bottom right; animation: chatIn 280ms var(--ease-out); }
@keyframes chatIn { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: none; } }
.chat-head { background: var(--dp-navy); color: #fff; padding: 18px 20px; display: flex; align-items: center; gap: 12px; }
.chat-head .ava { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.12); display: grid; place-items: center; color: var(--yellow-500); flex-shrink: 0; }
.chat-head .ava svg { width: 22px; height: 22px; }
.chat-head .ht { flex: 1; }
.chat-head .ht b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.chat-head .ht span { font-size: 12px; color: rgba(255,255,255,0.6); display: inline-flex; align-items: center; gap: 6px; }
.chat-head .ht span i { width: 7px; height: 7px; border-radius: 50%; background: var(--green-400); display: inline-block; }
.chat-head .x { background: none; border: 0; color: rgba(255,255,255,0.7); cursor: pointer; padding: 4px; border-radius: 6px; display: grid; place-items: center; }
.chat-head .x:hover { color: #fff; background: rgba(255,255,255,0.1); }
.chat-head .x svg { width: 20px; height: 20px; }
.chat-body { flex: 1; overflow-y: auto; padding: 20px; background: var(--neutral-50); display: flex; flex-direction: column; gap: 12px; }
.msg-row { display: flex; gap: 9px; max-width: 86%; }
.msg-row.bot { align-self: flex-start; }
.msg-row.user { align-self: flex-end; flex-direction: row-reverse; }
.msg-row .mava { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; }
.msg-row.bot .mava { background: var(--dp-navy); color: var(--yellow-500); }
.msg-row .bubble { padding: 11px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; }
.msg-row.bot .bubble { background: var(--neutral-0); border: 1px solid var(--border-subtle); color: var(--navy-700); border-bottom-left-radius: 4px; }
.msg-row.user .bubble { background: var(--green-500); color: #fff; border-bottom-right-radius: 4px; }
.chat-typing { display: inline-flex; gap: 4px; padding: 13px 14px; }
.chat-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--navy-300); animation: typing 1.2s var(--ease-in-out) infinite; }
.chat-typing i:nth-child(2) { animation-delay: 0.18s; }
.chat-typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing { 0%,60%,100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 12px; background: var(--neutral-50); }
.chat-chip { font-size: 12.5px; font-weight: 600; color: var(--navy-600); background: var(--neutral-0); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); padding: 7px 13px; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.chat-chip:hover { border-color: var(--green-500); color: var(--green-700); }
.chat-input { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--border-subtle); background: var(--neutral-0); }
.chat-input input { flex: 1; border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 11px 16px; font-family: var(--font-body); font-size: 14px; color: var(--navy-700); }
.chat-input input:focus { outline: none; border-color: var(--green-500); box-shadow: var(--ring-focus); }
.chat-input button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--green-500); color: #fff; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; transition: background var(--dur-fast) var(--ease-out); }
.chat-input button:hover { background: var(--green-600); }
.chat-input button:disabled { opacity: 0.4; cursor: not-allowed; }
.chat-input button svg { width: 19px; height: 19px; }
.chat-foot { font-size: 10px; color: var(--navy-300); text-align: center; padding: 0 14px 10px; background: var(--neutral-0); }
@media (max-width: 480px) { .chat-panel { height: calc(100vh - 44px); } }
@media (prefers-reduced-motion: reduce) { .fab .fab-ping { animation: none; } .chat-panel { animation: none; } .chat-typing i { animation: none; } }

.fig-fallback { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--neutral-100); color: var(--navy-300); }
.fig-fallback span { font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; max-width: 70%; text-align: center; line-height: 1.4; }
.section--navy .fig-fallback, .social-media .fig-fallback { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); }

/* ============================================================
 * STAT ROTATOR — datos duros (minimalista)
 * ============================================================ */
.statrot { margin-top: 56px; position: relative; border-top: 1px solid var(--border-default); padding-top: 40px; }
.statrot-track { position: relative; }
.statrot-slide { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; position: absolute; inset: 0; opacity: 0; transform: translateY(10px); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); pointer-events: none; }
.statrot-slide.on { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.statrot-num { font-family: var(--font-impact); font-weight: 700; font-size: clamp(58px, 8vw, 92px); line-height: 0.82; letter-spacing: -0.02em; color: var(--navy-700); font-variant-numeric: tabular-nums; white-space: nowrap; }
.statrot-num .sfx { font-size: 0.4em; vertical-align: 0.25em; margin-left: 2px; color: var(--green-600); }
.statrot-body { max-width: 600px; }
.statrot-body .tt { font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 1.9vw, 20px); line-height: 1.45; color: var(--navy-600); margin: 0 0 10px; letter-spacing: -0.01em; text-wrap: pretty; }
.statrot-body .src { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--navy-400); letter-spacing: 0.01em; }
.statrot-body .src svg { width: 13px; height: 13px; color: var(--navy-300); flex-shrink: 0; }
.statrot-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; }
.statrot-bars { display: flex; gap: 10px; }
.statrot-bar { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--border-default); cursor: pointer; transition: width var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out), border-radius var(--dur-med) var(--ease-out); }
.statrot-bar i { display: none; }
.statrot-bar.on { width: 28px; border-radius: var(--radius-pill); background: var(--green-500); }
.statrot-bar.done { background: var(--navy-300); }
.statrot-count { font-size: 12px; font-weight: 700; color: var(--navy-300); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: 0.04em; }
@media (max-width: 680px) {
  .statrot-slide { grid-template-columns: 1fr; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .statrot-slide { transition: none; }
}

/* ============================================================
 * GARANTÍAS / RESPALDO — tarjetas con movimiento (rediseño de certs)
 * ============================================================ */
.respaldo { margin-top: 30px; }
.respaldo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rcard { position: relative; overflow: hidden; background: var(--neutral-0); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 26px 22px 24px; transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); }
.rcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-default); }
.rcard::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--green-500); transition: width var(--dur-slow) var(--ease-out); }
.rcard:hover::after { width: 100%; }
.rcard .ric { width: 50px; height: 50px; border-radius: var(--radius-md); background: var(--green-50); color: var(--green-600); display: grid; place-items: center; margin-bottom: 18px; transition: transform var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out); }
.rcard:hover .ric { transform: scale(1.08) rotate(-4deg); background: var(--green-100); }
.rcard .ric svg { width: 25px; height: 25px; stroke-width: 1.6; }
.rcard h4 { font-family: var(--font-display); font-weight: 800; font-size: 15.5px; color: var(--navy-700); margin: 0 0 7px; letter-spacing: -0.01em; line-height: 1.2; }
.rcard p { font-size: 13px; line-height: 1.5; color: var(--navy-500); margin: 0; }
@media (max-width: 900px) { .respaldo-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .respaldo-grid { grid-template-columns: 1fr; } }

/* ============================================================
 *  DALAPOWER · MEJORAS MULTI-PÁGINA (2026)
 *  Fix doble subrayado · breadcrumb · footer contacto ·
 *  estados del formulario · limpieza de numeración.
 * ============================================================ */

/* --- Fix: doble subrayado en el menú (los <a> ya no subrayan) --- */
.nav-link, .nav-link:hover, .nav-link:focus,
.nav-logo, .nav-logo:hover { text-decoration: none; }

/* --- Enlace de la página activa: barra fija + color --- */
.nav-link.active { color: var(--green-700); }
.nav-wrap.over-hero .nav-link.active { color: #fff; }
.nav-link.active::after { right: 0; }

/* --- Limpieza: ocultar la numeración salteada de las secciones --- */
.kicker .idx { display: none; }
.kicker { gap: 12px; }

/* ============================================================
 *  BREADCRUMB SUPERIOR (páginas internas)
 * ============================================================ */
.page-top {
  padding-top: 104px;          /* libra el nav fijo */
  padding-bottom: 18px;
  background: var(--neutral-50);
  border-bottom: 1px solid var(--border-subtle);
}
.page-top-inner { display: flex; align-items: center; gap: 10px; font-size: var(--fs-13); }
.page-top .pt-home {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--navy-400); font-weight: 600; text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.page-top .pt-home:hover { color: var(--green-600); }
.page-top .pt-back { transform: rotate(180deg); }
.page-top .pt-sep { color: var(--navy-300); }
.page-top .pt-cur { color: var(--navy-700); font-weight: 700; }

/* ============================================================
 *  FOOTER · bloque de contacto
 * ============================================================ */
.footer-claim {
  font-family: var(--font-display);
  font-weight: 900; font-size: var(--fs-24);
  color: #fff; margin: 14px 0 8px; letter-spacing: -0.01em;
}
.footer-claim .grn { color: var(--green-400); }
.footer-contact { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-contact li { display: flex; align-items: center; gap: 11px; }
.footer-contact .fc-ic {
  width: 34px; height: 34px; flex: none; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: rgba(255,255,255,0.06); color: var(--green-400);
  border: 1px solid rgba(255,255,255,0.10);
}
.footer-contact a {
  color: var(--fg-on-dark); font-weight: 700; font-size: var(--fs-16);
  text-decoration: none; transition: color var(--dur-fast) var(--ease-out);
}
.footer-contact a:hover { color: var(--green-400); text-decoration: none; }

/* ============================================================
 *  FORMULARIO · estados de envío
 * ============================================================ */
.form-submit { width: 100%; justify-content: center; }
.form-submit.is-loading { opacity: 0.85; cursor: progress; }
.form-submit .spinner {
  width: 17px; height: 17px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.35); border-top-color: #fff;
  display: inline-block; animation: dp-spin 0.7s linear infinite;
}
@keyframes dp-spin { to { transform: rotate(360deg); } }
.form-alert {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--status-warn-bg); color: var(--yellow-900);
  font-size: var(--fs-14); line-height: 1.45; border: 1px solid var(--yellow-200);
}
.form-alert code { background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }

/* ============================================================
 *  DALAPOWER · MEJORAS v2 (2026)
 *  Transiciones de scroll · logo "inicio" · logos de empresa ·
 *  cómo funciona · banda instaladores · métricas mini.
 * ============================================================ */

/* --- Transiciones de scroll más suaves y elegantes (todo el sitio) --- */
[data-reveal] {
  transform: translateY(42px);
  filter: blur(6px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out), filter 900ms var(--ease-out);
}
[data-reveal].is-in { filter: blur(0); }
[data-reveal="fade"] { filter: blur(6px); }
[data-reveal="fade"].is-in { filter: blur(0); }
[data-reveal="scale"] { transform: scale(0.94) translateY(20px); filter: blur(6px); }
[data-reveal="scale"].is-in { filter: blur(0); }
[data-reveal].reveal-instant { filter: none !important; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { filter: none !important; transform: none !important; }
}

/* --- Logo del nav: pista sutil de "ir a inicio" (icono casa al hover) --- */
.nav-logo { position: relative; gap: 8px; padding: 6px 10px; margin-left: -10px; border-radius: var(--radius-pill); transition: background var(--dur-med) var(--ease-out); }
.nav-logo:hover { background: rgba(21,163,56,0.08); }
.nav-wrap.over-hero .nav-logo:hover { background: rgba(255,255,255,0.12); }
.nav-home-hint {
  display: grid; place-items: center; width: 0; height: 26px; overflow: hidden;
  border-radius: 50%; color: var(--green-600);
  opacity: 0; transform: translateX(-6px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), width var(--dur-med) var(--ease-out);
}
.nav-wrap.over-hero .nav-home-hint { color: #fff; }
.nav-logo:hover .nav-home-hint { opacity: 1; transform: translateX(0); width: 26px; }

/* --- Logos de empresa inventados (marca SVG en tile de color) --- */
.logo-chip .logo-mark { display: grid; place-items: center; border: none; box-shadow: var(--shadow-sm); }
.logo-chip .logo-mark svg { width: 56%; height: 56%; }
.logo-chip { opacity: 0.92; }
.logo-chip:hover .logo-mark { transform: translateY(-2px); box-shadow: var(--shadow-md); transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }

/* ============================================================
 *  CÓMO FUNCIONA · encabezado 2 columnas + tarjeta resumen
 * ============================================================ */
.como-head { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: center; }
.como-head-tx .lede { margin-bottom: 0; }
.como-card {
  position: relative; background: var(--navy-700); color: #fff;
  border-radius: var(--radius-xl); padding: 34px 32px; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.como-card .cc-ic {
  width: 46px; height: 46px; border-radius: var(--radius-md); display: grid; place-items: center;
  background: rgba(249,188,0,0.16); color: var(--yellow-400); margin-bottom: 20px;
}
.como-card .cc-big {
  font-family: var(--font-display); font-weight: 900; font-size: 56px; line-height: 1;
  color: var(--yellow-500); letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 12px;
}
.como-card .cc-sub { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--fg-on-dark-muted); letter-spacing: 0; }
.como-card .cc-tx { font-size: 15px; line-height: 1.6; color: var(--fg-on-dark); margin: 16px 0 18px; }
.como-card .cc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.como-card .cc-chips span {
  font-size: 12.5px; font-weight: 700; color: #fff; padding: 6px 13px;
  border-radius: var(--radius-pill); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
}
@media (max-width: 900px) { .como-head { grid-template-columns: 1fr; gap: 32px; } }

/* --- Pasos: más movimiento + flecha de flujo --- */
.paso { transition: background var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.paso:hover { background: var(--green-50); transform: translateY(-2px); z-index: 2; }
.paso .paso-arrow {
  position: absolute; right: 18px; bottom: 16px; color: var(--green-500);
  opacity: 0; transform: translateX(-6px); transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.paso:hover .paso-arrow { opacity: 1; transform: translateX(0); }
.paso:hover .paso-ic { background: var(--green-500); color: #fff; }
.paso .paso-ic { transition: background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out); }

/* ============================================================
 *  BANDA INSTALADORES (resumen en Inicio)
 * ============================================================ */
.inst-cta { padding: 28px 0 8px; }
.inst-cta-card {
  position: relative; overflow: hidden; border-radius: var(--radius-2xl);
  background: linear-gradient(120deg, var(--navy-700) 0%, var(--navy-600) 100%);
  color: #fff; display: grid; grid-template-columns: 1.4fr 1fr; gap: 44px;
  padding: 52px 52px; box-shadow: var(--shadow-xl);
}
.inst-cta-card > .ic-left, .inst-cta-card > .ic-right { position: relative; z-index: 2; }
.inst-cta-card .inst-tag {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700;
  color: var(--yellow-400); background: rgba(249,188,0,0.12); border: 1px solid rgba(249,188,0,0.25);
  padding: 6px 13px; border-radius: var(--radius-pill); margin-bottom: 18px;
}
.inst-cta-card h2 { color: #fff; font-size: var(--fs-40); margin-bottom: 14px; }
.inst-cta-card h2 .ylw { color: var(--yellow-500); }
.inst-cta-card .ic-left > p { color: var(--fg-on-dark); font-size: var(--fs-16); line-height: 1.6; max-width: 46ch; margin-bottom: 24px; }
.inst-cta-card .ic-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.inst-cta-card .ic-right { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: 26px 24px; align-self: center; }
.inst-cta-card .ic-head { font-size: 12px; font-weight: 700; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--fg-on-dark-muted); margin-bottom: 16px; }
.inst-cta-card .ic-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.inst-cta-card .ic-points li { display: flex; align-items: center; gap: 13px; font-size: 14.5px; color: var(--fg-on-dark); }
.inst-cta-card .ic-points .n {
  width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 13px; color: var(--navy-700); background: var(--green-400);
}
@media (max-width: 900px) { .inst-cta-card { grid-template-columns: 1fr; gap: 28px; padding: 38px 28px; } }

/* ============================================================
 *  MÉTRICAS MINI (versión compacta para Inicio)
 * ============================================================ */
.metricas-mini { background: var(--neutral-50); }
.metricas-mini .mm-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.metricas-mini .mm-top h2 { font-size: var(--fs-40); }
.metricas-mini .mm-btn { flex: none; }
.mm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mm-card {
  background: var(--neutral-0); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: 24px 22px; box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.mm-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--green-200); }
.mm-card .mm-ic {
  width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center;
  background: var(--green-50); color: var(--green-600); margin-bottom: 16px;
}
.mm-card .mm-num {
  font-family: var(--font-display); font-weight: 900; font-size: 30px; line-height: 1;
  color: var(--navy-700); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 5px;
}
.mm-card .mm-num .mm-u { font-size: 14px; font-weight: 700; color: var(--green-600); letter-spacing: 0; }
.mm-card .mm-lbl { margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--navy-500); }
@media (max-width: 860px) { .mm-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .mm-grid { grid-template-columns: 1fr; } }

/* ============================================================
 *  DALAPOWER · MEJORAS v3 (2026) — ritmo, hero, botones, hero
 *  full-bleed, frase del problema, métricas premium, logos.
 * ============================================================ */

/* --- Ritmo más unido entre secciones + scroll continuo y sutil --- */
.section { padding: 84px 0; }
.cta-final { padding: 84px 0; }
.metricas { padding: 96px 0; }
[data-reveal] { transform: translateY(26px); filter: blur(3px); transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out), filter 720ms var(--ease-out); }
[data-reveal="fade"], [data-reveal="scale"] { filter: blur(3px); }
[data-reveal="scale"] { transform: scale(0.97) translateY(14px); }

/* --- HERO compacto: todo cabe en una pantalla al abrir --- */
.hero { padding: 96px 0 56px; align-items: center; }
.hero-grid { align-items: center; gap: 44px; }
.hero h1 { font-size: clamp(38px, 5vw, 74px); line-height: 0.99; margin: 0 0 16px; }
.hero-sub { font-size: 16.5px; line-height: 1.55; max-width: 500px; margin: 0 0 22px; }
.hero-meta { margin-top: 22px; }
.hero-meta .m { padding: 11px 22px; }
.hero-meta .m b { font-size: 30px; }
.hero-meta .m span { font-size: 12px; margin-top: 6px; max-width: 140px; }
.hero-scroll { bottom: 16px; }
@media (max-height: 760px) {
  .hero h1 { font-size: clamp(34px, 4.4vw, 60px); }
  .hero-sub { margin-bottom: 16px; }
  .hero-meta { margin-top: 16px; }
}

/* --- BOTONES VERDES: relleno deslizante premium --- */
.btn-primary {
  position: relative; overflow: hidden; z-index: 0;
  background: transparent;          /* el color base lo pone ::before */
  transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.btn-primary::before {               /* color base (verde) */
  content: ""; position: absolute; inset: 0; z-index: -2; background: var(--green-500);
}
.btn-primary::after {                /* relleno que se desliza al hover */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--green-700), var(--green-600));
  transform: translateX(-101%); transition: transform 460ms var(--ease-out);
}
.btn-primary:hover { background: transparent; box-shadow: 0 12px 26px -10px rgba(21,163,56,0.55); transform: translateY(-1px); }
.btn-primary:hover::after { transform: translateX(0); }
.btn-primary:hover svg { transform: translateX(5px); }
.btn-primary:active { transform: translateY(0) scale(0.99); }

/* --- BANDA INSTALADORES de borde a borde (full-bleed) --- */
.inst-cta { padding: 84px 0; background: linear-gradient(120deg, var(--navy-700) 0%, var(--navy-600) 100%); position: relative; overflow: hidden; }
.inst-cta-card { background: none; box-shadow: none; border-radius: 0; padding: 0; }
.inst-cta-card .ic-right { background: rgba(255,255,255,0.05); }

/* --- FRASE DEL PROBLEMA: sin corte + resaltado llamativo al hacer scroll --- */
.prob-quote { margin-top: 56px; padding-top: 44px; }
.prob-quote p { font-size: clamp(30px, 4.2vw, 56px); line-height: 1.06; }
.prob-quote .pq-line { overflow: visible; padding-bottom: 0.06em; }   /* evita el corte de la "o"/coma */
.prob-quote .pq-inner { padding-right: 0.18em; }
/* Resaltador amarillo que barre detrás de "un solo peso" al entrar en vista */
.prob-quote p .grn { position: relative; color: var(--green-600); z-index: 0; }
.prob-quote p .grn::before {
  content: ""; position: absolute; left: -0.06em; right: -0.06em; bottom: 0.04em; top: 0.46em; z-index: -1;
  background: linear-gradient(120deg, rgba(249,188,0,0.55), rgba(249,188,0,0.85));
  border-radius: 3px; transform: scaleX(0); transform-origin: left center;
  transition: transform 720ms var(--ease-out);
}
.prob-quote.is-in p .grn::before { transform: scaleX(1); transition-delay: 520ms; }
.prob-quote.reveal-instant p .grn::before { transform: scaleX(1); transition: none; }

/* --- LOGOS: wordmark a dos tonos (estilo marca real) --- */
.logo-chip .nm { display: inline-flex; align-items: baseline; }
.logo-chip .nm .nm-b { color: var(--navy-700); font-weight: 800; }
.logo-chip .nm .nm-l { color: var(--navy-400); font-weight: 600; }

/* ============================================================
 *  MÉTRICAS MINI · rediseño premium (tarjetas claras)
 * ============================================================ */
.metricas-mini { padding: 84px 0; background:
  radial-gradient(120% 80% at 100% 0%, var(--green-50) 0%, transparent 55%),
  var(--neutral-50); }
.metricas-mini .mm-top { align-items: flex-start; margin-bottom: 36px; }
.metricas-mini .mm-lede { max-width: 460px; margin: 16px 0 0; color: var(--navy-500); font-size: 15px; line-height: 1.6; }
.mm-grid { gap: 20px; }
.mm-card {
  position: relative; overflow: hidden; padding: 28px 24px 26px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
  background: var(--neutral-0); box-shadow: var(--shadow-sm);
}
.mm-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--green-500); transform: scaleY(0); transform-origin: top; transition: transform var(--dur-med) var(--ease-out); }
.mm-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--green-200); }
.mm-card:hover::before { transform: scaleY(1); }
.mm-card .mm-ic { width: 44px; height: 44px; background: var(--green-50); color: var(--green-600); margin-bottom: 18px; transition: background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out); }
.mm-card:hover .mm-ic { background: var(--green-500); color: #fff; }
.mm-card .mm-num { font-size: 38px; }
.mm-card .mm-num .mm-u { font-size: 15px; }
.mm-card .mm-lbl { margin-top: 10px; font-size: 15px; font-weight: 800; font-family: var(--font-display); color: var(--navy-700); letter-spacing: -0.01em; }
.mm-card .mm-desc { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--navy-400); position: relative; z-index: 1; }
.mm-card .mm-ghost { position: absolute; right: -16px; bottom: -20px; color: var(--green-500); opacity: 0.06; pointer-events: none; }
.mm-card:hover .mm-ghost { opacity: 0.1; }

/* ============================================================
 *  DALAPOWER · MEJORAS v4 (2026) — feedback de diseño
 * ============================================================ */

/* --- "Un solo peso": vuelve al shimmer verde original (quita el resaltado) --- */
.prob-quote p .grn { position: static; z-index: auto; color: transparent; }
.prob-quote p .grn::before { content: none !important; display: none !important; }

/* --- BOTONES: el texto NO cambia de color ni se subraya al hover --- */
.btn:hover, a.btn:hover { text-decoration: none; }
.btn-primary, .btn-primary:hover, .btn-primary:focus { color: #fff; }
.btn-yellow, .btn-yellow:hover, .btn-yellow:focus { color: var(--navy-700); }
.btn-light, .btn-light:hover, .btn-light:focus { color: #fff; }
.btn-solar, .btn-solar:hover, .btn-solar:focus { color: var(--navy-800); }

/* --- BANDA INSTALADORES: más diseño en el full-bleed --- */
.inst-cta { border-top: 1px solid rgba(255,255,255,0.06); }
.inst-cta::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, var(--green-500), var(--yellow-500) 65%, var(--green-400));
}
.inst-cta::after {
  content: ""; position: absolute; z-index: 0; width: 620px; height: 620px; right: -180px; top: -240px;
  background: radial-gradient(circle, rgba(21,163,56,0.20) 0%, transparent 62%); pointer-events: none;
}
.inst-cta-card .ic-right { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 18px 40px -22px rgba(0,0,0,0.5); }
.inst-cta-card .ic-points .n { box-shadow: 0 0 0 4px rgba(46,185,87,0.14); }

/* ============================================================
 *  CÓMO FUNCIONA · tarjeta azul = mini-comparativo (estilo hero)
 * ============================================================ */
.como-card { padding: 28px 28px 26px; }
.como-card .cc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.como-card .cc-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-on-dark-muted); }
.como-card .cc-eyebrow svg { color: var(--yellow-400); }
.como-card .cc-zero { font-size: 12px; color: var(--fg-on-dark-muted); }
.como-card .cc-zero b { font-family: var(--font-display); font-weight: 900; font-size: 16px; color: var(--yellow-500); margin-right: 3px; }
.como-card .cc-rows { display: flex; flex-direction: column; gap: 9px; }
.como-card .cc-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; color: var(--fg-on-dark); }
.como-card .cc-row b { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: #fff; }
.como-card .cc-row b.grn { color: var(--green-400); }
.como-card .cc-rl { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-on-dark-muted); }
.como-card .cc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-400); box-shadow: 0 0 0 3px rgba(46,185,87,0.2); }
.como-card .cc-bar { height: 7px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.08); overflow: hidden; margin: -1px 0 5px; }
.como-card .cc-fill { display: block; height: 100%; border-radius: var(--radius-pill); transform: scaleX(0); transform-origin: left; transition: transform 1000ms var(--ease-out); }
.como-card .cc-fill.base { width: 100%; background: rgba(255,255,255,0.32); transition-delay: 200ms; }
.como-card .cc-fill.dp { width: 78%; background: linear-gradient(90deg, var(--green-500), var(--green-400)); transition-delay: 360ms; }
.como-card.is-in .cc-fill, .como-card.reveal-instant .cc-fill { transform: scaleX(1); }
.como-card .cc-foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); }
.como-card .cc-flab { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-on-dark-muted); }
.como-card .cc-big { font-family: var(--font-display); font-weight: 900; font-size: 38px; line-height: 1; color: var(--green-400); letter-spacing: -0.02em; margin-top: 6px; display: flex; align-items: baseline; }
.como-card .cc-big .cur { font-size: 22px; margin-right: 2px; }
.como-card .cc-big .per { font-size: 14px; font-weight: 700; color: var(--fg-on-dark-muted); margin-left: 4px; letter-spacing: 0; }
.como-card .cc-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: 74px; height: 74px; border-radius: 50%; flex: none; line-height: 1;
  background: var(--yellow-500); color: var(--navy-800);
  font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: -0.01em;
  box-shadow: inset 0 0 0 2px rgba(20,29,42,0.22), 0 8px 18px -8px rgba(249,188,0,0.6);
}
.como-card .cc-badge small { font-size: 9px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--navy-700); opacity: 1; margin-top: 2px; }
.como-card .cc-note { margin: 16px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--fg-on-dark-muted); }

/* ============================================================
 *  CTA FINAL · "lo que incluye" más profesional y a la medida
 * ============================================================ */
.cta-aside { padding: 28px 26px; gap: 14px; justify-content: flex-start; }
.cta-aside-list { gap: 14px; }
.cta-aside-list li { gap: 13px; align-items: center; }
.cta-aside-list .ca-ic { width: 38px; height: 38px; border-radius: 10px; }
.cta-aside-list .ca-ic svg { width: 18px; height: 18px; }
.cta-aside-list .ca-tx b { font-size: 14.5px; line-height: 1.25; }
.cta-aside-list .ca-tx small { font-size: 12px; line-height: 1.4; color: rgba(255,255,255,0.62); }
.cta-aside-foot { margin-top: 8px; padding-top: 14px; font-size: 12px; }

/* ============================================================
 *  COMPROMISO · compacto al abrir + cuadros a la medida
 * ============================================================ */
#compromiso { padding-top: 48px; padding-bottom: 72px; }
#compromiso .social-head { margin-bottom: 32px; }
#compromiso .social-head .display { font-size: clamp(30px, 4vw, 52px); }
#compromiso .social-head .lede { font-size: 15.5px; max-width: 640px; }
.social-panel { gap: 36px; align-items: stretch; }
.social-stage { min-height: 360px; }
.social-stage .ss-body { padding: 26px; }
.social-stage .ss-detail { font-size: 15px; }
.social-impact { margin-top: 22px; padding: 24px 32px; }

/* ============================================================
 *  FOOTER · contacto minimalista + ubicación
 * ============================================================ */
.footer-about { font-size: 14px; line-height: 1.6; color: var(--fg-on-dark-muted); margin: 8px 0 0; max-width: 320px; }
.footer-contact { gap: 4px; margin-top: 22px; }
.footer-contact li { align-items: center; }
.footer-contact li > a, .footer-contact li { display: flex; align-items: center; gap: 13px; padding: 8px 0; border-radius: 10px; transition: none; }
.footer-contact .fc-ic {
  width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255,255,255,0.05); color: var(--green-400); border: 1px solid rgba(255,255,255,0.09);
  transition: background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
}
.footer-contact li > a:hover .fc-ic { background: var(--green-500); color: #fff; border-color: var(--green-500); }
.footer-contact .fc-tx { display: flex; flex-direction: column; line-height: 1.25; }
.footer-contact .fc-tx small { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-on-dark-muted); margin-bottom: 1px; }
.footer-contact .fc-tx { color: var(--fg-on-dark); font-weight: 700; font-size: 14.5px; }
.footer-contact li > a { color: inherit; }
.footer-contact li > a:hover .fc-tx { color: #fff; }

/* ============================================================
 *  DALAPOWER · v5 (2026) — rediseño premium (no genérico)
 * ============================================================ */

/* ----------------------------------------------------------------
 *  1) BANDA INSTALADORES — stat héroe + flujo de cierre conectado
 * ---------------------------------------------------------------- */
.inst-cta-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
/* Monograma como marca de agua intencional (no cortado a la mitad) */
.inst-cta .ic-watermark {
  position: absolute; z-index: 0; right: -90px; bottom: -130px; width: 460px; height: 460px;
  background: url("assets/monogram.png") center / contain no-repeat; opacity: 0.06;
  transform: rotate(-8deg); pointer-events: none;
}
.inst-cta .ic-left { position: relative; z-index: 2; }
.inst-cta .inst-tag { color: var(--yellow-400); background: rgba(249,188,0,0.12); border: 1px solid rgba(249,188,0,0.25); }
.inst-cta h2 { color: #fff; font-size: var(--fs-40); margin-bottom: 14px; }
.inst-cta h2 .ylw { color: var(--yellow-500); }
.inst-cta .ic-left > p { color: var(--fg-on-dark); font-size: var(--fs-16); line-height: 1.6; max-width: 46ch; margin-bottom: 24px; }
.inst-cta .ic-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Panel glass con profundidad real */
.ic-panel {
  position: relative; z-index: 2; isolation: isolate;
  border-radius: var(--radius-xl); padding: 30px 30px 26px;
  background: linear-gradient(155deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 60%, rgba(255,255,255,0.015) 100%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 30px 60px -28px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.16);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}
.ic-panel .icp-glow { position: absolute; z-index: -1; top: -60px; right: -60px; width: 240px; height: 240px; background: radial-gradient(circle, rgba(249,188,0,0.28), transparent 65%); pointer-events: none; }
.ic-panel .icp-stat { display: flex; align-items: center; gap: 18px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,0.10); }
.ic-panel .icp-num { font-family: var(--font-impact); font-weight: 800; font-size: 80px; line-height: 0.82; color: var(--yellow-500); letter-spacing: -0.01em; }
.ic-panel .icp-num small { font-size: 34px; }
.ic-panel .icp-cap { font-size: 14.5px; line-height: 1.4; color: var(--fg-on-dark); }
.ic-panel .icp-cap b { color: #fff; font-weight: 800; }

/* Flujo vertical conectado (línea + nodos) */
.ic-panel .icp-flow { position: relative; display: flex; flex-direction: column; gap: 18px; }
.ic-panel .icp-flow::before { content: ""; position: absolute; left: 19px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(var(--green-500), rgba(46,185,87,0.25)); border-radius: 2px; }
.ic-panel .icp-step { position: relative; display: flex; align-items: center; gap: 15px; }
.ic-panel .icp-node {
  position: relative; z-index: 1; width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center; color: var(--fg-on-dark);
  background: var(--navy-600); border: 1.5px solid rgba(255,255,255,0.18);
}
.ic-panel .icp-step.green .icp-node { background: rgba(46,185,87,0.18); border-color: var(--green-400); color: var(--green-400); }
.ic-panel .icp-step.done .icp-node { background: var(--green-500); border-color: var(--green-400); color: #fff; box-shadow: 0 0 0 4px rgba(46,185,87,0.18); }
.ic-panel .icp-tx { display: flex; flex-direction: column; }
.ic-panel .icp-tx b { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: #fff; letter-spacing: -0.01em; }
.ic-panel .icp-tx span { font-size: 12.5px; color: var(--fg-on-dark-muted); line-height: 1.35; }
@media (max-width: 900px) { .inst-cta-inner { grid-template-columns: 1fr; gap: 30px; } .ic-panel .icp-num { font-size: 64px; } }

/* ----------------------------------------------------------------
 *  2) "TODO INCLUIDO" — checklist editorial con profundidad
 * ---------------------------------------------------------------- */
.cta-aside { padding: 0; gap: 0; background: linear-gradient(160deg, rgba(255,255,255,0.085), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.13); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 24px 48px -28px rgba(0,0,0,0.6); overflow: hidden; }
.cta-aside-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 26px; border-bottom: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); }
.cta-aside-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow-500); }
.cta-aside-badge { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green-400); background: rgba(46,185,87,0.14); border: 1px solid rgba(46,185,87,0.3); padding: 5px 11px; border-radius: var(--radius-pill); }
.cta-aside-list { gap: 0; padding: 6px 26px; }
.cta-aside-list li { gap: 14px; align-items: flex-start; padding: 16px 0; }
.cta-aside-list li + li { border-top: 1px solid rgba(255,255,255,0.08); }
.cta-aside-list .ca-check { width: 24px; height: 24px; flex: none; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--green-500); box-shadow: 0 0 0 4px rgba(46,185,87,0.15); }
.cta-aside-list .ca-tx { display: flex; flex-direction: column; gap: 3px; }
.cta-aside-list .ca-tx b { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: #fff; letter-spacing: -0.01em; }
.cta-aside-list .ca-tx small { font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,0.6); }
.cta-aside-foot { display: flex; align-items: center; gap: 14px; margin: 0; padding: 18px 26px; border-top: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.025); }
.cta-aside-foot .caf-seal { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-size: 18px; color: var(--navy-800); background: var(--yellow-500); line-height: 1; }
.cta-aside-foot .caf-seal small { font-size: 10px; font-weight: 800; }
.cta-aside-foot .caf-tx { font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,0.72); }
.cta-aside-foot .caf-tx b { color: #fff; }

/* ----------------------------------------------------------------
 *  3) FOOTER · contacto crafteado (WhatsApp primario + divisores)
 * ---------------------------------------------------------------- */
.footer-contact { display: flex; flex-direction: column; gap: 0; margin-top: 24px; border: 1px solid rgba(255,255,255,0.09); border-radius: var(--radius-lg); overflow: hidden; background: rgba(255,255,255,0.02); max-width: 340px; }
.footer-contact .fc-row { display: flex; align-items: center; gap: 13px; padding: 14px 16px; color: inherit; text-decoration: none; transition: background var(--dur-med) var(--ease-out); }
.footer-contact .fc-row + .fc-row { border-top: 1px solid rgba(255,255,255,0.07); }
.footer-contact a.fc-row:hover { background: rgba(255,255,255,0.04); }
.footer-contact .fc-ic { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--green-400); background: rgba(46,185,87,0.1); border: 1px solid rgba(46,185,87,0.2); transition: background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out); }
.footer-contact .fc-tx { display: flex; flex-direction: column; line-height: 1.25; flex: 1; }
.footer-contact .fc-tx small { font-size: 10px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--fg-on-dark-muted); margin-bottom: 2px; }
.footer-contact .fc-tx b { color: var(--fg-on-dark); font-weight: 700; font-size: 14.5px; }
.footer-contact .fc-primary { background: rgba(46,185,87,0.08); }
.footer-contact .fc-primary .fc-ic { background: var(--green-500); color: #fff; border-color: var(--green-500); }
.footer-contact .fc-primary .fc-tx b { color: #fff; font-size: 16px; }
.footer-contact .fc-go { color: var(--green-400); opacity: 0; transform: translateX(-6px); transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.footer-contact a.fc-row:hover .fc-go { opacity: 1; transform: translateX(0); }

/* ----------------------------------------------------------------
 *  4) COMPROMISO · título llamativo + cuadro de impacto premium
 * ---------------------------------------------------------------- */
#compromiso .social-head .display { font-size: clamp(36px, 5vw, 64px); line-height: 1.0; }
#compromiso .social-head .display .ylw {
  background: linear-gradient(100deg, var(--yellow-500) 0%, #ffd64f 45%, var(--yellow-500) 100%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: pqShimmer 5.5s linear infinite;
}
.social-impact {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 26px 54px -30px rgba(0,0,0,0.6);
  padding: 30px 36px;
}
.social-impact::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--green-500), var(--yellow-500)); }
.social-impact::after { content: ""; position: absolute; z-index: 0; right: -40px; top: -60px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(249,188,0,0.16), transparent 65%); pointer-events: none; }
.social-impact .eq { position: relative; z-index: 1; }
.social-impact .eq-item .eq-ic { box-shadow: 0 0 0 5px rgba(255,255,255,0.04); }
.social-impact .eq-item.sch .eq-ic { background: var(--yellow-500); color: var(--navy-800); box-shadow: 0 0 0 5px rgba(249,188,0,0.16); }
.social-impact .social-stats { position: relative; z-index: 1; }
.social-impact .sstat b { font-family: var(--font-impact); font-weight: 800; font-size: 42px; color: var(--yellow-500); line-height: 0.9; letter-spacing: 0.01em; }
.social-impact .sstat span { color: rgba(255,255,255,0.66); }

/* ============================================================
 *  DALAPOWER · v6 (2026) — ajustes finos de feedback
 * ============================================================ */

/* --- FIX: el contador interno ya NO se encoge (heredaba .sstat span) --- */
.social-impact .sstat b span { font-size: inherit; line-height: inherit; color: inherit; display: inline; margin: 0; max-width: none; }
/* Stats de Compromiso mejor dimensionadas y balanceadas */
.social-impact { padding: 34px 40px; }
.social-impact .eq-item b { font-size: 34px; }
.social-impact .eq-item span { font-size: 12px; letter-spacing: 0.04em; }
.social-impact .eq-op { font-size: 34px; }
.social-impact .divline { height: 76px; }
.social-impact .social-stats { gap: 34px; }
.social-impact .sstat b { font-size: 46px; }
.social-impact .sstat > span { font-size: 13.5px; margin-top: 10px; line-height: 1.4; max-width: 150px; color: rgba(255,255,255,0.72); }

/* --- Sello "24h": timbre limpio, una línea, con anillo interior --- */
.cta-aside-foot .caf-seal {
  flex: none; width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center; line-height: 1;
  background: var(--yellow-500); color: var(--navy-800);
  font-family: var(--font-display); font-weight: 900; font-size: 18px; letter-spacing: -0.01em;
  box-shadow: inset 0 0 0 2px rgba(20,29,42,0.22), 0 6px 14px -6px rgba(249,188,0,0.6);
}

/* --- FOOTER en una fila balanceada: marca + 3 enlaces + contacto --- */
.footer-row { grid-template-columns: 1.5fr 0.9fr 0.9fr 0.95fr 1.25fr; gap: 40px; align-items: start; }
.footer-contact-wrap { min-width: 0; }
.footer-contact-wrap h4 { margin-bottom: 16px; }
.footer-contact-wrap .footer-contact { max-width: none; margin-top: 0; }
@media (max-width: 1000px) {
  .footer-row { grid-template-columns: 1fr 1fr 1fr; gap: 36px; }
  .footer-contact-wrap { grid-column: span 3; max-width: 360px; }
}
@media (max-width: 640px) {
  .footer-row { grid-template-columns: 1fr 1fr; }
  .footer-logo, .footer-contact-wrap { grid-column: span 2; }
}

/* --- FIX: el correo no se corta (columna de contacto un poco más ancha) --- */
.footer-row { grid-template-columns: 1.4fr 0.82fr 0.82fr 0.86fr 1.55fr; }
.footer-contact .fc-tx { min-width: 0; }
.footer-contact .fc-tx b { font-size: 14px; overflow-wrap: anywhere; }
.footer-contact .fc-primary .fc-tx b { font-size: 15.5px; }
@media (max-width: 1000px) { .footer-row { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px) { .footer-row { grid-template-columns: 1fr 1fr; } }

/* ============================================================
 *  MENÚ MÓVIL — hamburguesa + panel desplegable
 * ============================================================ */
.nav-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px; margin-right: -6px;
  background: none; border: 0; cursor: pointer; border-radius: 10px;
}
.nav-burger span { display: block; height: 2.5px; border-radius: 2px; background: var(--navy-700); transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out); }
.nav-wrap.over-hero .nav-burger span { background: #fff; }
.nav-burger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Con el menú abierto, el header siempre se ve sólido (legible) */
.nav-wrap.menu-open { background: #fff; border-bottom-color: var(--border-subtle); box-shadow: var(--shadow-xs); }
.nav-wrap.menu-open .nav-logo img { filter: none; }

.mobile-menu {
  display: none;
  background: #fff; border-top: 1px solid var(--border-subtle);
  box-shadow: 0 24px 40px -20px rgba(20,29,42,0.25);
  padding: 10px 24px 20px;
  max-height: calc(100vh - 80px); overflow-y: auto;
  animation: mmDrop 260ms var(--ease-out) both;
}
@keyframes mmDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mobile-menu .mm-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 2px; text-decoration: none;
  font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--navy-700);
  border-bottom: 1px solid var(--border-subtle);
}
.mobile-menu .mm-link svg { color: var(--green-500); }
.mobile-menu .mm-link.active { color: var(--green-700); }
.mobile-menu .mm-cta { width: 100%; justify-content: center; margin-top: 16px; padding: 14px 20px; }

@media (max-width: 920px) {
  .nav-burger { display: flex; }
  .nav-wrap.menu-open .mobile-menu { display: block; }
  .nav-right .nav-cta-txt { display: none; }   /* "Contacto" vive en el menú */
}
@media (max-width: 560px) {
  .nav-right .nav-cta-btn { display: none; }   /* el CTA vive en el menú */
  .nav-right { gap: 10px; }
}

/* ============================================================
 *  DALAPOWER · v7 — mejoras aprobadas de diseño
 * ============================================================ */

/* --- A) Testimonios premium: comilla decorativa + aro en avatar --- */
.tcard { position: relative; overflow: hidden; transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out); }
.tcard::after {
  content: "\201C"; position: absolute; top: -4px; right: 16px;
  font-family: var(--font-display); font-weight: 900; font-size: 92px; line-height: 1;
  color: var(--green-100); pointer-events: none;
}
.tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--green-200); }
.tcard .av { background: var(--green-50); color: var(--green-700); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--green-400); }

/* --- B) Pasos de "Cómo funciona": números como insignia circular --- */
.paso-n {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--green-50); color: var(--green-700);
  font-family: var(--font-display); font-weight: 900; font-size: 18px;
  display: grid; place-items: center; margin-bottom: 18px;
  box-shadow: inset 0 0 0 2px var(--green-200);
  transition: background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.paso:hover .paso-n { background: var(--green-500); color: #fff; box-shadow: 0 6px 14px -6px rgba(21,163,56,0.5); }

/* ============================================================
 *  DALAPOWER · v8 — ajustes de revisión final
 * ============================================================ */

/* --- Métricas de Inicio con más presencia (título y tarjetas al nivel del resto) --- */
.metricas-mini { padding: 110px 0; }
.metricas-mini .mm-top { margin-bottom: 52px; align-items: flex-end; }
.metricas-mini .mm-top h2 { font-size: clamp(40px, 5.6vw, 76px); }
.mm-grid { gap: 24px; }
.mm-card { padding: 36px 30px 32px; border-radius: var(--radius-xl); }
.mm-card .mm-ic { width: 56px; height: 56px; border-radius: var(--radius-lg); margin-bottom: 22px; }
.mm-card .mm-ic svg { width: 26px; height: 26px; }
.mm-card .mm-num { font-size: 52px; }
.mm-card .mm-num .mm-u { font-size: 18px; }
.mm-card .mm-lbl { font-size: 17px; margin-top: 14px; }
.mm-card .mm-desc { font-size: 13.5px; margin-top: 8px; }
.mm-card .mm-ghost svg { width: 130px; height: 130px; }

/* --- Nuestro Power: ritmo, simetría y jerarquía --- */
.np-intro { gap: 72px; margin-top: 72px; }
.np-intro h3 { font-size: 30px; margin-bottom: 22px; position: relative; padding-bottom: 16px; }
.np-intro h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; border-radius: 2px; background: var(--green-500); }
.np-intro p { font-size: 16.5px; line-height: 1.75; margin-bottom: 18px; }
.np-intro .np-media { aspect-ratio: 4/3; }

/* Misión / Visión / Valores: más grandes y mejor separadas */
.mvv { margin-top: 72px; gap: 26px; }
.flipcard { height: 400px; }

/* v9 — Hero claro: etiqueta + franja "qué hacemos" */
.hero-kicker { display:flex; align-items:center; gap:14px; margin:0 0 14px; font-family:var(--font-body); font-size:13px; font-weight:800; letter-spacing:.2em; color:var(--yellow-500); text-transform:uppercase; }
.hero-kicker::after { content:""; width:64px; height:2px; background:rgba(255,255,255,.3); border-radius:2px; }
/* Franja "qué hacemos" — línea de proceso premium con pulso de energía */
.que-hacemos { position:relative; background:radial-gradient(120% 140% at 50% -20%, #1c2c47 0%, var(--dp-navy) 55%, #101a2e 100%); padding:38px 0; overflow:hidden; }
.que-hacemos::before { content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg, transparent, rgba(35,197,94,.6), rgba(249,188,0,.6), transparent); }
.que-hacemos::after { content:""; position:absolute; inset:0; background:
  radial-gradient(60% 80% at 15% 120%, rgba(35,197,94,.10), transparent 60%),
  radial-gradient(60% 80% at 85% 120%, rgba(249,188,0,.08), transparent 60%);
  pointer-events:none; }
.qh-track { position:relative; z-index:1; display:grid; grid-template-columns:auto 1fr auto 1fr auto; align-items:center; gap:0; }
.qh-step { display:flex; align-items:center; gap:16px; padding:6px 4px; transition:transform .3s var(--ease-out, ease); }
.qh-step:hover { transform:translateY(-2px); }
.qh-node { position:relative; flex-shrink:0; width:56px; height:56px; border-radius:16px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 10px 26px -14px rgba(0,0,0,.7);
  transition:border-color .3s ease, box-shadow .3s ease, color .3s ease; }
/* cada nodo se "enciende" en verde en cascada — los 3 tienen vida por igual */
.qh-node { animation:qhBreath 2.7s ease-in-out infinite; }
.qh-step:nth-of-type(1) .qh-node { animation-delay:0s; }
.qh-step:nth-of-type(2) .qh-node { animation-delay:.75s; }
.qh-step:nth-of-type(3) .qh-node { animation-delay:1.5s; }
@keyframes qhBreath {
  0%, 68%, 100% { color:#fff; border-color:rgba(255,255,255,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 10px 26px -14px rgba(0,0,0,.7); }
  34% { color:var(--green-300, #6ee89a); border-color:rgba(35,197,94,.6);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 26px -14px rgba(0,0,0,.7), 0 0 0 3px rgba(35,197,94,.28), 0 0 30px rgba(35,197,94,.5); }
}
.qh-step:hover .qh-node { color:#fff; border-color:rgba(35,197,94,.6); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 12px 30px -12px rgba(21,163,56,.6); }
.qh-idx { position:absolute; top:-7px; right:-7px; width:22px; height:22px; border-radius:50%; background:var(--green-500); color:#fff; font-family:var(--font-display); font-weight:800; font-size:12px; display:grid; place-items:center; box-shadow:0 3px 8px -2px rgba(21,163,56,.7); border:2px solid #16233a; }
.qh-txt { display:flex; flex-direction:column; gap:3px; line-height:1.2; }
.qh-txt b { font-family:var(--font-display); font-weight:800; font-size:19px; color:#fff; letter-spacing:-.01em; }
.qh-txt span { font-family:var(--font-body); font-size:13px; color:rgba(255,255,255,.62); max-width:200px; }
/* conector con pulso que viaja */
/* conector = flecha real: asta con pulso que viaja + punta sólida que destella al llegar */
.qh-conn { position:relative; align-self:center; display:flex; align-items:center; width:100%; min-width:48px; margin:0 6px; padding:0 24px 0 14px; box-sizing:border-box; }
.qh-shaft { position:relative; flex:1; height:2px; border-radius:2px; overflow:hidden; background:linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.20)); }
.qh-pulse { position:absolute; top:0; left:0; height:100%; width:40%; border-radius:2px; background:linear-gradient(90deg, transparent, var(--green-400), var(--yellow-500)); box-shadow:0 0 10px rgba(35,197,94,.7); animation:qhFlow 2.6s cubic-bezier(.55,.1,.3,1) infinite; }
.qh-arrow { flex-shrink:0; margin-left:1px; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:10px solid rgba(255,255,255,.55); border-right:0; animation:qhArrowFlash 2.6s cubic-bezier(.55,.1,.3,1) infinite; }
.qh-conn:nth-of-type(2) .qh-pulse, .qh-conn:nth-of-type(2) .qh-arrow { animation-delay:.6s; }
@keyframes qhFlow { 0% { left:-45%; } 60%,100% { left:105%; } }
@keyframes qhArrowFlash { 0%,45%,80%,100% { border-left-color:rgba(255,255,255,.55); } 62% { border-left-color:var(--green-400); } }
@media (prefers-reduced-motion: reduce) { .qh-pulse, .qh-arrow, .qh-node { animation:none; } .qh-arrow { border-left-color:var(--green-400); } }
@media (max-width:820px){
  .qh-track { grid-template-columns:1fr; justify-items:start; gap:0; max-width:340px; margin:0 auto; }
  .qh-step { width:100%; padding:10px 0; }
  .qh-conn { flex-direction:column; width:auto; min-width:0; height:40px; margin:0 0 0 27px; padding:6px 0; }
  .qh-shaft { flex:1; width:2px; height:auto; }
  .qh-pulse { width:100%; height:40%; background:linear-gradient(180deg, transparent, var(--green-400), var(--yellow-500)); animation:qhFlowV 2.6s cubic-bezier(.55,.1,.3,1) infinite; }
  .qh-arrow { margin:2px 0 0 0; border-top:10px solid rgba(255,255,255,.55); border-bottom:0; border-left:5px solid transparent; border-right:5px solid transparent; animation:qhArrowFlashV 2.6s cubic-bezier(.55,.1,.3,1) infinite; }
  @keyframes qhFlowV { 0% { top:-45%; } 60%,100% { top:105%; } }
  @keyframes qhArrowFlashV { 0%,45%,80%,100% { border-top-color:rgba(255,255,255,.55); } 62% { border-top-color:var(--green-400); } }
}

/* ============================================================
 *  v10 — pulido premium (efectos nuevos)
 * ============================================================ */
html { scroll-behavior: smooth; }

/* #5 — brillo que barre el CTA amarillo */
.btn-solar { position: relative; overflow: hidden; }
.btn-solar::after { content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg);
  transition: left .6s var(--ease-out); }
.btn-solar:hover::after { left: 145%; }
@media (prefers-reduced-motion: reduce) { .btn-solar::after { display: none; } }

/* #6 — tilt 3D en tarjetas Misión/Visión/Valores (JS aplica el ángulo) */
.flipcard { transition: transform .3s var(--ease-out); transform-style: preserve-3d; will-change: transform; }
.flipcard.tilting { transition: transform .08s linear; }

/* #10 — grano fino global (acabado editorial, imperceptible pero quita el "plano digital") */
.grain-layer { position: fixed; inset: 0; z-index: 55; pointer-events: none; opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .grain-layer { display: none; } }

/* ============================================================
 *  DALAPOWER · v11 — Calculadora · Comparativa · FAQ · Banda CTA
 * ============================================================ */

/* ---------- Kicker sobre fondo oscuro ---------- */
.kicker--light .lbl { color: rgba(255,255,255,0.55); }
.kicker--light .idx { color: var(--yellow-500); }
.kicker--light .rule { background: rgba(255,255,255,0.16); }

/* ============================================================
 * CALCULADORA DE AHORRO
 * ============================================================ */
.calc-sec { position: relative; overflow: hidden; padding: 110px 0; color: #fff;
  background: radial-gradient(120% 150% at 85% -30%, #24405e 0%, var(--navy-800) 52%, #0e1622 100%); }
.calc-deco { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(46% 60% at 12% 108%, rgba(21,163,56,0.14), transparent 60%),
    radial-gradient(40% 55% at 92% 112%, rgba(249,188,0,0.10), transparent 60%),
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: auto, auto, 56px 56px, 56px 56px;
  -webkit-mask-image: radial-gradient(85% 90% at 50% 45%, #000 30%, transparent 100%);
  mask-image: radial-gradient(85% 90% at 50% 45%, #000 30%, transparent 100%); }
.calc-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: center; }
.calc-sec .display { color: #fff; }
.calc-lede { font-size: 16.5px; line-height: 1.7; color: rgba(255,255,255,0.72); max-width: 46ch; margin: 18px 0 26px; }

.calc-tipos { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 34px; }
.ct-chip { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.8);
  font-family: var(--font-body); font-weight: 700; font-size: 14px; cursor: pointer;
  transition: background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.ct-chip:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.3); }
.ct-chip.on { background: var(--green-500); border-color: var(--green-500); color: #fff; box-shadow: 0 10px 24px -10px rgba(21,163,56,0.65); }

.calc-slider { max-width: 520px; }
.cs-val { font-family: var(--font-impact); font-weight: 700; font-size: clamp(44px, 5vw, 62px); line-height: 1; letter-spacing: 0.01em; margin-bottom: 18px; }
.cs-val .cs-per { font-family: var(--font-body); font-weight: 600; font-size: 17px; color: rgba(255,255,255,0.55); margin-left: 8px; letter-spacing: 0; }
.calc-slider input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; }
.calc-slider input[type="range"]:focus-visible { outline: 2px solid var(--yellow-500); outline-offset: 4px; border-radius: 8px; }
.calc-slider input[type="range"]::-webkit-slider-runnable-track { height: 7px; border-radius: 6px;
  background: linear-gradient(90deg, var(--green-400), var(--yellow-500)) 0 0 / var(--p, 50%) 100% no-repeat, rgba(255,255,255,0.14); }
.calc-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; margin-top: -10.5px;
  background: #fff; border: 3px solid var(--green-500);
  box-shadow: 0 4px 14px rgba(0,0,0,0.45), 0 0 0 7px rgba(21,163,56,0.18);
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out); }
.calc-slider input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.16); box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 0 0 11px rgba(21,163,56,0.22); }
.calc-slider input[type="range"]::-moz-range-track { height: 7px; border-radius: 6px; background: rgba(255,255,255,0.14); }
.calc-slider input[type="range"]::-moz-range-progress { height: 7px; border-radius: 6px; background: linear-gradient(90deg, var(--green-400), var(--yellow-500)); }
.calc-slider input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--green-500); box-shadow: 0 4px 14px rgba(0,0,0,0.45); }
.cs-scale { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.42); }

.calc-card { position: relative; overflow: hidden; border-radius: var(--radius-xl); padding: 34px 32px 28px;
  background: linear-gradient(165deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.035) 100%);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 30px 70px -30px rgba(0,0,0,0.75);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  animation: ccIn 0.45s var(--ease-out); }
@keyframes ccIn { from { opacity: 0; transform: scale(0.97) translateY(8px); } to { opacity: 1; transform: none; } }
.cc-glow { position: absolute; width: 340px; height: 340px; right: -120px; top: -140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(249,188,0,0.16), transparent 65%); pointer-events: none;
  animation: ccGlow 9s var(--ease-in-out) infinite alternate; }
@keyframes ccGlow { to { transform: translate(-40px, 40px) scale(1.15); } }
.cc-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--green-300, #6ee89a); }
.cc-hero { display: flex; align-items: baseline; gap: 14px; margin: 14px 0 6px; }
.cc-hasta { font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.6); }
.cc-big { font-family: var(--font-impact); font-weight: 700; font-size: clamp(52px, 5.4vw, 72px); line-height: 1; color: #fff; }
.cc-big small { font-family: var(--font-body); font-weight: 600; font-size: 16px; color: rgba(255,255,255,0.55); margin-left: 6px; }
.cc-range { margin: 16px 0 20px; }
.cc-range-bar { position: relative; height: 8px; border-radius: 6px; overflow: hidden;
  background: linear-gradient(90deg, rgba(46,185,87,0.35), var(--green-400) 45%, var(--yellow-500)); }
.cc-range-bar::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  background-size: 220% 100%; animation: ccShine 3.2s linear infinite; }
@keyframes ccShine { from { background-position: 130% 0; } to { background-position: -110% 0; } }
.cc-range-lbls { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.62); }
.cc-anual { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: var(--radius-md);
  background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.09); margin-bottom: 22px; }
.cc-anual .ca-lbl { font-size: 13.5px; color: rgba(255,255,255,0.62); }
.cc-anual b { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--yellow-400, #ffd64f); white-space: nowrap; }
.cc-acciones { display: flex; flex-direction: column; gap: 12px; }
.cc-btn { width: 100%; justify-content: center; font-size: 15.5px; }
.cc-wa { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-size: 14px; font-weight: 700; color: var(--green-300, #6ee89a); text-decoration: none; padding: 6px; border-radius: 8px; transition: color var(--dur-med) var(--ease-out); }
.cc-wa:hover { color: #fff; }
.cc-note { font-size: 12px; line-height: 1.55; color: rgba(255,255,255,0.5); margin: 16px 0 0; }

@media (max-width: 940px) {
  .calc-inner { grid-template-columns: 1fr; gap: 44px; }
  .calc-sec { padding: 84px 0; }
  .calc-slider { max-width: none; }
}

/* ============================================================
 * COMPARATIVA
 * ============================================================ */
.cmp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; align-items: stretch; }
.cmp-col { position: relative; display: flex; flex-direction: column; background: var(--neutral-0); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); padding: 30px 26px 26px;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.cmp-col:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cmp-col.feat { background: linear-gradient(170deg, #223650 0%, var(--navy-800) 100%); border: none; color: #fff;
  box-shadow: 0 34px 70px -32px rgba(20,29,42,0.65); transform: scale(1.035); z-index: 1; overflow: visible; }
.cmp-col.feat:hover { transform: scale(1.035) translateY(-4px); box-shadow: 0 40px 80px -32px rgba(20,29,42,0.75); }
.cmp-col.feat::before { content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 4px; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--green-500), var(--yellow-500)); }
.cmp-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px;
  background: var(--yellow-500); color: var(--navy-800); font-size: 12px; font-weight: 800; letter-spacing: 0.04em;
  padding: 7px 16px; border-radius: var(--radius-pill); box-shadow: 0 10px 22px -8px rgba(249,188,0,0.7); white-space: nowrap; }
.cmp-head h3 { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.015em; color: var(--navy-700); margin: 6px 0 3px; }
.cmp-col.feat .cmp-head h3 { color: #fff; }
.cmp-sub { font-size: 13px; font-weight: 600; color: var(--navy-400); }
.cmp-col.feat .cmp-sub { color: rgba(255,255,255,0.6); }
.cmp-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; flex: 1; }
.cmp-list li { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-top: 1px dashed var(--border-subtle); }
.cmp-col.feat .cmp-list li { border-top-color: rgba(255,255,255,0.12); }
.cmp-mark { flex-shrink: 0; width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; margin-top: 2px; font-weight: 800; font-size: 13px; }
.cmp-mark.good { background: var(--green-500); color: #fff; box-shadow: 0 5px 12px -4px rgba(21,163,56,0.6); }
.cmp-mark.bad { background: rgba(220,38,38,0.12); color: #e05252; }
.cmp-col.feat .cmp-mark.bad { background: rgba(224,82,82,0.2); }
.cmp-mark.mid { background: var(--yellow-50, #fdf6e3); color: var(--yellow-700, #a97b00); }
.cmp-mark.na { background: var(--neutral-100); color: var(--navy-300); }
.cmp-col.feat .cmp-mark.na { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.45); }
.cmp-tx { display: flex; flex-direction: column; gap: 2px; }
.cmp-tx small { font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--navy-350, #8b97a8); }
.cmp-col.feat .cmp-tx small { color: rgba(255,255,255,0.48); }
.cmp-tx span { font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--navy-600); }
.cmp-col.feat .cmp-tx span { color: #fff; }
.cmp-btn { margin-top: 22px; width: 100%; justify-content: center; }
@media (max-width: 940px) {
  .cmp-grid { grid-template-columns: 1fr; gap: 26px; margin-top: 44px; }
  .cmp-col.feat { transform: none; order: -1; }
  .cmp-col.feat:hover { transform: translateY(-4px); }
}

/* ============================================================
 * FAQ
 * ============================================================ */
.faq-sec { background: var(--neutral-50, #f7f8fa); }
.faq-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 76px; align-items: start; }
.faq-intro { position: sticky; top: 110px; }
.faq-dali { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 380px; margin-top: 30px; padding: 15px 18px;
  background: var(--neutral-0); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); cursor: pointer; text-align: left;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); }
.faq-dali:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--green-200); }
.faq-dali .fd-ava { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-700); color: var(--yellow-400, #ffd64f); }
.faq-dali .fd-tx { display: flex; flex-direction: column; gap: 2px; }
.faq-dali .fd-tx b { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--navy-700); }
.faq-dali .fd-tx small { font-size: 12.5px; color: var(--navy-400); }
.faq-dali .fd-go { margin-left: auto; color: var(--green-600); transition: transform var(--dur-med) var(--ease-out); }
.faq-dali:hover .fd-go { transform: translateX(4px); }

.faq-item { border-bottom: 1px solid var(--border-default, #e3e7ec); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 22px; width: 100%; padding: 21px 2px;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 800; font-size: 17.5px; letter-spacing: -0.01em; color: var(--navy-700);
  transition: color var(--dur-med) var(--ease-out); }
.faq-q:hover, .faq-item.open .faq-q { color: var(--green-700); }
.faq-plus { position: relative; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--border-default, #d9dee5);
  transition: background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), transform 0.45s var(--ease-out); }
.faq-plus i { position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: var(--navy-500);
  transform: translate(-50%, -50%); transition: transform 0.45s var(--ease-out), background var(--dur-med) var(--ease-out); }
.faq-plus i:last-child { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.open .faq-plus { background: var(--green-500); border-color: var(--green-500); transform: rotate(180deg); }
.faq-item.open .faq-plus i { background: #fff; }
.faq-item.open .faq-plus i:last-child { transform: translate(-50%, -50%) rotate(0deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease-in-out); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-in { overflow: hidden; }
.faq-a-in p { margin: 0; padding: 0 44px 24px 2px; font-size: 15.5px; line-height: 1.72; color: var(--navy-500); max-width: 62ch; }
@media (max-width: 940px) {
  .faq-inner { grid-template-columns: 1fr; gap: 40px; }
  .faq-intro { position: static; }
}

/* ============================================================
 * BANDA CTA (después de testimonios)
 * ============================================================ */
.ctab { position: relative; overflow: hidden; padding: 88px 0;
  background: linear-gradient(130deg, #10281a 0%, #17293f 46%, var(--navy-800) 100%); }
.ctab::before, .ctab::after { content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(35,197,94,0.55), rgba(249,188,0,0.55), transparent); }
.ctab::before { top: 0; } .ctab::after { bottom: 0; }
.ctab-deco { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(42% 70% at 8% 115%, rgba(21,163,56,0.20), transparent 62%),
    radial-gradient(36% 62% at 94% -12%, rgba(249,188,0,0.13), transparent 60%); }
.ctab-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr auto; gap: 52px; align-items: center; }
.ctab .display { color: #fff; }
.ctab-copy p { margin: 14px 0 0; font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,0.72); max-width: 44ch; }
.ctab-act { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.ctab-btn { font-size: 17px; padding: 15px 17px 15px 30px; }
.ctab-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 20px; }
.ctab-trust span { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.72); }
.ctab-trust svg { color: var(--green-400); }
@media (max-width: 880px) {
  .ctab { padding: 70px 0; }
  .ctab-inner { grid-template-columns: 1fr; gap: 30px; }
}

/* ============================================================
 * Barra de progreso de lectura (bajo el nav)
 * ============================================================ */
.nav-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px; pointer-events: none; }
.nav-progress i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--green-500), var(--yellow-500)); }

/* ============================================================
 * Formulario: chip de archivo + consentimiento de privacidad
 * ============================================================ */
.dz-file { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; }
.dz-file .dzf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }
.dz-file .dzf-size { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--green-700); background: var(--green-50); padding: 3px 9px; border-radius: var(--radius-pill); }
.dz-clear { flex-shrink: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: none; background: var(--neutral-150, #e8ebef); color: var(--navy-500); cursor: pointer;
  transition: background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.dz-clear:hover { background: #e05252; color: #fff; transform: scale(1.08); }
.consent { display: flex; align-items: flex-start; gap: 11px; margin: 16px 0 0; cursor: pointer; user-select: none; }
.consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.consent .cb { flex-shrink: 0; width: 21px; height: 21px; border-radius: 6px; border: 1.6px solid var(--border-default, #cfd6de);
  display: grid; place-items: center; color: #fff; background: var(--neutral-0); margin-top: 1px;
  transition: background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), transform 0.2s var(--ease-out); }
.consent .cb svg { opacity: 0; transform: scale(0.4); transition: opacity 0.2s var(--ease-out), transform 0.25s var(--ease-out); }
.consent input:checked + .cb { background: var(--green-500); border-color: var(--green-500); }
.consent input:checked + .cb svg { opacity: 1; transform: scale(1); }
.consent input:focus-visible + .cb { outline: 2px solid var(--green-400); outline-offset: 2px; }
.consent.err .cb { border-color: #e05252; box-shadow: 0 0 0 3px rgba(224,82,82,0.15); }
.consent .ct { font-size: 13px; line-height: 1.55; color: var(--navy-500); }
.consent .ct a { color: var(--green-700); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.consent .ct a:hover { color: var(--green-800, #0d7328); }
/* variante sobre fondo oscuro (formulario de instaladores) */
.consent--dark .ct { color: rgba(255,255,255,0.68); }
.consent--dark .cb { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.28); }
.consent--dark .ct a { color: var(--green-300, #6ee89a); }

/* ============================================================
 * Footer legal
 * ============================================================ */
.footer-bottom .fb-legal { display: inline-flex; gap: 18px; }
.footer-bottom a.fb-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); }
.footer-bottom a.fb-link:hover { color: var(--green-300, #6ee89a); border-color: currentColor; }
/* v11.1 — afinado calculadora */
.calc-sec .display { font-size: clamp(36px, 4.4vw, 58px); }
/* v11.2 — banda CTA: titular contenido en dos líneas */
.ctab .display { font-size: clamp(34px, 4.6vw, 56px); }

/* ============================================================
 *  DALAPOWER · v12 — Compromiso social premium
 * ============================================================ */

/* --- Pilares: tarjetas con acento, número editorial y barra de progreso --- */
.spill { position: relative; overflow: hidden; }
.spill .sp-num { position: absolute; top: 10px; right: 14px; font-family: var(--font-impact); font-weight: 700; font-size: 15px; letter-spacing: 0.08em; color: rgba(255,255,255,0.22); transition: color var(--dur-med) var(--ease-out); }
.spill::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--green-400), var(--yellow-500)); transform: scaleY(0); transform-origin: top; transition: transform var(--dur-med) var(--ease-out); }
.spill:hover { transform: translateX(4px); }
.spill { transition: background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.spill.on { background: rgba(255,255,255,0.09); border-color: rgba(46,185,87,0.45); box-shadow: 0 18px 40px -22px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08); }
.spill.on::before { transform: scaleY(1); }
.spill.on .sp-num { color: var(--yellow-500); }
.spill.on .sp-ic { background: var(--green-500); color: #fff; box-shadow: 0 10px 22px -8px rgba(21,163,56,0.6); }
.spill.on .sp-arrow { color: var(--yellow-500); transform: translateX(3px); }
/* barra de progreso de la rotación automática */
.sp-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--green-400), var(--yellow-500)); animation: spProg 6s linear forwards; }
@keyframes spProg { to { transform: scaleX(1); } }

/* --- Escenario: Ken Burns sutil + credencial flotante --- */
.ss-img.on img { animation: ssKen 10s var(--ease-in-out) infinite alternate; }
@keyframes ssKen { from { transform: scale(1.03); } to { transform: scale(1.1) translateX(-1.5%); } }
.ss-float { position: absolute; top: 18px; right: 18px; z-index: 3; display: flex; align-items: center; gap: 11px;
  background: rgba(10,16,26,0.55); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-pill);
  padding: 9px 18px 9px 10px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ss-float .sf-ic { width: 30px; height: 30px; border-radius: 50%; background: var(--yellow-500); color: var(--navy-800); display: grid; place-items: center; flex-shrink: 0; }
.ss-float b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 12.5px; color: #fff; line-height: 1.15; }
.ss-float span { font-size: 10.5px; color: rgba(255,255,255,0.62); }
.ss-tag, .ss-detail { animation: ssIn 0.5s var(--ease-out) both; }
@keyframes ssIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- Ecuación viva: la energía viaja del sol a la escuela --- */
.eq2 { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; }
.eq2-node { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-radius: var(--radius-lg);
  background: linear-gradient(155deg, rgba(255,255,255,0.09), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.13); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); }
.e2-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; }
.e2-ic.sun { background: var(--yellow-500); color: var(--navy-800); box-shadow: 0 12px 26px -10px rgba(249,188,0,0.65); }
.e2-ic.sch { background: var(--green-500); color: #fff; box-shadow: 0 12px 26px -10px rgba(21,163,56,0.65); }
.e2-tx b { display: block; font-family: var(--font-impact); font-weight: 700; font-size: 27px; color: #fff; line-height: 1; letter-spacing: 0.01em; }
.e2-tx span { font-size: 12px; color: rgba(255,255,255,0.6); }
.eq2-node.school .e2-glow { position: absolute; inset: -4px; border-radius: 18px; pointer-events: none;
  animation: e2School 2.6s var(--ease-in-out) infinite; }
@keyframes e2School {
  0%, 55%, 100% { box-shadow: 0 0 0 0 rgba(249,188,0,0); }
  75% { box-shadow: 0 0 0 3px rgba(249,188,0,0.22), 0 0 30px rgba(249,188,0,0.35); } }
.eq2-flow { display: flex; align-items: center; min-width: 60px; }
.e2-track { position: relative; flex: 1; height: 2px; border-radius: 2px; overflow: hidden;
  background: linear-gradient(90deg, rgba(255,255,255,0.07), rgba(255,255,255,0.18)); }
.e2-pulse { position: absolute; top: 0; left: 0; height: 100%; width: 34%; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--yellow-500), var(--green-400));
  box-shadow: 0 0 10px rgba(249,188,0,0.6); animation: e2Flow 2.6s cubic-bezier(0.55, 0.1, 0.3, 1) infinite; }
.e2-pulse.d2 { animation-delay: 1.3s; }
@keyframes e2Flow { 0% { left: -40%; } 70%, 100% { left: 106%; } }
.e2-head { flex-shrink: 0; margin-left: 1px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 9px solid rgba(255,255,255,0.5); }
@media (prefers-reduced-motion: reduce) { .e2-pulse, .eq2-node.school .e2-glow, .ss-img.on img, .sp-prog { animation: none; } }

/* --- Nota final como sello --- */
.social-foot-note { display: flex; align-items: center; justify-content: center; gap: 10px; }
.sfn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-400); box-shadow: 0 0 0 4px rgba(46,185,87,0.18); }

@media (max-width: 760px) {
  .eq2 { grid-template-columns: 1fr; gap: 12px; }
  .eq2-flow { min-width: 0; height: 34px; justify-content: center; margin-left: 26px; }
  .e2-track { flex: none; width: 2px; height: 100%; background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.18)); }
  .e2-pulse { width: 100%; height: 40%; background: linear-gradient(180deg, transparent, var(--yellow-500), var(--green-400)); animation: e2FlowV 2.6s cubic-bezier(0.55, 0.1, 0.3, 1) infinite; }
  @keyframes e2FlowV { 0% { top: -40%; } 70%, 100% { top: 106%; } }
  .e2-head { margin: 2px 0 0 -3.5px; border-top: 9px solid rgba(255,255,255,0.5); border-bottom: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; }
  .ss-float { top: 12px; right: 12px; padding: 7px 14px 7px 8px; }
  .ss-float span { display: none; }
}

/* v12.1 — Compromiso: fondo premium (auroras + haces + chispas que suben) */
#compromiso { position: relative; overflow: hidden; }
#compromiso > .container { position: relative; z-index: 2; }
.comp-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.comp-bg::before, .comp-bg::after { content: ""; position: absolute; border-radius: 50%; }
.comp-bg::before { width: 720px; height: 720px; left: -220px; top: -160px;
  background: radial-gradient(circle, rgba(21,163,56,0.22) 0%, rgba(21,163,56,0.07) 42%, transparent 68%);
  animation: cbA 19s var(--ease-in-out) infinite alternate; }
.comp-bg::after { width: 820px; height: 820px; right: -260px; bottom: -300px;
  background: radial-gradient(circle, rgba(249,188,0,0.14) 0%, rgba(249,188,0,0.05) 45%, transparent 70%);
  animation: cbB 24s var(--ease-in-out) infinite alternate; }
@keyframes cbA { to { transform: translate(80px, 60px) scale(1.14); } }
@keyframes cbB { to { transform: translate(-70px, -50px) scale(1.1); } }
.comp-beam { position: absolute; top: -25%; left: 34%; width: 1px; height: 150%;
  background: linear-gradient(180deg, transparent 8%, rgba(255,255,255,0.09) 45%, transparent 92%);
  transform: rotate(22deg); animation: beamGlow 9s var(--ease-in-out) infinite alternate; }
.comp-beam.b2 { left: 61%; animation-delay: 4.5s; opacity: 0.7; }
@keyframes beamGlow { from { opacity: 0.35; } to { opacity: 1; } }
/* chispas de energía subiendo (la sección habla de "encender" comunidades) */
.comp-bg i { position: absolute; bottom: -10px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--yellow-400, #ffd64f); box-shadow: 0 0 12px rgba(249,188,0,0.8); opacity: 0;
  animation: sparkUp 12s linear infinite; }
.comp-bg i:nth-of-type(odd) { background: var(--green-400); box-shadow: 0 0 12px rgba(46,185,87,0.8); }
.comp-bg i:nth-of-type(1) { left: 8%;  animation-delay: 0s;    animation-duration: 13s; }
.comp-bg i:nth-of-type(2) { left: 21%; animation-delay: 3.2s;  animation-duration: 11s; transform: scale(0.8); }
.comp-bg i:nth-of-type(3) { left: 38%; animation-delay: 6.5s;  animation-duration: 14s; }
.comp-bg i:nth-of-type(4) { left: 55%; animation-delay: 1.6s;  animation-duration: 12s; transform: scale(0.7); }
.comp-bg i:nth-of-type(5) { left: 70%; animation-delay: 8.4s;  animation-duration: 13.5s; }
.comp-bg i:nth-of-type(6) { left: 84%; animation-delay: 4.8s;  animation-duration: 11.5s; transform: scale(0.85); }
.comp-bg i:nth-of-type(7) { left: 93%; animation-delay: 10.2s; animation-duration: 12.5s; transform: scale(0.7); }
@keyframes sparkUp {
  0% { opacity: 0; transform: translateY(0); }
  6% { opacity: 0.95; }
  60% { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-720px); } }
@media (prefers-reduced-motion: reduce) {
  .comp-bg::before, .comp-bg::after, .comp-beam { animation: none; }
  .comp-bg i { display: none; } }

/* v12.2 — Compromiso: refinamiento cinematográfico (menos ruido, más oficio) */
/* marco de luz: filos superior e inferior */
#compromiso::before, #compromiso::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent 4%, rgba(46,185,87,0.4), rgba(249,188,0,0.4), transparent 96%); }
#compromiso::before { top: 0; }
#compromiso::after { bottom: 0; }
/* luz de escenario: foco central sutil + viñeta arriba/abajo (profundidad) */
.comp-bg { background:
  radial-gradient(56% 40% at 50% 36%, rgba(255,255,255,0.05), transparent 70%),
  radial-gradient(130% 55% at 50% -6%, rgba(0,0,0,0.30), transparent 58%),
  radial-gradient(130% 55% at 50% 106%, rgba(0,0,0,0.36), transparent 58%); }
/* auroras más sobrias */
.comp-bg::before { opacity: 0.72; }
.comp-bg::after { opacity: 0.65; }
/* haces: de línea dura a cortina de luz ancha y tenue */
.comp-beam { width: 130px; left: 29%; transform: rotate(19deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.032) 50%, transparent); }
.comp-beam.b2 { width: 180px; left: 57%; }
/* chispas más finas y calladas */
.comp-bg i { width: 4px; height: 4px; box-shadow: 0 0 8px rgba(249,188,0,0.5); }
.comp-bg i:nth-of-type(odd) { box-shadow: 0 0 8px rgba(46,185,87,0.5); }
@keyframes sparkUp {
  0% { opacity: 0; transform: translateY(0); }
  7% { opacity: 0.6; }
  60% { opacity: 0.3; }
  100% { opacity: 0; transform: translateY(-720px); } }

/* v12.3 — Ecuación coreografiada: el sol emite → el pulso viaja → la escuela enciende */
.e2-pulse.d2 { display: none; }
/* 1) el sol emite (anillo + brillo del ícono) */
.eq2-node:first-child::after { content: ""; position: absolute; inset: -4px; border-radius: 18px; pointer-events: none;
  animation: e2Sun 3.4s var(--ease-in-out) infinite; }
@keyframes e2Sun {
  0%, 16%, 100% { box-shadow: 0 0 0 0 rgba(249,188,0,0); }
  7% { box-shadow: 0 0 0 3px rgba(249,188,0,0.25), 0 0 30px rgba(249,188,0,0.4); } }
.e2-ic.sun { animation: e2SunIc 3.4s var(--ease-in-out) infinite; }
@keyframes e2SunIc {
  0%, 16%, 100% { transform: none; box-shadow: 0 12px 26px -10px rgba(249,188,0,0.65); }
  7% { transform: scale(1.07); box-shadow: 0 12px 32px -8px rgba(249,188,0,0.95); } }
/* 2) el pulso sale DEL sol y recorre la línea (mismo reloj) */
.e2-pulse { animation: e2Flow 3.4s cubic-bezier(0.55, 0.1, 0.3, 1) infinite; }
@keyframes e2Flow {
  0%, 8% { left: -38%; }
  70%, 100% { left: 106%; } }
/* 3) la escuela enciende justo cuando llega */
.eq2-node.school .e2-glow { animation: e2School 3.4s var(--ease-in-out) infinite; }
@keyframes e2School {
  0%, 62%, 100% { box-shadow: 0 0 0 0 rgba(249,188,0,0); }
  76% { box-shadow: 0 0 0 3px rgba(249,188,0,0.25), 0 0 32px rgba(249,188,0,0.42); } }
.e2-ic.sch { animation: e2SchIc 3.4s var(--ease-in-out) infinite; }
@keyframes e2SchIc {
  0%, 62%, 100% { transform: none; }
  76% { transform: scale(1.07); } }
/* móvil: mismo relato en vertical */
@media (max-width: 760px) {
  @keyframes e2FlowV {
    0%, 8% { top: -38%; }
    70%, 100% { top: 106%; } } }
@media (prefers-reduced-motion: reduce) {
  .eq2-node:first-child::after, .e2-ic.sun, .e2-ic.sch { animation: none; } }

/* v12.4 — Ecuación: brillo premium (bloom suave, sin anillo duro) */
.eq2-node:first-child::after { border-radius: var(--radius-lg); box-shadow: none !important;
  background: radial-gradient(75% 110% at 22% 50%, rgba(249,188,0,0.16), transparent 62%);
  opacity: 0; animation: e2SunSoft 3.4s var(--ease-in-out) infinite; }
@keyframes e2SunSoft { 0%, 20%, 100% { opacity: 0; } 8% { opacity: 1; } }
.eq2-node.school .e2-glow { border-radius: var(--radius-lg); box-shadow: none !important;
  background: radial-gradient(75% 110% at 22% 50%, rgba(249,188,0,0.17), transparent 62%);
  opacity: 0; animation: e2SchSoft 3.4s var(--ease-in-out) infinite; }
@keyframes e2SchSoft { 0%, 60%, 96%, 100% { opacity: 0; } 76% { opacity: 1; } }
.e2-ic.sun { animation: e2SunIc2 3.4s var(--ease-in-out) infinite; }
@keyframes e2SunIc2 {
  0%, 20%, 100% { filter: brightness(1); box-shadow: 0 12px 26px -10px rgba(249,188,0,0.65); }
  8% { filter: brightness(1.18); box-shadow: 0 14px 34px -10px rgba(249,188,0,0.9); } }
.e2-ic.sch { animation: e2SchIc2 3.4s var(--ease-in-out) infinite; }
@keyframes e2SchIc2 {
  0%, 60%, 96%, 100% { filter: brightness(1); box-shadow: 0 12px 26px -10px rgba(21,163,56,0.65); }
  76% { filter: brightness(1.2); box-shadow: 0 14px 34px -10px rgba(249,188,0,0.7); } }
@media (prefers-reduced-motion: reduce) { .eq2-node:first-child::after, .eq2-node.school .e2-glow { animation: none; opacity: 0; } }

/* v12.4 — Footer: contacto como barra horizontal (sin espacio muerto) */
.footer-row { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; }
.footer-contact-wrap { grid-column: 1 / -1; margin-top: 10px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px 36px; }
.footer-contact-wrap h4 { margin: 0; white-space: nowrap; }
.footer-contact { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr; gap: 14px; margin: 0; }
.footer-contact .fc-row { padding: 12px 16px; border-radius: var(--radius-md);
  background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.09);
  transition: border-color var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.footer-contact a.fc-row:hover { transform: translateY(-2px); border-color: rgba(46,185,87,0.5); background: rgba(255,255,255,0.07); }
@media (max-width: 900px) {
  .footer-contact-wrap { grid-template-columns: 1fr; gap: 12px; }
  .footer-contact { grid-template-columns: 1fr; gap: 10px; } }

/* v12.5 — Ecuación: fuera manchas de luz; encendido fino por borde + ícono */
.eq2-node:first-child::after, .eq2-node.school .e2-glow { display: none; }
.eq2-node:first-child { animation: e2NodeSun 3.4s var(--ease-in-out) infinite; }
@keyframes e2NodeSun {
  0%, 20%, 100% { border-color: rgba(255,255,255,0.13); }
  8% { border-color: rgba(249,188,0,0.65); } }
.eq2-node.school { animation: e2NodeSch 3.4s var(--ease-in-out) infinite; }
@keyframes e2NodeSch {
  0%, 60%, 96%, 100% { border-color: rgba(255,255,255,0.13); }
  76% { border-color: rgba(249,188,0,0.65); } }
.e2-ic.sun { animation: e2SunIc3 3.4s var(--ease-in-out) infinite; }
@keyframes e2SunIc3 { 0%, 20%, 100% { filter: brightness(1); } 8% { filter: brightness(1.22); } }
.e2-ic.sch { animation: e2SchIc3 3.4s var(--ease-in-out) infinite; }
@keyframes e2SchIc3 { 0%, 60%, 96%, 100% { filter: brightness(1); } 76% { filter: brightness(1.22); } }
@media (prefers-reduced-motion: reduce) { .eq2-node:first-child, .eq2-node.school, .e2-ic.sun, .e2-ic.sch { animation: none; } }

/* v12.6 — Ecuación: luz que RECORRE el borde (como el trazo del logo), no flash */
@property --dpA { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.eq2-node:first-child, .eq2-node.school { animation: none; }
.eq2-node::before { content: ""; position: absolute; inset: -1.5px; border-radius: 18px; padding: 1.8px;
  background: conic-gradient(from var(--dpA),
    transparent 0deg, transparent 295deg,
    rgba(249,188,0,0.06) 315deg, rgba(249,188,0,0.5) 344deg, #ffd64f 357deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  filter: drop-shadow(0 0 5px rgba(249,188,0,0.5));
  opacity: 0; pointer-events: none; }
.eq2-node:first-child::before { animation: beamSun 3.4s linear infinite; }
@keyframes beamSun {
  0% { --dpA: 0deg; opacity: 0; }
  4% { opacity: 1; }
  26% { opacity: 1; }
  31% { --dpA: 360deg; opacity: 0; }
  100% { --dpA: 360deg; opacity: 0; } }
.eq2-node.school::before { animation: beamSch 3.4s linear infinite; }
@keyframes beamSch {
  0%, 63% { --dpA: 0deg; opacity: 0; }
  67% { opacity: 1; }
  90% { opacity: 1; }
  95% { --dpA: 360deg; opacity: 0; }
  100% { --dpA: 360deg; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .eq2-node::before { animation: none; opacity: 0; } }

/* v13 — revisión final: sin numeración de secciones + respiro móvil en calculadora */
.kicker .idx { display: none; }
@media (max-width: 600px) { .cc-note { padding-right: 58px; } }

/* v13.1 — chips de sectores: tile con profundidad de "insignia" */
.logo-chip .logo-mark { box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -6px 12px rgba(0,0,0,0.14), 0 6px 14px -6px rgba(20,29,42,0.35); }

/* v13.2 — nota discreta "también de contado" bajo el formulario */
.form-alt2 { margin-top: 12px; text-align: center; font-size: 12px; line-height: 1.4; color: var(--navy-400, #7b8798); }
.form-alt2 b { color: var(--navy-600, #55647e); font-weight: 700; }

/* v13.3 — Footer contacto: el hover ya no se recorta + bordes uniformes */
.footer-contact { overflow: visible; border: 0; background: none; border-radius: 0; }
.footer-contact .fc-row + .fc-row { border-top-color: rgba(255,255,255,0.09); }
.footer-contact a.fc-row:hover { border-color: rgba(46,185,87,0.55); }