/* =========================================================
   MACA — Sistema visual
   Paleta tomada de la marca MERA / MACA (degradados aqua → violeta → rosa)
   ========================================================= */
:root {
  --aqua: #12f2d4;
  --teal: #4ff9dd;
  --cyan: #00d1f0;
  --blue: #5f8fe0;
  --violet: #6848db;
  --violet-600: #5635c9;
  --lilac: #a77bf5;
  --pink: #d578d0;

  --ink: #1b1537;
  --ink-2: #463f66;
  --muted: #6a6488;
  --line: rgba(27, 21, 55, .10);
  --bg: #f7f6fc;
  --bg-2: #efedf9;
  --card: #ffffff;
  --night: #120e2a;
  --night-2: #1c1740;

  /* Superficies y relleno sólido: el modo oscuro (html[data-tema="oscuro"]) redefine estos tokens */
  --violet-solid: #6848db;            /* fondo violeta con texto blanco: igual en ambos modos */
  --field: #faf9fe;
  --field-line: #dcd8ee;
  --glass: rgba(255, 255, 255, .92);
  --glass-soft: rgba(255, 255, 255, .88);
  --glass-line: rgba(255, 255, 255, .9);
  --ghost-bg: rgba(255, 255, 255, .85);
  --header-bg: rgba(247, 246, 252, .78);
  --menu-bg: rgba(247, 246, 252, .99);
  --bg-0: rgba(247, 246, 252, 0);

  --grad: linear-gradient(115deg, var(--aqua) 0%, var(--cyan) 28%, var(--violet) 68%, var(--pink) 100%);
  --grad-soft: linear-gradient(160deg, #4ff9dd 0%, #62b7e0 45%, #6848db 100%);
  --grad-story: linear-gradient(180deg, #4ff9dd 0%, #6a8fe0 55%, #6848db 100%);
  --grad-pink: linear-gradient(180deg, #00d1f0 0%, #6f7fe0 55%, #c77ad3 100%);
  /* versiones con contraste suficiente para texto blanco / texto sobre fondo claro */
  --grad-btn: linear-gradient(115deg, #3f5fe0 0%, #6848db 50%, #9d55d2 100%);
  --grad-ink: linear-gradient(115deg, #0891b2 0%, #5b3fd6 55%, #b34fb0 100%);
  --grad-band: linear-gradient(125deg, #2f2a9e 0%, #5635c9 40%, #7d45d0 70%, #b153b8 100%);

  --radius: 22px;
  --radius-lg: 34px;
  --shadow: 0 20px 50px -24px rgba(56, 34, 150, .35);
  --shadow-lg: 0 40px 90px -40px rgba(56, 34, 150, .55);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --container: 1160px;

  --f-display: "Outfit", system-ui, sans-serif;
  --f-body: "Figtree", system-ui, sans-serif;
}

/* Tamaño de texto ajustable (botón A+ del menú) */
html { font-size: 100%; scroll-behavior: smooth; }
html[data-text="lg"] { font-size: 112.5%; }
html[data-text="xl"] { font-size: 125%; }

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-display); line-height: 1.15; margin: 0; letter-spacing: -.015em; font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }
p { margin: 0; }
::selection { background: var(--violet-solid); color: #fff; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 8px; }

.container { width: min(var(--container), 100% - 96px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--violet-solid); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 999; }
.skip:focus { left: 12px; }

/* ---------- Tipografía utilitaria ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--f-display); font-weight: 600; font-size: .78rem;
  letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; color: var(--violet);
}
.eyebrow::before { content: ""; width: 28px; height: 3px; border-radius: 3px; background: var(--grad); }
.on-dark .eyebrow { color: var(--teal); }
.grad-text {
  background: var(--grad-ink); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead { font-size: 1.125rem; line-height: 1.7; color: var(--ink-2); max-width: 56ch; }
.muted { color: var(--muted); }
.h-xl { font-size: clamp(2.1rem, 3.9vw, 3.5rem); line-height: 1.1; }
.h-lg { font-size: clamp(1.75rem, 2.9vw, 2.6rem); }
.h-md { font-size: clamp(1.35rem, 2vw, 1.75rem); }
.section-head { display: grid; gap: 16px; margin-bottom: 48px; max-width: 680px; }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }

/* ---------- Botones ---------- */
.btn {
  --bg-btn: var(--violet-solid);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 0 24px; border-radius: 999px; border: 0;
  font: 600 1rem/1 var(--f-display); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  color: #fff; background: var(--bg-btn);
  box-shadow: 0 10px 24px -16px rgba(104, 72, 219, .75);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
}
.btn::before { /* barrido de brillo */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .8s var(--ease);
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 18px 32px -18px rgba(104, 72, 219, .85); }
.btn:hover::before { transform: translateX(120%); }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
.btn-grad { background: var(--grad-btn); }
.btn-ghost { background: var(--ghost-bg); color: var(--violet); box-shadow: inset 0 0 0 2px rgba(104,72,219,.25); }
.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--violet), 0 18px 30px -18px rgba(104,72,219,.6); }
.btn-light { background: #fff; color: var(--violet); }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: .95rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
/* Botón de una función que todavía no está disponible: no es enlace ni reacciona al pasar el mouse */
.hero-nota { margin-top: 16px; font-size: .95rem; color: var(--muted); }
.link-arrow { display: inline-flex; align-items: center; gap: .45em; font-weight: 700; color: var(--violet); text-decoration: none; font-family: var(--f-display); }
.link-arrow svg { width: 1.1em; transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }
.on-dark .link-arrow { color: var(--teal); }

/* =========================================================
   HEADER + MENÚ (forma: Inicio / Servicios ▾ → panel → sub-panel / CTA)
   ========================================================= */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  transition: background .4s, box-shadow .4s, backdrop-filter .4s;
}
.site-header.scrolled {
  background: var(--header-bg);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -30px rgba(56,34,150,.4);
}
.nav { display: flex; align-items: center; gap: 20px; height: 80px; transition: height .4s; }
.scrolled .nav { height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand-logo { width: 140px; height: auto; transition: width .4s var(--ease); }
.scrolled .brand-logo { width: 128px; }
.brand-logo.logo-oscuro { display: none; }

.nav-links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 10px; border-radius: 999px; border: 0; background: none; cursor: pointer;
  font: 600 .94rem/1 var(--f-display); color: var(--ink); text-decoration: none;
  transition: color .25s, background .25s;
}
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--violet); background: rgba(104,72,219,.08); }
.nav-link.is-active { color: var(--violet); }
.nav-link.is-active::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 3px; height: 3px; border-radius: 3px; background: var(--grad);
}
.chev { width: 16px; height: 16px; transition: transform .3s var(--ease); }
[aria-expanded="true"] > .chev { transform: rotate(180deg); }

/* Menú desplegable en cascada */
.has-menu { position: relative; }
.mega {
  position: absolute; top: calc(100% + 14px); left: -12px;
  display: flex; align-items: flex-start; gap: 10px;
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98); transform-origin: top left;
  transition: opacity .3s var(--ease), transform .35s var(--ease), visibility .3s;
}
.has-menu.open .mega { opacity: 1; visibility: visible; transform: none; }
.menu-panel {
  min-width: 250px; padding: 12px; border-radius: 20px;
  background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(104,72,219,.14);
  box-shadow: var(--shadow-lg);
  list-style: none; margin: 0;
}
.menu-panel li + li { margin-top: 4px; }
.menu-row {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 16px; border-radius: 14px; border: 0; background: none; cursor: pointer; text-align: left;
  font: 600 1.05rem/1.2 var(--f-display); color: var(--ink); text-decoration: none;
  transition: background .25s, color .25s;
}
.menu-row .ico {
  width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: var(--grad-story);
}
.menu-row .ico img { width: 24px; }
.menu-row .lbl { display: flex; align-items: center; gap: 12px; }
.menu-row:hover, .menu-row[aria-expanded="true"], .menu-row:focus-visible { background: rgba(104,72,219,.08); color: var(--violet); }
.menu-row .chev { transform: rotate(-90deg); }
.menu-row[aria-expanded="true"] .chev { transform: rotate(-90deg) translateY(3px); }
.sub-panel { display: none; margin-top: 20px; min-width: 330px; }
.sub-panel.show { display: block; animation: slideIn .35s var(--ease); }
@keyframes slideIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.menu-row > span:first-child:not(.lbl) { display: block; }
.sub-panel .menu-row { font-weight: 500; color: var(--violet-600); padding: 15px 16px; }
.sub-panel .menu-row small { display: block; font: 400 .85rem/1.3 var(--f-body); color: var(--muted); margin-top: 3px; }
.badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px; font: 700 .7rem/1.2 var(--f-display);
  letter-spacing: .08em; text-transform: uppercase; color: var(--violet); background: rgba(104,72,219,.1);
}
.menu-row.is-soon { cursor: default; opacity: .75; }
.menu-row.is-soon:hover { background: none; color: var(--violet-600); }

.nav-tools { display: flex; align-items: center; gap: 10px; }
.nav-tools .btn { white-space: nowrap; }
.nav-tools .btn-sm { padding: 0 18px; }
.text-size {
  display: inline-flex; align-items: center; height: 44px; border-radius: 999px; padding: 4px;
  background: rgba(104,72,219,.08);
}
.text-size button {
  width: 40px; height: 38px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 700 1rem/1 var(--f-display); color: var(--violet);
}
.text-size button:last-child { font-size: 1.2rem; }
.text-size button[aria-pressed="true"] { background: var(--card); box-shadow: 0 4px 12px -6px rgba(104,72,219,.6); }
/* Ajustes de lectura: tamaño del texto (A / A+) y modo oscuro en una sola píldora */
.ajustes { display: inline-flex; align-items: center; height: 44px; padding: 4px; border-radius: 999px; background: rgba(104,72,219,.08); }
.ajustes .text-size { height: auto; padding: 0; background: none; }
.tema-btn {
  position: relative; display: grid; place-items: center; width: 40px; height: 36px; margin-left: 5px;
  border: 0; border-radius: 999px; background: none; color: var(--violet); cursor: pointer; transition: background .25s, color .25s;
}
.tema-btn::before { content: ""; position: absolute; left: -3px; top: 9px; bottom: 9px; width: 1px; background: rgba(104,72,219,.22); }
.tema-btn:hover { background: rgba(104,72,219,.1); }
.tema-btn svg { width: 20px; height: 20px; }
.tema-btn .ico-sol { display: none; }

