:root {
  --navy: #071a2d;
  --navy-2: #0b2947;
  --blue: #1272e8;
  --cyan: #27c2d3;
  --lime: #b7e436;
  --ink: #102137;
  --muted: #66768b;
  --line: #dce6ef;
  --surface: #f6f9fc;
  --white: #ffffff;
  --shadow: 0 24px 70px rgba(7, 26, 45, .14);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fbfdff;
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input { font: inherit; }
button { cursor: pointer; }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.page-glow { position: fixed; border-radius: 50%; filter: blur(3px); pointer-events: none; z-index: -1; }
.glow-one { width: 520px; height: 520px; background: radial-gradient(circle, rgba(39,194,211,.14), transparent 70%); top: -170px; right: -170px; }
.glow-two { width: 430px; height: 430px; background: radial-gradient(circle, rgba(18,114,232,.09), transparent 70%); top: 390px; left: -220px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 253, 255, .84);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(220,230,239,.75);
}
.nav-wrap { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand img { width: 222px; }
.main-nav { display: flex; align-items: center; gap: 29px; font-size: .91rem; font-weight: 700; color: #3d5066; }
.main-nav a { transition: color .2s ease, transform .2s ease; }
.main-nav a:hover { color: var(--blue); }
.nav-app { color: var(--white) !important; background: var(--navy); padding: 12px 19px; border-radius: 999px; box-shadow: 0 9px 24px rgba(7,26,45,.15); }
.nav-app:hover { transform: translateY(-2px); }
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--navy); padding: 11px; }
.menu-toggle span { display: block; height: 2px; margin: 5px 0; background: #fff; border-radius: 10px; transition: .25s ease; }

.hero { padding: 84px 0 74px; position: relative; }
.hero-grid { min-height: 590px; display: grid; grid-template-columns: 1.08fr .92fr; gap: 70px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--blue); font-size: .77rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow span { width: 24px; height: 3px; border-radius: 9px; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.hero h1, .section-heading h2, .indicators-copy h2, .business-content h2, .cta-card h2 {
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -.045em;
  line-height: 1.02;
}
.hero h1 { margin: 19px 0 22px; max-width: 680px; font-size: clamp(3.5rem, 6vw, 6rem); font-weight: 700; color: var(--navy); }
.hero h1 strong { color: transparent; background: linear-gradient(100deg, var(--blue), var(--cyan)); -webkit-background-clip: text; background-clip: text; }
.hero-lead { max-width: 650px; margin: 0 0 30px; color: var(--muted); font-size: 1.15rem; }

.company-search-wrap { position: relative; z-index: 20; width: min(100%, 650px); }
.search-box { max-width: 650px; min-height: 66px; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 20px; background: #fff; border: 1px solid #d8e4ed; border-radius: 18px; box-shadow: 0 16px 45px rgba(14,45,72,.10); }
.search-box svg { width: 22px; min-width: 22px; fill: none; stroke: #7d8fa1; stroke-width: 2; stroke-linecap: round; }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; }
.search-box input::placeholder { color: #91a0ae; }
.search-box button, .notify-form button { border: 0; border-radius: 13px; background: linear-gradient(135deg, var(--blue), #075bc2); color: #fff; font-weight: 800; padding: 15px 22px; white-space: nowrap; box-shadow: 0 10px 24px rgba(18,114,232,.22); }

.search-results {
  position: absolute;
  inset: calc(100% + 10px) 0 auto;
  z-index: 40;
  max-height: min(520px, 62vh);
  overflow: auto;
  padding: 8px;
  border: 1px solid #d6e2eb;
  border-radius: 18px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 24px 65px rgba(7,26,45,.18);
  backdrop-filter: blur(16px);
  text-align: left;
}
.search-results[hidden] { display: none; }
.search-results-status {
  padding: 10px 12px 8px;
  color: #718194;
  font-size: .76rem;
  font-weight: 700;
}
.search-results-status.is-loading::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border: 2px solid #c7d8e7;
  border-top-color: var(--blue);
  border-radius: 50%;
  vertical-align: -2px;
  animation: search-spin .7s linear infinite;
}
.search-results-status.is-empty {
  padding: 22px 15px;
  color: #5e6f81;
  text-align: center;
}
.search-results-status.is-error {
  padding: 18px 15px;
  color: #a23b3b;
  background: #fff4f4;
  border-radius: 12px;
}
.search-results-list { display: grid; gap: 5px; }
.company-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--ink);
  background: transparent;
  transition: border-color .16s ease, background .16s ease,
              transform .16s ease;
}
.company-result:hover,
.company-result:focus {
  outline: 0;
  border-color: #c8dceb;
  background: #f3f8fc;
  transform: translateY(-1px);
}
.company-result-icon {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, var(--blue), var(--cyan));
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
}
.company-result-body {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.company-result-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
.company-result-title {
  overflow: hidden;
  color: var(--navy);
  font-size: .91rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.company-result-verified {
  padding: 3px 7px;
  border-radius: 999px;
  color: #0c704a;
  background: #ddf4e9;
  font-size: .61rem;
  font-weight: 900;
  white-space: nowrap;
}
.company-result-subtitle,
.company-result-legal {
  overflow: hidden;
  color: #718194;
  font-size: .7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.company-result-legal { color: #92a0ad; }
.company-result-meta {
  min-width: 88px;
  display: grid;
  justify-items: end;
  gap: 3px;
  text-align: right;
}
.company-result-score {
  color: #138557;
  font-family: "Space Grotesk", sans-serif;
  font-size: .91rem;
}
.company-result-score.no-score { color: #7b8996; }
.company-result-meta small {
  color: #8a99a7;
  font-size: .62rem;
}
@keyframes search-spin { to { transform: rotate(360deg); } }

.search-help { margin: 10px 0 0 7px; font-size: .78rem; color: #8493a2; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 13px 22px; border-radius: 13px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: #fff; background: var(--navy); box-shadow: 0 12px 28px rgba(7,26,45,.15); }
.btn-ghost { border: 1px solid var(--line); background: rgba(255,255,255,.75); }
.btn-light { color: var(--navy); background: #fff; }
.trust-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 28px; color: #536579; font-size: .84rem; font-weight: 700; }
.trust-row i { display: inline-grid; place-items: center; width: 19px; height: 19px; margin-right: 5px; font-style: normal; color: #0e783e; background: #dff6e8; border-radius: 50%; }

.hero-visual { position: relative; min-height: 535px; display: grid; place-items: center; }
.hero-visual::before { content: ""; position: absolute; width: 430px; height: 430px; border-radius: 48% 52% 58% 42%; background: linear-gradient(145deg, #e8f8fb, #e6effd); animation: morph 9s ease-in-out infinite; }
.orbital { position: absolute; border: 1px solid rgba(18,114,232,.15); border-radius: 50%; }
.orbital-one { width: 490px; height: 490px; animation: spin 24s linear infinite; }
.orbital-two { width: 390px; height: 390px; border-style: dashed; animation: spin 30s linear reverse infinite; }
.score-card { position: relative; z-index: 2; width: min(390px, 82vw); padding: 25px 28px 28px; border: 1px solid rgba(255,255,255,.75); border-radius: 28px; background: rgba(255,255,255,.9); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.score-top { display: flex; align-items: center; gap: 9px; color: #637386; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.score-top strong { margin-left: auto; color: #119253; font-size: .65rem; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #1ac36e; box-shadow: 0 0 0 6px rgba(26,195,110,.12); }
.meter-wrap { position: relative; height: 168px; margin-top: 18px; }
.meter { width: 100%; height: 100%; overflow: visible; }
.meter path { fill: none; stroke-width: 18; stroke-linecap: round; }
.meter-track { stroke: #e6edf3; }
.meter-value { stroke: url(#gradient); stroke: var(--cyan); stroke-dasharray: 86 100; filter: drop-shadow(0 5px 5px rgba(39,194,211,.22)); }
.score-number { position: absolute; inset: 55px 0 auto; display: flex; align-items: baseline; justify-content: center; gap: 5px; }
.score-number strong { color: var(--navy); font-family: "Space Grotesk"; font-size: 4rem; letter-spacing: -.06em; line-height: 1; }
.score-number span { color: #8998a7; font-weight: 700; }
.score-label { margin-top: -21px; text-align: center; color: #168c62; font-size: .85rem; font-weight: 800; }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 28px; }
.mini-stats div { padding: 13px 8px; text-align: center; background: #f4f8fb; border-radius: 13px; }
.mini-stats span, .mini-stats strong { display: block; }
.mini-stats span { color: #7d8b99; font-size: .63rem; }
.mini-stats strong { color: var(--navy); margin-top: 2px; font-size: .91rem; }
.floating-card { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 12px 15px; border: 1px solid rgba(255,255,255,.8); border-radius: 15px; background: rgba(255,255,255,.94); box-shadow: 0 15px 35px rgba(7,26,45,.13); animation: float 4.5s ease-in-out infinite; }
.floating-card-a { top: 60px; right: -4px; }
.floating-card-b { left: -18px; bottom: 52px; animation-delay: -2s; }
.floating-card strong, .floating-card small { display: block; }
.floating-card strong { color: var(--navy); font-size: .82rem; }
.floating-card small { color: #8795a3; font-size: .64rem; }
.mini-icon { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 11px; color: #9b6a00; background: #fff3c5; font-weight: 900; }
.mini-icon.shield { color: #0c8a5d; background: #dcf7eb; }

.proof-strip { border-block: 1px solid var(--line); background: rgba(255,255,255,.76); }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.proof-grid article { display: grid; gap: 10px; padding: 28px 34px; border-right: 1px solid var(--line); }
.proof-grid article:first-child { padding-left: 0; }
.proof-grid article:last-child { border-right: 0; }
.proof-head { display: flex; align-items: center; gap: 14px; }
.proof-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 14px; color: #0a66df; background: linear-gradient(180deg, #eef6ff, #e1efff); box-shadow: inset 0 0 0 1px rgba(10,102,223,.08); }
.proof-icon svg { width: 24px; height: 24px; }
.proof-grid strong { color: var(--navy); }
.proof-grid span { color: var(--muted); font-size: .85rem; }

.section { padding: 105px 0; }
.section-heading { max-width: 760px; margin: 0 auto 50px; text-align: center; }
.section-heading .eyebrow { justify-content: center; }
.section-heading h2, .indicators-copy h2, .business-content h2, .cta-card h2 { margin: 17px 0 18px; font-size: clamp(2.3rem, 4.3vw, 4rem); color: var(--navy); }
.section-heading p { max-width: 680px; margin: 0 auto; color: var(--muted); }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step-card { position: relative; padding: 35px 30px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 14px 45px rgba(11,41,71,.06); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.step-card:hover { transform: translateY(-7px); border-color: #b7d4f0; box-shadow: 0 22px 55px rgba(11,41,71,.11); }
.step-number { position: absolute; top: 22px; right: 25px; color: #dce8f2; font-family: "Space Grotesk"; font-size: 2.3rem; font-weight: 700; }
.step-icon { display: grid; place-items: center; width: 57px; height: 57px; border-radius: 17px; color: var(--blue); background: linear-gradient(145deg, #eaf4ff, #e5fbfb); font-size: 1.6rem; font-weight: 900; }
.step-card h3 { margin: 25px 0 10px; color: var(--navy); font-size: 1.25rem; }
.step-card p { margin: 0; color: var(--muted); font-size: .93rem; }

.section-dark { position: relative; overflow: hidden; background: var(--navy); }
.section-dark::before { content: ""; position: absolute; width: 500px; height: 500px; top: -230px; right: -170px; border-radius: 50%; background: radial-gradient(circle, rgba(39,194,211,.2), transparent 68%); }
.indicators-grid { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; gap: 85px; align-items: center; }
.eyebrow.light { color: #83e5ed; }
.indicators-copy h2 { color: #fff; }
.indicators-copy p { color: #b3c2d0; }
.text-link { display: inline-flex; gap: 10px; align-items: center; margin-top: 15px; color: #fff; font-weight: 800; }
.text-link span { color: var(--cyan); font-size: 1.25rem; transition: transform .2s ease; }
.text-link:hover span { transform: translateX(5px); }
.indicator-list { display: grid; gap: 12px; }
.indicator-list article { display: grid; grid-template-columns: auto 1fr auto; gap: 17px; align-items: center; padding: 20px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(255,255,255,.055); transition: transform .2s ease, background .2s ease; }
.indicator-list article:hover { transform: translateX(6px); background: rgba(255,255,255,.085); }
.indicator-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: #86e9ef; background: rgba(39,194,211,.12); font-size: .74rem; font-weight: 800; }
.indicator-list h3 { margin: 0; color: #fff; font-size: 1rem; }
.indicator-list p { margin: 3px 0 0; color: #9fb1c0; font-size: .78rem; }
.indicator-list strong { color: var(--lime); font-family: "Space Grotesk"; font-size: 1.2rem; }

.business-panel { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 65px; align-items: center; padding: 62px; overflow: hidden; border-radius: 34px; background: linear-gradient(135deg, #eaf6ff, #ecfbf8); }
.business-panel::after { content: ""; position: absolute; width: 260px; height: 260px; right: -80px; bottom: -100px; border: 42px solid rgba(39,194,211,.10); border-radius: 50%; }
.business-content, .business-points { position: relative; z-index: 2; }
.business-content p { max-width: 650px; color: var(--muted); }
.business-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 27px; }
.business-points { display: grid; gap: 14px; }
.business-points div { display: grid; grid-template-columns: auto 1fr; gap: 13px; padding: 18px; background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.9); border-radius: 17px; box-shadow: 0 12px 35px rgba(7,26,45,.07); }
.business-points span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: #0a8a5e; background: #dff6eb; font-weight: 900; }
.business-points p { margin: 0; color: #5e7082; font-size: .84rem; }
.business-points strong { color: var(--navy); }

.cta-section { padding-top: 20px; }
.cta-card { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center; padding: 58px 62px; color: #fff; overflow: hidden; border-radius: 32px; background: linear-gradient(125deg, #0a2b4c, #0b4c75); box-shadow: var(--shadow); }
.cta-card h2 { margin-top: 8px; color: #fff; font-size: clamp(2rem, 3.7vw, 3.4rem); }
.cta-card p { margin: 0; color: #c8d6e2; }
.cta-kicker { color: #84e7ef; font-size: .73rem; font-weight: 900; letter-spacing: .15em; }
.notify-form { display: flex; padding: 7px; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; background: rgba(255,255,255,.12); }
.notify-form input { width: 100%; min-width: 0; padding: 0 15px; border: 0; outline: 0; color: #fff; background: transparent; }
.notify-form input::placeholder { color: #bdcbd7; }
.notify-form button { background: var(--lime); color: #18320b; box-shadow: none; }

.site-footer { margin-top: 105px; padding: 72px 0 26px; color: #9eb0c0; background: #061522; }
.footer-grid { display: grid; grid-template-columns: 1.5fr .75fr .75fr 1fr; gap: 50px; }
.footer-brand img { width: 210px; filter: brightness(0) invert(1); opacity: .92; }
.footer-brand p { max-width: 290px; color: #8fa2b3; font-size: .87rem; }
.footer-grid h3 { margin: 0 0 16px; color: #fff; font-size: .85rem; }
.footer-grid a, .footer-grid span { display: block; margin: 9px 0; color: #8fa2b3; font-size: .82rem; }
.footer-grid a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 55px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); font-size: .74rem; }

.toast { position: fixed; left: 50%; bottom: 28px; z-index: 100; max-width: calc(100% - 30px); padding: 13px 20px; color: #fff; background: #092943; border-radius: 12px; box-shadow: 0 15px 45px rgba(0,0,0,.22); opacity: 0; transform: translate(-50%, 20px); pointer-events: none; transition: .3s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s ease, transform .75s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: .13s; }
.delay-2 { transition-delay: .26s; }

@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes morph { 0%,100% { border-radius: 48% 52% 58% 42%; transform: rotate(0deg); } 50% { border-radius: 58% 42% 45% 55%; transform: rotate(9deg); } }

@media (max-width: 980px) {
  .menu-toggle { display: block; }
  .main-nav { position: fixed; inset: 78px 0 auto; display: grid; gap: 0; padding: 15px 20px 25px; background: rgba(251,253,255,.98); border-bottom: 1px solid var(--line); transform: translateY(-130%); opacity: 0; pointer-events: none; transition: .3s ease; }
  .main-nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .main-nav a { padding: 15px 5px; border-bottom: 1px solid #e6edf3; }
  .main-nav .nav-app { margin-top: 12px; text-align: center; border: 0; }
  .hero { padding-top: 55px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hero-copy { display: flex; flex-direction: column; align-items: center; }
  .hero-visual { min-height: 500px; }
  .proof-grid, .steps-grid { grid-template-columns: 1fr; }
  .proof-grid article, .proof-grid article:first-child { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .proof-head { gap: 12px; }
  .proof-icon { width: 40px; height: 40px; flex-basis: 40px; border-radius: 12px; }
  .proof-grid article:last-child { border-bottom: 0; }
  .indicators-grid, .business-panel, .cta-card { grid-template-columns: 1fr; }
  .business-panel, .cta-card { padding: 46px 38px; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .container { width: min(100% - 28px, 1180px); }
  .nav-wrap { min-height: 70px; }
  .brand img { width: 188px; }
  .main-nav { inset: 70px 0 auto; }
  .hero { padding: 44px 0 58px; }
  .hero-grid { min-height: auto; }
  .hero h1 { font-size: clamp(3rem, 15vw, 4.4rem); }
  .hero-lead { font-size: 1rem; }
  .search-box { width: 100%; display: grid; grid-template-columns: auto 1fr; padding: 13px 13px 11px 17px; }
  .search-box button { grid-column: 1 / -1; width: 100%; }
  .company-search-wrap { width: 100%; }
  .search-results {
    max-height: 58vh;
    border-radius: 15px;
  }
  .company-result {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .company-result-meta {
    grid-column: 2;
    min-width: 0;
    justify-items: start;
    grid-auto-flow: column;
    justify-content: start;
    gap: 8px;
    text-align: left;
  }
  .trust-row { justify-content: center; gap: 11px 16px; }
  .hero-visual { min-height: 430px; }
  .hero-visual::before { width: 330px; height: 330px; }
  .orbital-one { width: 360px; height: 360px; }
  .orbital-two { width: 300px; height: 300px; }
  .score-card { width: 90%; padding: 21px 18px 22px; }
  .floating-card-a { top: 25px; right: -5px; }
  .floating-card-b { left: -5px; bottom: 20px; }
  .section { padding: 78px 0; }
  .section-heading h2, .indicators-copy h2, .business-content h2 { font-size: 2.35rem; }
  .step-card { padding: 30px 25px; }
  .indicators-grid { gap: 45px; }
  .indicator-list article { grid-template-columns: auto 1fr; }
  .indicator-list strong { grid-column: 2; }
  .business-panel, .cta-card { padding: 36px 23px; border-radius: 24px; }
  .notify-form { display: grid; gap: 8px; padding: 8px; }
  .notify-form input { min-height: 48px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand, .footer-grid > div:last-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}


/* ---------------------------------------------------------------
   Acceso de usuarios en la portada
---------------------------------------------------------------- */

.nav-login {
  color: var(--navy) !important;
  font-weight: 800;
}

.nav-account {
  color: var(--white) !important;
  background: var(--navy);
  padding: 12px 19px;
  border-radius: 999px;
  box-shadow: 0 9px 24px rgba(7,26,45,.15);
}

.nav-account:hover {
  color: var(--white) !important;
  transform: translateY(-2px);
}

.account-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 15px 0 0;
  color: #708195;
  font-size: .84rem;
  font-weight: 600;
}

.account-entry a {
  color: var(--blue);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(18,114,232,.3);
  text-underline-offset: 3px;
}

.account-entry a:hover {
  color: var(--navy);
}

@media (max-width: 1100px) and (min-width: 981px) {
  .main-nav {
    gap: 18px;
    font-size: .84rem;
  }

  .nav-account {
    padding: 10px 14px;
  }
}

@media (max-width: 980px) {
  .main-nav .nav-login {
    margin-top: 10px;
    color: var(--blue) !important;
    text-align: center;
    border-bottom: 0;
  }

  .main-nav .nav-account {
    margin-top: 4px;
    padding: 13px 16px;
    text-align: center;
    border: 0;
  }
}

@media (max-width: 620px) {
  .account-entry {
    justify-content: center;
  }
}


/* ===============================================================
   Buscador híbrido ConfiometroMX + DENUE + SCIAN
================================================================ */
.search-result-group {
  display: grid;
  gap: 5px;
  padding-top: 7px;
}
.search-result-group + .search-result-group {
  margin-top: 8px;
  border-top: 1px solid #e5edf3;
}
.search-result-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 5px 11px 4px;
  color: #526678;
  font-size: .72rem;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.search-result-group-header span {
  color: #8b9aa7;
  font-size: .66rem;
  letter-spacing: 0;
  text-transform: none;
}
.source-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 800;
  white-space: nowrap;
}
.source-confiometro { color: #0866c6; background: #e8f2ff; }
.source-denue { color: #795b12; background: #fff4d3; }
.source-scian { color: #5d418c; background: #f1eafd; }
.denue-icon { background: linear-gradient(145deg, #9c7419, #73520d); }
.activity-icon { background: linear-gradient(145deg, #7250a5, #4d3478); }
.denue-score { color: #7a5a13; }
.activity-score { color: #654391; }
.result-activity {
  width: 100%;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.result-denue.is-linked {
  border-color: #cce0f5;
  background: #f8fbff;
}
@media (max-width: 620px) {
  .search-result-group-header { padding-inline: 5px; }
  .source-badge { margin-top: 3px; }
}


/* ===============================================================
   NAVEGACIÓN INSTITUCIONAL
================================================================ */

.nav-institutional {
  position: relative;
}

.nav-institutional summary {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  transition: color .2s ease;
}

.nav-institutional summary::-webkit-details-marker {
  display: none;
}

.nav-institutional summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.nav-institutional[open] summary,
.nav-institutional summary:hover {
  color: var(--blue);
}

.nav-institutional[open] summary::after {
  margin-top: 3px;
  transform: rotate(225deg);
}

.nav-submenu {
  min-width: 190px;
  display: grid;
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  z-index: 80;
  padding: 8px;
  transform: translateX(-50%);
  border: 1px solid #d9e5ee;
  border-radius: 16px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 20px 50px rgba(7,26,45,.16);
  backdrop-filter: blur(15px);
}

.nav-submenu::before {
  content: "";
  width: 13px;
  height: 13px;
  position: absolute;
  top: -7px;
  left: calc(50% - 6px);
  transform: rotate(45deg);
  border-top: 1px solid #d9e5ee;
  border-left: 1px solid #d9e5ee;
  background: #fff;
}

.main-nav .nav-submenu a {
  position: relative;
  z-index: 1;
  padding: 10px 12px;
  border-radius: 10px;
  color: #42556a;
  font-size: .82rem;
}

.main-nav .nav-submenu a:hover {
  color: var(--blue);
  background: #f1f7fc;
}

/* ===============================================================
   MISIÓN Y VISIÓN
================================================================ */

.institutional-overview {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 22%, rgba(39,194,211,.09), transparent 24%),
    linear-gradient(180deg, #fbfdff, #f4f9fc);
}

.institutional-overview::before {
  content: "";
  width: 380px;
  height: 380px;
  position: absolute;
  right: -180px;
  bottom: -220px;
  border: 1px solid rgba(18,114,232,.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 50px rgba(18,114,232,.025),
    0 0 0 100px rgba(39,194,211,.018);
}

.mission-vision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.institutional-card {
  min-height: 405px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  scroll-margin-top: 110px;
  padding: clamp(28px, 5vw, 46px);
  border: 1px solid #d9e5ed;
  border-radius: 29px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 22px 60px rgba(7,26,45,.09);
}

.institutional-card::after {
  content: "";
  width: 210px;
  height: 210px;
  position: absolute;
  right: -85px;
  bottom: -105px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(39,194,211,.16),
    rgba(18,114,232,.02) 65%,
    transparent 66%
  );
}

.vision-card::after {
  background: radial-gradient(
    circle,
    rgba(18,114,232,.15),
    rgba(39,194,211,.025) 65%,
    transparent 66%
  );
}

.institutional-number {
  position: absolute;
  top: 21px;
  right: 25px;
  color: #d8e5ed;
  font-family: "Space Grotesk", sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
}

.institutional-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 25px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, var(--blue), var(--cyan));
  box-shadow: 0 14px 30px rgba(18,114,232,.22);
  font-size: 1.45rem;
  font-weight: 900;
}

.vision-card .institutional-icon {
  background: linear-gradient(145deg, var(--navy-2), var(--blue));
}

.institutional-label {
  color: var(--blue);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.institutional-card h3 {
  max-width: 460px;
  margin: 10px 0 14px;
  color: var(--navy);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.75rem, 3vw, 2.55rem);
  line-height: 1.05;
  letter-spacing: -.04em;
}

.institutional-card p {
  position: relative;
  z-index: 1;
  margin: 0 0 25px;
  color: var(--muted);
  line-height: 1.75;
}

.institutional-card a {
  width: fit-content;
  position: relative;
  z-index: 1;
  margin-top: auto;
  color: var(--blue);
  font-size: .84rem;
  font-weight: 850;
}

.institutional-card a span {
  display: inline-block;
  margin-left: 5px;
  transition: transform .2s ease;
}

.institutional-card a:hover span {
  transform: translateX(4px);
}

/* ===============================================================
   VALORES
================================================================ */

.values-section {
  scroll-margin-top: 85px;
  background: #fff;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.value-card {
  min-height: 230px;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(145deg, #fff, #f8fbfd);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.value-card:hover {
  transform: translateY(-4px);
  border-color: #c6dcea;
  box-shadow: 0 16px 38px rgba(7,26,45,.08);
}

.value-card > span {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--blue);
  background: #e9f3ff;
  font-size: .7rem;
  font-weight: 900;
}

.value-card h3 {
  margin: 22px 0 9px;
  color: var(--navy);
  font-size: 1.08rem;
}

.value-card p {
  margin: 0;
  color: var(--muted);
  font-size: .83rem;
  line-height: 1.65;
}

/* ===============================================================
   BENEFICIOS
================================================================ */

.benefits-section {
  scroll-margin-top: 85px;
  color: #fff;
  background:
    radial-gradient(circle at 7% 5%, rgba(39,194,211,.18), transparent 26%),
    linear-gradient(130deg, #061726, #092d4d);
}

.benefits-section .section-heading h2 {
  color: #fff;
}

.benefits-section .section-heading p {
  color: #b7c8d5;
}

.benefits-section .eyebrow {
  color: #79e0eb;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
}

.benefit-card {
  min-height: 380px;
  padding: 29px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background: rgba(255,255,255,.075);
  box-shadow: 0 19px 45px rgba(0,0,0,.13);
  backdrop-filter: blur(10px);
}

.benefit-symbol {
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  margin-bottom: 25px;
  border-radius: 17px;
  color: #062337;
  background: linear-gradient(145deg, #92edf2, #3bc8d8);
  font-weight: 950;
}

.benefit-business .benefit-symbol {
  background: linear-gradient(145deg, #a9cdfd, #3d8fea);
}

.benefit-market .benefit-symbol {
  background: linear-gradient(145deg, #d9ef77, #acd72d);
}

.benefit-card > span {
  color: #7fe0e9;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.benefit-card h3 {
  margin: 10px 0 20px;
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.55rem;
  line-height: 1.15;
  letter-spacing: -.035em;
}

.benefit-card ul {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.benefit-card li {
  position: relative;
  padding-left: 25px;
  color: #c3d2dd;
  font-size: .83rem;
  line-height: 1.55;
}

.benefit-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #77e0b1;
  font-weight: 900;
}

/* Footer now has five columns. */
.footer-grid {
  grid-template-columns: 1.35fr .75fr .75fr .7fr 1fr;
}

@media (max-width: 1100px) and (min-width: 981px) {
  .main-nav {
    gap: 14px;
    font-size: .79rem;
  }
}

@media (max-width: 980px) {
  .nav-institutional {
    border-bottom: 1px solid #e6edf3;
  }

  .nav-institutional summary {
    padding: 15px 5px;
  }

  .nav-submenu {
    min-width: 0;
    position: static;
    padding: 0 0 9px 16px;
    transform: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .nav-submenu::before {
    display: none;
  }

  .main-nav .nav-submenu a {
    padding: 10px 12px;
    border-bottom: 0;
    border-left: 2px solid #dce9f2;
    border-radius: 0;
  }

  .mission-vision-grid,
  .benefits-grid {
    grid-template-columns: 1fr;
  }

  .values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-brand,
  .footer-grid > div:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .values-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .institutional-card,
  .benefit-card {
    min-height: auto;
  }

  .footer-brand,
  .footer-grid > div:last-child {
    grid-column: auto;
  }
}


/* ===============================================================
   BUSCADOR MULTIESTADO
================================================================ */

.search-box select {
  max-width: 155px;
  min-width: 128px;
  align-self: stretch;
  padding: 0 12px;
  border: 0;
  border-left: 1px solid #dce6ed;
  outline: 0;
  color: #42576b;
  background: transparent;
  font: inherit;
  font-size: .79rem;
  font-weight: 750;
  cursor: pointer;
}

.search-box select:focus-visible {
  border-radius: 9px;
  outline: 3px solid rgba(18,114,232,.18);
  outline-offset: 1px;
}

.search-box select:disabled {
  color: #8b9aa7;
  cursor: progress;
}

@media (max-width: 720px) {
  .search-box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .search-box select {
    max-width: none;
    width: 100%;
    min-height: 42px;
    grid-column: 1 / -1;
    padding: 8px 4px 0;
    border-left: 0;
    border-top: 1px solid #e2eaf0;
  }

  .search-box button {
    grid-column: 1 / -1;
    width: 100%;
  }
}


/* ===============================================================
   MAPA DE COBERTURA DENUE
================================================================ */

.denue-coverage-section {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 90px;
  background:
    radial-gradient(
      circle at 90% 15%,
      rgba(39, 194, 211, .12),
      transparent 25%
    ),
    linear-gradient(180deg, #f8fcfa, #eef7f3);
}

.denue-coverage-section::before {
  content: "";
  width: 470px;
  height: 470px;
  position: absolute;
  left: -270px;
  bottom: -300px;
  border: 1px solid rgba(12, 116, 82, .10);
  border-radius: 50%;
  box-shadow:
    0 0 0 55px rgba(12, 116, 82, .025),
    0 0 0 110px rgba(12, 116, 82, .015);
}

.coverage-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: end;
  margin-bottom: 30px;
}

.coverage-heading h2 {
  max-width: 700px;
  margin: 12px 0 13px;
  color: var(--navy);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 5vw, 3.55rem);
  line-height: 1.02;
  letter-spacing: -.05em;
}

.coverage-heading p {
  max-width: 750px;
  margin: 0;
  color: var(--muted);
  line-height: 1.72;
}

.coverage-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(145px, 1fr));
  gap: 12px;
}

.coverage-summary article {
  min-width: 150px;
  padding: 18px 20px;
  border: 1px solid #d5e6de;
  border-radius: 17px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 12px 34px rgba(10, 55, 39, .06);
}

.coverage-summary span {
  display: block;
  margin-bottom: 8px;
  color: #728179;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.coverage-summary strong {
  color: #0c6f50;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.55rem;
}

.coverage-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr);
  gap: 20px;
  align-items: stretch;
}

.coverage-map-card,
.coverage-detail-card {
  position: relative;
  border: 1px solid #d5e4dd;
  border-radius: 27px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 24px 60px rgba(10, 54, 39, .09);
}

.coverage-map-card {
  margin: 0;
  overflow: hidden;
  padding: 20px;
}

.coverage-map-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 0 4px 14px;
}

.coverage-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  color: #62736b;
  font-size: .69rem;
  font-weight: 750;
}

.coverage-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.coverage-legend i {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
}

.legend-ready {
  background: #0f8a61;
  box-shadow: 0 0 0 4px rgba(15,138,97,.13);
}

.legend-pending {
  background: #d2dfd9;
}

.coverage-edition {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  color: #0e7052;
  background: #e3f3ec;
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .05em;
}

.mexico-map-stage {
  min-height: 410px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 21px;
  background:
    radial-gradient(
      circle at 48% 54%,
      rgba(31, 153, 110, .09),
      transparent 47%
    ),
    linear-gradient(145deg, #f7fbf9, #edf6f2);
}

.mexico-map-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(18, 101, 75, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 101, 75, .035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

.mexico-map-stage img {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 15px 22px rgba(16, 55, 43, .10));
  user-select: none;
  pointer-events: none;
}

.mexico-map-markers {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.denue-state-marker {
  width: 18px;
  height: 18px;
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #0e8a61;
  box-shadow:
    0 0 0 5px rgba(14,138,97,.15),
    0 7px 16px rgba(9, 83, 57, .28);
  cursor: pointer;
  pointer-events: auto;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease;
}

.denue-state-marker::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(14,138,97,.35);
  border-radius: 50%;
  animation: denue-marker-pulse 2.3s ease-out infinite;
}

.denue-state-marker::after {
  content: attr(data-state-name);
  min-width: max-content;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translate(-50%, 5px);
  padding: 7px 10px;
  border-radius: 9px;
  color: #fff;
  background: #0a3e2e;
  box-shadow: 0 9px 24px rgba(0,0,0,.18);
  font-family: inherit;
  font-size: .68rem;
  font-weight: 850;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity .18s ease,
    transform .18s ease;
}

.denue-state-marker:hover,
.denue-state-marker:focus-visible,
.denue-state-marker.is-selected {
  transform: translate(-50%, -50%) scale(1.28);
  background: #0b6f50;
  box-shadow:
    0 0 0 7px rgba(14,138,97,.20),
    0 10px 20px rgba(9,83,57,.33);
}

.denue-state-marker:hover::after,
.denue-state-marker:focus-visible::after,
.denue-state-marker.is-selected::after {
  transform: translate(-50%, 0);
  opacity: 1;
}

.denue-state-marker:focus-visible {
  outline: 3px solid rgba(18,114,232,.35);
  outline-offset: 5px;
}

.coverage-map-loading {
  position: absolute;
  z-index: 5;
  padding: 11px 14px;
  border: 1px solid #d7e5df;
  border-radius: 12px;
  color: #607269;
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 30px rgba(10,54,39,.08);
  font-size: .76rem;
  font-weight: 800;
}

.coverage-map-loading.is-hidden {
  display: none;
}

.coverage-map-card figcaption {
  padding: 12px 6px 0;
  color: #7a8982;
  font-size: .64rem;
  line-height: 1.5;
}

.coverage-detail-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(24px, 4vw, 36px);
}

.coverage-detail-card::after {
  content: "";
  width: 220px;
  height: 220px;
  position: absolute;
  right: -105px;
  bottom: -110px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(24,164,113,.14),
    transparent 66%
  );
  pointer-events: none;
}

.coverage-detail-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 26px;
  padding: 8px 11px;
  border-radius: 999px;
  color: #0a7050;
  background: #e5f5ed;
  font-size: .68rem;
  font-weight: 900;
}

.coverage-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0b8c61;
  box-shadow: 0 0 0 4px rgba(11,140,97,.13);
}

.coverage-state-code {
  color: #1a8563;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.coverage-detail-card h3 {
  margin: 9px 0 12px;
  color: var(--navy);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  line-height: 1.03;
  letter-spacing: -.045em;
}

.coverage-detail-card > p {
  margin: 0;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.68;
}

.coverage-detail-stats {
  display: grid;
  gap: 0;
  margin: 26px 0;
  border-top: 1px solid #e0ebe6;
}

.coverage-detail-stats div {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 14px 0;
  border-bottom: 1px solid #e0ebe6;
}

.coverage-detail-stats dt {
  color: #718078;
  font-size: .72rem;
}

.coverage-detail-stats dd {
  margin: 0;
  color: #173b2e;
  text-align: right;
  font-size: .75rem;
  font-weight: 900;
}

.coverage-search-button {
  width: 100%;
  position: relative;
  z-index: 1;
  justify-content: space-between;
  margin-top: auto;
}

.coverage-search-button:disabled {
  opacity: .48;
  cursor: not-allowed;
}

.coverage-active-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  position: relative;
  z-index: 1;
  margin-top: 18px;
}

.coverage-state-chip {
  padding: 7px 9px;
  border: 1px solid #d6e5de;
  border-radius: 999px;
  color: #4b655a;
  background: #fff;
  font: inherit;
  font-size: .65rem;
  font-weight: 850;
  cursor: pointer;
}

.coverage-state-chip:hover,
.coverage-state-chip.is-selected {
  color: #fff;
  border-color: #0c7a57;
  background: #0c7a57;
}

@keyframes denue-marker-pulse {
  0% {
    transform: scale(.75);
    opacity: .7;
  }
  80%,
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

@media (max-width: 980px) {
  .coverage-heading {
    grid-template-columns: 1fr;
  }

  .coverage-summary {
    width: 100%;
  }

  .coverage-layout {
    grid-template-columns: 1fr;
  }

  .mexico-map-stage {
    min-height: 350px;
  }
}

@media (max-width: 620px) {
  .coverage-summary {
    grid-template-columns: 1fr 1fr;
  }

  .coverage-summary article {
    min-width: 0;
    padding: 15px;
  }

  .coverage-summary strong {
    font-size: 1.2rem;
  }

  .coverage-map-card {
    padding: 12px;
    border-radius: 21px;
  }

  .coverage-map-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .mexico-map-stage {
    min-height: 260px;
  }

  .denue-state-marker {
    width: 16px;
    height: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .denue-state-marker::before {
    animation: none;
  }
}


/* ===============================================================
   GUÍA DENUE, SCIAN Y REPUTACIÓN
================================================================ */

.data-guide-section {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 88px;
  background:
    radial-gradient(
      circle at 95% 3%,
      rgba(18, 114, 232, .09),
      transparent 23%
    ),
    #fff;
}

.data-guide-section::before {
  content: "";
  width: 420px;
  height: 420px;
  position: absolute;
  left: -260px;
  top: 170px;
  border: 1px solid rgba(39, 194, 211, .11);
  border-radius: 50%;
  box-shadow:
    0 0 0 55px rgba(39, 194, 211, .025),
    0 0 0 110px rgba(39, 194, 211, .015);
}

.data-guide-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 340px);
  gap: 42px;
  align-items: end;
  margin-bottom: 32px;
}

.data-guide-heading h2 {
  max-width: 850px;
  margin: 12px 0 14px;
  color: var(--navy);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 5vw, 3.45rem);
  line-height: 1.03;
  letter-spacing: -.05em;
}

.data-guide-heading p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.72;
}

.data-guide-note {
  padding: 22px;
  border: 1px solid #d9e6ee;
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      rgba(241, 248, 253, .98),
      rgba(247, 252, 250, .98)
    );
  box-shadow: 0 16px 38px rgba(7, 26, 45, .06);
}

.data-guide-note strong,
.data-guide-note span {
  display: block;
}

.data-guide-note strong {
  margin-bottom: 8px;
  color: var(--blue);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.data-guide-note span {
  color: #30495c;
  font-size: .88rem;
  font-weight: 750;
  line-height: 1.55;
}

.data-concept-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.data-concept-card {
  min-height: 540px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  scroll-margin-top: 100px;
  padding: clamp(25px, 4vw, 35px);
  border: 1px solid #dce7ed;
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 19px 48px rgba(7, 26, 45, .075);
}

.data-concept-card::after {
  content: "";
  width: 190px;
  height: 190px;
  position: absolute;
  right: -95px;
  bottom: -100px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(18, 114, 232, .10),
    transparent 67%
  );
  pointer-events: none;
}

.scian-concept::after {
  background: radial-gradient(
    circle,
    rgba(39, 194, 211, .15),
    transparent 67%
  );
}

.location-concept::after {
  background: radial-gradient(
    circle,
    rgba(173, 210, 47, .12),
    transparent 67%
  );
}

.reputation-concept::after {
  background: radial-gradient(
    circle,
    rgba(15, 138, 97, .14),
    transparent 67%
  );
}

.concept-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.concept-acronym,
.concept-source {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.concept-acronym {
  padding: 7px 11px;
  color: #fff;
  background: var(--blue);
}

.scian-concept .concept-acronym {
  background: #0a8391;
}

.location-concept .concept-acronym {
  color: #355000;
  background: #d8ef74;
}

.reputation-concept .concept-acronym {
  background: #0c7957;
}

.concept-source {
  padding: 7px 10px;
  color: #73828c;
  background: #f0f4f6;
}

.concept-icon {
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  border-radius: 17px;
  color: var(--blue);
  background: #eaf4ff;
  font-family: "Space Grotesk", sans-serif;
  font-size: .76rem;
  font-weight: 900;
}

.scian-concept .concept-icon {
  color: #087785;
  background: #e5f7f8;
}

.location-concept .concept-icon {
  color: #5b7313;
  background: #f0f7d3;
}

.reputation-concept .concept-icon {
  color: #0d7454;
  background: #e5f5ed;
}

.data-concept-card h3 {
  margin: 0 0 13px;
  color: var(--navy);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.1;
  letter-spacing: -.035em;
}

.data-concept-card > p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.72;
}

.concept-example,
.concept-code-example {
  padding: 15px 17px;
  margin-bottom: 21px;
  border: 1px solid #dce8ef;
  border-radius: 15px;
  background: #f7fafc;
}

.concept-example span,
.concept-example strong,
.concept-code-example span,
.concept-code-example strong {
  display: block;
}

.concept-example span,
.concept-code-example span {
  margin-bottom: 5px;
  color: var(--blue);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.concept-example strong,
.concept-code-example strong {
  color: #294255;
  font-size: .78rem;
  line-height: 1.45;
}

.concept-code-example {
  border-color: #d6ebed;
  background: #f0faf9;
}

.concept-code-example span {
  color: #087984;
}

.data-concept-card ul {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0 0 25px;
  list-style: none;
}

.data-concept-card li {
  position: relative;
  padding-left: 23px;
  color: #556b7b;
  font-size: .78rem;
  line-height: 1.5;
}

.data-concept-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #0c845e;
  font-weight: 950;
}

.data-concept-card > a {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
  z-index: 1;
  margin-top: auto;
  color: var(--blue);
  font-size: .79rem;
  font-weight: 900;
}

.data-concept-card > a:hover span {
  transform: translate(2px, -1px);
}

.data-concept-card > a span {
  transition: transform .2s ease;
}

.business-location-diagram {
  padding: 17px;
  margin-bottom: 21px;
  border: 1px solid #e0e9cb;
  border-radius: 16px;
  background: #fafcef;
}

.diagram-company {
  width: fit-content;
  display: block;
  padding: 8px 13px;
  margin: 0 auto;
  border-radius: 10px;
  color: #fff;
  background: #5e7617;
  font-size: .72rem;
  font-weight: 900;
}

.business-location-diagram > i {
  width: 1px;
  height: 18px;
  display: block;
  position: relative;
  margin: 0 auto;
  background: #b8c98d;
}

.business-location-diagram > i::after {
  content: "";
  width: 70%;
  height: 1px;
  position: absolute;
  left: -35%;
  bottom: 0;
  background: #b8c98d;
}

.business-location-diagram > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.business-location-diagram > div span {
  padding: 8px 5px;
  border: 1px solid #dce7c2;
  border-radius: 9px;
  color: #637047;
  background: #fff;
  text-align: center;
  font-size: .6rem;
  font-weight: 800;
}

.perspective-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 21px;
}

.perspective-mini-grid span {
  padding: 12px 5px;
  border: 1px solid #d2e8de;
  border-radius: 11px;
  color: #0c6e50;
  background: #eef8f3;
  text-align: center;
  font-size: .66rem;
  font-weight: 850;
}

.data-reading-flow {
  display: grid;
  grid-template-columns: minmax(210px, .65fr) minmax(0, 2fr);
  gap: 25px;
  align-items: center;
  margin-top: 21px;
  padding: clamp(24px, 4vw, 35px);
  border: 1px solid #d9e5ed;
  border-radius: 25px;
  color: #fff;
  background:
    radial-gradient(
      circle at 98% 10%,
      rgba(39,194,211,.18),
      transparent 25%
    ),
    linear-gradient(135deg, #061927, #0a3555);
  box-shadow: 0 21px 50px rgba(7,26,45,.13);
}

.data-flow-title span,
.data-flow-title strong {
  display: block;
}

.data-flow-title span {
  margin-bottom: 7px;
  color: #79e2e9;
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.data-flow-title strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.35rem;
  line-height: 1.17;
}

.data-reading-flow ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.data-reading-flow li {
  min-height: 120px;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 15px;
  background: rgba(255,255,255,.075);
}

.data-reading-flow li > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin-bottom: 13px;
  border-radius: 9px;
  color: #06253a;
  background: #75dce5;
  font-size: .68rem;
  font-weight: 950;
}

.data-reading-flow li strong,
.data-reading-flow li small {
  display: block;
}

.data-reading-flow li strong {
  margin-bottom: 5px;
  font-size: .78rem;
}

.data-reading-flow li small {
  color: #b9cbd7;
  font-size: .66rem;
  line-height: 1.45;
}

.data-disclaimer {
  display: grid;
  grid-template-columns: 37px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  margin-top: 17px;
  padding: 18px 20px;
  border: 1px solid #dbe6ed;
  border-radius: 17px;
  background: #f7fafc;
}

.data-disclaimer > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--blue);
  background: #e8f2fe;
  font-family: Georgia, serif;
  font-weight: 900;
}

.data-disclaimer p {
  margin: 0;
  color: #667987;
  font-size: .73rem;
  line-height: 1.62;
}

.data-disclaimer strong {
  color: #294356;
}

@media (max-width: 980px) {
  .data-guide-heading,
  .data-reading-flow {
    grid-template-columns: 1fr;
  }

  .data-reading-flow ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .data-concept-grid {
    grid-template-columns: 1fr;
  }

  .data-concept-card {
    min-height: auto;
  }
}

@media (max-width: 520px) {
  .data-reading-flow ol {
    grid-template-columns: 1fr;
  }

  .perspective-mini-grid {
    grid-template-columns: 1fr;
  }

  .business-location-diagram > div {
    grid-template-columns: 1fr;
  }

  .business-location-diagram > i,
  .business-location-diagram > i::after {
    display: none;
  }
}


/* ===============================================================
   REDES SOCIALES
================================================================ */

.nav-social-link {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  color: #1877f2 !important;
  font-weight: 850 !important;
}

.nav-social-link svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.social-follow-section {
  padding: clamp(45px, 7vw, 80px) 0;
  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(24, 119, 242, .12),
      transparent 25%
    ),
    linear-gradient(135deg, #061726, #092e50);
}

.social-follow-card {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, .8fr);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 28px;
  background: rgba(255,255,255,.07);
  box-shadow: 0 28px 70px rgba(0,0,0,.22);
}

.social-follow-visual {
  min-height: 340px;
  position: relative;
  overflow: hidden;
}

.social-follow-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 65%,
    rgba(5, 22, 37, .65)
  );
  pointer-events: none;
}

.social-follow-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.social-follow-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 5vw, 50px);
}

.social-network-label {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 8px 11px;
  border-radius: 999px;
  color: #dcecff;
  background: rgba(24,119,242,.22);
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.social-network-label svg,
.footer-social-link svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.social-follow-content h2 {
  margin: 0 0 14px;
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.social-follow-content p {
  margin: 0 0 25px;
  color: #bdcedb;
  font-size: .87rem;
  line-height: 1.7;
}

.facebook-follow-button {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px;
  border-radius: 12px;
  color: #fff;
  background: #1877f2;
  box-shadow: 0 14px 30px rgba(24,119,242,.25);
  font-size: .82rem;
  font-weight: 900;
  transition:
    transform .2s ease,
    background-color .2s ease;
}

.facebook-follow-button:hover {
  transform: translateY(-2px);
  background: #0f68db;
}

.facebook-follow-button span {
  transition: transform .2s ease;
}

.facebook-follow-button:hover span {
  transform: translate(2px, -1px);
}

.footer-social-link {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

.footer-social-link svg {
  color: #6ca9f8;
}

.footer-grid {
  grid-template-columns:
    1.3fr .7fr .7fr .65fr .65fr 1fr;
}

@media (max-width: 1100px) {
  .social-follow-card {
    grid-template-columns: 1fr;
  }

  .social-follow-visual {
    min-height: 290px;
  }

  .social-follow-visual::after {
    background: linear-gradient(
      180deg,
      transparent 68%,
      rgba(5,22,37,.66)
    );
  }

  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .nav-social-link {
    padding: 14px 5px !important;
    border-bottom: 1px solid #e6edf3;
  }
}

@media (max-width: 620px) {
  .social-follow-section {
    padding: 35px 0;
  }

  .social-follow-card {
    border-radius: 22px;
  }

  .social-follow-visual {
    min-height: 210px;
  }

  .social-follow-content {
    padding: 25px;
  }

  .facebook-follow-button {
    width: 100%;
    justify-content: center;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}


/* ===============================================================
   LOGO OFICIAL Y ANCLA REAL DE INICIO
================================================================ */

.page-top-anchor {
  width: 1px;
  height: 1px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

.brand img {
  width: min(260px, 27vw);
  height: auto;
  min-width: 205px;
}

.footer-brand > a {
  width: fit-content;
  display: inline-flex;
}

.footer-brand img {
  width: 245px;
  height: auto;
}

@media (max-width: 1100px) and (min-width: 981px) {
  .brand img {
    width: 215px;
    min-width: 190px;
  }
}

@media (max-width: 520px) {
  .brand img {
    width: 205px;
    min-width: 185px;
  }

  .footer-brand img {
    width: min(245px, 100%);
  }
}


/* ===============================================================
   PLATAFORMA YA DISPONIBLE
================================================================ */

.business-actions {
  margin-top: 26px;
}

.business-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.business-actions .btn-primary span {
  display: inline-block;
  transition: transform .2s ease;
}

.business-actions .btn-primary:hover span {
  transform: translateX(4px);
}

/* Previene que una copia parcial en caché conserve el bloque antiguo. */
#contacto,
.cta-section,
.notify-form {
  display: none !important;
}

@media (max-width: 620px) {
  .business-actions .btn-primary {
    width: 100%;
    justify-content: center;
  }
}


/* ===============================================================
   MAPA DENUE V3 — PINES REGIONALES Y TAMAÑO POR VOLUMEN
================================================================ */

.coverage-map-toolbar {
  align-items: flex-start;
}

.coverage-legend-regional {
  display: grid;
  gap: 11px;
  max-width: min(100%, 820px);
}

.coverage-region-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.coverage-region-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #50655d;
  font-size: .66rem;
  font-weight: 800;
}

.coverage-region-item i {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  display: inline-block;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--region-color);
  box-shadow: 0 0 0 3px rgba(13,72,54,.08);
}

.coverage-region-item b {
  font: inherit;
}

.coverage-size-legend {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #718078;
}

.coverage-size-legend small {
  margin-left: 3px;
  font-size: .62rem;
  font-weight: 750;
}

.size-pin {
  position: relative;
  display: inline-block;
  transform: rotate(-45deg);
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  background: #6e8190;
  box-shadow: 0 4px 10px rgba(36,58,72,.22);
}

.size-pin::after {
  content: "";
  width: 28%;
  height: 28%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
}

.size-pin-small {
  width: 17px;
  height: 17px;
}

.size-pin-large {
  width: 25px;
  height: 25px;
}

.denue-state-marker {
  --marker-size: 36px;
  --zone-color: #0e8a61;

  width: clamp(28px, var(--marker-size), 54px);
  height: clamp(28px, var(--marker-size), 54px);
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
  transition: none;
}

.denue-state-marker::before,
.denue-state-marker::after {
  content: none;
  display: none;
}

.denue-pin-shape {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  transform: rotate(-45deg);
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  background: var(--zone-color);
  box-shadow:
    0 0 0 4px rgba(5,58,42,.08),
    0 10px 20px rgba(9,53,39,.22);
  transition:
    transform .2s ease,
    filter .2s ease,
    box-shadow .2s ease;
}

.denue-pin-center {
  width: 31%;
  height: 31%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 2px rgba(6,30,48,.06);
}

.denue-pin-pulse {
  width: 68%;
  height: 68%;
  position: absolute;
  left: 50%;
  bottom: -7%;
  z-index: 1;
  transform: translateX(-50%);
  border: 2px solid var(--zone-color);
  border-radius: 50%;
  opacity: .45;
  animation: denue-pin-region-pulse 2.5s ease-out infinite;
}

.denue-pin-tooltip {
  min-width: max-content;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 13px);
  z-index: 20;
  display: grid;
  gap: 2px;
  transform: translate(-50%, 7px);
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 11px;
  color: #fff;
  text-align: left;
  background: color-mix(
    in srgb,
    var(--zone-color) 76%,
    #071a2d
  );
  box-shadow: 0 11px 28px rgba(4,27,43,.25);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity .18s ease,
    transform .18s ease;
}

.denue-pin-tooltip::after {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%) rotate(45deg);
  background: color-mix(
    in srgb,
    var(--zone-color) 76%,
    #071a2d
  );
}

.denue-pin-tooltip strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: .77rem;
  line-height: 1.15;
}

.denue-pin-tooltip small {
  color: rgba(255,255,255,.84);
  font-size: .61rem;
  font-weight: 850;
}

.denue-pin-tooltip em {
  color: #fff;
  font-size: .64rem;
  font-style: normal;
  font-weight: 800;
}

.denue-state-marker:hover,
.denue-state-marker:focus-visible,
.denue-state-marker.is-selected {
  transform: translate(-50%, -100%);
  background: transparent;
  box-shadow: none;
  z-index: 150 !important;
}

.denue-state-marker:hover .denue-pin-shape,
.denue-state-marker:focus-visible .denue-pin-shape,
.denue-state-marker.is-selected .denue-pin-shape {
  transform: rotate(-45deg) scale(1.18);
  filter: saturate(1.12) brightness(.96);
  box-shadow:
    0 0 0 7px rgba(8,58,42,.10),
    0 14px 25px rgba(9,53,39,.30);
}

.denue-state-marker:hover .denue-pin-tooltip,
.denue-state-marker:focus-visible .denue-pin-tooltip,
.denue-state-marker.is-selected .denue-pin-tooltip {
  transform: translate(-50%, 0);
  opacity: 1;
}

.denue-state-marker:focus-visible {
  outline: 3px solid rgba(18,114,232,.28);
  outline-offset: 7px;
}

.coverage-detail-card {
  --selected-region-color: #0e8a61;
}

.coverage-detail-card .coverage-status-dot {
  background: var(--selected-region-color);
  box-shadow: 0 0 0 4px rgba(11,140,97,.13);
}

.coverage-detail-card .coverage-state-code {
  color: var(--selected-region-color);
}

.coverage-detail-card .coverage-search-button {
  border-color: var(--selected-region-color);
  background: linear-gradient(
    135deg,
    color-mix(
      in srgb,
      var(--selected-region-color) 78%,
      #0b5bac
    ),
    var(--selected-region-color)
  );
}

.coverage-state-chip {
  position: relative;
  padding-left: 22px;
}

.coverage-state-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--zone-color, #0c7a57);
}

.coverage-state-chip:hover,
.coverage-state-chip.is-selected {
  color: #fff;
  border-color: var(--zone-color, #0c7a57);
  background: var(--zone-color, #0c7a57);
}

.coverage-state-chip:hover::before,
.coverage-state-chip.is-selected::before {
  background: #fff;
}

@keyframes denue-pin-region-pulse {
  0% {
    transform: translateX(-50%) scale(.48);
    opacity: .55;
  }

  78%,
  100% {
    transform: translateX(-50%) scale(1.75);
    opacity: 0;
  }
}

@media (max-width: 760px) {
  .coverage-region-legend {
    gap: 7px 10px;
  }

  .coverage-region-item {
    font-size: .61rem;
  }

  .coverage-size-legend {
    align-items: flex-start;
  }
}

@media (max-width: 620px) {
  .denue-state-marker {
    width: clamp(
      23px,
      calc(var(--marker-size) * .82),
      44px
    );
    height: clamp(
      23px,
      calc(var(--marker-size) * .82),
      44px
    );
  }

  .denue-pin-shape {
    border-width: 2px;
  }

  .denue-pin-tooltip {
    min-width: 145px;
    max-width: 190px;
    white-space: normal;
  }

  .coverage-size-legend small {
    max-width: 190px;
    line-height: 1.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .denue-pin-pulse {
    animation: none;
  }

  .denue-pin-shape,
  .denue-pin-tooltip {
    transition: none;
  }
}


/* ===============================================================
   SELECTOR MULTIESTADO V4
================================================================ */

.state-multiselect {
  position: relative;
  min-width: 0;
}

.state-multiselect-toggle {
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
  border: 0;
  color: var(--navy);
  background: transparent;
  font: inherit;
  font-size: .86rem;
  font-weight: 850;
  cursor: pointer;
}

.state-multiselect-toggle:disabled {
  opacity: .55;
  cursor: wait;
}

.state-multiselect-toggle > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.state-multiselect-toggle i {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  transform: rotate(45deg) translateY(-3px);
  border-right: 2px solid #536c82;
  border-bottom: 2px solid #536c82;
  transition: transform .18s ease;
}

.state-multiselect-toggle[aria-expanded="true"] i {
  transform: rotate(225deg) translate(-2px, -1px);
}

.state-multiselect-menu {
  width: min(430px, calc(100vw - 30px));
  max-height: min(590px, 72vh);
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 260;
  overflow: hidden;
  border: 1px solid #ccdce8;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 26px 65px rgba(7,26,45,.22);
}

.state-multiselect-menu[hidden] {
  display: none;
}

.state-multiselect-head,
.state-multiselect-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  padding: 14px 16px;
}

.state-multiselect-head {
  border-bottom: 1px solid #e2ebf2;
}

.state-multiselect-head strong {
  color: var(--navy);
  font-size: .77rem;
}

.state-close-button {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: #557087;
  background: #f0f5f8;
  font: inherit;
  font-size: 1.18rem;
  cursor: pointer;
}

.state-options-list {
  max-height: 350px;
  overflow-y: auto;
  padding: 7px;
  overscroll-behavior: contain;
}

.state-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 10px 11px;
  border-radius: 11px;
  color: var(--navy);
  cursor: pointer;
}

.state-option:hover {
  background: #f2f7fb;
}

.state-option-all {
  margin: 7px;
  border: 1px solid #dbe7ef;
  background: #f7fafc;
}

.state-option input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--blue);
  cursor: pointer;
}

.state-option span,
.state-option strong,
.state-option small {
  display: block;
  min-width: 0;
}

.state-option strong {
  font-size: .76rem;
  line-height: 1.25;
}

.state-option small {
  margin-top: 2px;
  color: #7a8ea1;
  font-size: .63rem;
  line-height: 1.3;
}

.state-multiselect-footer {
  border-top: 1px solid #e2ebf2;
  background: #f8fbfd;
}

.state-multiselect-footer > span {
  color: #60778b;
  font-size: .67rem;
  font-weight: 800;
}

.state-apply-button {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: var(--blue);
  font: inherit;
  font-size: .7rem;
  font-weight: 900;
  cursor: pointer;
}

.state-multiselect-home {
  min-width: 200px;
  align-self: stretch;
  border-left: 1px solid var(--line);
}

.state-multiselect-home .state-multiselect-menu {
  right: -3px;
}

@media (max-width: 760px) {
  .state-multiselect-home {
    width: 100%;
    min-height: 54px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .state-multiselect-home .state-multiselect-menu {
    right: auto;
    left: 0;
  }
}


/* ===============================================================
   AJUSTE V4.1 — PINES REGIONALES COMPACTOS
================================================================ */

.denue-state-marker {
  width: clamp(16px, var(--marker-size), 29px);
  height: clamp(16px, var(--marker-size), 29px);
}

.denue-pin-shape {
  border-width: 2px;
}

.denue-pin-tooltip {
  bottom: calc(100% + 9px);
}

.denue-state-marker:hover .denue-pin-shape,
.denue-state-marker:focus-visible .denue-pin-shape,
.denue-state-marker.is-selected .denue-pin-shape {
  transform: rotate(-45deg) scale(1.22);
}

@media (max-width: 620px) {
  .denue-state-marker {
    width: clamp(
      14px,
      calc(var(--marker-size) * .9),
      25px
    );
    height: clamp(
      14px,
      calc(var(--marker-size) * .9),
      25px
    );
  }
}


/* ===============================================================
   MAPA COROPLÉTICO POR ENTIDADES
================================================================ */

.choropleth-map-stage {
  min-height: 390px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(16, 121, 87, .10),
      transparent 58%
    ),
    linear-gradient(145deg, #f7fbf9, #edf5f2);
}

.mexico-state-map {
  width: 100%;
  min-height: 320px;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
}

.mexico-state-map svg {
  width: 100%;
  height: auto;
  max-height: 590px;
  display: block;
  overflow: visible;
}

.mexico-state {
  --state-fill: #e3ebe8;
  --state-zone-color: #61788b;

  fill: #e3ebe8;
  stroke: rgba(255,255,255,.96);
  stroke-width: 1.45;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    fill .24s ease,
    stroke .18s ease,
    stroke-width .18s ease,
    filter .18s ease,
    opacity .18s ease;
}

.mexico-state.is-pending {
  fill: #e5ece9;
  opacity: .68;
}

.mexico-state.is-loaded {
  fill: var(--state-fill);
  cursor: pointer;
  opacity: 1;
}

.mexico-state.is-loaded:hover,
.mexico-state.is-loaded:focus-visible {
  stroke: #082c43;
  stroke-width: 2.1;
  filter:
    brightness(.96)
    drop-shadow(0 5px 7px rgba(7, 31, 46, .18));
  outline: none;
}

.mexico-state.is-selected {
  stroke: #041e31;
  stroke-width: 2.7;
  filter:
    brightness(.91)
    drop-shadow(0 6px 8px rgba(4, 30, 49, .26));
}

.mexico-state-hit {
  fill: transparent;
  pointer-events: none;
  cursor: pointer;
}

.choropleth-tooltip {
  width: max-content;
  max-width: min(245px, calc(100% - 32px));
  position: absolute;
  z-index: 20;
  display: grid;
  gap: 3px;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 13px;
  color: #fff;
  background: rgba(5, 35, 52, .95);
  box-shadow: 0 14px 34px rgba(4, 27, 43, .25);
  pointer-events: none;
  opacity: 0;
  transform: translateY(5px);
  transition:
    opacity .16s ease,
    transform .16s ease;
}

.choropleth-tooltip[hidden] {
  display: none;
}

.choropleth-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.choropleth-tooltip strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: .82rem;
}

.choropleth-tooltip span {
  color: rgba(255,255,255,.78);
  font-size: .66rem;
  font-weight: 800;
}

.choropleth-tooltip b {
  font-size: .69rem;
}

.choropleth-tooltip small {
  color: rgba(255,255,255,.72);
  font-size: .61rem;
}

.coverage-region-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 13px;
}

.coverage-region-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #52685f;
  font-size: .66rem;
  font-weight: 800;
}

.coverage-region-item i {
  width: 10px;
  height: 10px;
  display: inline-block;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--region-color);
  box-shadow: 0 0 0 2px rgba(12, 67, 50, .08);
}

.coverage-region-item b {
  font: inherit;
}

.choropleth-intensity-legend {
  display: grid;
  grid-template-columns: auto minmax(90px, 170px) auto;
  gap: 9px;
  align-items: center;
  color: #75867e;
  font-size: .61rem;
  font-weight: 800;
}

.choropleth-intensity-legend i {
  height: 9px;
  display: block;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      #edf4f1,
      #8dbfae,
      #147d5c
    );
  box-shadow: inset 0 0 0 1px rgba(9, 70, 51, .08);
}

@media (max-width: 760px) {
  .choropleth-map-stage {
    min-height: 300px;
  }

  .mexico-state-map {
    min-height: 260px;
  }

  .coverage-region-item {
    font-size: .61rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mexico-state,
  .choropleth-tooltip {
    transition: none;
  }
}


/* ===============================================================
   PORTADA LIMPIA V5
================================================================ */

.clean-coverage-section {
  padding: 88px 0 76px;
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(18, 114, 232, .08),
      transparent 28%
    ),
    #f8fbfc;
}

.clean-coverage-layout {
  display: grid;
  grid-template-columns: minmax(310px, .78fr) minmax(0, 1.35fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.clean-coverage-copy h2,
.clean-section-heading h2,
.clean-business-panel h2 {
  margin: 14px 0 13px;
  color: var(--navy);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 4.2vw, 3.45rem);
  line-height: 1.04;
  letter-spacing: -.045em;
}

.clean-coverage-copy > p,
.clean-business-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.clean-coverage-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 0 22px;
}

.clean-coverage-stats article {
  padding: 14px;
  border: 1px solid #dce7e2;
  border-radius: 15px;
  background: rgba(255,255,255,.84);
}

.clean-coverage-stats span {
  display: block;
  margin-bottom: 6px;
  color: #75857d;
  font-size: .59rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.clean-coverage-stats strong {
  color: #0d6f51;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.07rem;
}

.compact-region-legend {
  margin-bottom: 16px;
}

.clean-map-action {
  margin-top: 24px;
}

.clean-map-card {
  margin: 0;
  padding: 18px;
  border: 1px solid #d8e5df;
  border-radius: 29px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 24px 65px rgba(8, 49, 36, .10);
}

.clean-map-card figcaption {
  padding: 11px 5px 0;
  color: #7a8a83;
  font-size: .64rem;
  text-align: center;
}

.home-choropleth-stage {
  min-height: 440px;
}

.clean-model-section {
  padding: 76px 0;
}

.clean-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 25px;
  margin-bottom: 25px;
}

.clean-section-heading h2 {
  max-width: 780px;
  margin-bottom: 0;
}

.clean-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.clean-step-card,
.clean-info-card {
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 13px 35px rgba(7, 26, 45, .055);
}

.clean-step-card > span,
.clean-info-card > span {
  color: var(--blue);
  font-size: .64rem;
  font-weight: 950;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.clean-step-card strong {
  display: block;
  margin: 13px 0 7px;
  color: var(--navy);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.18rem;
}

.clean-step-card p,
.clean-info-card p {
  margin: 0;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.6;
}

.clean-perspectives {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 18px;
  padding: 15px 17px;
  border-radius: 16px;
  color: #587084;
  background: #f1f6f9;
  font-size: .69rem;
}

.clean-perspectives span {
  margin-right: 4px;
  font-weight: 750;
}

.clean-perspectives strong {
  padding: 7px 10px;
  border-radius: 999px;
  color: #11334e;
  background: #fff;
}

.clean-institutional-section {
  padding: 76px 0;
  background: #f8fafb;
}

.clean-institutional-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

.clean-info-card h3 {
  margin: 12px 0 8px;
  color: var(--navy);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.05rem;
  line-height: 1.15;
}

.clean-business-section {
  padding: 68px 0;
}

.clean-business-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 35px;
  padding: clamp(27px, 5vw, 48px);
  border-radius: 27px;
  color: #fff;
  background:
    radial-gradient(
      circle at 88% 20%,
      rgba(21, 173, 129, .26),
      transparent 32%
    ),
    linear-gradient(135deg, #061a2d, #0b3650);
  box-shadow: 0 25px 70px rgba(4, 26, 43, .18);
}

.clean-business-panel h2,
.clean-business-panel p {
  color: #fff;
}

.clean-business-panel p {
  max-width: 700px;
  color: rgba(255,255,255,.75);
}

.clean-business-panel .eyebrow {
  color: rgba(255,255,255,.74);
}

.clean-social-strip {
  padding: 0 0 66px;
}

.clean-social-strip .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  padding: 22px 25px;
  border: 1px solid #dce6ed;
  border-radius: 19px;
  background: #fff;
}

.clean-social-strip strong,
.clean-social-strip span {
  display: block;
}

.clean-social-strip strong {
  color: var(--navy);
}

.clean-social-strip span {
  margin-top: 3px;
  color: var(--muted);
  font-size: .7rem;
}

.clean-social-strip a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  border-radius: 11px;
  color: #fff;
  background: #1877f2;
  font-size: .72rem;
  font-weight: 900;
}

@media (max-width: 980px) {
  .clean-coverage-layout {
    grid-template-columns: 1fr;
  }

  .clean-coverage-copy {
    max-width: 760px;
  }

  .clean-institutional-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-choropleth-stage {
    min-height: 360px;
  }
}

@media (max-width: 720px) {
  .clean-steps-grid,
  .clean-institutional-grid {
    grid-template-columns: 1fr;
  }

  .clean-section-heading,
  .clean-business-panel,
  .clean-social-strip .container {
    align-items: flex-start;
    flex-direction: column;
  }

  .clean-coverage-stats {
    grid-template-columns: 1fr 1fr;
  }

  .clean-coverage-stats article:last-child {
    grid-column: 1 / -1;
  }

  .clean-social-strip a,
  .clean-business-panel > a {
    width: 100%;
    justify-content: center;
  }
}


/* ===============================================================
   PORTADA V5.2 — SIN BÚSQUEDA AUTOMÁTICA
================================================================ */

.hero-clean-actions {
  margin-top: 31px;
}

.hero-clean-actions .btn {
  min-width: 185px;
}

.hero-search-note {
  max-width: 650px;
  margin: 13px 0 0;
  color: #74889b;
  font-size: .69rem;
  line-height: 1.55;
}

.clean-sources-section {
  padding: 76px 0;
  background:
    radial-gradient(
      circle at 9% 8%,
      rgba(18, 114, 232, .065),
      transparent 27%
    ),
    #fff;
}

.clean-section-intro {
  max-width: 780px;
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

.clean-sources-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.clean-source-card {
  --source-color: #1872e8;

  min-height: 245px;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 21px;
  background:
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--source-color) 5%,
        #fff
      ),
      #fff 42%
    );
  box-shadow: 0 15px 38px rgba(7, 26, 45, .055);
}

.clean-source-card.source-denue {
  --source-color: #d49a0b;
}

.clean-source-card.source-scian {
  --source-color: #14a17d;
}

.clean-source-heading {
  display: flex;
  align-items: center;
  gap: 11px;
}

.clean-source-heading strong {
  color: var(--navy);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
}

.clean-source-dot {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--source-color);
  box-shadow:
    0 0 0 6px color-mix(
      in srgb,
      var(--source-color) 12%,
      transparent
    );
}

.clean-source-card p {
  margin: 19px 0 18px;
  color: var(--muted);
  font-size: .77rem;
  line-height: 1.68;
}

.clean-source-card small {
  display: block;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid #e6edf2;
  color: color-mix(
    in srgb,
    var(--source-color) 75%,
    #354e61
  );
  font-size: .65rem;
  font-weight: 800;
  line-height: 1.5;
}

.clean-sources-note {
  margin-top: 16px;
  padding: 17px 19px;
  border: 1px solid #dce7ed;
  border-radius: 16px;
  color: #5e7486;
  background: #f6f9fb;
  font-size: .71rem;
  line-height: 1.65;
}

.clean-sources-note strong {
  color: var(--navy);
}

@media (max-width: 900px) {
  .clean-sources-grid {
    grid-template-columns: 1fr;
  }

  .clean-source-card {
    min-height: 0;
  }
}

@media (max-width: 620px) {
  .hero-clean-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-clean-actions .btn {
    width: 100%;
    min-width: 0;
  }
}

/* Metodología visual dentro de la portada */
.methodology-visual-section{padding:86px 0;background:linear-gradient(180deg,#f8fbff 0%,#fff 100%)}
.methodology-visual-head{text-align:center;max-width:900px;margin:0 auto 34px}
.methodology-visual-head .eyebrow{justify-content:center}
.methodology-visual-head h2{margin:14px 0 12px;color:var(--navy);font-family:"Space Grotesk",sans-serif;font-size:clamp(2rem,4vw,4rem);line-height:1.02}
.methodology-visual-head p{max-width:780px;margin:0 auto;color:var(--muted);font-size:1rem;line-height:1.7}
.methodology-flow{display:grid;grid-template-columns:repeat(11,minmax(0,auto));align-items:stretch;gap:8px}
.methodology-step{min-width:0;padding:20px 14px;border:1px solid #dce8f5;border-radius:22px;background:#fff;box-shadow:0 18px 45px rgba(8,36,70,.07);text-align:center}
.step-number{display:grid;place-items:center;width:36px;height:36px;margin:0 auto 15px;border-radius:50%;color:#fff;background:#0969e8;font-weight:900}
.step-icon{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 13px;border-radius:18px;color:#075fcf;background:#edf5ff;font-size:2rem;font-weight:900}
.methodology-step h3{margin:0 0 8px;color:var(--navy);font-family:"Space Grotesk",sans-serif;font-size:1rem;line-height:1.15}
.methodology-step p{margin:0;color:var(--muted);font-size:.72rem;line-height:1.55}
.flow-arrow{align-self:center;color:#1172e8;font-size:1.7rem;font-weight:900}
.methodology-subtitle{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;margin:42px 0 22px}
.methodology-subtitle span{height:2px;background:linear-gradient(90deg,transparent,#1878ef)}
.methodology-subtitle span:last-child{background:linear-gradient(90deg,#1878ef,transparent)}
.methodology-subtitle h3{margin:0;color:var(--navy);font-family:"Space Grotesk",sans-serif;font-size:1.5rem}
.perspective-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.perspective-card{display:flex;gap:16px;align-items:center;padding:22px;border:1px solid #d7e7f8;border-radius:22px;background:#f8fbff}
.perspective-icon{flex:0 0 78px;display:grid;place-items:center;width:78px;height:78px;border-radius:50%;color:#fff;background:linear-gradient(145deg,#0a72ec,#0349b8);box-shadow:0 14px 28px rgba(5,83,187,.18)}
.perspective-icon svg{width:40px;height:40px}
.perspective-card h4{margin:0 0 6px;color:var(--navy);font-size:1.1rem}
.perspective-card p{margin:0;color:var(--muted);font-size:.78rem;line-height:1.55}
.methodology-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:34px}
.methodology-panel{padding:25px;border:1px solid #dbe8f6;border-radius:24px;background:#fff;box-shadow:0 18px 45px rgba(8,36,70,.055)}
.methodology-panel-title{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.methodology-panel-title>span{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;color:#0867df;background:#edf5ff;font-size:1.35rem;font-weight:900}
.methodology-panel-title h3{margin:0;color:var(--navy);font-family:"Space Grotesk",sans-serif;font-size:1.35rem}
.index-formula{display:flex;align-items:center;justify-content:center;gap:16px;padding:18px;border-radius:18px;background:#f7faff;color:#102c49}
.index-formula>strong{font-size:1.15rem}
.formula-fraction{display:grid;text-align:center;font-size:.86rem}
.formula-fraction span:first-child{padding:0 8px 8px;border-bottom:2px solid #173b63}
.formula-fraction span:last-child{padding:8px 8px 0}
.methodology-panel>p{margin:16px 0 0;color:var(--muted);font-size:.78rem;line-height:1.6;text-align:center}
.neutrality-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.neutrality-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:118px;padding:16px 12px;border:1px solid #d8e7f7;border-radius:18px;color:#123655;background:#f9fbfe;text-align:center}
.neutrality-item svg{width:42px;height:42px;color:#1a53c9}
.neutrality-item span{display:block;font-size:.86rem;font-weight:850;line-height:1.25}
.index-level-title{margin-top:38px}
.index-levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:hidden;border-radius:18px;box-shadow:0 15px 35px rgba(8,36,70,.08)}
.level{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:90px;padding:14px;color:#fff;text-align:center}
.level strong{font-size:1.05rem}.level span{margin-top:4px;font-size:.78rem;font-weight:800}
.very-low{background:#ef3434}.low{background:#ff8a19}.medium{background:#f7bc16}.high{background:#74bf49}.very-high{background:#07984f}
.methodology-note{max-width:940px;margin:22px auto 0;padding:16px 20px;border:1px solid #d8e7f7;border-radius:16px;color:#31536f;background:#f7fbff;font-size:.82rem;line-height:1.55;text-align:center}
.methodology-link-wrap{text-align:center;margin-top:22px}
@media (max-width:1100px){.methodology-flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.perspective-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.flow-arrow{display:none}.methodology-step{min-height:220px}.neutrality-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.perspective-icon{width:68px;height:68px;flex-basis:68px}.perspective-icon svg{width:34px;height:34px}}
@media (max-width:760px){.methodology-visual-section{padding:64px 0}.methodology-flow,.perspective-grid,.methodology-detail-grid{grid-template-columns:1fr}.methodology-step{min-height:auto}.methodology-subtitle{grid-template-columns:1fr}.methodology-subtitle span{display:none}.methodology-subtitle h3{text-align:center}.index-levels{grid-template-columns:1fr;border-radius:18px}.level{min-height:68px}.neutrality-grid{grid-template-columns:1fr 1fr}.index-formula{flex-direction:column;gap:10px}.perspective-card{align-items:flex-start}.perspective-icon{width:62px;height:62px;flex-basis:62px}.perspective-icon svg{width:30px;height:30px}.neutrality-item{min-height:104px;padding:14px 10px}.neutrality-item svg{width:36px;height:36px}.neutrality-item span{font-size:.8rem}}

/* ===============================================================
   ICONOS DE LA FRANJA DE BENEFICIOS
   Se generan con CSS para no reemplazar ni alterar index.html.
================================================================ */
.proof-grid article > strong,
.proof-grid article > .proof-head strong {
  display: flex;
  align-items: center;
  gap: 13px;
}

.proof-grid article > strong::before,
.proof-grid article > .proof-head strong::before {
  content: "";
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-block;
  border-radius: 14px;
  background-color: #e9f3ff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  box-shadow: inset 0 0 0 1px rgba(10, 102, 223, .08);
}

.proof-grid article:nth-child(1) > strong::before,
.proof-grid article:nth-child(1) > .proof-head strong::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66df' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='5.5'/%3E%3Cpath d='m19 19-4.2-4.2'/%3E%3Cpath d='M8.5 10.5h4'/%3E%3Cpath d='M10.5 8.5v4'/%3E%3C/svg%3E");
}

.proof-grid article:nth-child(2) > strong::before,
.proof-grid article:nth-child(2) > .proof-head strong::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66df' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9h-9z'/%3E%3Cpath d='M14.5 3.5A9 9 0 0 1 21 10h-6.5z'/%3E%3C/svg%3E");
}

.proof-grid article:nth-child(3) > strong::before,
.proof-grid article:nth-child(3) > .proof-head strong::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66df' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M12 7h6l-2 3 2 3h-6'/%3E%3Cpath d='M12 13H6l2 3-2 3h6'/%3E%3C/svg%3E");
}

/* Evita duplicar el cuadro cuando la versión HTML ya contiene .proof-icon. */
.proof-grid .proof-head .proof-icon + strong::before {
  display: none;
}

@media (max-width: 760px) {
  .proof-grid article > strong::before,
  .proof-grid article > .proof-head strong::before {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 12px;
    background-size: 22px 22px;
  }
}

/* Tipos de organizaciones y establecimientos */
.entity-types-section{padding-top:72px;padding-bottom:72px}.entity-types-section .section-heading{max-width:780px;margin-bottom:28px}.entity-types-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.entity-types-grid article{background:rgba(255,255,255,.96);border:1px solid rgba(31,111,235,.16);border-radius:20px;padding:24px;box-shadow:0 16px 40px rgba(6,23,38,.08)}.entity-types-grid article>span{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#eaf3ff;font-size:24px;margin-bottom:16px}.entity-types-grid h3{margin:0 0 8px;color:#0a2742;font-size:1.05rem}.entity-types-grid p{margin:0;color:#5b6f82;line-height:1.6}@media(max-width:900px){.entity-types-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.entity-types-grid{grid-template-columns:1fr}}

/* App pública 2.3 */
.app-launch-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}.app-install-note{display:block;max-width:720px;margin-top:12px;color:var(--muted,#607086);line-height:1.55}.clean-business-panel .btn-secondary{border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.1);color:#fff}@media(max-width:760px){.app-launch-actions{width:100%;justify-content:stretch}.app-launch-actions .btn{flex:1 1 100%;justify-content:center}}

/* ===============================================================
   PORTADA: CINCO EMPRESAS MÁS EVALUADAS
================================================================ */
.most-evaluated-section {
  padding: 82px 0;
  background:
    radial-gradient(circle at 10% 18%, rgba(31,111,235,.08), transparent 28%),
    linear-gradient(180deg, #f8fbff, #ffffff);
  border-block: 1px solid #e3edf6;
}
.most-evaluated-heading {
  align-items: flex-end;
}
.most-evaluated-heading > p {
  max-width: 520px;
  margin: 0;
  color: #617488;
  line-height: 1.65;
}
.most-evaluated-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.most-evaluated-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 390px;
  padding: 20px;
  border: 1px solid rgba(31,111,235,.15);
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 45px rgba(6,23,38,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}
.most-evaluated-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 54px rgba(6,23,38,.13);
}
.most-evaluated-rank {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 15px;
}
.most-evaluated-rank > span:first-child {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: #eaf3ff;
  color: #125fc5;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
}
.most-evaluated-count {
  color: #5d7185;
  font-size: .72rem;
  font-weight: 800;
}
.most-evaluated-card h3 {
  min-height: 48px;
  margin: 0 0 5px;
  color: #09213a;
  font-size: 1rem;
  line-height: 1.25;
}
.most-evaluated-sector {
  min-height: 38px;
  margin: 0 0 17px;
  color: #718397;
  font-size: .74rem;
  line-height: 1.4;
}
.compact-index {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
}
.compact-index-ring {
  --compact-score: 0;
  --compact-color: #1f6feb;
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 58%, transparent 60%),
    conic-gradient(var(--compact-color) calc(var(--compact-score) * 1%), #e6edf5 0);
}
.compact-index-ring strong {
  color: #0a3159;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.45rem;
  line-height: 1;
}
.compact-index-copy span,
.compact-index-copy strong {
  display: block;
}
.compact-index-copy span {
  color: #708195;
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.compact-index-copy strong {
  margin-top: 3px;
  color: #102c48;
  font-size: .9rem;
}
.compact-perspectives {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 18px;
}
.compact-perspective {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid #e0eaf3;
  border-radius: 11px;
  background: #f8fbfe;
}
.compact-perspective span,
.compact-perspective strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compact-perspective span {
  color: #718397;
  font-size: .6rem;
  font-weight: 750;
}
.compact-perspective strong {
  margin-top: 2px;
  color: #123f70;
  font-size: .83rem;
}
.most-evaluated-card .btn {
  width: 100%;
  justify-content: center;
  margin-top: auto;
  min-height: 42px;
  font-size: .78rem;
}
.most-evaluated-actions {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}
.most-evaluated-loading,
.most-evaluated-empty {
  grid-column: 1 / -1;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 30px;
  border: 1px dashed #cbdbea;
  border-radius: 22px;
  background: #fff;
  color: #617488;
  text-align: center;
}
.loading-pulse {
  width: 42px;
  height: 42px;
  border: 4px solid #dbe8f5;
  border-top-color: #1f6feb;
  border-radius: 50%;
  animation: mostEvaluatedSpin .8s linear infinite;
}
@keyframes mostEvaluatedSpin { to { transform: rotate(360deg); } }
@media (max-width: 1180px) {
  .most-evaluated-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .most-evaluated-heading { align-items: flex-start; flex-direction: column; }
  .most-evaluated-heading > p { max-width: none; }
  .most-evaluated-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .most-evaluated-section { padding: 62px 0; }
  .most-evaluated-grid { grid-template-columns: 1fr; }
  .most-evaluated-card { min-height: 0; }
}