:root {
  --ink: #06111f;
  --navy: #0a192b;
  --navy-2: #10243a;
  --surface: #ffffff;
  --surface-2: #f4f8fb;
  --surface-3: #eaf2f7;
  --text: #142033;
  --muted: #5c6c80;
  --line: #d9e4ec;
  /* Teal de marca oscurecido para cumplir WCAG AA (4.68:1). El anterior
     (#119c91) daba 3.39:1 y afectaba a TODOS sus usos, que estan sobre fondo
     claro: enlace de idioma, kicker de seccion, tags, badge de pasos y CTA. */
  --teal: #0e8279;
  --teal-2: #16b8a7;
  --cyan: #38bdf8;
  --amber: #f6b73c;
  --red: #e85c66;
  --white: #f8fbfd;
  --shadow-sm: 0 10px 30px rgba(5, 20, 36, .08);
  --shadow-lg: 0 28px 80px rgba(4, 17, 31, .2);
  --radius: 22px;
  --container: 1240px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  margin: 0;
  color: var(--text);
  background: var(--surface);
  font-family: "Segoe UI Variable", "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button, input { font: inherit; }
code, pre { font-family: "Cascadia Code", Consolas, monospace; }
code { font-size: .9em; }
.container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 1000; top: 10px; left: 10px; transform: translateY(-150%); background: white; padding: 10px 14px; border-radius: 8px; }
.skip-link:focus { transform: none; }