.burger { display: none; width: 52px; height: 52px; border: 0; border-radius: 16px; background: rgba(104,72,219,.1); cursor: pointer; place-items: center; }
.burger span, .burger span::before, .burger span::after { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: var(--violet); position: relative; transition: transform .35s var(--ease), background .2s; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -7px; } .burger span::after { top: 7px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

/* Menú móvil */
.mobile-menu {
  position: fixed; inset: 74px 0 0; z-index: 99; overflow-y: auto;
  background: var(--menu-bg);
  padding: 20px 20px 40px;
  clip-path: circle(0 at calc(100% - 44px) -30px); visibility: hidden;
  transition: clip-path .6s var(--ease), visibility .6s;
}
.mobile-menu.open { clip-path: circle(150% at calc(100% - 44px) -30px); visibility: visible; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.m-link, .m-acc {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 18px 8px; border: 0; border-bottom: 1px solid var(--line); background: none;
  font: 600 1.35rem/1.2 var(--f-display); color: var(--ink); text-decoration: none; text-align: left; cursor: pointer;
}
.m-acc .chev { width: 22px; height: 22px; }
.m-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.m-sub > div { overflow: hidden; }
.m-sub.open { grid-template-rows: 1fr; }
.m-sub .m-link { font-size: 1.12rem; font-weight: 500; padding-left: 22px; color: var(--violet-600); }
.m-sub .m-sub .m-link { padding-left: 38px; font-size: 1.05rem; }
.mobile-menu .btn { width: 100%; margin-top: 26px; }
.mobile-menu .btn + .btn { margin-top: 12px; }
.mobile-menu .ajustes { margin-top: 22px; }

/* =========================================================
   AURA (fondos con degradado difuso, inspirado en referencias)
   ========================================================= */
.aura { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.blob { position: absolute; opacity: .75; will-change: transform; }
.blob.b1 { width: 46vw; height: 46vw; max-width: 680px; max-height: 680px; background: radial-gradient(closest-side, rgba(79, 249, 221, 1) 0%, rgba(79, 249, 221, 0.82) 18%, rgba(79, 249, 221, 0.6) 35%, rgba(79, 249, 221, 0.38) 52%, rgba(79, 249, 221, 0.2) 68%, rgba(79, 249, 221, 0.08) 82%, rgba(79, 249, 221, 0.025) 92%, rgba(79, 249, 221, 0) 100%); top: -12%; right: 8%; animation: drift1 18s ease-in-out infinite; }
.blob.b2 { width: 38vw; height: 38vw; max-width: 560px; max-height: 560px; background: radial-gradient(closest-side, rgba(104, 72, 219, 1) 0%, rgba(104, 72, 219, 0.82) 18%, rgba(104, 72, 219, 0.6) 35%, rgba(104, 72, 219, 0.38) 52%, rgba(104, 72, 219, 0.2) 68%, rgba(104, 72, 219, 0.08) 82%, rgba(104, 72, 219, 0.025) 92%, rgba(104, 72, 219, 0) 100%); top: 30%; right: -6%; opacity: .55; animation: drift2 22s ease-in-out infinite; }
.blob.b3 { width: 30vw; height: 30vw; max-width: 460px; max-height: 460px; background: radial-gradient(closest-side, rgba(213, 120, 208, 1) 0%, rgba(213, 120, 208, 0.82) 18%, rgba(213, 120, 208, 0.6) 35%, rgba(213, 120, 208, 0.38) 52%, rgba(213, 120, 208, 0.2) 68%, rgba(213, 120, 208, 0.08) 82%, rgba(213, 120, 208, 0.025) 92%, rgba(213, 120, 208, 0) 100%); bottom: -10%; left: 30%; opacity: .45; animation: drift3 20s ease-in-out infinite; }
.blob.b4 { width: 26vw; height: 26vw; max-width: 400px; max-height: 400px; background: radial-gradient(closest-side, rgba(0, 209, 240, 1) 0%, rgba(0, 209, 240, 0.82) 18%, rgba(0, 209, 240, 0.6) 35%, rgba(0, 209, 240, 0.38) 52%, rgba(0, 209, 240, 0.2) 68%, rgba(0, 209, 240, 0.08) 82%, rgba(0, 209, 240, 0.025) 92%, rgba(0, 209, 240, 0) 100%); top: 12%; left: -8%; opacity: .35; animation: drift2 24s ease-in-out infinite reverse; }
.ribbon { position: absolute; width: 140%; left: -20%; top: 8%; height: 90%; opacity: .9; }
.ribbon path { fill: none; stroke-linecap: round; }
.ribbon .r-glow { stroke-width: 46; filter: blur(22px); opacity: .45; }
.ribbon .r-line { stroke-width: 1.6; opacity: .6; stroke-dasharray: 2600; stroke-dashoffset: 2600; animation: draw 4.5s var(--ease) .3s forwards; }
.grain::after {
  content: ""; position: absolute; inset: 0; opacity: .035; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   HERO (inicio)
   ========================================================= */
.hero { position: relative; min-height: min(100svh, 920px); padding: 128px 0 72px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: var(--bg); }
.hero .container { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.hero h1 { margin: 20px 0 22px; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.08; }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero h1 .line > span { display: inline-block; transform: translateY(105%); animation: rise 1s var(--ease) forwards; }
.hero h1 .line:nth-child(2) > span { animation-delay: .12s; }
.hero h1 .line:nth-child(3) > span { animation-delay: .24s; }
.hero .lead { margin-bottom: 32px; max-width: 46ch; }
.hero-fade { opacity: 0; animation: fadeUp .9s var(--ease) .55s forwards; }

.orb-stage { position: relative; aspect-ratio: 1; width: min(100%, 480px); margin-inline: auto; }
.orb { /* halo suave detrás de la foto */
  position: absolute; inset: -6%; z-index: 0;
  background: radial-gradient(closest-side at 38% 40%, rgba(79, 249, 221, 0.55) 0%, rgba(79, 249, 221, 0.451) 18%, rgba(79, 249, 221, 0.33) 35%, rgba(79, 249, 221, 0.209) 52%, rgba(79, 249, 221, 0.11) 68%, rgba(79, 249, 221, 0.044) 82%, rgba(79, 249, 221, 0.014) 92%, rgba(79, 249, 221, 0) 100%),
              radial-gradient(closest-side at 64% 62%, rgba(104, 72, 219, 0.4) 0%, rgba(104, 72, 219, 0.328) 18%, rgba(104, 72, 219, 0.24) 35%, rgba(104, 72, 219, 0.152) 52%, rgba(104, 72, 219, 0.08) 68%, rgba(104, 72, 219, 0.032) 82%, rgba(104, 72, 219, 0.01) 92%, rgba(104, 72, 219, 0) 100%);
  opacity: .9;
}
.orb-photo { -webkit-mask-image: linear-gradient(#000 78%, transparent 96%); mask-image: linear-gradient(#000 78%, transparent 96%); }
.orb-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; max-width: none; z-index: 2; }
.float-card {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px 10px 10px; border-radius: 16px; max-width: 220px;
  background: var(--glass);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow);
  font: 600 .88rem/1.25 var(--f-display); color: var(--ink);
  animation: bob 6s ease-in-out infinite;
}
.float-card small { display: block; font: 500 .74rem/1.3 var(--f-body); color: var(--muted); }
.float-card .ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--grad-story); flex: none; }
.float-card .ico img { width: 21px; }
.float-card.fc1 { left: -6%; top: 6%; }
.float-card.fc2 { right: -6%; bottom: 4%; animation-delay: -2s; }
.float-card.fc3 { display: none; }
.pulse-dot { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #1bd99a; }
.pulse-dot::after, .country i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: ringPulse 2.2s ease-out infinite; }
.pulse-dot { color: rgba(27,217,154,.7); }

.hero-stats {
  position: relative; z-index: 3; margin-top: 72px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-radius: 26px; background: var(--glass-soft);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow);
}
.stat { padding: 24px 26px; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat b { display: block; font: 600 clamp(1.6rem, 2.4vw, 2.1rem)/1 var(--f-display); letter-spacing: -.03em; }
.stat b .grad-text { animation: none; }
.stat > span { display: block; margin-top: 10px; font-size: .88rem; line-height: 1.45; color: var(--ink-2); }
.scroll-cue { position: absolute; z-index: 2; left: 50%; bottom: 18px; translate: -50% 0; width: 28px; height: 44px; border: 2px solid rgba(104,72,219,.35); border-radius: 20px; }
.scroll-cue::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: var(--violet); animation: cue 1.8s ease-in-out infinite; }

/* ---------- Page hero (páginas internas) ---------- */
.page-hero { position: relative; padding: 150px 0 88px; overflow: hidden; background: var(--bg); }
.page-hero .container { position: relative; z-index: 2; }
.page-hero .blob.b1 { right: -8%; top: -18%; }
.page-hero .blob.b3 { left: auto; right: 22%; bottom: 4%; opacity: .45; }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.page-hero h1 { margin: 18px 0 20px; font-size: clamp(2rem, 3.6vw, 3.2rem); }
.crumbs { display: flex; gap: 8px; font-size: .92rem; color: var(--muted); margin-bottom: 8px; }
.crumbs a { color: var(--violet); text-decoration: none; }
.hero-icon {
  position: relative; width: min(100%, 300px); aspect-ratio: 1; margin-inline: auto; border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%;
  background: var(--grad-story); display: grid; place-items: center; box-shadow: var(--shadow-lg);
}
.hero-icon.alt { background: var(--grad-pink); }
.hero-icon img { width: 48%; filter: drop-shadow(0 12px 20px rgba(27,21,55,.25)); animation: bob 6s ease-in-out infinite; }
.hero-icon::before { content: ""; position: absolute; inset: -18px; border-radius: inherit; border: 2px dashed rgba(104,72,219,.25); animation: spin 40s linear infinite; }

/* =========================================================
   SECCIONES
   ========================================================= */
.section { position: relative; padding: clamp(80px, 9vw, 128px) 0; }
.section.tight { padding: clamp(48px, 6vw, 80px) 0; }
.section.alt { background: var(--bg-2); }
.on-dark { background: var(--night); color: #ecebf7; overflow: hidden; }
.on-dark .lead, .on-dark .muted { color: #b9b4d8; }
.on-dark .grid-bg {
  position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
}
.on-dark .blob { opacity: .35; }
.on-dark .container { position: relative; z-index: 1; }

/* Trust marquee */
.trust { position: relative; z-index: 2; padding: 20px 0 40px; background: var(--bg); }
.trust-title { text-align: center; font: 600 .82rem/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 70px; width: max-content; animation: marquee 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track { align-items: center; }
.logo-img { height: 38px; width: auto; max-width: 190px; object-fit: contain; filter: grayscale(1); opacity: .6; transition: filter .4s, opacity .4s, transform .4s var(--ease); }
.logo-img:hover { filter: none; opacity: 1; transform: scale(1.06); }
.marquee.reverse .marquee-track { animation-direction: reverse; }
.logo-img.logo-blanco { display: none; }
.marquee + .marquee { margin-top: 26px; }

/* Explorador de productos (ventana de navegador) */
.browser {
  border-radius: 28px; overflow: hidden; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 50px 100px -40px rgba(0,0,0,.7);
}
.browser-bar { display: flex; align-items: center; gap: 8px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.browser-bar i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.2); }
.browser-bar i:nth-child(1) { background: #ff7a8a; } .browser-bar i:nth-child(2) { background: #ffd36e; } .browser-bar i:nth-child(3) { background: #5ee6b0; }
.browser-bar .url { margin-left: 16px; padding: 7px 18px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: .9rem; color: #b9b4d8; font-family: ui-monospace, monospace; }
.p-tabs { display: flex; gap: 8px; padding: 18px 20px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgba(255,255,255,.08); }
.p-tabs::-webkit-scrollbar { display: none; }
.p-tab {
  flex: none; padding: 11px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85); font: 600 .92rem/1 var(--f-display); cursor: pointer; transition: all .3s var(--ease);
}
.p-tab:hover { background: rgba(255,255,255,.12); color: #fff; }
.p-tab[aria-selected="true"] { background: #fff; color: var(--ink); border-color: #fff; box-shadow: 0 10px 24px -10px rgba(79,249,221,.6); }
.p-tab .badge { background: rgba(79,249,221,.18); color: var(--teal); margin-left: 4px; }
.p-tab[aria-selected="true"] .badge { background: rgba(104,72,219,.12); color: var(--violet); }
.p-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding: 48px; }
.p-panel[hidden] { display: none; }
.p-panel.enter .p-main { animation: fadeUp .6s var(--ease); }
.p-panel.enter .p-feats li { animation: fadeUp .6s var(--ease) both; animation-delay: var(--d); }
.p-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; font: 600 .82rem/1.3 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.p-kicker .ico-tile { width: 54px; height: 54px; border-radius: 16px; }
.p-kicker .ico-tile img { width: 30px; }
.status { padding: 6px 12px; border-radius: 999px; background: rgba(213,120,208,.18); color: #f0b3ec; letter-spacing: .06em; }
.status.ok { background: rgba(27,217,154,.16); color: #5ef0bd; }
.p-main h3 { font-size: clamp(1.5rem, 2.3vw, 2rem); color: #fff; margin: 22px 0 14px; }
.p-main p { color: #d2cdec; margin-bottom: 30px; font-size: 1rem; max-width: 52ch; }
.p-main .btn-row { align-items: center; gap: 22px; }
.p-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: center; }
.p-feats li {
  padding: 22px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  transition: background .3s, transform .4s var(--ease);
}
.p-feats li:hover { background: rgba(255,255,255,.1); transform: translateY(-3px); }
.p-feats b { display: block; font: 600 1rem/1.25 var(--f-display); color: #fff; margin-bottom: 6px; }
.p-feats b::before { content: ""; display: block; width: 26px; height: 4px; border-radius: 4px; background: var(--grad); margin-bottom: 14px; }
.p-feats span { font-size: .92rem; color: #c9c4e6; line-height: 1.5; }
/* versión clara del explorador */
.light .browser { background: var(--card); border-color: var(--line); box-shadow: var(--shadow-lg); }
.light .browser-bar, .light .p-tabs { border-color: var(--line); }
.light .browser-bar .url { background: var(--bg-2); color: var(--muted); }
.light .p-tab { background: var(--bg); border-color: var(--line); color: var(--ink-2); }
.light .p-tab[aria-selected="true"] { background: var(--violet-solid); color: #fff; border-color: var(--violet-solid); }

/* Detalle de producto */
.detail-card { min-height: 0; justify-content: center; gap: 16px; padding: 32px; }
.detail-card .mock, .detail-card .call { margin: 0; }
.d-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.d-feats li { padding: 18px; border-radius: 18px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); }
.d-feats b { display: block; font: 600 1rem/1.25 var(--f-display); margin-bottom: 4px; }
.d-feats span { font-size: .9rem; line-height: 1.45; opacity: .95; }
.light-status { background: rgba(104,72,219,.1); color: var(--violet); }
.section + .section.detail { padding-top: 40px; }
.price-card { position: relative; overflow: hidden; padding: 40px; border-radius: var(--radius-lg); background: var(--night); color: #fff; box-shadow: var(--shadow-lg); }
.price-card::before { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(79, 249, 221, .45) 0%, rgba(79, 249, 221, .27) 35%, rgba(79, 249, 221, .09) 68%, rgba(79, 249, 221, 0) 100%); }
.price-card .from { font-size: .95rem; color: #b9b4d8; }
.price-card .amount { font: 600 clamp(2.2rem, 3.6vw, 2.9rem)/1 var(--f-display); letter-spacing: -.03em; margin: 8px 0; }
.price-card .amount small { font-size: 1.1rem; font-weight: 500; color: #b9b4d8; letter-spacing: 0; }
.price-card ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; color: #d9d5f0; }
.price-card li { display: flex; gap: 12px; }
.price-card li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 10px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px var(--teal); }

/* Grupos de FAQ */
.faq-hint { text-align: center; color: var(--muted); margin-bottom: 18px; }
.faq-groups { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.faq-g {
  min-height: 46px; padding: 0 22px; border-radius: 999px; border: 2px solid var(--field-line); background: var(--card); cursor: pointer;
  font: 600 .98rem/1 var(--f-display); color: var(--ink-2); transition: all .3s var(--ease);
}
.faq-g:hover { border-color: var(--violet); color: var(--violet); }
.faq-g[aria-selected="true"] { background: var(--violet-solid); border-color: var(--violet-solid); color: #fff; box-shadow: var(--shadow); }
.faq[hidden] { display: none; }
.faq.enter { animation: fadeUp .5s var(--ease); }

/* Rutas de contacto */
.paths { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.paths.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; }
@media (max-width: 560px) { .paths.two { grid-template-columns: minmax(0, 1fr); } }
.path {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: all .45s var(--ease);
}
.path h3 { font-size: 1.1rem; }
.path p { font-size: .96rem; line-height: 1.6; color: var(--ink-2); }
.path .link-arrow { margin-top: auto; }
.path:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.path::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.path:hover::after { transform: scaleX(1); }

/* Foto con forma orgánica (coherente con el hero) */
.photo-frame { position: relative; isolation: isolate; padding: 28px; width: 100%; max-width: 470px; margin-inline: auto; }
.pf-halo { position: absolute; inset: -10%; z-index: -2;
  background: radial-gradient(closest-side at 36% 38%, rgba(167, 123, 245, 0.45) 0%, rgba(167, 123, 245, 0.369) 18%, rgba(167, 123, 245, 0.27) 35%, rgba(167, 123, 245, 0.171) 52%, rgba(167, 123, 245, 0.09) 68%, rgba(167, 123, 245, 0.036) 82%, rgba(167, 123, 245, 0.011) 92%, rgba(167, 123, 245, 0) 100%),
              radial-gradient(closest-side at 66% 64%, rgba(79, 249, 221, 0.4) 0%, rgba(79, 249, 221, 0.328) 18%, rgba(79, 249, 221, 0.24) 35%, rgba(79, 249, 221, 0.152) 52%, rgba(79, 249, 221, 0.08) 68%, rgba(79, 249, 221, 0.032) 82%, rgba(79, 249, 221, 0.01) 92%, rgba(79, 249, 221, 0) 100%); }
.pf-shape { position: absolute; inset: 10% 0 0 12%; z-index: -1;
  background: var(--grad-story); border-radius: 58% 42% 46% 54% / 44% 56% 44% 56%;
  animation: spin 40s linear infinite; will-change: transform; }
.pf-img { position: relative; overflow: hidden; border-radius: 42% 58% 52% 48% / 52% 44% 56% 48%;
  box-shadow: var(--shadow-lg); }
.pf-img img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 45% center; }
.pf-img::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(79, 249, 221, .16), transparent 45%, rgba(104, 72, 219, .28)); }
.pf-bubble { position: absolute; z-index: 2; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: 0 18px 30px -16px rgba(56, 34, 150, .6); animation: bob 7s ease-in-out infinite; }
.pf-bubble img { width: 44%; }
.pf-bubble.teal { background: #22f0d0; }
.pf-bubble.lilac { background: #a77bf5; }
.pf-bubble.teal img { filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(2862%) hue-rotate(252deg) brightness(88%); }
.pf-bubble.b-a { top: 4%; right: 6%; }
.pf-bubble.b-b { bottom: 20%; left: 0; animation-delay: -3s; }
.photo-frame .float-card { z-index: 3; }
/* Chip de partner (Cuida Red): hermano visual del botón secundario */
.partner {
  display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 20px;
  border-radius: 999px; background: rgba(255, 255, 255, .75); text-decoration: none; color: var(--ink);
  box-shadow: inset 0 0 0 2px rgba(104, 72, 219, .22);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.partner:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 2px var(--violet), 0 18px 30px -20px rgba(104, 72, 219, .6); }
.partner img { height: 22px; width: auto; flex: none; }
.partner span { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.partner small { font: 600 .68rem/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.partner b { font: 600 .95rem/1 var(--f-display); color: var(--violet); }
.partner svg { width: 16px; height: 16px; color: var(--violet); transition: transform .3s var(--ease); }
.partner:hover svg { transform: translateX(4px); }

/* Qué es MACA */
.about-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.about-sticky { position: sticky; top: 120px; display: grid; gap: 24px; }
.big-quote { font: 500 clamp(1.2rem, 1.7vw, 1.45rem)/1.45 var(--f-display); color: var(--ink); letter-spacing: -.01em; }
.big-quote strong { font-weight: 600; }
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pillar {
  position: relative; padding: 28px; border-radius: var(--radius); background: var(--card);
  border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.pillar:nth-child(even) { transform: translateY(40px); }
.pillar::before { /* borde degradado al pasar el mouse */
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s;
}
.pillar:hover { box-shadow: var(--shadow-lg); }
.pillar:hover::before { opacity: 1; }
.pillar .ico-tile { margin-bottom: 22px; }
.pillar h3 { font-size: 1.2rem; margin-bottom: 8px; }
.pillar p { font-size: .98rem; line-height: 1.6; color: var(--ink-2); }
.pillar .num { position: absolute; top: 24px; right: 26px; font: 600 .9rem/1 var(--f-display); color: #c3bedb; }
.ico-tile { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--grad-story); box-shadow: 0 14px 26px -14px rgba(104,72,219,.8); }
.ico-tile.pink { background: var(--grad-pink); }
.ico-tile img { width: 32px; }
.ico-tile.lg { width: 84px; height: 84px; border-radius: 26px; }
.ico-tile.lg img { width: 48px; }

/* Servicios (sección oscura) */
.services { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.svc {
  grid-column: span 6; position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 16px; padding: 36px; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1); text-decoration: none; color: inherit;
  transition: transform .5s var(--ease), border-color .4s;
}
.svc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%), rgba(79,249,221,.16), transparent 45%); opacity: 0; transition: opacity .4s; }
.svc:hover { transform: translateY(-6px); border-color: rgba(79,249,221,.4); }
.svc:hover::before { opacity: 1; }
.svc h3 { font-size: 1.7rem; color: #fff; }
.svc p { color: #c2bddf; }
.svc .link-arrow { margin-top: auto; }
.svc.soon { grid-column: span 6; }
.svc.soon .badge { background: rgba(79,249,221,.12); color: var(--teal); align-self: flex-start; }
.svc.featured { grid-column: span 7; }
.svc.featured + .svc { grid-column: span 5; }

/* Mockup de software animado */
.mock {
  margin-top: 10px; border-radius: 18px; overflow: hidden; background: #fff; color: var(--ink);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); font-size: .82rem;
}
.mock-bar { display: flex; gap: 6px; padding: 10px 14px; background: #f1effa; }
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d8d3ef; }
.mock-bar i:first-child { background: #ff8a8a; } .mock-bar i:nth-child(2) { background: #ffd36e; } .mock-bar i:nth-child(3) { background: #5ee6b0; }
.mock-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; padding: 14px; }
.mock-card { border-radius: 12px; background: #f7f6fc; padding: 12px; }
.mock-card b { font-family: var(--f-display); font-size: .95rem; }
.mock-label { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.ecg { width: 100%; height: 60px; margin-top: 6px; }
.ecg path { fill: none; stroke: url(#ecgGrad); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 420; stroke-dashoffset: 420; animation: ecg 3.2s linear infinite; }
.mock-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #ebe8f7; }
.mock-row:last-child { border: 0; }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--grad-story); flex: none; }
.avatar.b { background: var(--grad-pink); }
.bar { flex: 1; height: 7px; border-radius: 6px; background: #ebe8f7; overflow: hidden; }
.bar::after { content: ""; display: block; height: 100%; width: var(--w, 60%); border-radius: inherit; background: var(--grad); animation: fill 2.4s var(--ease) both; }
.chip { padding: 3px 8px; border-radius: 999px; font-size: .68rem; font-weight: 700; background: rgba(27,217,154,.15); color: #0f9a6c; }
.chip.v { background: rgba(104,72,219,.12); color: var(--violet); }

/* Video llamada mock */
.call { position: relative; margin-top: 10px; aspect-ratio: 16/10; border-radius: 18px; overflow: hidden; background: var(--grad-story); }
.call .tile-b { position: absolute; right: 12px; bottom: 12px; width: 32%; aspect-ratio: 4/3; border-radius: 12px; background: var(--grad-pink); border: 2px solid rgba(255,255,255,.7); }
.call .who { position: absolute; left: 50%; top: 42%; translate: -50% -50%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.25); display: grid; place-items: center; }
.call .who::before, .call .who::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); animation: ring 2.6s ease-out infinite; }
.call .who::after { animation-delay: 1.3s; }
.call .who img { width: 55%; }
.call .controls { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 8px; }
.call .controls span { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.3); }
.call .controls span:last-child { background: #ff6b8b; }
.call .live { position: absolute; left: 14px; top: 14px; display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 999px; background: rgba(18,14,42,.45); color: #fff; font: 600 .72rem/1 var(--f-display); letter-spacing: .08em; }

/* Split: cuidados a domicilio */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.split.rev > :first-child { order: 2; }
.feature-list { display: grid; gap: 14px; margin: 28px 0 36px; padding: 0; list-style: none; font-size: 1rem; }
.feature-list li { display: flex; gap: 14px; align-items: flex-start; }
.feature-list li::before {
  content: ""; flex: none; width: 26px; height: 26px; margin-top: 2px; border-radius: 50%;
  background: var(--grad-story) center / 14px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"), var(--grad-story);
  background-size: 14px, cover; background-position: center; background-repeat: no-repeat;
}
.visual-card {
  position: relative; border-radius: var(--radius-lg); padding: 44px; overflow: hidden; isolation: isolate;
  background: var(--grad-story); color: #fff; min-height: 460px; display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: var(--shadow-lg);
}
.visual-card.pink { background: var(--grad-pink); }
.visual-card .big-ico { position: absolute; right: -6%; top: -4%; width: 62%; opacity: .95; animation: bob 7s ease-in-out infinite; }
.visual-card .rings { position: absolute; inset: 0; z-index: -1; }
.visual-card .rings span { position: absolute; right: 8%; top: 12%; width: 50%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); animation: ringOut 6s linear infinite; }
.visual-card .rings span:nth-child(2) { animation-delay: -2s; }
.visual-card .rings span:nth-child(3) { animation-delay: -4s; }
.visual-card > b { font: 600 clamp(3rem, 6vw, 4.6rem)/1 var(--f-display); letter-spacing: -.03em; }
.visual-card > p { font-size: 1.1rem; max-width: 30ch; opacity: .95; }

/* Audiencias con pestañas */
.tabs { display: grid; grid-template-columns: 320px 1fr; gap: 40px; align-items: stretch; }
.tab-list { display: grid; gap: 10px; align-content: start; }
.tab {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 20px; border-radius: 18px;
  border: 1px solid var(--line); background: var(--card); cursor: pointer; text-align: left;
  font: 600 1.12rem/1.2 var(--f-display); color: var(--ink); transition: all .35s var(--ease);
}
.tab img { width: 30px; filter: brightness(0) saturate(100%) invert(28%) sepia(84%) saturate(3012%) hue-rotate(247deg) brightness(88%); }
.tab[aria-selected="true"] { background: var(--violet-solid); color: #fff; border-color: transparent; box-shadow: var(--shadow); transform: translateX(6px); }
.tab[aria-selected="true"] img { filter: brightness(0) invert(1); }
.tab-panel {
  position: relative; border-radius: var(--radius-lg); padding: 48px; background: var(--card); border: 1px solid var(--line); overflow: hidden;
}
.tab-panel[hidden] { display: none; }
.tab-panel.enter { animation: fadeUp .6s var(--ease); }
.tab-panel::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(79,249,221,.35), transparent 65%); }
.tab-panel h3 { font-size: 2rem; margin-bottom: 14px; }
.tag { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 10px 16px; border-radius: 999px; background: rgba(79,249,221,.2); color: #0b7f71; font-weight: 700; font-size: .95rem; }

/* Cards genéricas (módulos) */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.cards.four { grid-template-columns: repeat(4, 1fr); }
.card {
  position: relative; padding: 34px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card h3 { font-size: 1.2rem; margin: 20px 0 8px; }
.card p { color: var(--ink-2); font-size: .98rem; line-height: 1.6; }
.card.grad { background: var(--grad-story); color: #fff; border: 0; }
.card.grad.pink { background: var(--grad-pink); }
.card.grad p { color: rgba(255,255,255,.92); }
.card.grad .ico-tile { background: rgba(255,255,255,.2); box-shadow: none; }
.card .tag { margin-top: 18px; }
.card.grad .tag { background: rgba(255,255,255,.22); color: #fff; }

/* Pasos */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; position: relative; }
.steps::before { content: ""; position: absolute; top: 36px; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, var(--teal), var(--violet), var(--pink)); opacity: .5; }
.step { position: relative; text-align: center; padding: 0 10px; }
.step::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 50%;
  background: var(--card); border: 2px solid transparent; font: 600 1.6rem/1 var(--f-display); color: var(--violet);
  background-image: linear-gradient(var(--card), var(--card)), var(--grad); background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: var(--shadow);
}
.on-dark .step::before { background-image: linear-gradient(var(--night), var(--night)), var(--grad); color: #fff; }
.step h3 { font-size: 1.12rem; margin-bottom: 8px; }
.step p { font-size: .96rem; line-height: 1.6; color: var(--ink-2); max-width: 26ch; margin-inline: auto; }
.on-dark .step p { color: #b9b4d8; }

/* Testimonios */
.testi-wrap { position: relative; }
.testi-track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 10px 2px 30px; }
.testi-track::-webkit-scrollbar { display: none; }
.testi {
  flex: 0 0 calc((100% - 44px) / 3); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 26px; padding: 36px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line);
}
.on-dark .testi { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
.testi blockquote { margin: 0; font: 500 1.2rem/1.5 var(--f-display); }
.testi blockquote::before { content: "“"; display: block; font-size: 4rem; line-height: .6; margin-bottom: 8px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.person { margin-top: auto; display: flex; align-items: center; gap: 14px; }
.person .avatar { width: 52px; height: 52px; display: grid; place-items: center; color: #fff; font: 600 1.1rem/1 var(--f-display); }
.person b { display: block; font-family: var(--f-display); }
.person span { font-size: .95rem; color: var(--muted); }
.on-dark .person span { color: #a8a2cc; }
.slider-ctrl { display: flex; gap: 10px; }
.round-btn { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); cursor: pointer; display: grid; place-items: center; color: var(--violet); transition: all .3s var(--ease); }
.round-btn:hover { background: var(--violet-solid); color: #fff; transform: scale(1.06); }
.round-btn svg { width: 22px; }
.on-dark .round-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: #fff; }
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 40px; flex-wrap: wrap; }
.head-row .section-head { margin: 0; }

/* Alianzas grid */
.ally-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.ally {
  display: grid; place-items: center; text-align: center; gap: 6px; min-height: 140px; padding: 20px; border-radius: 20px;
  background: #fff; border: 1px solid var(--line); transition: all .4s var(--ease);
}
.ally img { height: 52px; width: auto; max-width: 100%; object-fit: contain; }
.ally span { font-size: .85rem; color: var(--muted); line-height: 1.3; }
.ally:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: var(--shadow); border-color: rgba(104,72,219,.3); }

/* FAQ */
.faq { display: grid; gap: 12px; max-width: 820px; margin-inline: auto; }
.faq details { border-radius: 20px; background: var(--card); border: 1px solid var(--line); transition: box-shadow .3s, border-color .3s; }
.faq details[open] { box-shadow: var(--shadow); border-color: rgba(104,72,219,.25); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 24px; font: 600 1.05rem/1.4 var(--f-display);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(104,72,219,.1); transition: transform .4s var(--ease), background .3s; }
.faq summary .plus::before, .faq summary .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2.5px; margin: -1.25px 0 0 -8px; border-radius: 2px; background: var(--violet); transition: transform .4s var(--ease), background .3s; }
.faq summary .plus::after { transform: rotate(90deg); }
.faq details[open] .plus { background: var(--violet-solid); transform: rotate(180deg); }
.faq details[open] .plus::before, .faq details[open] .plus::after { background: var(--card); }
.faq details[open] .plus::after { transform: rotate(0); }
.faq .answer { padding: 0 24px 24px; color: var(--ink-2); display: grid; gap: 12px; font-size: 1rem; max-width: 72ch; }
.faq .answer a { color: var(--violet); font-weight: 600; }

/* CTA band */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 32px; padding: clamp(48px, 7vw, 80px) clamp(24px, 6vw, 80px); text-align: center; color: #fff;
  background: var(--grad-band);
  box-shadow: var(--shadow-lg);
}
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 12% 0%, rgba(79,249,221,.35), transparent 42%), radial-gradient(circle at 90% 100%, rgba(18,14,42,.35), transparent 45%); }
.cta-band .iso-bg { position: absolute; right: -60px; top: -60px; width: 340px; opacity: .18; z-index: -1; filter: brightness(0) invert(1); animation: spin 60s linear infinite; }
.cta-band h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); max-width: 22ch; margin: 0 auto 16px; }
.cta-band p { font-size: 1.05rem; opacity: .95; margin: 0 auto 32px; max-width: 60ch; }
.cta-band .btn-row { justify-content: center; }
.cta-band .btn-ghost { background: rgba(255,255,255,.15); color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }

/* Contacto */
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.contact-card {
  display: flex; gap: 22px; align-items: flex-start; padding: 32px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line);
  text-decoration: none; color: inherit; transition: all .4s var(--ease);
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(104,72,219,.3); }
.contact-card h3 { font-size: 1.15rem; margin-bottom: 6px; }
.contact-card p { color: var(--ink-2); font-size: 1rem; }
.contact-card strong { display: block; margin-top: 10px; color: var(--violet); font: 600 1rem/1.3 var(--f-display); word-break: break-word; }
.form { display: grid; gap: 18px; padding: 40px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { font: 600 1rem/1.2 var(--f-display); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 56px; padding: 14px 18px; border-radius: 14px; border: 1.5px solid var(--field-line); background: var(--field);
  font: 400 1.08rem/1.4 var(--f-body); color: var(--ink); transition: border-color .25s, box-shadow .25s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(104,72,219,.15); }
.form-note { font-size: .92rem; color: var(--muted); }

/* Presencia LATAM */
.countries { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.country { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); font: 600 1rem/1 var(--f-display); }
.country i { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); color: rgba(79,249,221,.7); }

.map-orb { position: relative; aspect-ratio: 1; width: min(100%, 460px); margin-inline: auto; }
.map-orb img.iso { position: absolute; inset: 22%; width: 56%; animation: bob 7s ease-in-out infinite; }
.map-orb .ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.18); }
.map-orb .ring:nth-child(2) { inset: 10%; border-style: dashed; animation: spin 50s linear infinite; }
.map-orb .ring:nth-child(3) { inset: 20%; }
.map-orb .dot { position: absolute; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 20px var(--teal); }
.orbit { position: absolute; inset: 0; animation: spin 26s linear infinite; }
.orbit.o2 { inset: 10%; animation-duration: 34s; animation-direction: reverse; }
.orbit .dot.pink { background: var(--pink); box-shadow: 0 0 20px var(--pink); }
.orbit .dot.cyan { background: var(--cyan); box-shadow: 0 0 20px var(--cyan); }

.note { display: flex; gap: 16px; align-items: flex-start; padding: 24px 28px; border-radius: 20px; background: rgba(104,72,219,.07); border-left: 4px solid var(--violet); color: var(--ink-2); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { position: relative; overflow: hidden; background: var(--night); color: #cfcbe8; padding: 80px 0 32px; margin-top: 40px; font-size: .96rem; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad); }
.site-footer .blob { opacity: .22; }
.site-footer .container { position: relative; z-index: 1; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.foot-grid h4 { font-size: 1.05rem; color: #fff; margin-bottom: 18px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-grid a { color: #cfcbe8; text-decoration: none; transition: color .2s; }
.foot-grid a:hover { color: var(--teal); }
.foot-brand p { margin: 20px 0 24px; max-width: 34ch; }
.foot-brand .brand-mark path { stroke: url(#macaGradFoot); }
.socials { display: flex; gap: 10px; }
.socials a { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.08); transition: all .3s var(--ease); }
.socials a:hover { background: var(--violet-solid); transform: translateY(-3px); }
.socials svg { width: 22px; height: 22px; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 36px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.1); font-size: .95rem; }
.foot-bottom img { height: 34px; width: auto; }
.giant { font: 700 clamp(1.8rem, 6.6vw, 6rem)/1 var(--f-display); letter-spacing: -.03em; white-space: nowrap; text-align: center; margin-top: 60px; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }

/* WhatsApp flotante, con la marca: degradado de botón de MACA y halo violeta (en modo oscuro, halo aqua) */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 90; display: flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 20px 0 16px; border-radius: 999px; background: var(--grad-btn); color: #fff; text-decoration: none;
  font: 600 1.02rem/1 var(--f-display); box-shadow: 0 16px 34px -12px rgba(104,72,219,.75);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.wa-float:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 20px 38px -12px rgba(104,72,219,.85); }
.wa-float svg { width: 24px; height: 24px; }
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgba(104,72,219,.5); opacity: 0; animation: ringPulse 2.8s ease-out infinite; will-change: transform, opacity; }

/* Cotizar flotante: aparece al bajar por la página, sobre el de WhatsApp (no se muestra en el cotizador) */
.cot-float {
  position: fixed; right: 22px; bottom: 88px; z-index: 90; display: flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 20px 0 16px; border-radius: 999px; background: var(--card); color: var(--violet); text-decoration: none;
  font: 600 1.02rem/1 var(--f-display); box-shadow: inset 0 0 0 2px rgba(104,72,219,.24), 0 16px 34px -14px rgba(56,34,150,.45);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.96);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s, box-shadow .35s var(--ease);
}
.cot-float.visible { opacity: 1; visibility: visible; transform: none; }
.cot-float.visible:hover { transform: translateY(-4px) scale(1.03); box-shadow: inset 0 0 0 2px var(--violet), 0 20px 36px -14px rgba(56,34,150,.55); }
.cot-float svg { width: 22px; height: 22px; }

/* =========================================================
   ANIMACIONES DE ENTRADA
   ========================================================= */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
.pillar.reveal.in:nth-child(even) { transform: translateY(40px); }
.reveal-scale { opacity: 0; transform: scale(.92); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.reveal-scale.in { opacity: 1; transform: none; }

@keyframes flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { to { transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes drift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-8%, 10%) scale(1.12); } }
@keyframes drift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(10%, -8%) scale(.9); } }
@keyframes drift3 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-14%, -10%); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(27,217,154,.55); } 70% { box-shadow: 0 0 0 14px rgba(27,217,154,0); } 100% { box-shadow: 0 0 0 0 rgba(27,217,154,0); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
@keyframes ecg { to { stroke-dashoffset: -420; } }
@keyframes fill { from { width: 0; } }
@keyframes ring { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes ringOut { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
@keyframes morph { 0%, 100% { border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; } 50% { border-radius: 58% 42% 45% 55% / 42% 58% 42% 58%; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal-scale { opacity: 1; transform: none; }
  .hero h1 .line > span { transform: none; }
  .hero-fade { opacity: 1; }
}

/* =========================================================
   RESPONSIVE
   1280 menú colapsa · 1024 hero apilado · 768 tablet · 560 celular
   ========================================================= */
.hero-stats.five { grid-template-columns: repeat(5, 1fr); }

/* La cabecera completa (logo, 5 secciones, tamaño de texto y dos botones) necesita ~1.210 px:
   desde 1.281 px usa un contenedor algo más ancho que el contenido para que quepa en una fila;
   hasta 1.280 px se usa el menú hamburguesa */
@media (min-width: 1281px) {
  .site-header .container { width: min(1280px, 100% - 32px); }
}
/* Entre 1.281 y 1.399 px la cabecera va justa: menos aire entre las secciones */
@media (min-width: 1281px) and (max-width: 1399px) {
  .nav-links { gap: 2px; }
  .nav-link { padding: 10px 8px; }
  .nav-tools { gap: 8px; }
}
@media (max-width: 1280px) {
  .nav-links, .nav-tools .ajustes, .nav-tools .btn { display: none; }
  .burger { display: grid; }
  .nav, .scrolled .nav { height: 68px; }
  .mobile-menu { inset: 68px 0 0; }
}

@media (max-width: 1100px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .ally-grid { grid-template-columns: repeat(3, 1fr); }
  .cards.four, .paths { grid-template-columns: repeat(2, 1fr); }
  .hero-stats.five { grid-template-columns: repeat(6, 1fr); }
  .hero-stats.five .stat { grid-column: span 2; border-left: 0; }
  .hero-stats.five .stat:nth-child(n+4) { grid-column: span 3; border-top: 1px solid var(--line); }
  .hero-stats.five .stat:nth-child(2), .hero-stats.five .stat:nth-child(3), .hero-stats.five .stat:nth-child(5) { border-left: 1px solid var(--line); }
}

@media (max-width: 1024px) {
  .container { width: min(var(--container), 100% - 64px); }
  .hero { min-height: 0; padding: 112px 0 64px; }
  .hero-grid, .page-hero-grid, .about-grid, .split, .tabs { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { gap: 48px; }
  .hero h1 { font-size: clamp(2.1rem, 5.4vw, 3rem); }
  .orb-stage { width: min(100%, 420px); }
  .page-hero { padding: 120px 0 64px; }
  .page-hero-grid { gap: 40px; }
  .hero-icon { width: 220px; }
  .split.rev > :first-child { order: 0; }
  .about-sticky { position: static; }
  .p-panel { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 36px; }
  .photo-frame { max-width: 440px; }
}

@media (max-width: 768px) {
  .container { width: calc(100% - 48px); }
  .cards, .cards.two { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .steps::before { display: none; }
  .hero-stats.five { grid-template-columns: 1fr 1fr; }
  .hero-stats.five .stat, .hero-stats.five .stat:nth-child(n+4) { grid-column: auto; border-left: 0; border-top: 1px solid var(--line); }
  .hero-stats.five .stat:first-child { grid-column: span 2; border-top: 0; }
  .hero-stats.five .stat:nth-child(odd):not(:first-child) { border-left: 1px solid var(--line); }
  .hero-stats.five .stat:nth-child(2), .hero-stats.five .stat:nth-child(3), .hero-stats.five .stat:nth-child(5) { border-left: 0; }
  .hero-stats.five .stat:nth-child(3), .hero-stats.five .stat:nth-child(5) { border-left: 1px solid var(--line); }
  .ally-grid { grid-template-columns: repeat(2, 1fr); }
  .pillar:nth-child(even), .pillar.reveal.in:nth-child(even) { transform: none; }
}

@media (max-width: 560px) {
  .container { width: calc(100% - 40px); }
  body { font-size: 1rem; }
  .lead { font-size: 1.05rem; }
  .h-xl, .hero h1 { font-size: 2.05rem; }
  .page-hero h1 { font-size: 1.95rem; }
  .h-lg { font-size: 1.65rem; }
  .eyebrow { font-size: .72rem; letter-spacing: .1em; }
  .eyebrow::before { width: 20px; }
  .section { padding: 72px 0; }
  .section-head { margin-bottom: 36px; }
  .hero { padding: 100px 0 56px; }
  .page-hero { padding: 104px 0 48px; }
  .hero-icon { width: 170px; }
  .hero-icon::before { inset: -10px; }
  .orb-stage { width: min(100%, 340px); }
  .float-card { max-width: 180px; font-size: .78rem; padding: 7px 10px 7px 7px; gap: 8px; }
  .float-card small { font-size: .68rem; }
  .float-card .ico { width: 28px; height: 28px; border-radius: 9px; }
  .float-card .ico img { width: 17px; }
  .float-card.fc1 { left: 0; top: 0; }
  .float-card.fc2 { right: 0; bottom: 2%; }
  .photo-frame { padding: 14px; }
  .pf-bubble { width: 52px; height: 52px; }
  .photo-frame .float-card { left: 8px !important; right: auto !important; }
  .photo-frame .float-card:first-of-type { top: 8px !important; }
  .photo-frame .float-card:last-of-type { bottom: 8px !important; top: auto !important; }
  .hero-stats { margin-top: 48px; }
  .stat { padding: 18px; }
  .pillars, .cards, .cards.two, .cards.four, .contact-grid, .form-row, .paths, .p-feats, .d-feats { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .card, .path, .pillar, .contact-card { padding: 24px; }
  .contact-card { gap: 16px; }
  .cta-band { border-radius: 24px; }
  .cta-band .btn-row .btn { width: 100%; }
  .p-panel, .detail-card, .price-card, .visual-card { padding: 24px; }
  .browser { border-radius: 20px; }
  .browser-bar .url { display: none; }
  .p-tabs { padding: 14px 16px; }
  .mock-body { grid-template-columns: 1fr; }
  .faq summary { padding: 18px 18px; font-size: 1rem; }
  .faq .answer { padding: 0 18px 20px; }
  .faq-g { padding: 0 16px; }
  .partner { width: 100%; justify-content: center; padding: 0 16px; gap: 10px; }
  .partner small { display: none; }
  .hero .btn-row .btn, .page-hero .btn-row .btn { width: 100%; }
  .wa-float span { display: none; }
  .wa-float { padding: 0; width: 54px; justify-content: center; right: 16px; bottom: 16px; }
  .cot-float { right: 16px; bottom: 80px; padding: 0 18px 0 14px; }
  .giant { font-size: 1.7rem; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}
.page-hero-grid.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1024px) { .page-hero-grid.even { grid-template-columns: minmax(0, 1fr); } }

/* Contraste: en fondos oscuros el degradado puede ser brillante */
.on-dark .grad-text, .site-footer .grad-text, .cta-band .grad-text, .price-card .grad-text { background-image: var(--grad); }
.stat b .grad-text { background-image: var(--grad-ink); }
@media (max-width: 1024px) {
  .hero .ribbon, .scroll-cue { display: none; }
}.on-dark .stat b .grad-text { background-image: var(--grad); }

/* Legibilidad: degradados más profundos cuando llevan texto blanco encima */
:root {
  --grad-card: linear-gradient(160deg, #0e7490 0%, #4c5fd6 52%, #5b3fd6 100%);
  --grad-card-pink: linear-gradient(160deg, #3b5bdb 0%, #6d45d6 55%, #a3479f 100%);
}
.visual-card, .card.grad { background: var(--grad-card); }
.visual-card.pink, .card.grad.pink { background: var(--grad-card-pink); }
.d-feats li { background: rgba(18, 14, 42, .22); border-color: rgba(255, 255, 255, .22); }
.mock-label { display: block; margin-bottom: 2px; }
@media (prefers-reduced-motion: reduce) {
  .ecg path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
}@media (max-width: 560px) { .photo-frame .float-card:first-of-type:not(:last-of-type) { display: none; } }

/* Hero: fundido inferior para que el degradado no se vea "cortado" */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, var(--bg-0), var(--bg) 85%);
}
/* Hero: "puntos" de degradado translúcidos que flotan */
.hero .blob { opacity: 1; will-change: transform; }
.hero .blob.b1 { width: min(560px, 80vw); height: min(560px, 80vw); max-width: none; max-height: none; top: -10%; right: 4%; left: auto; bottom: auto;
  background: radial-gradient(closest-side, rgba(79, 249, 221, 0.75) 0%, rgba(79, 249, 221, 0.615) 18%, rgba(79, 249, 221, 0.45) 35%, rgba(79, 249, 221, 0.285) 52%, rgba(79, 249, 221, 0.15) 68%, rgba(79, 249, 221, 0.06) 82%, rgba(79, 249, 221, 0.019) 92%, rgba(79, 249, 221, 0) 100%);
  animation: orbA 16s ease-in-out infinite; }
.hero .blob.b2 { width: min(460px, 70vw); height: min(460px, 70vw); max-width: none; max-height: none; top: 34%; right: -6%; left: auto; bottom: auto;
  background: radial-gradient(closest-side, rgba(104, 72, 219, 0.55) 0%, rgba(104, 72, 219, 0.451) 18%, rgba(104, 72, 219, 0.33) 35%, rgba(104, 72, 219, 0.209) 52%, rgba(104, 72, 219, 0.11) 68%, rgba(104, 72, 219, 0.044) 82%, rgba(104, 72, 219, 0.014) 92%, rgba(104, 72, 219, 0) 100%);
  animation: orbB 19s ease-in-out infinite; }
.hero .blob.b3 { width: min(400px, 64vw); height: min(400px, 64vw); max-width: none; max-height: none; bottom: 6%; left: 30%; top: auto; right: auto;
  background: radial-gradient(closest-side, rgba(213, 120, 208, 0.5) 0%, rgba(213, 120, 208, 0.41) 18%, rgba(213, 120, 208, 0.3) 35%, rgba(213, 120, 208, 0.19) 52%, rgba(213, 120, 208, 0.1) 68%, rgba(213, 120, 208, 0.04) 82%, rgba(213, 120, 208, 0.012) 92%, rgba(213, 120, 208, 0) 100%);
  animation: orbC 15s ease-in-out infinite; }
.hero .blob.b4 { width: min(360px, 60vw); height: min(360px, 60vw); max-width: none; max-height: none; top: 10%; left: -8%; right: auto; bottom: auto;
  background: radial-gradient(closest-side, rgba(0, 209, 240, 0.45) 0%, rgba(0, 209, 240, 0.369) 18%, rgba(0, 209, 240, 0.27) 35%, rgba(0, 209, 240, 0.171) 52%, rgba(0, 209, 240, 0.09) 68%, rgba(0, 209, 240, 0.036) 82%, rgba(0, 209, 240, 0.011) 92%, rgba(0, 209, 240, 0) 100%);
  animation: orbB 21s ease-in-out infinite reverse; }
.hero .blob.b5 { width: 170px; height: 170px; top: 16%; left: 43%;
  background: radial-gradient(closest-side, rgba(167, 123, 245, 0.6) 0%, rgba(167, 123, 245, 0.492) 18%, rgba(167, 123, 245, 0.36) 35%, rgba(167, 123, 245, 0.228) 52%, rgba(167, 123, 245, 0.12) 68%, rgba(167, 123, 245, 0.048) 82%, rgba(167, 123, 245, 0.015) 92%, rgba(167, 123, 245, 0) 100%);
  animation: orbA 12s ease-in-out infinite reverse; }
.hero .blob.b6 { width: 130px; height: 130px; bottom: 22%; left: 6%;
  background: radial-gradient(closest-side, rgba(18, 242, 212, 0.6) 0%, rgba(18, 242, 212, 0.492) 18%, rgba(18, 242, 212, 0.36) 35%, rgba(18, 242, 212, 0.228) 52%, rgba(18, 242, 212, 0.12) 68%, rgba(18, 242, 212, 0.048) 82%, rgba(18, 242, 212, 0.015) 92%, rgba(18, 242, 212, 0) 100%);
  animation: orbC 13s ease-in-out infinite reverse; }
@keyframes orbA { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-7%, 9%) scale(1.1); } 66% { transform: translate(6%, -5%) scale(.94); } }
@keyframes orbB { 0%, 100% { transform: translate(0, 0) scale(1); } 40% { transform: translate(9%, -8%) scale(.9); } 75% { transform: translate(-5%, 6%) scale(1.08); } }
@keyframes orbC { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-12%, -10%) scale(1.12); } }
@media (max-width: 560px) { .hero .blob.b5 { left: 70%; top: 8%; } .hero .blob.b6 { bottom: 40%; } }
@media (max-width: 560px) { .photo-frame { max-width: 340px; } .pf-bubble.b-b { bottom: 24%; } .photo-frame .float-card { left: auto !important; right: 8px !important; } }

.foot-credit { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .06); font-size: .85rem; color: #9f99c4; text-align: center; }
.foot-credit strong, .foot-credit a { color: #d9d5f0; font-weight: 600; }
.foot-credit a { text-decoration: underline; text-underline-offset: 3px; }
.foot-credit a:hover { color: #fff; }

/* Firma del footer */
.foot-tag { display: flex; align-items: center; gap: 28px; margin: 64px 0 0; }
.foot-tag::before, .foot-tag::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2)); }
.foot-tag::after { background: linear-gradient(90deg, rgba(255, 255, 255, .2), transparent); }
.foot-tag span {
  font: 600 clamp(1.2rem, 2.2vw, 1.75rem)/1.2 var(--f-display); letter-spacing: -.01em; white-space: nowrap;
  background: var(--grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (max-width: 560px) { .foot-tag { gap: 14px; margin-top: 44px; } .foot-tag span { font-size: 1.1rem; } }

/* Rendimiento: las animaciones se pausan cuando su sección no está en pantalla */
.is-offscreen, .is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }
@keyframes ringPulse { 0% { transform: scale(.9); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }
.wa-float::before { animation-name: ringPulseWide; }
@keyframes ringPulseWide { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.1, 1.4); opacity: 0; } }

@media (max-width: 768px) { .hero .blob, .float-card, .pf-bubble, .pf-shape { animation: none !important; } }

/* Hero de páginas internas: fundido inferior (los puntos no se cortan contra el borde) */
.page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 200px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, var(--bg-0), var(--bg) 80%);
}
.menu-panel.wide { min-width: 360px; }

/* =========================================================
   CONTENIDO NUEVO: planes, funcionalidades y seguridad
   ========================================================= */
/* Planes y precios */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.plans-2 { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-inline: auto; }
.plans-1 { grid-template-columns: minmax(0, 520px); justify-content: center; }
.plan {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 32px 28px;
  border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.plan:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.plan.featured { background: var(--night); color: #fff; border-color: transparent; box-shadow: var(--shadow-lg); overflow: hidden; }
.plan.featured::before {
  content: ""; position: absolute; right: -90px; top: -90px; width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(79, 249, 221, .4) 0%, rgba(79, 249, 221, .22) 45%, rgba(79, 249, 221, .06) 75%, rgba(79, 249, 221, 0) 100%);
}
.plan > * { position: relative; }
.plan-tag {
  align-self: flex-start; padding: 6px 14px; border-radius: 999px; background: rgba(104, 72, 219, .1); color: var(--violet);
  font: 700 .74rem/1.3 var(--f-display); letter-spacing: .1em; text-transform: uppercase;
}
.plan.featured .plan-tag { background: rgba(79, 249, 221, .16); color: var(--teal); }
.plan h3 { font-size: 1.15rem; line-height: 1.35; }
.plan-price { display: grid; gap: 2px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.plan.featured .plan-price { border-color: rgba(255, 255, 255, .14); }
.plan-price small { font-size: .85rem; color: var(--muted); }
.plan-price b { font: 600 clamp(2rem, 3.2vw, 2.6rem)/1 var(--f-display); letter-spacing: -.03em; }
.plan.featured .plan-price b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan-price span { font-size: .88rem; color: var(--muted); line-height: 1.45; }
.plan.featured .plan-price small, .plan.featured .plan-price span { color: #b9b4d8; }
.plan-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .95rem; color: var(--ink-2); }
.plan.featured .plan-feats { color: #d9d5f0; }
.plan-feats li { display: flex; gap: 10px; line-height: 1.5; }
.plan-feats li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--grad-story);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.plan-note { font-size: .88rem; color: var(--violet); font-weight: 600; }
.plan.featured .plan-note { color: var(--teal); }
.plan .btn { margin-top: auto; width: 100%; }
.plan.featured .btn-ghost { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.plan-cotizar { align-self: center; min-height: 26px; margin-top: -6px; font-size: .92rem; }
/* Las tarjetas sin enlace al cotizador reservan el mismo espacio, para que los botones queden alineados */
.plans:has(.plan-cotizar) .plan:not(:has(.plan-cotizar))::after { content: ""; height: 26px; margin-top: -6px; }
.plan.featured .plan-cotizar { color: #fff; }
.plans-foot { margin-top: 34px; text-align: center; color: var(--muted); }
.plans-foot + .plans-foot { margin-top: 12px; }
.plans-foot .link-arrow { margin-left: 8px; }

/* Funcionalidades detalladas */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feat {
  padding: 30px 26px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}
.feat:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.feat h3 { font-size: 1.12rem; margin: 20px 0 8px; }
.feat p { font-size: .96rem; line-height: 1.6; color: var(--ink-2); }
.on-dark .feat { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); }
.on-dark .feat h3 { color: #fff; }
.on-dark .feat p { color: #c2bddf; }
/* Funcionalidades en desarrollo: ocupa las dos columnas que quedan junto a la última tarjeta */
.feat-pronto { grid-column: span 2; background: var(--bg-2, #f6f4fd); border-style: dashed; }
.feat-pronto ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.feat-pronto li { padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: .9rem; color: var(--ink-2); }

/* Seguridad y cumplimiento */
.sec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sec-card {
  padding: 26px 22px; border-radius: var(--radius); background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12); display: grid; gap: 8px; align-content: start;
}
.sec-card b { font: 600 1.25rem/1.2 var(--f-display); color: #fff; }
.sec-card span { font-size: .92rem; line-height: 1.5; color: #b9b4d8; }
.sec-note { margin-top: 28px; font-size: .92rem; color: #9f99c4; max-width: 70ch; }

/* Flecha invertida del carrusel de testimonios */
.round-btn.flip svg { transform: scaleX(-1); }

@media (max-width: 1024px) {
  .plans, .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .plans-2 { max-width: none; }
  .sec-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .plans, .plans-2, .plans-1, .feat-grid, .sec-grid { grid-template-columns: 1fr; }
  .feat-pronto { grid-column: auto; }
  .plan { padding: 26px 22px; }
  .plans-foot { text-align: left; }
}

/* =========================================================
   MAQUETAS ANIMADAS DEL HERO (sitio antiguo, adaptadas a la paleta)
   ========================================================= */
.svc-demo {
  position: relative; width: min(100%, 460px); margin-inline: auto;
  /* tokens del sitio antiguo traducidos a la paleta MACA */
  --blanco: #fff; --crema-100: #f8f7fd; --crema-200: #edeafa; --crema-300: rgba(27, 21, 55, .12);
  --tinta-900: var(--ink); --gris-800: var(--ink-2); --gris-600: var(--muted);
  --violeta-700: var(--violet); --azul-600: #3f5fe0; --oro-600: #0e9f8f;
  --font-display: var(--f-display); --ease-suave: var(--ease); --dur-media: .25s;
}
.svc-demo-halo {
  position: absolute; inset: -14% -10%; z-index: -1;
  background: radial-gradient(closest-side, rgba(79, 249, 221, .5) 0%, rgba(79, 249, 221, .3) 35%, rgba(79, 249, 221, .1) 68%, rgba(79, 249, 221, 0) 100%),
              radial-gradient(closest-side at 70% 70%, rgba(104, 72, 219, .42) 0%, rgba(104, 72, 219, .25) 35%, rgba(104, 72, 219, .08) 68%, rgba(104, 72, 219, 0) 100%);
}
.svc-demo-fig { margin: 0; }
.svc-screen {
  background: #fff !important; border-color: var(--line) !important;
  border-radius: 20px !important; padding: 18px !important; min-height: 210px !important;
  box-shadow: 0 30px 60px -30px rgba(56, 34, 150, .45);
}
.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; }
@media (max-width: 1024px) { .svc-demo { width: min(100%, 420px); } .svc-screen { zoom: 1.15; } }
@media (max-width: 560px) { .svc-demo { width: 100%; } .svc-screen { zoom: 1; padding: 16px; border-radius: 18px; } }
@media (prefers-reduced-motion: reduce) { .svc-screen *, .svc-screen *::before, .svc-screen *::after { animation: none !important; } }

/* animaciones originales de las maquetas */
@keyframes fi-t1{0%,17%{background:var(--violeta-700);color:var(--blanco);border-color:var(--violeta-700)}19%,100%{background:var(--blanco);color:var(--gris-600);border-color:var(--crema-300)}}
@keyframes fi-c1{0%,17%{opacity:0}19%,100%{opacity:1}}
@keyframes fi-t2{0%,17%{background:var(--blanco);color:var(--gris-600);border-color:var(--crema-300)}19%,35%{background:var(--violeta-700);color:var(--blanco);border-color:var(--violeta-700)}37%,100%{background:var(--blanco);color:var(--gris-600);border-color:var(--crema-300)}}
@keyframes fi-c2{0%,35%{opacity:0}37%,100%{opacity:1}}
@keyframes fi-t3{0%,35%{background:var(--blanco);color:var(--gris-600);border-color:var(--crema-300)}37%,53%{background:var(--violeta-700);color:var(--blanco);border-color:var(--violeta-700)}55%,100%{background:var(--blanco);color:var(--gris-600);border-color:var(--crema-300)}}
@keyframes fi-c3{0%,53%{opacity:0}55%,100%{opacity:1}}
@keyframes fi-t4{0%,53%{background:var(--blanco);color:var(--gris-600);border-color:var(--crema-300)}55%,71%{background:var(--violeta-700);color:var(--blanco);border-color:var(--violeta-700)}73%,100%{background:var(--blanco);color:var(--gris-600);border-color:var(--crema-300)}}
@keyframes fi-c4{0%,71%{opacity:0}73%,100%{opacity:1}}
@keyframes fi-bar{0%{width:12%}17%{width:25%}35%{width:50%}53%{width:75%}71%,100%{width:100%}}
@keyframes fi-p1{0%,15%{opacity:1}19%,100%{opacity:0}}
@keyframes fi-p2{0%,17%{opacity:0}21%,33%{opacity:1}37%,100%{opacity:0}}
@keyframes fi-p3{0%,35%{opacity:0}39%,51%{opacity:1}55%,100%{opacity:0}}
@keyframes fi-p4{0%,53%{opacity:0}57%,69%{opacity:1}73%,100%{opacity:0}}
@keyframes fi-pdf{0%,71%{opacity:0;transform:translateY(8px)}78%,100%{opacity:1;transform:none}}
@keyframes ct-m1{0%,3%{opacity:0;transform:translateY(6px)}10%,100%{opacity:1;transform:none}}
@keyframes ct-esc{0%,24%{opacity:1}30%,100%{opacity:0}}
@keyframes ct-m2{0%,30%{opacity:0;transform:translateY(6px)}38%,100%{opacity:1;transform:none}}
@keyframes ct-m3{0%,58%{opacity:0;transform:translateY(6px)}66%,100%{opacity:1;transform:none}}
@keyframes ct-pie{0%,68%{opacity:0}76%,100%{opacity:1}}
@keyframes co-fila{0%{opacity:.3;transform:translateY(4px)}100%{opacity:1;transform:none}}
@keyframes co-num{0%,5%{opacity:0}16%,100%{opacity:1}}

/* Bandas de 3 cifras (ficha y corporativo) */
.hero-stats.stats-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) {
  .hero-stats.stats-3 { grid-template-columns: 1fr; }
  .hero-stats.stats-3 .stat { border-left: 0; border-top: 1px solid var(--line); }
  .hero-stats.stats-3 .stat:first-child { border-top: 0; }
}

/* =========================================================
   MARCOS DE DISPOSITIVO (imágenes reales + pantalla en vivo)
   ========================================================= */
.device { width: min(100%, 560px); container-type: inline-size; }
.device-ipad { width: min(100%, 560px); }
.device-imac { width: min(100%, 470px); }
.svc-demo-fig { position: relative; margin: 0; }
.device-img { display: block; width: 100%; height: auto; }
.device-screen { position: absolute; overflow: hidden; background: #fff; }

/* pantalla de cada equipo, medida sobre la imagen */
.device-macbook .device-screen { left: 10.5%; top: 6.2%; width: 79%; height: 85.4%; border-radius: 5px; }
.device-imac .device-screen { left: 2.8%; top: 3.3%; width: 94.6%; height: 62.4%; border-radius: 0; }
.device-ipad .persp { position: absolute; inset: 0; }
.device-ipad .device-screen {
  top: 0; left: 0; width: 1000px; height: 690px; transform-origin: 0 0; border-radius: 22px;
  transform: scale(var(--k, .42)) matrix3d(0.710588, -0.029157, 0, -0.000049, -0.154747, 0.677747, 0, -0.000074, 0, 0, 1, 0, 300.7, 51.7, 0, 1);
}

/* los tres puntos, como una ventana de Apple */
.screen-dots { position: absolute; z-index: 3; top: 3.2%; left: 3%; width: 11%; display: flex; gap: 13%; }
.screen-dots i { flex: 1; aspect-ratio: 1; border-radius: 50%; }
.screen-dots i:nth-child(1) { background: #ff5f57; }
.screen-dots i:nth-child(2) { background: #febc2e; }
.screen-dots i:nth-child(3) { background: #28c840; }

/* la maqueta ocupa la pantalla y se escala para que se lea */
.device-screen .svc-screen {
  position: absolute; inset: 0; width: calc(100% / var(--s)); height: calc(100% / var(--s));
  transform: scale(var(--s)); transform-origin: top left; will-change: transform; contain: strict;
  min-height: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  align-content: center; padding: 9% 6% 6% !important;
}
.device { --s: 1.28; }
.device-macbook { --s: 1.05; }
.device-ipad { --s: 2.6; }
@media (max-width: 1024px) { .device { width: min(100%, 470px); --s: 1.12; } .device-macbook { --s: 1.02; } .device-ipad { --s: 2.4; } .device-imac { width: min(100%, 400px); } }
@media (max-width: 560px) { .device { --s: .92; } .device-macbook { --s: .8; } .device-ipad { --s: 2.1; } }



/* =========================================================
   BLOG
   ========================================================= */
.blog-filtros { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 44px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.post {
  display: flex; flex-direction: column; gap: 14px; padding: 30px 28px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}
.post[hidden] { display: none; }
.post:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .82rem; color: var(--muted); }
.post-cat { padding: 5px 12px; border-radius: 999px; background: rgba(104, 72, 219, .1); color: var(--violet); font: 700 .72rem/1.3 var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
.post h3 { font-size: 1.22rem; line-height: 1.3; }
.post > p { font-size: .98rem; line-height: 1.6; color: var(--ink-2); }
.post-fuentes { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted); }
.post-fuentes b { display: block; font: 600 .74rem/1.3 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--violet); margin-bottom: 8px; }
.post-fuentes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.post-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.post-tags li { padding: 5px 11px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); font-size: .8rem; }
.blog-vacio { margin-top: 30px; text-align: center; color: var(--muted); }
.post h3 a { text-decoration: none; }
.post h3 a:hover { color: var(--violet); }
.post .link-arrow { margin-top: auto; }
.post .link-arrow + .post-tags, .post .link-arrow + .post-fuentes { margin-top: 0; }
@media (max-width: 1024px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .blog-grid { grid-template-columns: 1fr; } .post { padding: 24px 22px; } }

/* Blog y multimedia: dos pestañas, cada una con su propia página */
.tabs-seccion {
  display: inline-flex; gap: 6px; margin-top: 30px; padding: 6px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.tabs-seccion a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 28px; border-radius: 999px;
  font: 600 1rem/1 var(--f-display); color: var(--ink-2); text-decoration: none; transition: color .25s, background .25s;
}
.tabs-seccion a:hover { color: var(--violet); background: rgba(104, 72, 219, .08); }
.tabs-seccion a[aria-current="page"] { background: var(--grad-btn); color: #fff; box-shadow: 0 12px 26px -14px rgba(104, 72, 219, .9); }

/* Multimedia: videos */
.videos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.video { display: flex; flex-direction: column; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.video-marco { position: relative; aspect-ratio: 16 / 9; background: var(--night); }
.video-marco iframe, .video-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { padding: 0; cursor: pointer; background: none; }
.video-play img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease), filter .3s; }
.video-play:hover img { transform: scale(1.03); filter: brightness(.85); }
.video-icono {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; translate: -50% -50%; display: grid; place-items: center;
  border-radius: 50%; background: var(--grad-btn); color: #fff; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .6); transition: transform .3s var(--ease);
}
.video-icono svg { width: 30px; height: 30px; margin-left: 4px; }
.video-play:hover .video-icono { transform: scale(1.08); }
.video-texto { display: flex; flex-direction: column; gap: 12px; padding: 26px 28px 28px; flex: 1; }
.video-texto h3 { font-size: 1.2rem; line-height: 1.3; }
.video-texto p { font-size: .98rem; line-height: 1.6; color: var(--ink-2); }
.video-texto .link-arrow { margin-top: auto; }
@media (max-width: 860px) { .videos { grid-template-columns: 1fr; } }

/* Artículo del blog */
.articulo-cabecera { max-width: 860px; }
.articulo-cabecera .eyebrow time { color: inherit; }
.articulo-cabecera .autores { margin: 14px 0 0; font-size: .95rem; line-height: 1.55; color: var(--ink-2); max-width: 70ch; }
.articulo-cabecera .autores a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prosa { max-width: 72ch; margin-inline: auto; font-size: 1.08rem; line-height: 1.8; color: var(--ink-2); }
.prosa > * + * { margin-top: 1.1em; }
.prosa h2, .prosa h3, .prosa h4 { color: var(--ink); line-height: 1.3; }
.prosa h2 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); margin-top: 2em; }
.prosa h3 { font-size: clamp(1.15rem, 1.7vw, 1.35rem); margin-top: 1.8em; }
.prosa ul, .prosa ol { margin-bottom: 0; padding-left: 1.3em; display: grid; gap: .55em; }
.prosa li ul, .prosa li ol { margin-top: .55em; }
.prosa strong { color: var(--ink); }
.prosa a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.prosa blockquote { margin-inline: 0; padding: .3em 0 .3em 1.2em; border-left: 3px solid var(--violet); color: var(--ink); font-style: italic; }
.prosa figure { margin: 1.8em 0; }
.prosa figure img { width: 100%; max-height: 560px; object-fit: contain; border-radius: var(--radius); background: var(--bg-2); }
.prosa .prosa-nota { padding: 14px 18px; border-radius: 14px; background: var(--bg-2); font-size: .95rem; line-height: 1.6; }
.prosa figcaption { margin-top: .6em; font-size: .9rem; line-height: 1.5; color: var(--muted); text-align: center; }
/* Fotos de a dos (noticias con galería) */
.prosa .galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.prosa .galeria figure { margin: 0; }
.prosa .galeria img { aspect-ratio: 3 / 2; max-height: none; object-fit: cover; }
@media (max-width: 600px) { .prosa .galeria { grid-template-columns: 1fr; } }

/* Testimonios: uno por pantalla en celular */
@media (max-width: 760px) {
  .testi { flex: 0 0 100%; }
  .testi-track { scroll-padding-inline: 0; }
}

/* =========================================================
   Herramientas del Decreto 20: calculadora, autoevaluación y documentos
   ========================================================= */
.campo { display: grid; gap: 4px; }
.campo > span { font: 600 1rem/1.3 var(--f-display); color: var(--ink); }
.campo em { font-style: normal; font-weight: 500; color: var(--muted); }
.campo small { font-size: .86rem; line-height: 1.45; color: var(--muted); }
.campo input {
  margin-top: 6px; width: 100%; height: 52px; padding: 0 16px; border-radius: 14px;
  border: 1.5px solid rgba(104,72,219,.22); background: var(--bg);
  font: 600 1.15rem/1 var(--f-display); color: var(--ink);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.campo input[type="text"] { font: 500 1rem/1 var(--f-body); }
.campo input:focus { outline: none; border-color: var(--violet); background: var(--card); box-shadow: 0 0 0 4px rgba(104,72,219,.15); }

/* Calculadora de dotación */
.herramienta { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 28px; align-items: start; }
.calc-form {
  position: sticky; top: 96px; display: grid; gap: 18px; padding: 30px 28px;
  border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.calc-form h2 { margin: 0; }
.calc-resultados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.resultado { padding: 22px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.resultado-tag { font: 700 .74rem/1.3 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--violet); }
.resultado > b { display: block; margin: 10px 0 6px; font: 700 1.35rem/1.25 var(--f-display); color: var(--ink); }
.resultado p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--ink-2); }
.resultado.destacado { background: var(--grad-band); border-color: transparent; color: #fff; }
.resultado.destacado .resultado-tag, .resultado.destacado p { color: rgba(255,255,255,.82); }
.resultado.destacado > b { color: #fff; }
.resultado.destacado > b span { display: block; font-size: 3rem; line-height: 1; margin-bottom: 4px; }
.resultado.ancho { grid-column: 1 / -1; }
.resultado.infra ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.resultado.infra li { display: grid; gap: 4px; padding: 14px; border-radius: 16px; background: var(--bg-2); }
.resultado.infra li b { font: 700 1.9rem/1 var(--f-display); color: var(--violet); }
.resultado.infra li span { font-size: .88rem; line-height: 1.4; color: var(--ink-2); }
.calc-acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 4px; }
.calc-nota { margin: 0; max-width: 66ch; font-size: .88rem; line-height: 1.55; color: var(--muted); }
.calc-nota a { color: var(--violet); }
.tabla-scroll { overflow-x: auto; }
.tabla-dotacion { width: 100%; min-width: 460px; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tabla-dotacion th { padding: 14px 18px; background: var(--bg-2); text-align: left; font: 700 .9rem/1.3 var(--f-display); color: var(--ink); }
.tabla-dotacion td { padding: 12px 18px; border-top: 1px solid var(--line); color: var(--ink-2); }
.tabla-dotacion td + td { font: 700 1.05rem/1 var(--f-display); color: var(--violet); }

/* Autoevaluación del Decreto 20 */
.eval-datos { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; padding: 0; }
.eval-datos li { padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: .92rem; color: var(--ink-2); }
.eval-datos b { font-family: var(--f-display); color: var(--violet); }
.eval-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 30px; align-items: start; }
.eval-guia { position: sticky; top: 96px; padding: 24px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.eval-progreso { display: flex; align-items: center; gap: 14px; }
.eval-progreso p { margin: 0; font: 600 .98rem/1.3 var(--f-display); color: var(--ink); }
.eval-anillo {
  --p: 0; flex: none; width: 84px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--violet) calc(var(--p) * 1%), var(--bg-2) 0); transition: background .4s;
}
.eval-anillo span { width: calc(100% - 16px); aspect-ratio: 1; border-radius: 50%; background: var(--card); display: flex; align-items: center; justify-content: center; gap: 1px; font: 600 .9rem/1 var(--f-display); color: var(--muted); }
.eval-anillo b { font-size: 1.3rem; color: var(--ink); }
.eval-anillo.grande { width: 190px; }
.eval-anillo.grande span { width: calc(100% - 26px); font-size: 1.5rem; }
.eval-anillo.grande b { font-size: 3.4rem; }
.eval-indice { list-style: none; counter-reset: area; display: grid; gap: 4px; margin: 20px 0; padding: 0; }
.eval-indice a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; text-decoration: none; font-size: .93rem; line-height: 1.3; color: var(--ink-2); }
.eval-indice a::before {
  counter-increment: area; content: counter(area); flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--bg-2); color: var(--violet); font: 700 .8rem/1 var(--f-display);
}
.eval-indice a.completa::before { content: "✓"; background: var(--violet-solid); color: #fff; }
.eval-indice a:hover { background: rgba(104,72,219,.08); color: var(--violet); }
.eval-privacidad { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--muted); }
.eval { display: grid; gap: 22px; }
.eval-residencia { padding: 22px 24px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.eval-area { margin: 0; padding: 26px 26px 8px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); scroll-margin-top: 96px; min-width: 0; }
.eval-area legend { float: left; width: 100%; display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 6px; font: 700 1.25rem/1.25 var(--f-display); color: var(--ink); }
.eval-area-num { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--grad-story); color: #fff; font-size: 1rem; }
.pregunta { clear: both; padding: 18px 0; border-top: 1px solid var(--line); scroll-margin-top: 120px; }
.eval-area legend + .pregunta { border-top: 0; }
.pregunta-texto { margin: 0; font: 600 1.02rem/1.45 var(--f-display); color: var(--ink); }
.pregunta-num { color: var(--violet); }
.pregunta-ayuda { margin: 6px 0 12px; font-size: .88rem; line-height: 1.5; color: var(--muted); }
.pregunta.pendiente .pregunta-texto { color: #b42357; }
.pregunta.pendiente .opciones span { border-color: #e0577a; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones label { position: relative; cursor: pointer; }
.opciones input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opciones span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px;
  border: 1.5px solid rgba(104,72,219,.22); background: var(--bg); font: 600 .92rem/1 var(--f-display); color: var(--ink-2);
  transition: background .2s, border-color .2s, color .2s;
}
.opciones label:hover span { border-color: var(--violet); }
.opciones input:focus-visible + span { outline: 3px solid var(--violet); outline-offset: 2px; }
.opciones input[value="si"]:checked + span { background: #e3faf4; border-color: #14a889; color: #0b6b58; }
.opciones input[value="proceso"]:checked + span { background: #fff4dc; border-color: #e3a21a; color: #855400; }
.opciones input[value="no"]:checked + span { background: #fdebf1; border-color: #e0577a; color: #a3204a; }
.opciones input[value="na"]:checked + span { background: var(--bg-2); border-color: var(--muted); color: var(--ink); }
.eval-enviar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 22px; padding: 22px 24px; border-radius: var(--radius); background: var(--bg-2); }
.eval-enviar p { margin: 0; max-width: 56ch; color: var(--ink-2); }
.eval-resultado { scroll-margin-top: 80px; }
.eval-resumen { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px; align-items: center; padding: 34px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.eval-nivel .badge { font-size: .78rem; }
.eval-nivel .badge[data-nivel="preparada"] { background: #e3faf4; color: #0b6b58; }
.eval-nivel .badge[data-nivel="camino"] { background: #fff4dc; color: #855400; }
.eval-nivel .badge[data-nivel="prioridad"] { background: #fdebf1; color: #a3204a; }
.eval-nivel .lead { margin: 14px 0 22px; }
.eval-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 34px; margin: 36px 0; }
.eval-barra-txt { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: var(--ink); }
.eval-barra-txt b { font: 600 .98rem/1.3 var(--f-display); }
.eval-barra-txt span { font: 700 .98rem/1.3 var(--f-display); color: var(--violet); }
.eval-barra-pista { height: 10px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.eval-barra-pista i { display: block; height: 100%; border-radius: inherit; background: var(--grad-btn); }
.eval-prioridades-titulo { margin: 0 0 6px; }
.eval-prioridades { list-style: none; counter-reset: prio; display: grid; gap: 12px; margin: 18px 0 24px; padding: 0; }
.eval-prioridades li { counter-increment: prio; position: relative; padding: 18px 20px 18px 70px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.eval-prioridades li::before {
  content: counter(prio); position: absolute; left: 20px; top: 18px; width: 34px; height: 34px; border-radius: 12px;
  display: grid; place-items: center; background: var(--grad-band); color: #fff; font: 700 .95rem/1 var(--f-display);
}
.eval-prioridades li.sin-brechas::before { content: "✓"; }
.eval-prioridades b { display: block; font: 600 1rem/1.4 var(--f-display); color: var(--ink); }
.eval-prioridades p { margin: 6px 0 0; font-size: .94rem; line-height: 1.55; color: var(--ink-2); }
.eval-prioridades .eval-meta { font-size: .85rem; color: var(--muted); }
.eval-prioridades .eval-meta a { color: var(--violet); font-weight: 600; }
/* Tests: sin datos de contacto, parte del resultado queda borrosa y el formulario va entre las prioridades */
.eval-oculto { filter: blur(7px); opacity: .55; user-select: none; pointer-events: none; }
.eval-candado { margin: 4px 0 18px; padding: 26px 28px; border: 1.5px solid rgba(104,72,219,.28); box-shadow: 0 24px 60px -40px rgba(56,34,150,.45); }
.eval-candado .cot-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eval-candado .campo input[type="text"] { font: 500 1rem/1 var(--f-body); }
@media (max-width: 620px) { .eval-candado { padding: 20px 18px; } .eval-candado .cot-campos { grid-template-columns: minmax(0, 1fr); } }

/* Búsquedas relacionadas */
.temas { padding: 24px 26px; border-radius: var(--radius); background: var(--bg-2); }
.temas-titulo { margin: 0 0 14px; font: 700 .76rem/1.3 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.temas ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.temas a { display: inline-flex; padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: .88rem; line-height: 1.3; color: var(--ink-2); text-decoration: none; transition: border-color .2s, color .2s; }
.temas a:hover { border-color: var(--violet); color: var(--violet); }

/* Documentos básicos del Decreto 20 */
.linea-tiempo { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0 0 30px; padding: 0; }
.linea-tiempo li { display: grid; align-content: start; gap: 6px; padding: 18px 16px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.linea-tiempo b { font: 700 .98rem/1.3 var(--f-display); color: var(--violet); }
.linea-tiempo span { font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
.linea-tiempo li.hoy { background: var(--grad-band); border-color: transparent; }
.linea-tiempo li.hoy b, .linea-tiempo li.hoy span { color: #fff; }
.doc-lista { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; }
.split .doc-lista { grid-template-columns: 1fr; }
.doc-lista.dos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.doc-lista li { position: relative; display: grid; align-content: start; gap: 6px; padding: 20px 22px 20px 56px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.doc-lista li::before { content: ""; position: absolute; left: 20px; top: 21px; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--violet); background: rgba(104,72,219,.06); }
.doc-lista b { font: 700 1.02rem/1.3 var(--f-display); color: var(--ink); }
.doc-lista span { font-size: .94rem; line-height: 1.55; color: var(--ink-2); }
.doc-lista span a { color: var(--violet); font-weight: 600; }
.doc-lista small { font: 700 .72rem/1.3 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--violet); }

@media (max-width: 1024px) {
  .herramienta, .eval-layout { grid-template-columns: minmax(0, 1fr); }
  .calc-form { position: static; }
  .eval-indice, .eval-privacidad { display: none; }
  /* En celular y tablet, el avance queda fijo bajo la cabecera mientras se responde */
  .eval-guia { top: 76px; z-index: 20; padding: 10px 16px; border-radius: 18px; }
  .eval-guia .eval-anillo { width: 52px; }
  .eval-guia .eval-anillo span { width: calc(100% - 10px); font-size: .72rem; }
  .eval-guia .eval-anillo b { font-size: .95rem; }
  .eval-area, .eval-resultado { scroll-margin-top: 170px; }
  .pregunta { scroll-margin-top: 190px; }
  .linea-tiempo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-lista.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .calc-resultados, .eval-areas, .doc-lista, .doc-lista.dos, .linea-tiempo { grid-template-columns: minmax(0, 1fr); }
  .resultado.infra ul { grid-template-columns: minmax(0, 1fr); }
  .eval-resumen { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 24px; padding: 26px 20px; }
  .eval-resumen .btn-row { justify-content: center; }
  .eval-area { padding: 20px 18px 6px; }
  .eval-prioridades li { padding: 16px 16px 16px 62px; }
  .eval-prioridades li::before { left: 16px; }
  .opciones span { padding: 0 16px; }
}
/* =========================================================
   Biblioteca de documentos (/recursos)
   ========================================================= */
.biblio-ui[hidden], .biblioteca [hidden] { display: none !important; }
.biblio-filtros { display: grid; gap: 14px; margin-bottom: 34px; padding: 20px 22px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.biblio-buscar input {
  width: 100%; height: 50px; padding: 0 16px 0 46px; border-radius: 14px; border: 1.5px solid rgba(104,72,219,.22);
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a6488' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px center / 18px;
  font: 500 1rem/1 var(--f-body); color: var(--ink); transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.biblio-buscar input:focus { outline: none; border-color: var(--violet); background-color: var(--card); box-shadow: 0 0 0 4px rgba(104,72,219,.15); }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.filtro {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid rgba(104,72,219,.22); background: var(--bg); font: 600 .9rem/1 var(--f-display); color: var(--ink-2);
  cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.filtro span { font-size: .78rem; color: var(--muted); }
.filtro:hover { border-color: var(--violet); }
.filtro:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
.filtro.is-on { background: var(--violet-solid); border-color: var(--violet-solid); color: #fff; }
.filtro.is-on span { color: rgba(255,255,255,.82); }
.biblio-opciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.biblio-check { display: inline-flex; align-items: center; gap: 8px; font: 600 .92rem/1.3 var(--f-display); color: var(--ink-2); cursor: pointer; }
.biblio-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--violet); }
.biblio-formato select { height: 40px; padding: 0 12px; border-radius: 12px; border: 1.5px solid rgba(104,72,219,.22); background: var(--bg); font: 600 .9rem/1 var(--f-display); color: var(--ink-2); }
.biblio-resultado { margin: 0 0 0 auto; font-size: .9rem; color: var(--muted); }
.biblio-top { margin-bottom: 34px; padding: 24px 26px; border-radius: var(--radius); background: var(--grad-band); color: #fff; }
.biblio-top h2 { margin: 0 0 14px; color: #fff; }
.biblio-top ol { list-style: none; counter-reset: top; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 0; padding: 0; }
.biblio-top li { counter-increment: top; display: grid; gap: 4px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.12); }
.biblio-top a { font: 600 .98rem/1.35 var(--f-display); color: #fff; text-decoration: none; }
.biblio-top a::before { content: counter(top) ". "; }
.biblio-top a:hover { text-decoration: underline; }
.biblio-top small { font-size: .82rem; color: rgba(255,255,255,.8); }
.biblio-vacio { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 24px; padding: 20px 22px; border-radius: var(--radius); background: var(--bg-2); color: var(--ink-2); }
.biblio-cat { scroll-margin-top: 96px; }
.biblio-cat + .biblio-cat { margin-top: 48px; }
.biblio-cat-head { display: grid; gap: 6px; max-width: 72ch; margin-bottom: 18px; }
.biblio-cat-head h2, .biblio-cat-head p { margin: 0; }
.biblio-cat-head p { line-height: 1.6; color: var(--ink-2); }
.biblioteca > .container > .calc-nota { margin-top: 36px; }
.docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.doc {
  display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line);
  scroll-margin-top: 110px; transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.doc:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.doc:target { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(104,72,219,.15); }
.doc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.doc-tipo, .doc-d20 { padding: 4px 10px; border-radius: 999px; font: 700 .68rem/1.3 var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
.doc-tipo { background: rgba(104,72,219,.1); color: var(--violet); }
.doc-d20 { background: #e3faf4; color: #0b6b58; }
.doc h3 { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.doc p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--ink-2); }
.doc .doc-meta { font-size: .8rem; color: var(--muted); }
.doc .doc-descargas { font: 600 .8rem/1.3 var(--f-display); color: var(--violet); }
.doc .btn-row { gap: 8px; margin-top: auto; padding-top: 4px; }
@media (max-width: 1024px) {
  .docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .docs { grid-template-columns: minmax(0, 1fr); }
  .biblio-filtros { padding: 16px; }
  /* Categorías en una fila deslizable */
  .filtros { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .filtros::-webkit-scrollbar { display: none; }
  .filtro { flex: none; }
  .biblio-resultado { margin-left: 0; }
  .biblio-top { padding: 20px 18px; }
}
/* Resumen citable al inicio de una página (respuesta directa para buscadores y asistentes de IA) */
.resumen { display: grid; gap: 16px; padding: 28px 30px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.resumen h2 { margin: 0; }
.resumen > p { margin: 0; max-width: 80ch; font-size: 1.05rem; line-height: 1.7; color: var(--ink-2); }
.resumen-datos { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 26px; margin: 4px 0 0; padding: 0; }
.resumen-datos li { display: grid; gap: 4px; align-content: start; }
.resumen-datos b { font: 700 .74rem/1.3 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--violet); }
.resumen-datos span { font-size: .95rem; line-height: 1.55; color: var(--ink); }
.resumen-datos a { color: var(--violet); font-weight: 600; }
.faq-articulo { margin-top: 1em; }
.prosa .fuentes { font-size: .95rem; }
.prosa table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.5; display: block; overflow-x: auto; }
.prosa th, .prosa td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.prosa th { background: var(--bg-2); color: var(--ink); font-weight: 700; }
/* En celular las tablas de 3 o 4 columnas se deslizan de lado en vez de aplastar el texto */
@media (max-width: 600px) { .prosa th, .prosa td { min-width: 8.5rem; } }
@media (max-width: 860px) { .resumen-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .resumen { padding: 22px 18px; } .resumen-datos { grid-template-columns: minmax(0, 1fr); } }
/* Aviso de rol: MACA es software y no atiende pacientes (deriva al partner que sí atiende) */
.aviso-rol { margin-top: 22px; }
.aviso-rol p { margin: 0; line-height: 1.6; }
.aviso-rol a { color: var(--violet); font-weight: 700; white-space: nowrap; }
/* =========================================================
   Cotizador (cotizador.html, js/cotizador.js)
   ========================================================= */
.cot-pestanas { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; padding: 6px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.cot-pestanas button { padding: 11px 20px; border: 0; border-radius: 999px; background: transparent; font: 600 .98rem/1.2 var(--f-display); color: var(--ink-2); cursor: pointer; transition: background .2s, color .2s; }
.cot-pestanas button:hover { color: var(--violet); background: rgba(104,72,219,.08); }
.cot-pestanas button[aria-selected="true"] { background: var(--grad-btn); color: #fff; box-shadow: 0 12px 26px -14px rgba(104,72,219,.9); }
.cot-pestanas button:focus-visible { outline: 3px solid rgba(104,72,219,.35); outline-offset: 2px; }
.cotizador { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
.cot-paneles { min-width: 0; }
/* Mientras el Worker calcula, el total se atenúa; si no responde, se oculta el detalle */
.cotizador .cotizacion .resultado { transition: opacity .2s; }
.cotizador.calculando .cotizacion .resultado:not(.cot-contacto) { opacity: .55; }
.cotizador.sin-calculo [data-salida="total"], .cotizador.sin-calculo [data-salida="lineas"], .cotizador.sin-calculo [data-salida="notas"] { visibility: hidden; }
.cot-paneles [data-panel][hidden] { display: none; }
.cot-intro { margin: -6px 0 0; font-size: .95rem; line-height: 1.5; color: var(--muted); }
.cot-grupo { display: grid; gap: 18px; }
.cot-grupo[hidden] { display: none; }
.cot-opciones { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.cot-opciones legend { margin-bottom: 8px; padding: 0; font: 600 1rem/1.3 var(--f-display); color: var(--ink); }
.cot-opciones label { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid rgba(104,72,219,.22); background: var(--bg); font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s; }
.cot-opciones label:has(input:checked) { border-color: var(--violet); background: rgba(104,72,219,.07); }
.cot-opciones input, .cot-check input { width: 18px; height: 18px; flex: none; accent-color: var(--violet); }
.cot-contador { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 8px; margin-top: 6px; }
.cot-contador input { margin-top: 0; text-align: center; }
.cot-contador button { height: 52px; border-radius: 14px; border: 1.5px solid rgba(104,72,219,.22); background: var(--card); font: 600 1.4rem/1 var(--f-display); color: var(--violet); cursor: pointer; }
.cot-contador button:hover { border-color: var(--violet); background: rgba(104,72,219,.07); }
.cot-residencias.varias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-height: 380px; overflow-y: auto; padding: 2px; }
.cot-residencias.varias .campo > span { font-size: .92rem; }
.cot-residencias.varias .campo input { height: 46px; }
.cot-suma { margin: -6px 0 0; font: 600 .92rem/1.4 var(--f-display); color: var(--violet); }
.cot-check { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; line-height: 1.45; color: var(--ink); cursor: pointer; }
.cot-check input { margin-top: 2px; }
.cot-check small { display: block; color: var(--muted); }
.cot-check a { color: var(--violet); font-weight: 600; }
.cot-tramos > span { font: 600 1rem/1.3 var(--f-display); color: var(--ink); }
.cot-tramos ul { list-style: none; display: grid; gap: 6px; margin: 10px 0 0; padding: 0; }
.cot-tramos li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; border-radius: 12px; background: var(--bg); font-size: .92rem; color: var(--ink-2); }
.cot-tramos li b { color: var(--ink); }
.cot-tramos li.activo { background: rgba(104,72,219,.1); box-shadow: inset 0 0 0 1.5px var(--violet); color: var(--ink); }
.cotizacion .resultado.destacado > b { font-size: 1.1rem; }
.cotizacion .resultado.destacado > b span { font-size: clamp(2.3rem, 5vw, 3.2rem); }
.cot-lineas { list-style: none; display: grid; margin: 12px 0 0; padding: 0; }
.cot-lineas li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cot-lineas li:last-child { border-bottom: 0; }
.cot-lineas li > span { display: grid; gap: 2px; min-width: 0; }
.cot-lineas b { font: 600 1rem/1.35 var(--f-display); color: var(--ink); }
.cot-lineas small { font-size: .88rem; line-height: 1.4; color: var(--muted); }
.cot-lineas strong { flex: none; font: 700 1.05rem/1.2 var(--f-display); color: var(--ink); }
.cot-lineas li.descuento strong { color: #0f9a6c; }
.cot-notas { margin: 12px 0 0; padding-left: 1.1em; font-size: .9rem; line-height: 1.55; color: var(--ink-2); }
.cot-contacto { display: grid; gap: 14px; }
.cot-contacto h3 { margin: 0; font: 700 1.25rem/1.3 var(--f-display); color: var(--ink); }
.cot-contacto > p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ink-2); }
.cot-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cot-contacto .campo input[type="email"], .cot-contacto .campo input[type="tel"] { font: 500 1rem/1 var(--f-body); }
.cot-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cot-enviar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.cot-reunion { font-weight: 600; color: var(--violet); }
.cot-estado { margin: 0; font-size: .92rem; line-height: 1.5; }
.cot-estado:empty { display: none; }
.cot-estado.error { color: #b42318; }
.cot-estado.ok { padding: 12px 14px; border-radius: 14px; background: rgba(27,217,154,.12); color: #0b6b4d; }
.cot-estado a { color: inherit; font-weight: 700; }
@media (max-width: 1024px) {
  .cotizador { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .cot-pestanas { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; border-radius: 22px; }
  .cot-pestanas button { border-radius: 16px; }
  .cot-campos, .cot-residencias.varias { grid-template-columns: minmax(0, 1fr); }
  .cot-lineas li { flex-wrap: wrap; }
}

@media print {
  .site-header, .site-footer, .wa-float, .cot-float, .fantasma-scroll, .mobile-menu { display: none !important; }
}

/* =========================================================
   MODO OSCURO
   Botón de luna junto al tamaño del texto (js/main.js). Lo activa html[data-tema="oscuro"],
   que el script del <head> aplica antes de pintar si la persona lo eligió con el botón (localStorage
   "maca-tema") o, si no ha elegido, cuando su equipo está en modo oscuro (prefers-color-scheme).
   Paleta del manual de marca para secciones oscuras: fondo noche, subtexto #C2BDDF, acentos aqua y lila,
   logo blanco y degradado brillante. Todo el texto cumple al menos 4.5:1 de contraste.
   ========================================================= */
html[data-tema="oscuro"] {
  color-scheme: dark;
  --ink: #f3f1fb;
  --ink-2: #c2bddf;
  --muted: #a39dc8;
  --line: rgba(255, 255, 255, .12);
  --bg: #120e2a;
  --bg-2: #1a1538;
  --card: #221c4b;
  --night: #0b0820;
  --night-2: #120e2a;
  --violet: #b79cff;                  /* violeta para texto, bordes y foco sobre fondo oscuro */
  --violet-600: #cdbbff;
  --field: #1a1538;
  --field-line: rgba(255, 255, 255, .2);
  --glass: rgba(34, 28, 75, .95);
  --glass-soft: rgba(34, 28, 75, .9);
  --glass-line: rgba(255, 255, 255, .1);
  --ghost-bg: rgba(255, 255, 255, .06);
  --header-bg: rgba(18, 14, 42, .84);
  --menu-bg: rgba(18, 14, 42, .99);
  --bg-0: rgba(18, 14, 42, 0);
  --grad-ink: var(--grad);            /* el degradado brillante se lee sobre noche */
  --shadow: 0 20px 50px -24px rgba(0, 0, 0, .75);
  --shadow-lg: 0 40px 90px -40px rgba(0, 0, 0, .9);
}
/* Se mantienen claros (con sus colores de siempre): maquetas del software, pantallas de los equipos,
   mosaicos de logos y el chip de Cuida Red, porque muestran piezas o logos pensados para fondo blanco */
html[data-tema="oscuro"] :is(.mock, .svc-demo, .device-screen, .ally, .partner, .hd-ventana, .hd-pantalla) {
  --ink: #1b1537; --ink-2: #463f66; --muted: #6a6488; --line: rgba(27, 21, 55, .10);
  --bg: #f7f6fc; --bg-2: #efedf9; --card: #fff; --violet: #6848db; --violet-600: #5635c9;
  color-scheme: light;
}
html[data-tema="oscuro"] .partner { background: #fff; color: var(--ink); }
html[data-tema="oscuro"] .ally span { color: var(--muted); }

/* Logo blanco, acentos aqua como en las secciones oscuras del manual */
html[data-tema="oscuro"] .brand-logo.logo-claro { display: none; }
html[data-tema="oscuro"] .brand-logo.logo-oscuro { display: block; }
html[data-tema="oscuro"] :is(.eyebrow, .link-arrow) { color: var(--teal); }
html[data-tema="oscuro"] .hero .blob { opacity: .55; }
html[data-tema="oscuro"] .page-hero .blob { opacity: .4; }

/* Cabecera, menús y ajustes */
html[data-tema="oscuro"] :is(.nav-link:hover, .nav-link[aria-expanded="true"], .menu-row:hover, .menu-row[aria-expanded="true"], .menu-row:focus-visible) { background: rgba(255, 255, 255, .07); }
html[data-tema="oscuro"] .menu-panel { border-color: var(--glass-line); }
html[data-tema="oscuro"] :is(.ajustes, .burger) { background: rgba(255, 255, 255, .07); }
html[data-tema="oscuro"] .text-size button[aria-pressed="true"] { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: none; }
html[data-tema="oscuro"] .tema-btn { color: var(--teal); }
html[data-tema="oscuro"] .tema-btn::before { background: rgba(255, 255, 255, .18); }
html[data-tema="oscuro"] .tema-btn:hover { background: rgba(255, 255, 255, .1); }
html[data-tema="oscuro"] .tema-btn .ico-luna { display: none; }
html[data-tema="oscuro"] .tema-btn .ico-sol { display: block; }

/* Botones y etiquetas */
html[data-tema="oscuro"] .btn-ghost { box-shadow: inset 0 0 0 2px rgba(183, 156, 255, .4); }
html[data-tema="oscuro"] .btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--violet), 0 18px 30px -18px rgba(0, 0, 0, .8); }
html[data-tema="oscuro"] .btn.is-soon:hover { box-shadow: inset 0 0 0 2px rgba(183, 156, 255, .4); }
html[data-tema="oscuro"] .btn-light { color: var(--violet-solid); }
html[data-tema="oscuro"] :is(.badge, .post-cat, .doc-tipo, .plan-tag, .light-status) { background: rgba(183, 156, 255, .16); }
html[data-tema="oscuro"] .tag { background: rgba(79, 249, 221, .14); color: var(--teal); }
html[data-tema="oscuro"] .card.grad .tag { background: rgba(255, 255, 255, .22); color: #fff; }

/* Tarjetas y bloques */
html[data-tema="oscuro"] .pillar { box-shadow: none; }
html[data-tema="oscuro"] .tab img { filter: brightness(0) invert(1); opacity: .85; }
html[data-tema="oscuro"] .tab[aria-selected="true"] img { opacity: 1; }
html[data-tema="oscuro"] .p-tab[aria-selected="true"] { color: #1b1537; }
html[data-tema="oscuro"] .p-tab[aria-selected="true"] .badge { background: rgba(104, 72, 219, .12); color: var(--violet-solid); }
html[data-tema="oscuro"] .plan.featured { box-shadow: inset 0 0 0 1px rgba(79, 249, 221, .3), var(--shadow-lg); }
html[data-tema="oscuro"] .faq summary .plus { background: rgba(183, 156, 255, .14); }
html[data-tema="oscuro"] .note { background: rgba(183, 156, 255, .08); }
html[data-tema="oscuro"] .scroll-cue { border-color: rgba(183, 156, 255, .4); }
/* Logos del carrusel: en blanco y sin fondo (versiones de tools/logos_blancos.py) */
html[data-tema="oscuro"] .logo-img:not(.logo-blanco) { display: none; }
html[data-tema="oscuro"] .logo-img.logo-blanco { display: block; filter: none; opacity: .72; }
html[data-tema="oscuro"] .logo-img.logo-blanco:hover { filter: none; opacity: 1; }

/* Formularios, tests y biblioteca */
html[data-tema="oscuro"] :is(.campo input, .opciones span, .filtro, .biblio-buscar input, .biblio-formato select, .cot-opciones label, .cot-contador button) { border-color: var(--field-line); }
html[data-tema="oscuro"] :is(.opciones label:hover span, .filtro:hover, .cot-contador button:hover) { border-color: var(--violet); }
html[data-tema="oscuro"] .cot-opciones label:has(input:checked) { border-color: var(--violet); background: rgba(183, 156, 255, .1); }
html[data-tema="oscuro"] :is(.campo input:focus, .biblio-buscar input:focus) { background-color: var(--card); box-shadow: 0 0 0 4px rgba(183, 156, 255, .22); }
html[data-tema="oscuro"] .filtro.is-on { border-color: var(--violet-solid); }
html[data-tema="oscuro"] .pregunta.pendiente .pregunta-texto { color: #ff9cbb; }
html[data-tema="oscuro"] .cot-estado.error { color: #ff9a9a; }
html[data-tema="oscuro"] .cot-estado.ok { background: rgba(27, 217, 154, .14); color: #6ff3c6; }
html[data-tema="oscuro"] .cot-lineas li.descuento strong { color: #6ff3c6; }
html[data-tema="oscuro"] .cot-tramos li.activo { background: rgba(183, 156, 255, .12); }

/* Botones flotantes */
html[data-tema="oscuro"] .wa-float { box-shadow: 0 0 0 1px rgba(79, 249, 221, .35), 0 16px 34px -12px rgba(79, 249, 221, .35); }
html[data-tema="oscuro"] .wa-float:hover { box-shadow: 0 0 0 1px rgba(79, 249, 221, .6), 0 20px 38px -12px rgba(79, 249, 221, .45); }
html[data-tema="oscuro"] .wa-float::before { border-color: rgba(79, 249, 221, .55); }
html[data-tema="oscuro"] .cot-float { box-shadow: inset 0 0 0 2px rgba(183, 156, 255, .38), 0 16px 34px -14px rgba(0, 0, 0, .85); }

/* =========================================================
   HALLOWEEN: en octubre el cursor es una calabaza de MACA (tallo aqua, hoja violeta).
   La clase html.halloween la pone el script del <head> solo entre el 1 y el 31 de octubre,
   así que se apaga sola en noviembre. Imágenes: tools/calabaza.py. El punto activo es la punta del tallo.
   ========================================================= */
html.halloween, html.halloween body { cursor: url("../assets/halloween/calabaza.png") 2 3, auto; }
html.halloween :is(a[href], button, summary, label, select, [role="button"], [role="tab"], input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"], .btn, .opciones input) {
  cursor: url("../assets/halloween/calabaza-click.png") 2 3, pointer;
}
html.halloween :is(.btn, .menu-row).is-soon { cursor: url("../assets/halloween/calabaza.png") 2 3, default; }
html.halloween :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="range"]), textarea, [contenteditable="true"]) { cursor: text; }

/* Halloween: un fantasma junto a la barra de desplazamiento baja y sube con la página
   y al final llega a una pequeña residencia (se le encienden las ventanas). Decorativo: sin clics ni lector de pantalla */
.fantasma-scroll { display: none; }
html.halloween .fantasma-scroll { display: block; position: fixed; z-index: 80; right: 4px; top: 96px; bottom: 160px; width: 28px; pointer-events: none; }
.fantasma-ruta { position: absolute; left: 50%; top: 18px; bottom: 26px; border-left: 2px dashed rgba(104, 72, 219, .22); }
html[data-tema="oscuro"] .fantasma-ruta { border-color: rgba(183, 156, 255, .3); }
.fantasma { position: absolute; left: 0; top: 0; width: 28px; height: 32px; will-change: transform; transition: transform .12s linear; }
.fantasma svg { display: block; width: 100%; height: 100%; transform-origin: 50% 60%; filter: drop-shadow(0 3px 5px rgba(56, 34, 150, .3)); animation: fantasmaFlota 2.4s ease-in-out infinite; transition: rotate .25s var(--ease); }
html[data-tema="oscuro"] .fantasma svg { filter: drop-shadow(0 0 6px rgba(79, 249, 221, .55)); }
.fantasma-scroll.moviendo[data-dir="baja"] .fantasma svg { rotate: 10deg; }
.fantasma-scroll.moviendo[data-dir="sube"] .fantasma svg { rotate: -10deg; }
.fantasma .ojos { transition: transform .25s var(--ease); }
.fantasma-scroll[data-dir="baja"] .fantasma .ojos { transform: translateY(1.3px); }
.fantasma-scroll[data-dir="sube"] .fantasma .ojos { transform: translateY(-1.3px); }
.casita { position: absolute; left: 0; bottom: 0; width: 28px; height: 26px; }
.casita svg { display: block; width: 100%; height: 100%; }
.casita .ventana { fill: #dcd8ee; transition: fill .4s; }
.fantasma-scroll.llego .casita .ventana { fill: #ffd65c; }
@keyframes fantasmaFlota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@media (max-width: 768px) {
  html.halloween .fantasma-scroll { right: 2px; top: 82px; bottom: 150px; width: 22px; }
  .fantasma { width: 22px; height: 25px; }
  .casita { width: 22px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) { .fantasma svg { animation: none; } .fantasma { transition: none; } }

/* =========================================================
   HOSPITALIZACIÓN DOMICILIARIA (software-hospitalizacion-domiciliaria.html)
   Hero con la ruta del día animada, explorador de funcionalidades que avanza solo
   y modelo de negocio a la medida. Las pantallas de ejemplo quedan claras también en modo oscuro.
   ========================================================= */
.hd-demo { position: relative; width: min(100%, 560px); margin-inline: auto; padding: 22px 0; }
.hd-ventana {
  position: relative; z-index: 1; overflow: hidden; border-radius: 22px; background: #fff; color: #1b1537;
  border: 1px solid rgba(27, 21, 55, .1); box-shadow: 0 40px 90px -40px rgba(56, 34, 150, .55);
}
.hd-barra { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f1effa; font: 600 .74rem/1 var(--f-display); color: #463f66; }
.hd-barra i { width: 9px; height: 9px; border-radius: 50%; background: #d8d3ef; }
.hd-barra i:nth-child(1) { background: #ff8a8a; } .hd-barra i:nth-child(2) { background: #ffd36e; } .hd-barra i:nth-child(3) { background: #5ee6b0; }
.hd-barra span { margin-left: 8px; }
.hd-barra em { margin-left: auto; font-style: normal; display: inline-flex; align-items: center; gap: 6px; color: #0f9a6c; }
.hd-cuerpo { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 12px; padding: 12px; }
.hd-mapa { position: relative; overflow: hidden; border-radius: 14px; background: #e9f4f3; }
.hd-mapa svg { display: block; width: 100%; height: auto; }
.hd-calle { fill: none; stroke: #fff; stroke-linecap: round; }
.hd-manzana { fill: #dcecea; }
.hd-parque { fill: #c9eedf; }
.hd-ruta { fill: none; stroke: url(#hdGrad); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 640; stroke-dashoffset: 640; animation: hdRuta 2.6s var(--ease) .4s forwards; }
.hd-pin { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: hdPin .5s var(--ease) forwards; }
.hd-pin circle { fill: #6848db; stroke: #fff; stroke-width: 2; }
.hd-pin.hecha circle { fill: #10b981; }
.hd-pin text { fill: #fff; font: 700 9px var(--f-display); text-anchor: middle; dominant-baseline: central; }
.hd-base rect { fill: #1b1537; }
.hd-base path { stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.hd-movil { fill: #12f2d4; stroke: #1b1537; stroke-width: 2; }
.hd-movil-halo { fill: rgba(18, 242, 212, .35); animation: hdHalo 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.hd-visitas { list-style: none; display: grid; align-content: start; gap: 7px; margin: 0; padding: 0; }
.hd-visitas li { display: grid; gap: 2px; padding: 8px 10px; border-radius: 12px; background: #f7f6fc; border: 1px solid rgba(27, 21, 55, .08); font-size: .7rem; line-height: 1.35; color: #463f66; opacity: 0; animation: fadeUp .5s var(--ease) forwards; }
.hd-visitas li:nth-child(2) { animation-delay: .25s; } .hd-visitas li:nth-child(3) { animation-delay: .5s; } .hd-visitas li:nth-child(4) { animation-delay: .75s; }
.hd-visitas b { font: 600 .78rem/1.25 var(--f-display); color: #1b1537; }
.hd-visitas .en-curso { border-color: rgba(104, 72, 219, .45); background: #fff; box-shadow: 0 10px 24px -16px rgba(104, 72, 219, .8); }
.hd-chip { justify-self: start; display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; padding: 2px 8px; border-radius: 999px; font: 700 .62rem/1.5 var(--f-display); letter-spacing: .04em; }
.hd-chip.ok { background: rgba(16, 185, 129, .14); color: #0b7a55; }
.hd-chip.va { background: rgba(104, 72, 219, .12); color: #5635c9; }
.hd-chip.pe { background: #efedf9; color: #6a6488; }
.hd-chip .pulse-dot { width: 7px; height: 7px; background: #6848db; color: rgba(104, 72, 219, .6); }
.hd-demo .float-card { z-index: 2; }
.hd-demo .hd-fc1 { left: -7%; top: 58%; }
.hd-demo .hd-fc2 { right: -4%; bottom: -3%; animation-delay: -2s; }
@keyframes hdRuta { to { stroke-dashoffset: 0; } }
@keyframes hdPin { from { opacity: 0; transform: translateY(-6px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes hdHalo { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }

/* Explorador de funcionalidades: pestañas que avanzan solas (se detiene al pasar el mouse o usar el teclado) */
.hd-explorador { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 26px; align-items: start; }
.hd-tabs { display: grid; gap: 8px; }
.hd-tab {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px;
  border-radius: 16px; border: 1px solid var(--line); background: var(--card); text-align: left; cursor: pointer;
  font: 600 1rem/1.25 var(--f-display); color: var(--ink); transition: background .3s var(--ease), color .3s, box-shadow .3s, transform .3s var(--ease);
}
.hd-tab:hover { transform: translateX(3px); }
.hd-tab svg { width: 22px; height: 22px; flex: none; color: var(--violet); }
.hd-tab small { display: block; margin-top: 3px; font: 400 .82rem/1.35 var(--f-body); color: var(--muted); }
.hd-tab[aria-selected="true"] { background: var(--violet-solid); border-color: transparent; color: #fff; box-shadow: var(--shadow); transform: translateX(6px); }
.hd-tab[aria-selected="true"] svg, .hd-tab[aria-selected="true"] small { color: rgba(255, 255, 255, .86); }
.hd-progreso { position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: var(--grad); }
.hd-explorador.auto .hd-tab[aria-selected="true"] .hd-progreso { animation: hdProgreso var(--hd-ciclo, 7s) linear forwards; }
@keyframes hdProgreso { to { width: 100%; } }
.hd-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: center; min-height: 440px;
  padding: 34px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.hd-panel[hidden] { display: none; }
.hd-panel > * { animation: fadeUp .55s var(--ease) both; }
.hd-panel > :nth-child(2) { animation-delay: .1s; }
.hd-panel h3 { margin: 12px 0 12px; font-size: clamp(1.35rem, 2.1vw, 1.75rem); }
.hd-panel > div > p { color: var(--ink-2); line-height: 1.65; }
.hd-panel .feature-list { margin: 20px 0 0; font-size: .97rem; }
.hd-panel .feature-list li { color: var(--ink-2); }

/* Pantallas de ejemplo de cada funcionalidad */
.hd-pantalla {
  display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: #fff; color: #1b1537; font-size: .78rem; line-height: 1.4;
  border: 1px solid rgba(27, 21, 55, .1); box-shadow: 0 30px 60px -30px rgba(56, 34, 150, .45);
}
.hd-pantalla > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(27, 21, 55, .08); font: 600 .84rem/1.2 var(--f-display); }
.hd-pantalla > header small { font: 600 .66rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: #6a6488; }
.hd-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #f7f6fc; opacity: 0; animation: fadeUp .45s var(--ease) forwards; }
.hd-fila:nth-of-type(2) { animation-delay: .35s; } .hd-fila:nth-of-type(3) { animation-delay: .7s; } .hd-fila:nth-of-type(4) { animation-delay: 1.05s; }
.hd-fila:nth-of-type(5) { animation-delay: 1.4s; } .hd-fila:nth-of-type(6) { animation-delay: 1.75s; }
.hd-fila span { color: #6a6488; }
.hd-fila b { font: 600 .8rem/1.3 var(--f-display); color: #1b1537; text-align: right; }
.hd-ok { color: #0b7a55; font-weight: 700; }
.hd-boton { justify-self: end; padding: 7px 14px; border-radius: 999px; background: #6848db; color: #fff; font: 600 .74rem/1 var(--f-display); opacity: 0; animation: fadeUp .45s var(--ease) 2.1s forwards, hdLatido 1.6s ease-in-out 2.6s infinite; }
@keyframes hdLatido { 0%, 100% { box-shadow: 0 0 0 0 rgba(104, 72, 219, .45); } 50% { box-shadow: 0 0 0 7px rgba(104, 72, 219, 0); } }
.hd-mini-mapa { position: relative; overflow: hidden; border-radius: 12px; background: #e9f4f3; }
.hd-mini-mapa svg { display: block; width: 100%; height: auto; }
.hd-barras { display: grid; gap: 9px; }
.hd-barra-vgi { display: grid; grid-template-columns: 92px minmax(0, 1fr) 54px; align-items: center; gap: 10px; }
.hd-barra-vgi span { color: #463f66; font-weight: 600; }
.hd-barra-vgi i { height: 8px; border-radius: 999px; background: #efedf9; overflow: hidden; }
.hd-barra-vgi i::after { content: ""; display: block; height: 100%; width: var(--v, 50%); border-radius: inherit; background: var(--grad-btn); animation: fill 1.6s var(--ease) both; }
.hd-barra-vgi b { font: 700 .78rem/1 var(--f-display); text-align: right; }
.hd-semana { display: grid; grid-template-columns: 64px repeat(7, minmax(0, 1fr)); gap: 4px; align-items: center; font-size: .66rem; }
.hd-semana > span { color: #6a6488; text-align: center; font-weight: 700; }
.hd-semana > span:first-child, .hd-semana .quien { text-align: left; }
.hd-semana .quien { font: 600 .7rem/1.2 var(--f-display); color: #1b1537; }
.hd-semana i { height: 22px; border-radius: 6px; background: #efedf9; }
.hd-semana i.m { background: rgba(104, 72, 219, .85); } .hd-semana i.t { background: rgba(0, 209, 240, .8); } .hd-semana i.n { background: #1b1537; }
.hd-semana i.m, .hd-semana i.t, .hd-semana i.n { transform-origin: left; animation: hdBloque .4s var(--ease) both; animation-delay: calc(var(--i, 0) * .06s); }
@keyframes hdBloque { from { transform: scaleX(0); } to { transform: none; } }
.hd-leyenda { display: flex; flex-wrap: wrap; gap: 10px; color: #6a6488; font-size: .68rem; }
.hd-leyenda i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 3px; vertical-align: -1px; }
.hd-linea { position: relative; display: grid; gap: 10px; padding-left: 18px; }
.hd-linea::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(#12f2d4, #6848db, #d578d0); border-radius: 2px; }
.hd-linea > div { position: relative; padding: 8px 10px; border-radius: 10px; background: #f7f6fc; opacity: 0; animation: fadeUp .45s var(--ease) forwards; }
.hd-linea > div::before { content: ""; position: absolute; left: -17px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid #6848db; }
.hd-linea > div:nth-child(2) { animation-delay: .35s; } .hd-linea > div:nth-child(3) { animation-delay: .7s; } .hd-linea > div:nth-child(4) { animation-delay: 1.05s; }
.hd-linea b { display: block; font: 600 .8rem/1.3 var(--f-display); }
.hd-linea span { color: #6a6488; font-size: .72rem; }

/* Modelo de negocio a la medida */
.hd-modelos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hd-modelo { position: relative; display: grid; align-content: start; gap: 10px; padding: 28px 26px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.hd-modelo:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.hd-modelo h3 { font-size: 1.15rem; }
.hd-modelo p { color: var(--ink-2); font-size: .97rem; line-height: 1.6; }
.hd-modelo .plan-tag { margin-bottom: 4px; }
.hd-incluye { margin-top: 26px; padding: 28px 30px; border-radius: var(--radius-lg); background: var(--grad-band); color: #fff; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: center; box-shadow: var(--shadow-lg); }
.hd-incluye h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); }
.hd-incluye p { margin-top: 10px; color: rgba(255, 255, 255, .88); }
.hd-incluye ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.hd-incluye li { display: flex; gap: 10px; font-size: .97rem; line-height: 1.45; }
.hd-hechos { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 26px; }
.paths.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .paths.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .paths.tres { grid-template-columns: minmax(0, 1fr); } }
.hd-tabla-norma { min-width: 680px; }
.hd-tabla-norma td { vertical-align: top; }
.hd-tabla-norma td, .hd-tabla-norma td + td { font: 400 .95rem/1.55 var(--f-body); color: var(--ink-2); }
.hd-tabla-norma td:first-child { width: 24%; font: 600 .95rem/1.45 var(--f-display); color: var(--ink); }
.hd-tabla-norma td:last-child { color: var(--ink); }
.hd-incluye li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px var(--teal); }

@media (max-width: 1024px) {
  .hd-explorador { grid-template-columns: minmax(0, 1fr); }
  .hd-tabs { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
  .hd-tabs::-webkit-scrollbar { display: none; }
  .hd-tab small { display: none; }
  .hd-tab:hover, .hd-tab[aria-selected="true"] { transform: none; }
  .hd-modelos { grid-template-columns: minmax(0, 1fr); }
  .hd-incluye { grid-template-columns: minmax(0, 1fr); }
  .hd-hechos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hd-panel { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; min-height: 0; }
  .hd-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .hd-visitas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hd-visitas li:nth-child(n+3) { display: none; }
  .hd-demo .hd-fc1 { left: 0; } .hd-demo .hd-fc2 { right: 0; }
  .hd-incluye ul { grid-template-columns: minmax(0, 1fr); }
  .hd-hechos { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .hd-ruta { stroke-dashoffset: 0; animation: none; }
  .hd-pin, .hd-visitas li, .hd-fila, .hd-linea > div, .hd-boton { opacity: 1; animation: none; }
  .hd-explorador.auto .hd-tab[aria-selected="true"] .hd-progreso { animation: none; }
}

/* =========================================================
   Nosotros · Fundadores (16-10-2026)
   Ficha estilo "selección de personaje": el retrato a la izquierda con
   el isotipo MACA en grande detrás, la ficha a la derecha (clase,
   nombre, cifras, cuatro "habilidades" y el llamado), y abajo la fila
   para cambiar de fundador. La mueve js/equipo.js.
   ========================================================= */
.equipo .section-head { margin-bottom: 40px; }
.equipo .section-head .h-lg { color: #fff; }
/* Cuando la ficha es lo primero de la página (Nosotros solo con fundadores),
   necesita espacio arriba para no quedar bajo la cabecera fija */
.equipo--portada { padding-top: clamp(130px, 13vw, 176px); }
.agente { display: none; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.agente.is-activo { display: grid; animation: agente-entra .6s var(--ease); }
@keyframes agente-entra { from { opacity: 0; transform: translateY(18px); } }

/* El retrato */
.agente-retrato { position: relative; justify-self: center; width: min(100%, 470px); aspect-ratio: 3 / 4; }
/* Las barras del isotipo MACA, en grande y con el degradado de la marca:
   asoman por arriba y a la derecha del retrato, como las franjas de color
   detrás del personaje en la referencia. */
.agente-iso {
  position: absolute; z-index: 0; width: 165%; max-width: none; left: -32%; top: -22%;
  filter: drop-shadow(0 0 46px rgba(104, 72, 219, .6)); opacity: .9; pointer-events: none;
}
.agente-foto {
  position: relative; z-index: 1; margin: 0; height: 100%; overflow: hidden; border-radius: 26px;
  clip-path: polygon(0 0, 84% 0, 100% 9%, 100% 100%, 16% 100%, 0 91%);
  background: var(--night-2);
}
.agente-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.agente-foto::after {   /* la foto se funde con la noche por abajo */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 14, 42, 0) 55%, rgba(18, 14, 42, .82) 100%),
              linear-gradient(115deg, rgba(18, 242, 212, .12), rgba(104, 72, 219, 0) 40%, rgba(213, 120, 208, .14));
}
/* Dos esquinas de mira, en diagonal */
.agente-hud i { position: absolute; z-index: 2; width: 26px; height: 26px; border: 2px solid var(--teal); opacity: .85; }
.agente-hud i:nth-child(1) { left: 18px; top: 18px; border-right: 0; border-bottom: 0; }
.agente-hud i:nth-child(3) { right: 18px; bottom: 18px; border-left: 0; border-top: 0; }
.agente-hud i:nth-child(2), .agente-hud i:nth-child(4) { display: none; }
/* La línea que recorre la foto, como un escáner */
.agente-escaneo {
  position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
  box-shadow: 0 0 18px 2px rgba(79, 249, 221, .6);
  animation: agente-escaneo 5s linear infinite;
}
@keyframes agente-escaneo { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.agente-chip {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 10px; font: 600 .74rem/1 ui-monospace, "Cascadia Code", Consolas, monospace;
  letter-spacing: .08em; text-transform: uppercase; color: #ecebf7;
  background: rgba(18, 14, 42, .72); border: 1px solid rgba(79, 249, 221, .35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.agente-chip--id { right: -14px; top: 13%; }
.agente-chip--lugar { left: -14px; bottom: 9%; }
.agente-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px var(--teal); animation: agente-pulso 2s ease-in-out infinite; }
@keyframes agente-pulso { 50% { opacity: .35; } }

/* La ficha */
.agente-clase {
  display: inline-block; padding: 7px 14px; border-radius: 8px;
  font: 700 .78rem/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
}
.agente-titulo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 22px; margin: 16px 0 10px; }
.agente-num {
  align-self: stretch; writing-mode: vertical-rl; transform: rotate(180deg);
  font: 600 .78rem/1 ui-monospace, Consolas, monospace; letter-spacing: .2em; color: #8f89b8;
  border-left: 2px solid rgba(79, 249, 221, .5); padding-left: 6px;
}
.agente-nombre {
  margin: 0; font: 800 clamp(2.6rem, 5.2vw, 4.4rem)/.9 var(--f-display); letter-spacing: -.02em;
  text-transform: uppercase; color: #fff;
}
.agente-nombre span { display: block; margin-top: 8px; font-size: .36em; font-weight: 700; letter-spacing: .08em; color: #c9c4ea; }
.agente-stats { margin: 0 0 6px; display: grid; gap: 4px; }
.agente-stats > span[aria-hidden] { font: 500 1.5rem/1 var(--f-display); color: #6f68a0; }
.agente-stats b { font: 700 1.7rem/1 var(--f-display); color: #fff; }
.agente-stats small { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #8f89b8; }
.agente-cargo { margin: 0 0 14px; font: 600 .95rem/1.4 var(--f-display); letter-spacing: .04em; color: var(--teal); }
.agente-bio { margin: 0 0 26px; max-width: 48ch; color: #b9b4d8; font-size: 1.05rem; line-height: 1.65; }

/* Las cuatro "habilidades" */
.agente-habilidades { display: flex; gap: 12px; margin-bottom: 22px; }
.agente-habilidades [role="tab"] {
  position: relative; display: grid; place-items: center; width: 64px; height: 64px; padding: 0;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06);
  color: #ecebf7; cursor: pointer; transition: background .25s, transform .25s var(--ease), color .25s;
}
.agente-habilidades [role="tab"]:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); }
.agente-habilidades [role="tab"][aria-selected="true"] { background: #fff; color: var(--violet); border-color: #fff; }
.agente-habilidades [role="tab"][aria-selected="true"]::after {   /* el piquito bajo la elegida */
  content: ""; position: absolute; left: 50%; bottom: -12px; margin-left: -6px;
  border: 6px solid transparent; border-bottom-color: #fff;
}
.agente-habilidades [role="tab"]:focus-visible, .agente-mini:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.agente-habilidades svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.agente-habilidad { min-height: 9.5em; }
.agente-habilidad h4 { margin: 0 0 10px; font: 700 .95rem/1.3 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.agente-habilidad h4 span { color: var(--teal); margin-right: 6px; font-family: ui-monospace, Consolas, monospace; }
.agente-habilidad p { margin: 0; color: #b9b4d8; line-height: 1.7; max-width: 58ch; }
.agente-habilidad a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }

/* La fila para cambiar de fundador */
.agentes-fila { display: flex; gap: 14px; margin-top: 56px; padding: 12px 2px 18px; overflow-x: auto; scrollbar-width: none; }
.agentes-fila::-webkit-scrollbar { display: none; }
.agente-mini {
  position: relative; flex: none; display: grid; justify-items: center; gap: 6px; width: 92px; padding: 8px 8px 10px;
  border-radius: 18px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05);
  color: #8f89b8; font: 600 .78rem/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase;
}
button.agente-mini { cursor: pointer; transition: transform .25s var(--ease), background .25s; }
button.agente-mini:hover { transform: translateY(-3px); }
.agente-mini img { width: 74px; height: 74px; border-radius: 12px; object-fit: cover; filter: grayscale(.6) brightness(.85); transition: filter .25s; }
.agente-mini.is-activo { background: #fff; color: var(--violet); transform: translateY(-6px); }
.agente-mini.is-activo img { filter: none; }
.agente-mini.is-activo::after { content: ""; position: absolute; left: 50%; bottom: -12px; margin-left: -6px; border: 6px solid transparent; border-bottom-color: #fff; }
.agente-mini.is-pronto { border-style: dashed; }
.agente-mini.is-pronto svg { width: 74px; height: 74px; padding: 22px; border-radius: 12px; background: rgba(255, 255, 255, .04); fill: none; stroke: #6f68a0; stroke-width: 1.6; stroke-linecap: round; }



@media (max-width: 900px) {
  .agente { grid-template-columns: minmax(0, 1fr); }
  .agente-retrato { width: min(100%, 380px); margin-top: 20px; }
  .agente-chip--id { right: -6px; }
  .agente-chip--lugar { left: -6px; }
  .agente-habilidad { min-height: 0; }
  .agentes-fila { margin-top: 40px; }
}
@media (max-width: 480px) {
  .agente-habilidades { gap: 10px; }
  .agente-habilidades [role="tab"] { width: 58px; height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .agente.is-activo { animation: none; }
  .agente-escaneo { display: none; }
  .agente-chip i { animation: none; }
}

/* =========================================================
   MACA Aseguradoras (19-10-2026)
   Para ISAPRES, aseguradoras, cajas de compensación, academia y redes
   privadas de clínicas: hero con el tablero de una cartera dentro del
   iMac, las ocho piezas del servicio full y el contacto por WhatsApp
   con dos caminos (beneficio para afiliados o partner tecnológico).
   El tablero y los dos caminos van siempre sobre blanco: sus colores
   son fijos para que el modo oscuro no los deje sin contraste.
   ========================================================= */
.aseg-para { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.aseg-para li {
  padding: 7px 13px; border-radius: 999px; font: 600 .82rem/1 var(--f-display);
  color: var(--violet); background: rgba(104, 72, 219, .08); border: 1px solid rgba(104, 72, 219, .2);
}
html[data-tema="oscuro"] .aseg-para li { color: var(--lilac); border-color: rgba(167, 123, 245, .35); }

/* MACA Aseguradoras · la pantalla del hero
   Once escenas en bucle dentro del iMac, 3 s cada una (33 s en total).
   Cada escena lleva --i (0 a 10): entra a los --i × 3 s y se funde con
   la siguiente. Lo que se mueve DENTRO de una escena (burbujas, barras)
   usa el mismo ciclo de 33 s con el mismo retraso, así arranca cada vez
   que su escena aparece. Todo mide en em sobre un tamaño que sigue el
   ancho de la pantalla (cqw), para verse igual en el iMac grande y en el
   teléfono. Colores fijos: la pantalla siempre es blanca. */
.aseg-pantalla {
  position: absolute; inset: 0; overflow: hidden; container-type: inline-size;
  background: #fff; color: #1b1537; font-family: var(--f-body); line-height: 1.25;
}
.aseg-escena {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: .7em;
  padding: 2.5em 1.4em 2.3em; font-size: 9px; font-size: 2.3cqw;
  opacity: 0; animation: aseg-escena 33s infinite both; animation-delay: calc(var(--i) * 3s);
}
@keyframes aseg-escena {
  0% { opacity: 0; transform: translateY(.6em); }
  1.5%, 8.4% { opacity: 1; transform: none; }
  9.8%, 100% { opacity: 0; transform: translateY(-.6em); }
}
.aseg-escena b { font-weight: 700; }
.aseg-escena small { color: #6a6488; }
.aseg-esc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; padding-left: 12%; }   /* deja pasar los tres puntos de la ventana */
.aseg-esc-top b { font: 700 1.3em/1.1 var(--f-display); }
.aseg-esc-top small { font: 600 .78em/1 ui-monospace, Consolas, monospace; letter-spacing: .08em; color: #8f89b8; }

/* piezas comunes */
.aseg-av {
  flex: none; display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%;
  font: 700 .85em/1 var(--f-display); color: #fff; background: linear-gradient(135deg, #4ff9dd, #6848db);
}
.aseg-av.c2 { background: linear-gradient(135deg, #00d1f0, #5f8fe0); }
.aseg-av.c3 { background: linear-gradient(135deg, #a77bf5, #d578d0); }
.aseg-av.c4 { background: linear-gradient(135deg, #6848db, #2b2366); }
.aseg-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; }
.aseg-lista li { display: flex; align-items: center; gap: .65em; padding: .5em .6em; border-radius: .55em; background: #f7f6fc; }
.aseg-lista li > span:not(.aseg-av):not(.aseg-hora) { flex: 1; min-width: 0; }
.aseg-lista b { display: block; font-size: .98em; }
.aseg-lista small { display: block; font-size: .78em; }
.aseg-lista em { font-style: normal; font-weight: 700; font-size: .92em; }
.aseg-lista i, .aseg-medicos i { font-style: normal; }
.aseg-lista i { flex: none; padding: .3em .6em; border-radius: 999px; font-size: .72em; font-weight: 700; background: #fff3d6; color: #8a5a00; }
.aseg-lista i.ok { background: #d9f8ec; color: #0f7a55; }
.aseg-lista i.vivo { background: #ede8fd; color: #5635c9; }
.aseg-total, .aseg-tasa { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; padding: .55em .7em; border-radius: .55em; background: #f7f6fc; font-size: .92em; }
.aseg-total b, .aseg-tasa b { font: 800 1.15em/1 var(--f-display); color: #5635c9; }

/* 01 ficha clínica */
.aseg-pac { display: flex; align-items: center; gap: .7em; }
.aseg-pac b { display: block; font-size: 1.05em; }
.aseg-pac small { display: block; font-size: .8em; margin-top: .2em; }
.aseg-chips { display: flex; flex-wrap: wrap; gap: .4em; }
.aseg-chips span { padding: .3em .7em; border-radius: 999px; font-size: .78em; font-weight: 600; background: #efedf9; color: #5635c9; }
.aseg-vitales { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5em; }
.aseg-vitales div { display: grid; gap: .25em; padding: .5em .6em; border-radius: .55em; background: #f7f6fc; }
.aseg-vitales small { font-size: .74em; }
.aseg-vitales b { font: 800 1.2em/1 var(--f-display); }
.aseg-evol { display: grid; gap: .35em; }
.aseg-evol small { font-size: .78em; }
.aseg-evol i { display: block; width: 100%; height: .45em; border-radius: 999px; background: #ece9f7; }
.aseg-evol i:nth-of-type(2) { width: 86%; }

/* 02 rutas */
.aseg-mapa { flex: 1; min-height: 0; border-radius: .7em; overflow: hidden; background: #eaf1f7; }
.aseg-mapa svg { display: block; width: 100%; height: 100%; }
.aseg-calles { stroke: #fff; stroke-width: 5; fill: none; }
.aseg-ruta { fill: none; stroke: #6848db; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 5 4; animation: aseg-hormiga 1.2s linear infinite; }
@keyframes aseg-hormiga { to { stroke-dashoffset: -18; } }
.aseg-pin { fill: #00d1f0; stroke: #fff; stroke-width: 1.5; }
.aseg-pin.fin { fill: #d578d0; }
.aseg-auto { fill: #1b1537; }
.aseg-eta { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
.aseg-eta small { font-size: .82em; }

/* 04 turnos */
.aseg-turnos { display: grid; grid-template-columns: 4.6em repeat(7, minmax(0, 1fr)); gap: .32em; align-items: center; }
.aseg-turnos > b { text-align: center; font-size: .78em; color: #8f89b8; }
.aseg-turnos small { font-size: .76em; }
.aseg-turnos i { height: 1.7em; border-radius: .35em; background: #f1eff8; }
.aseg-turnos i.a, .aseg-leyenda .a { background: #6848db; }
.aseg-turnos i.b, .aseg-leyenda .b { background: #00d1f0; }
.aseg-turnos i.c, .aseg-leyenda .c { background: #d578d0; }
.aseg-turnos i.a, .aseg-turnos i.b, .aseg-turnos i.c { animation: aseg-aparece 33s infinite both; animation-delay: calc(var(--i) * 3s + .3s); }
.aseg-leyenda { display: flex; flex-wrap: wrap; gap: .5em 1.1em; font-size: .78em; color: #463f66; }
.aseg-leyenda span { display: inline-flex; align-items: center; gap: .4em; }
.aseg-leyenda em { width: .8em; height: .8em; border-radius: .2em; }
@keyframes aseg-aparece { 0% { opacity: 0; transform: scale(.6); } 2%, 100% { opacity: 1; transform: none; } }

/* 05 red de médicos */
.aseg-medicos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55em; }
.aseg-medicos li { position: relative; display: grid; justify-items: center; gap: .2em; padding: .6em .4em; border-radius: .6em; background: #f7f6fc; text-align: center; }
.aseg-medicos .aseg-av { width: 2.4em; height: 2.4em; margin-bottom: .15em; }
.aseg-medicos b { font-size: .85em; }
.aseg-medicos small { font-size: .72em; }
.aseg-medicos i { position: absolute; top: .55em; right: .6em; width: .55em; height: .55em; border-radius: 50%; background: #cfcbe3; }
.aseg-medicos i.on { background: #1bd99a; box-shadow: 0 0 0 .2em rgba(27, 217, 154, .2); }

/* 06 telemedicina */
.aseg-video { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; border-radius: .7em; overflow: hidden; background: linear-gradient(160deg, #2b2366, #13112b); }
.aseg-persona { width: 30%; fill: rgba(255, 255, 255, .28); }
.aseg-video-quien { position: absolute; left: .7em; bottom: .7em; padding: .3em .6em; border-radius: .4em; font-size: .78em; color: #fff; background: rgba(0, 0, 0, .35); }
.aseg-video-rec { position: absolute; right: .7em; top: .7em; display: inline-flex; align-items: center; gap: .35em; font: 700 .76em/1 ui-monospace, Consolas, monospace; color: #fff; }
.aseg-video-rec i { width: .55em; height: .55em; border-radius: 50%; background: #ff5f57; animation: aseg-late 1.2s ease-in-out infinite; }
.aseg-video-yo { position: absolute; right: .7em; bottom: .7em; display: grid; place-items: center; width: 22%; aspect-ratio: 4 / 3; border-radius: .5em; background: #463f66; border: .12em solid rgba(255, 255, 255, .5); }
.aseg-video-yo .aseg-persona { width: 55%; fill: rgba(255, 255, 255, .45); }
.aseg-video-ctrl { position: absolute; left: 50%; bottom: .7em; transform: translateX(-50%); display: flex; gap: .45em; }
.aseg-video-ctrl i { width: 1.6em; height: 1.6em; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.aseg-video-ctrl i.fin { background: #ff5f57; }
@keyframes aseg-late { 50% { opacity: .3; } }

/* 07 redes de profesionales */
.aseg-red { flex: 1; min-height: 0; }
.aseg-red svg { display: block; width: 100%; height: 100%; }
.aseg-red-lineas { fill: none; stroke: #c9c1f2; stroke-width: 1.2; stroke-dasharray: 3 3; animation: aseg-hormiga 1.6s linear infinite; }
.aseg-red-nodo { fill: #fff; stroke: #6848db; stroke-width: 1.4; }
.aseg-red-nodo:not(.centro) { animation: aseg-late 2.4s ease-in-out infinite; }
.aseg-red-nodo:nth-of-type(3), .aseg-red-nodo:nth-of-type(6) { animation-delay: .8s; }
.aseg-red-nodo:nth-of-type(4), .aseg-red-nodo:nth-of-type(7) { animation-delay: 1.6s; }
.aseg-red-nodo.centro { fill: #6848db; stroke: #a77bf5; stroke-width: 2; }
.aseg-red text { font: 600 6.4px var(--f-body); fill: #463f66; }
.aseg-red text.c { font-weight: 800; font-size: 5.6px; fill: #fff; text-anchor: middle; }
.aseg-red text.d { text-anchor: end; }

/* 08 indicadores de gestión */
.aseg-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; }
.aseg-kpis div { display: grid; gap: .3em; padding: .55em .65em; border-radius: .55em; background: #f7f6fc; }
.aseg-kpis small { font-size: .76em; }
.aseg-kpis b { font: 800 1.5em/1 var(--f-display); }
.aseg-linea { flex: 1; min-height: 0; }
.aseg-linea svg { display: block; width: 100%; height: 100%; }
.aseg-linea .area { fill: rgba(104, 72, 219, .14); }
.aseg-linea .trazo { fill: none; stroke: #6848db; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 400; animation: aseg-traza 33s infinite both; animation-delay: calc(var(--i) * 3s + .2s); }
@keyframes aseg-traza { 0% { stroke-dashoffset: 400; } 5%, 100% { stroke-dashoffset: 0; } }

/* 09 teleconsulta */
.aseg-sala { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; padding: .55em .7em; border-radius: .55em; background: #ede8fd; }
.aseg-sala b { color: #5635c9; }
.aseg-sala small { font-size: .8em; }
.aseg-hora { flex: none; font: 700 .82em/1 ui-monospace, Consolas, monospace; color: #5635c9; }
.aseg-receta { font-size: .85em; font-weight: 700; color: #0f7a55; }

/* 10 confirmación de horas (WhatsApp) */
.aseg-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .5em; padding: .7em; border-radius: .7em; background: #ece5dd; }
.aseg-chat p { margin: 0; max-width: 78%; padding: .5em .7em; border-radius: .6em; font-size: .86em; line-height: 1.35; background: #fff; box-shadow: 0 .1em .2em rgba(0, 0, 0, .08); }
.aseg-chat p.out { align-self: flex-end; background: #d9fdd3; }
.aseg-chat p { animation: aseg-burbuja 33s infinite both; animation-delay: calc(var(--i) * 3s + .3s); }
.aseg-chat p:nth-child(2) { animation-delay: calc(var(--i) * 3s + 1s); }
.aseg-chat p:nth-child(3) { animation-delay: calc(var(--i) * 3s + 1.7s); }
@keyframes aseg-burbuja { 0% { opacity: 0; transform: translateY(.5em); } 1.2%, 100% { opacity: 1; transform: none; } }

/* 11 economía de escala */
.aseg-escala-tit { margin: 0; font-size: .86em; color: #463f66; }
.aseg-escala { flex: 1; min-height: 0; display: flex; align-items: flex-end; gap: .9em; padding: 0 .4em; border-bottom: .1em solid #ece9f7; }
.aseg-escala > div { flex: 1; height: var(--h); display: flex; flex-direction: column; align-items: center; gap: .25em; }
.aseg-escala em { font-style: normal; font-weight: 800; font-size: .78em; color: #1b1537; white-space: nowrap; }
.aseg-escala i { flex: 1; width: 72%; border-radius: .4em .4em 0 0; background: linear-gradient(180deg, #6848db, #4ff9dd); transform-origin: bottom; animation: aseg-sube 33s infinite both; animation-delay: calc(var(--i) * 3s + .2s); }
.aseg-escala small { font-size: .72em; padding-bottom: .3em; }
@keyframes aseg-sube { 0% { transform: scaleY(0); } 3%, 100% { transform: scaleY(1); } }

/* los once puntos de abajo: marcan qué escena se ve */
.aseg-puntos { position: absolute; left: 0; right: 0; bottom: .9em; display: flex; justify-content: center; gap: .35em; font-size: 9px; font-size: 2.3cqw; }
.aseg-puntos i { width: .5em; height: .5em; border-radius: 999px; background: #dcd8ee; animation: aseg-punto 33s infinite both; animation-delay: calc(var(--i) * 3s); }
@keyframes aseg-punto { 0%, 9.8%, 100% { width: .5em; background: #dcd8ee; } 1.5%, 8.4% { width: 1.4em; background: #6848db; } }

@media (prefers-reduced-motion: reduce) {
  .aseg-escena, .aseg-escena *, .aseg-puntos i { animation: none !important; }
  .aseg-escena { opacity: 0; }
  .aseg-escena:first-child { opacity: 1; }
  .aseg-puntos, .aseg-auto { display: none; }
}

/* Cada "Cuida Red" enlaza a su web */
.aseg-cr { color: var(--violet); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.aseg-cr:hover { text-decoration-thickness: 2px; }
html[data-tema="oscuro"] .aseg-cr { color: var(--lilac); }
.aseg-cuidared .aseg-cr, html[data-tema="oscuro"] .aseg-cuidared .aseg-cr { color: #fff; }

/* Servicio full */
.aseg-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.aseg-card {
  display: grid; align-content: start; gap: 12px; padding: 24px 22px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.aseg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.aseg-card h3 { margin: 6px 0 0; font: 700 1.12rem/1.25 var(--f-display); color: var(--ink); }
.aseg-card p { margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.6; }
.aseg-cuidared {
  display: flex; align-items: center; gap: 18px; margin-top: 28px; padding: 20px 24px;
  border-radius: var(--radius); background: var(--grad-band); color: #fff; box-shadow: var(--shadow);
}
.aseg-cuidared p { margin: 0; line-height: 1.6; }
.aseg-cuidared b { font-family: var(--f-display); }
.aseg-cuidared .ico-tile { flex: none; background: rgba(255, 255, 255, .16); box-shadow: none; }

/* Contacto: dos caminos por WhatsApp */
.aseg-caminos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 820px; margin: 28px auto 0; text-align: left; }
.aseg-camino {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px;
  background: #fff; color: #1b1537; text-decoration: none; box-shadow: 0 18px 30px -20px rgba(18, 14, 42, .6);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.aseg-camino:hover { transform: translateY(-3px); box-shadow: 0 24px 36px -20px rgba(18, 14, 42, .7); }
.aseg-camino b { display: block; font: 700 1.02rem/1.3 var(--f-display); color: #5635c9; }
.aseg-camino small { display: block; margin-top: 3px; color: #463f66; font-size: .88rem; line-height: 1.45; }
.aseg-camino .ico-tile { flex: none; width: 48px; height: 48px; border-radius: 14px; }
.aseg-camino .ico-tile img { width: 28px; }

@media (max-width: 1024px) {
  .aseg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .aseg-grid, .aseg-caminos { grid-template-columns: minmax(0, 1fr); }
  .aseg-cuidared { flex-direction: column; align-items: flex-start; }
}