.announcement { background: #071423; color: #d7e6f1; font-size: 14px; text-align: center; padding: 7px 16px; }
.announcement strong { color: #77e3d8; }
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(217,228,236,.9); backdrop-filter: blur(16px); transition:box-shadow .2s ease, background .2s ease; }
.site-header.scrolled { background:rgba(255,255,255,.98); box-shadow:0 10px 28px rgba(6,17,31,.09); }
.nav { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: max-content; }
.brand img { width: 45px; height: 45px; border-radius: 13px; box-shadow: 0 8px 22px rgba(17,156,145,.2); }
.brand-text { font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.brand-text small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 25px; color: #41526a; font-size: 15px; font-weight: 650; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--teal); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: white; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 11px 19px; border: 1px solid var(--line); border-radius: 12px; background: white; color: var(--text); font-weight: 750; font-size: 15px; cursor: pointer; transition: .2s ease; }
.btn:hover { transform: translateY(-2px); border-color: #a9bbc8; box-shadow: var(--shadow-sm); }
.btn-primary { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--teal), #0a7f91); box-shadow: 0 14px 30px rgba(14,130,121,.22); }
.btn-dark { color: #fff; border-color: #22364b; background: var(--navy); }
.btn-ghost { color: #d9e7f2; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); }
.btn-sm { min-height: 40px; padding: 8px 14px; }
.btn[aria-disabled="true"] { opacity: .65; cursor: default; transform: none; box-shadow: none; }

.hero { position: relative; overflow: hidden; color: white; padding: 78px 0 82px; background: linear-gradient(130deg, #06111f 0%, #0a1d30 53%, #08323b 100%); }
.hero::before { content:""; position:absolute; inset:0; opacity:.32; background-image: linear-gradient(rgba(56,189,248,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(56,189,248,.08) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(90deg, black, transparent 88%); }
.hero::after { content:""; position:absolute; width:680px; height:680px; right:-220px; top:-340px; border-radius:50%; background:radial-gradient(circle, rgba(22,184,167,.23), transparent 67%); }
.hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:.84fr 1.16fr; gap:56px; align-items:center; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; color:#0c776f; background:#ddf7f3; border:1px solid #bcece5; border-radius:999px; padding:7px 12px; font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.hero .eyebrow, .dark-section .eyebrow { color:#8af3e8; background:rgba(22,184,167,.12); border-color:rgba(75,225,211,.24); }
.eyebrow-dot { width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px rgba(22,184,167,.12); }
h1,h2,h3 { line-height:1.1; letter-spacing:-.04em; text-wrap:balance; }
h1 { margin:22px 0 22px; font-size:clamp(3rem,6vw,5.35rem); font-weight:820; }
h2 { margin:14px 0 18px; font-size:clamp(2rem,4.2vw,3.55rem); font-weight:800; }
h3 { margin:0 0 10px; font-size:1.25rem; }
.hero h1 em { color:#72ddd3; font-style:normal; }
.lead { max-width:66ch; margin:0; color:var(--muted); font-size:clamp(1.08rem,1.7vw,1.3rem); }
.hero .lead { color:#b9c9d8; max-width:56ch; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:31px 0 25px; }
.micro-trust { display:flex; flex-wrap:wrap; gap:9px 18px; color:#9fb2c3; font-size:14px; }
.micro-trust span::before { content:"✓"; color:#69d8cd; font-weight:900; margin-right:7px; }

.app-frame { position:relative; padding:9px; border:1px solid rgba(255,255,255,.16); border-radius:22px; background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.05)); box-shadow:0 34px 90px rgba(0,0,0,.38); transform:perspective(1500px) rotateY(-2deg) rotateX(1deg); }
.app-frame::before { content:"Demostración real · datos sintéticos"; position:absolute; z-index:2; top:-17px; right:25px; padding:7px 11px; border-radius:999px; color:#082524; background:#85eadf; font-size:12px; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.app-frame img { width:100%; aspect-ratio:1.885; object-fit:cover; object-position:top; border-radius:14px; }
.proof-float { position:absolute; right:-18px; bottom:-34px; width:224px; padding:15px 17px; border:1px solid rgba(255,255,255,.16); border-radius:16px; background:rgba(6,17,31,.94); box-shadow:var(--shadow-lg); }
.proof-float strong { display:block; font-size:1.5rem; color:#7de1d8; }
.proof-float span { color:#a8baca; font-size:13px; }

.metric-strip { border-bottom:1px solid var(--line); background:var(--surface-2); }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); }
.metric { padding:27px 22px; border-right:1px solid var(--line); }
.metric:last-child { border-right:0; }
.metric strong { display:block; color:var(--navy); font-size:1.7rem; letter-spacing:-.04em; }
.metric span { color:var(--muted); font-size:14px; }

section { padding:88px 0; }
.section-head { display:grid; grid-template-columns:1fr .75fr; gap:50px; align-items:end; margin-bottom:38px; }
.section-head p { margin:0 0 7px; color:var(--muted); }
.section-kicker { color:var(--teal); font-size:14px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.muted { color:var(--muted); }
.center { text-align:center; }
.center .lead { margin-inline:auto; }

.workflow { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.workflow-card { position:relative; min-height:238px; padding:25px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:white; box-shadow:var(--shadow-sm); }
.workflow-card .number { width:38px; height:38px; display:grid; place-items:center; margin-bottom:35px; border-radius:11px; color:white; background:var(--navy); font-weight:850; }
.workflow-card::after { content:""; position:absolute; width:130px; height:130px; right:-55px; bottom:-65px; border:22px solid rgba(17,156,145,.07); border-radius:50%; }

.showcase { background:var(--surface-2); }
.showcase-row { display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center; margin:0 0 94px; }
.showcase-row:last-child { margin-bottom:0; }
.showcase-row.reverse { grid-template-columns:.9fr 1.1fr; }
.showcase-row.reverse .shot { order:2; }
.shot { position:relative; padding:8px; border:1px solid var(--line); border-radius:20px; background:white; box-shadow:0 25px 60px rgba(7,24,42,.14); }
.shot img { border-radius:13px; }
.shot-badge { position:absolute; left:24px; bottom:22px; max-width:70%; padding:10px 13px; border-radius:11px; color:white; background:rgba(6,17,31,.9); font-size:13px; font-weight:700; backdrop-filter:blur(8px); }
.feature-list { display:grid; gap:13px; margin:25px 0; padding:0; list-style:none; }
.feature-list li { position:relative; padding-left:32px; }
.feature-list li::before { content:"✓"; position:absolute; left:0; top:2px; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; color:#087269; background:#d8f5f1; font-size:12px; font-weight:900; }

.dark-section { color:white; background:linear-gradient(135deg,#06111f,#0c2035); }
.dark-section .lead, .dark-section .muted { color:#aec0cf; }
.module-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.module-card { min-height:210px; padding:23px; border:1px solid rgba(255,255,255,.12); border-radius:18px; background:rgba(255,255,255,.05); transition:.2s ease; }
.module-card:hover { transform:translateY(-3px); border-color:rgba(88,220,208,.38); background:rgba(255,255,255,.075); }
.module-card b { display:inline-grid; place-items:center; min-width:40px; height:40px; margin-bottom:20px; padding:0 9px; border-radius:11px; color:#80e7dc; background:rgba(22,184,167,.13); font-size:12px; }
.module-card p { color:#aebfce; font-size:15px; }

.audience-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.audience-card { padding:23px; border:1px solid var(--line); border-radius:18px; background:white; }
.audience-card .tag { display:inline-block; margin-bottom:20px; color:var(--teal); font-size:12px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }

.privacy-panel { display:grid; grid-template-columns:.92fr 1.08fr; overflow:hidden; border-radius:28px; color:white; background:var(--navy); box-shadow:var(--shadow-lg); }
.privacy-copy { padding:52px; }
.privacy-points { display:grid; grid-template-columns:1fr 1fr; background:rgba(255,255,255,.04); }
.privacy-point { padding:28px; border-left:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); }
.privacy-point strong { display:block; margin-bottom:6px; color:#7fe3d9; }
.privacy-point span { color:#b5c5d3; font-size:14px; }

.comparison { overflow:auto; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-sm); }
.comparison table { width:100%; border-collapse:collapse; min-width:790px; }
.comparison th,.comparison td { padding:16px 18px; border-bottom:1px solid var(--line); text-align:left; }
.comparison th { background:var(--surface-2); color:var(--navy); font-size:14px; }
.comparison td:not(:first-child),.comparison th:not(:first-child) { text-align:center; }
.yes { color:#078278; font-weight:850; }
.partial { color:#a96b00; font-weight:750; }

.faq { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
details { border:1px solid var(--line); border-radius:16px; background:white; }
summary { cursor:pointer; padding:18px 20px; color:var(--navy); font-weight:780; list-style:none; }
summary::after { content:"+"; float:right; color:var(--teal); font-size:22px; }
details[open] summary::after { content:"−"; }
details p { margin:0; padding:0 20px 19px; color:var(--muted); }

.cta-band { padding:58px; overflow:hidden; position:relative; border-radius:28px; color:white; background:linear-gradient(120deg,#087e82,#0d526b); }
.cta-band::after { content:""; position:absolute; width:310px; height:310px; right:-80px; top:-150px; border:45px solid rgba(255,255,255,.09); border-radius:50%; }
.cta-band .lead { color:#d3f1f0; }

.page-hero { padding:72px 0 62px; color:white; background:linear-gradient(135deg,#06111f,#0b2739); }
.page-hero h1 { max-width:14ch; font-size:clamp(2.7rem,5vw,4.6rem); }
.page-hero .lead { color:#b7c8d6; }
.breadcrumb { color:#90a5b6; font-size:14px; }
.breadcrumb a:hover { color:white; }
.page-section { padding:68px 0; }
.doc-layout { display:grid; grid-template-columns:265px 1fr; gap:42px; align-items:start; }
.doc-layout > * { min-width:0; }
.toc { position:sticky; top:100px; padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--surface-2); }
.toc strong { display:block; padding:7px 10px 12px; color:var(--navy); font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.toc a { display:block; padding:8px 10px; border-radius:9px; color:var(--muted); font-size:14px; }
.toc a:hover { color:var(--teal); background:white; }
.doc-card { margin-bottom:22px; padding:30px; border:1px solid var(--line); border-radius:20px; background:white; box-shadow:0 9px 24px rgba(6,17,31,.045); }
.doc-card { min-width:0; overflow-wrap:anywhere; }
.doc-card h2 { margin-top:0; font-size:2rem; }
.doc-card h3 { margin-top:27px; }
.doc-card pre { overflow:auto; padding:18px; border-radius:13px; color:#dcecff; background:#0b1828; font-size:14px; line-height:1.55; }
.doc-card pre, .doc-card .comparison { max-width:100%; }
.callout { margin:19px 0; padding:16px 18px; border-left:4px solid var(--teal); border-radius:0 12px 12px 0; background:#e9f8f6; }
.callout.warn { border-color:var(--amber); background:#fff7e8; }
/* Listas con badge: el badge va POSICIONADO y el contenido queda en flujo
   normal. Con display:grid en el <li>, cada nodo inline (texto suelto,
   <strong>, <code>) se convertia en un item de grid independiente y caia
   en la columna estrecha del badge, partiendo el texto letra por letra. */
.task-steps { counter-reset:task; display:grid; gap:13px; padding:0; list-style:none; }
.task-steps li { counter-increment:task; position:relative; padding-left:46px; min-height:30px; }
.task-steps li::before { content:counter(task); position:absolute; left:0; top:0; width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:white; background:var(--teal); font-size:13px; font-weight:850; }
.screenshot-wide { margin:25px 0; padding:7px; border:1px solid var(--line); border-radius:17px; background:white; box-shadow:var(--shadow-sm); }
.screenshot-wide img { border-radius:11px; }
.caption { margin-top:9px; color:var(--muted); font-size:13px; text-align:center; }
.usecase-grid,.feature-page-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.usecase-card,.feature-page-card { overflow:hidden; border:1px solid var(--line); border-radius:21px; background:white; box-shadow:var(--shadow-sm); }
.usecase-card .copy,.feature-page-card .copy { padding:27px; }
.usecase-card .visual img,.feature-page-card .visual img { aspect-ratio:1.885; object-fit:cover; object-position:top; }
.keyword-chips { display:flex; flex-wrap:wrap; gap:8px; }
.keyword-chips span { padding:6px 10px; border-radius:999px; color:#476076; background:var(--surface-3); font-size:13px; }

.site-footer { padding:54px 0 28px; color:#9eb1c1; background:#05101d; }
.footer-grid { display:grid; grid-template-columns:1.5fr repeat(3,.7fr); gap:36px; }
.site-footer .brand-text { color:white; }
.site-footer h3 { color:white; font-size:14px; letter-spacing:.03em; }
.site-footer a { display:block; margin:8px 0; font-size:14px; }
.site-footer a:hover { color:#7ce2d8; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); font-size:13px; }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .55s ease,transform .55s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .reveal { opacity:1; transform:none; transition:none; } .btn:hover,.module-card:hover { transform:none; } }
@media (max-width:1050px) {
  .hero-grid,.showcase-row,.showcase-row.reverse,.privacy-panel,.section-head { grid-template-columns:1fr; }
  .showcase-row.reverse .shot { order:0; }
  .hero-grid { gap:58px; }
  .workflow,.audience-grid { grid-template-columns:1fr 1fr; }
  .module-grid { grid-template-columns:1fr 1fr; }
  .nav-links { position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column; align-items:stretch; gap:0; max-height:calc(100vh - 76px); overflow:auto; padding:18px 24px 28px; background:white; border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg); }
  .nav-links.open { display:flex; }
  .nav-links a { padding:12px; }
  .nav-toggle { display:block; }
  .doc-layout { grid-template-columns:1fr; }
  .toc { position:static; columns:2; }
}
@media (max-width:720px) {
  body { font-size:16px; }
  .container { width:min(100% - 26px,var(--container)); }
  .hero { padding:55px 0 64px; }
  h1 { font-size:clamp(2.65rem,13vw,4.2rem); }
  section { padding:64px 0; }
  .metrics,.workflow,.module-grid,.audience-grid,.faq,.usecase-grid,.feature-page-grid,.privacy-points,.footer-grid { grid-template-columns:1fr; }
  .metric { border-right:0; border-bottom:1px solid var(--line); }
  .app-frame { transform:none; }
  .proof-float { position:static; width:auto; margin:10px 0 0; }
  .showcase-row { gap:28px; margin-bottom:70px; }
  .privacy-copy,.cta-band { padding:31px 24px; }
  .toc { columns:1; }
  .doc-card { padding:23px; }
  .footer-bottom { flex-direction:column; }
  .brand-text small { display:none; }
}

/* la insignia del marco usa el idioma de la página */
[lang="en"] .app-frame::before { content: "Live demo · synthetic data"; }

/* Accesibilidad de teclado: anillo de foco visible y consistente. Sin esto, quien
   navega con Tab no sabe donde esta (el outline por defecto se pierde con los
   estilos propios de botones y enlaces). :focus-visible no molesta al usuario de
   raton, que es por lo que se suele quitar el outline. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible { outline-offset: 4px; }

/* Revisión ejecutiva 4.60.3: contraste, descarga segura y guías prácticas. */
.nav-links a.btn.btn-primary,
.nav-links a.btn.btn-primary:hover,
.nav-links a.btn.btn-primary[aria-current="page"] { color:#fff; }
.page-hero .muted { color:#b7c8d6; }
.page-hero .muted a { color:#91eee5; text-decoration:underline; text-underline-offset:3px; }
.page-hero .muted code { color:#e7f4fb; }
.download-hero-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(340px,.75fr); gap:42px; align-items:center; }
.download-hero-grid h1 { max-width:13ch; }
.security-alert { padding:24px; border:1px solid rgba(122,226,216,.28); border-radius:20px; background:rgba(255,255,255,.075); box-shadow:0 22px 50px rgba(0,0,0,.18); }
.security-alert .alert-label { display:inline-flex; align-items:center; gap:8px; margin-bottom:10px; color:#98f3e9; font-size:13px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.security-alert h2 { margin:0 0 12px; font-size:clamp(1.55rem,3vw,2.2rem); }
.security-alert p { margin:0 0 14px; color:#c4d4df; }
.security-alert ul { display:grid; gap:9px; margin:0; padding-left:20px; color:#d9e7ef; }
.security-alert a { color:#92eee5; }
.trust-row { display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
.trust-pill { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid rgba(255,255,255,.15); border-radius:999px; color:#d9e8ef; background:rgba(255,255,255,.06); font-size:12px; font-weight:750; }
.security-guide { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:34px; align-items:start; }
.security-guide figure { margin:0; padding:8px; border:1px solid var(--line); border-radius:22px; background:white; box-shadow:var(--shadow-lg); }
.security-guide figure img { width:100%; border-radius:15px; }
.security-guide .caption { padding:0 10px 6px; text-align:left; }
.security-steps { display:grid; gap:14px; margin:0; padding:0; list-style:none; counter-reset:security-step; }
.security-steps li { counter-increment:security-step; position:relative; min-height:54px; padding:14px 14px 14px 62px; border:1px solid var(--line); border-radius:15px; background:white; }
.security-steps li::before { content:counter(security-step); position:absolute; left:14px; top:13px; width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:white; background:var(--teal); font-weight:850; }
.security-steps strong { display:block; color:var(--navy); }
.safety-note { margin-top:16px; padding:15px 17px; border-left:4px solid #b56b00; border-radius:0 12px 12px 0; color:#5f3b00; background:#fff5df; }
.download-facts { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.download-fact { padding:20px; border:1px solid var(--line); border-radius:16px; background:white; }
.download-fact strong { display:block; margin-bottom:5px; color:var(--navy); }
.download-fact span { color:var(--muted); font-size:14px; }
.case-playbook { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.case-guide { padding:28px; border:1px solid var(--line); border-radius:21px; background:white; box-shadow:var(--shadow-sm); }
.case-guide h2 { margin:8px 0 10px; font-size:clamp(1.55rem,3vw,2.25rem); }
.case-guide .outcome { margin:17px 0 0; padding:12px 14px; border-radius:12px; color:#0a514b; background:#e6f7f4; }
.case-guide .task-steps { margin-top:18px; }
.case-guide .manual-link { display:inline-block; margin-top:16px; color:var(--teal); font-weight:780; }
.module-index { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:34px; }
.module-index a { padding:15px 16px; border:1px solid var(--line); border-radius:14px; color:var(--navy); background:white; font-weight:750; box-shadow:var(--shadow-sm); }
.module-index a:hover { color:var(--teal); border-color:#a5dcd5; transform:translateY(-1px); }
.donation-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.65fr); gap:42px; align-items:center; }
.donation-box { padding:25px; border:1px solid rgba(255,255,255,.18); border-radius:20px; background:rgba(255,255,255,.075); }
.donation-box p { color:#c5d5df; }
.donation-impact { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.impact-card { padding:25px; border:1px solid var(--line); border-radius:18px; background:white; box-shadow:var(--shadow-sm); }
.impact-card .number { display:inline-grid; place-items:center; min-width:42px; height:42px; margin-bottom:20px; padding:0 10px; border-radius:12px; color:white; background:var(--navy); font-weight:850; }
.payment-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:28px; }
.payment-card { padding:26px; border:1px solid var(--line); border-radius:20px; background:white; box-shadow:var(--shadow-sm); }
.payment-value { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:14px 0; }
.payment-value strong { color:var(--navy); font-size:1.45rem; letter-spacing:.02em; }
.legal-free { padding:22px; border:1px solid #bfe5df; border-radius:16px; color:#0b504b; background:#e9f8f6; }
.link-cluster { display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:18px; }
.link-cluster a { color:var(--teal); font-weight:750; text-decoration:underline; text-underline-offset:3px; }

@media (max-width:1050px) {
  .download-hero-grid,.security-guide,.donation-hero { grid-template-columns:1fr; }
  .download-facts,.module-index,.donation-impact { grid-template-columns:1fr 1fr; }
}
@media (max-width:720px) {
  .download-facts,.case-playbook,.module-index,.donation-impact,.payment-grid { grid-template-columns:1fr; }
  .security-alert,.case-guide,.payment-card { padding:21px; }
  .security-guide { gap:22px; }
}

/* Impresion: el manual y las licencias se imprimen o se guardan como PDF. Se
   ocultan cromos de navegacion, se aplana el color y se evita cortar bloques. */
@media print {
  .site-header, .site-footer, .toc, .hero-visual, .btn, .cta-band { display: none !important; }
  * { background: transparent !important; color: #000 !important; box-shadow: none !important; }
  a { text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; word-break: break-all; }
  pre, blockquote, .callout, .doc-card, figure, table { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  body { font-size: 11pt; }
  @page { margin: 16mm; }
}