/* Fuentes alojadas en el propio dominio (sin llamadas a terceros) */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url(fonts/bricolage-grotesque-latin-opsz-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}
/* =========================================================
   Orquesta — estilos compartidos
   ========================================================= */
:root{
  --ink:#101317; --paper:#F3F4F0; --card:#FFFFFF; --line:#DADDD5; --soft:#ECEEE8; --band:#E8EAE3;
  --text2:#3A4048; --muted:#4B525B; --dark2:#1A1E24; --dark3:#1F242B; --darkline:#2A2F36;
  --ondark:#E9ECE4; --ondark2:#A3AAA0; --accent:#C8F03C;
  /* Un solo degradado de marca, de lima a azul cielo; cada solución es una parada del degradado */
  --c-auto:#C8F03C; --c-agent:#74E39A; --c-data:#34CDB9; --c-pred:#4FA3F2;
  --c-auto-d:#4C6600; --c-agent-d:#17703F; --c-data-d:#0A6B61; --c-pred-d:#1C5BA8;
  --c-auto-t:#EEF6D6; --c-agent-t:#E3F6EA; --c-data-t:#DDF3EF; --c-pred-t:#E3EEFB;
  --grad:linear-gradient(90deg,#C8F03C 0%,#74E39A 38%,#34CDB9 68%,#4FA3F2 100%);
  --display:'Bricolage Grotesque',system-ui,sans-serif; --body:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--ink)}
img,svg{display:block}
.wrap{max-width:75rem;margin:0 auto;padding-left:max(1.5rem,env(safe-area-inset-left,0px));padding-right:max(1.5rem,env(safe-area-inset-right,0px))}
.section{padding-top:6rem;padding-bottom:6rem}
.eyebrow{margin:0;font-family:var(--mono);font-size:0.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.h2{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(2.125rem,4vw,3.25rem);line-height:1.02;letter-spacing:-.03em}
.lead{margin:0;font-size:1.125rem;line-height:1.55;color:var(--text2)}
.head{display:flex;flex-direction:column;gap:1rem;margin-bottom:3rem;max-width:47.5rem}
.split-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.5rem;margin-bottom:3rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18.75rem),1fr));gap:1rem}
.grid-wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,21.25rem),1fr))}
.tick{display:flex;gap:0.625rem;align-items:flex-start}
.tick svg{flex-shrink:0;margin-top:0.1875rem}
.mono{font-family:var(--mono)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:0.625rem;min-height:3.25rem;padding:0 1.625rem;border-radius:62.4375rem;font-weight:600;font-size:1.0625rem;text-decoration:none;border:0;font-family:inherit;cursor:pointer;transition:filter .15s,background .15s,color .15s}
.btn-primary{background:var(--accent);color:var(--ink)}
.btn-primary:hover{filter:brightness(.94)}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-ghost-dark{border:1.5px solid var(--ondark);color:var(--ondark);background:transparent;min-height:3rem;padding:0 1.375rem;font-size:1rem}
.btn-ghost-dark:hover{background:var(--ondark);color:var(--ink)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:#2a2f36}
.btn-sm{min-height:2.75rem;padding:0 1.125rem;font-size:0.9375rem}
.textlink{display:inline-flex;align-items:center;gap:0.5rem;font-weight:600;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.textlink:hover{opacity:.75}

/* ---------- Navegación ---------- */
header.site{top:env(safe-area-inset-top,0px);border-bottom:1px solid var(--line);background:rgba(243,244,240,.92);backdrop-filter:blur(0.5rem);position:sticky;top:0;z-index:20}
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding-top:0.875rem;padding-bottom:0.875rem}
.logo{display:flex;align-items:center;gap:0.625rem;text-decoration:none;color:var(--ink)}
.logo span{font-family:var(--display);font-weight:800;font-size:1.375rem;letter-spacing:-.02em}
.navlinks{display:flex;flex-wrap:wrap;align-items:center;gap:1.375rem;font-size:0.9375rem}
.navlinks a.link{text-decoration:none;padding:0.375rem 0;border-bottom:2px solid transparent}
.navlinks a.link:hover{border-bottom-color:var(--line)}
.navlinks a.link[aria-current="page"]{border-bottom-color:var(--ink)}
.menu-btn{display:none;width:2.75rem;height:2.75rem;border-radius:0.75rem;border:1px solid var(--line);background:var(--card);align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
@media (max-width:1080px){
  .menu-btn{display:inline-flex}
  .navlinks{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:0.5rem 0 0.25rem}
  .nav.open .navlinks{display:flex}
  .navlinks a.link{padding:0.875rem 0.25rem;border-bottom:1px solid var(--line)}
  .navlinks a.link[aria-current="page"]{border-bottom-color:var(--line);font-weight:600}
  .navlinks .btn{margin-top:0.75rem;justify-content:center}
}

/* ---------- Hero portada ---------- */
.hero{display:flex;flex-wrap:wrap;gap:3.5rem;align-items:center;padding-top:5rem;padding-bottom:4.5rem}
.hero-copy{flex:999 1 32.5rem;min-width:0;display:flex;flex-direction:column;gap:1.75rem}
.hero h1,.page-hero h1{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(2.75rem,6vw,5rem);line-height:.98;letter-spacing:-.035em}
.hero .sub,.page-hero .sub{margin:0;font-size:1.25rem;line-height:1.55;color:var(--text2);max-width:36em}
.ctas{display:flex;flex-wrap:wrap;gap:0.75rem}
.badges{display:flex;flex-wrap:wrap;gap:1.25rem;font-size:0.875rem;color:var(--muted)}
.badges span{display:inline-flex;align-items:center;gap:0.5rem}


/* ---------- Franja de tecnología ---------- */
.stack{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card)}
.stack .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem 2rem;padding-top:1.375rem;padding-bottom:1.375rem}
.stack b{font-weight:600;font-size:1rem;color:var(--text2)}

/* ---------- Tarjetas ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:1.125rem;padding:1.75rem;display:flex;flex-direction:column;gap:0.75rem;transition:border-color .15s}
.card:hover{border-color:var(--ink)}
.card .num{font-family:var(--mono);font-size:0.8125rem;color:var(--muted)}
.card h3{margin:0;font-family:var(--display);font-weight:700;font-size:1.4375rem;line-height:1.15;letter-spacing:-.015em}
.card p{margin:0;font-size:1rem;line-height:1.55;color:var(--text2)}

/* ---------- Secciones oscuras / calculadora ---------- */
.dark{background:var(--ink);color:var(--ondark)}
.dark .eyebrow{color:var(--accent)}
.dark .lead{color:var(--ondark2)}
.calc{display:flex;flex-wrap:wrap;gap:3.5rem}
.calc-in{flex:1 1 26.25rem;min-width:0;display:flex;flex-direction:column;gap:2rem}
.calc-out{flex:1 1 23.75rem;min-width:0;display:flex;flex-direction:column;gap:1rem}
.slider{display:flex;flex-direction:column;gap:0.375rem}
.slider-top{display:flex;justify-content:space-between;gap:0.75rem;font-size:1rem}
.slider-top output{font-family:var(--mono);color:var(--accent)}
input[type=range]{width:100%;height:1.75rem;accent-color:var(--accent);cursor:pointer}
.result{border-radius:1.25rem;padding:2rem;display:flex;flex-direction:column;gap:0.375rem}
.result.a{background:var(--dark2);border:1px solid var(--darkline)}
.result.a .small{color:var(--ondark2)}
.result.b{background:var(--accent);color:var(--ink)}
.result.b .small{font-weight:500}
.result .small{font-size:0.9375rem}
.result .big{font-family:var(--display);font-weight:800;font-size:clamp(2.75rem,5vw,4rem);letter-spacing:-.03em;line-height:1}
.calc-note{margin:0.25rem 0 0;font-size:0.8125rem;line-height:1.5;color:var(--ondark2)}

/* ---------- Servicios ---------- */
.service{background:var(--card);border:1px solid var(--line);border-radius:1.25rem;padding:1.875rem;display:flex;flex-direction:column;gap:1rem;transition:border-color .15s}
.service:hover{border-color:var(--ink)}
.service-top{display:flex;justify-content:space-between;align-items:center;gap:0.75rem}
.tag{font-family:var(--mono);font-size:0.75rem;letter-spacing:.06em;text-transform:uppercase;padding:0.375rem 0.625rem;border-radius:62.4375rem;background:var(--soft);color:var(--ink)}
.service-n{font-family:var(--mono);font-size:0.8125rem;color:var(--muted)}
.service h3{margin:0;font-family:var(--display);font-weight:700;font-size:1.625rem;line-height:1.1;letter-spacing:-.02em}
.service p{margin:0;font-size:1rem;line-height:1.55;color:var(--text2)}
.service ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem}
.service-tech{margin-top:auto;padding-top:1rem;border-top:1px solid var(--soft);font-family:var(--mono);font-size:0.7812rem;line-height:1.6;color:var(--muted)}

/* ---------- Proceso ---------- */
.band{background:var(--band)}
.steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1rem}
.steps li{background:var(--paper);border-radius:1.25rem;padding:1.75rem;display:flex;flex-direction:column;gap:0.875rem}
.step-n{width:2.75rem;height:2.75rem;border-radius:0.75rem;background:var(--ink);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:500;font-size:1rem}
.steps h3{margin:0;font-family:var(--display);font-weight:700;font-size:1.375rem;letter-spacing:-.015em}
.steps p{margin:0;font-size:0.9375rem;line-height:1.55;color:var(--text2)}
.steps .when{margin-top:auto;font-family:var(--mono);font-size:0.75rem;color:var(--muted)}

/* ---------- Casos ---------- */
.case{background:var(--card);border:1px solid var(--line);border-radius:1.25rem;overflow:hidden;display:flex;flex-direction:column}
.case-top{background:var(--ink);color:var(--ondark);padding:1.75rem;display:flex;flex-direction:column;gap:0.375rem}
.case-top .sector{font-family:var(--mono);font-size:0.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ondark2)}
.case-top .metric{font-family:var(--display);font-weight:800;font-size:2.5rem;letter-spacing:-.03em;line-height:1.05;color:var(--accent)}
.case-top .label{font-size:0.9375rem}
.case-body{padding:1.75rem;display:flex;flex-direction:column;gap:0.875rem;font-size:0.9375rem;line-height:1.55}
.case-body .k{font-family:var(--mono);font-size:0.75rem;color:var(--muted);margin-bottom:0.25rem}
.case-body .v{color:var(--text2)}

/* ---------- Por qué ---------- */
.why{display:flex;flex-wrap:wrap;gap:3.5rem}
.why-head{flex:1 1 22.5rem;min-width:0;display:flex;flex-direction:column;gap:1rem}
.why-list{flex:2 1 32.5rem;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:2rem 2.5rem}
.why-item{display:flex;flex-direction:column;gap:0.5rem;padding-top:1.125rem;border-top:1px solid var(--darkline)}
.why-item h3{margin:0;font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-.01em}
.why-item p{margin:0;font-size:0.9375rem;line-height:1.55;color:var(--ondark2)}

/* ---------- FAQ ---------- */
.faq{max-width:56.25rem}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;min-height:4rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.125rem 0.75rem;font-family:var(--display);font-weight:700;font-size:1.25rem;border-radius:0.5rem}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{background:var(--soft)}
.faq-list summary .ic{flex-shrink:0;transition:transform .2s}
.faq-list details[open] summary .ic{transform:rotate(45deg)}
.faq-list details p{margin:0;padding:0 0.75rem 1.5rem;font-size:1.0625rem;line-height:1.6;color:var(--text2);max-width:46em}

/* ---------- Contacto ---------- */
.contact{background:var(--accent);color:var(--ink);border-radius:1.75rem;padding:clamp(2rem,5vw,4rem);display:flex;flex-wrap:wrap;gap:3rem}
.contact-copy{flex:1 1 23.75rem;min-width:0;display:flex;flex-direction:column;gap:1.25rem}
.contact-copy h2{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(2.25rem,4.5vw,3.75rem);line-height:1;letter-spacing:-.035em}
.contact-copy p{margin:0;font-size:1.125rem;line-height:1.55}
.contact-copy ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0.625rem;font-size:1rem;font-weight:500}
.contact-form{flex:1 1 23.75rem;min-width:0;background:var(--card);border-radius:1.25rem;padding:1.75rem;display:flex;flex-direction:column;gap:1rem}
.row{display:flex;flex-wrap:wrap;gap:1rem}
.field{flex:1 1 11.25rem;display:flex;flex-direction:column;gap:0.375rem}
.field label{font-size:0.875rem;font-weight:600}
.field input,.field textarea,.field select{min-height:3rem;padding:0.75rem 0.875rem;border:1px solid #B9BEB4;border-radius:0.625rem;font:inherit;font-size:1rem;background:#fff;color:var(--ink)}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--ink);outline-offset:1px}
.legal{margin:0;font-size:0.8125rem;color:var(--muted);line-height:1.5}
.sent{display:none;flex-direction:column;gap:0.75rem;padding:1.5rem 0}
.sent h3{margin:0;font-family:var(--display);font-weight:800;font-size:1.75rem}
.sent p{margin:0;font-size:1rem;line-height:1.55;color:var(--text2)}
.contact-form.done .fields{display:none}
.contact-form.done .sent{display:flex}
.fields{display:flex;flex-direction:column;gap:1rem}
.fields .btn{width:100%;justify-content:center}

/* ---------- CTA franja ---------- */
.cta-band{background:var(--accent);border-radius:1.75rem;padding:clamp(2rem,5vw,3.5rem);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}
.cta-band h2{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(1.875rem,3.6vw,2.875rem);line-height:1.02;letter-spacing:-.03em;max-width:16em}
.cta-band p{margin:0.625rem 0 0;font-size:1.0625rem;line-height:1.55;max-width:34em}

/* ---------- Footer ---------- */
footer.site{border-top:1px solid var(--line)}
footer.site > .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;padding-top:3rem;padding-bottom:3rem;font-size:0.875rem;color:var(--muted)}
footer.site .brand{font-family:var(--display);font-weight:800;font-size:1.25rem;color:var(--ink)}
footer.site .cols{display:flex;flex-wrap:wrap;gap:3rem}
footer.site .col{display:flex;flex-direction:column;gap:0.625rem}
footer.site .col strong{font-family:var(--mono);font-size:0.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);font-weight:500}
footer.site .col a{text-decoration:none;color:var(--muted)}
footer.site .col a:hover{color:var(--ink);text-decoration:underline}

/* =========================================================
   Páginas interiores
   ========================================================= */
.page-hero{padding-top:4.5rem;padding-bottom:3.5rem;display:flex;flex-direction:column;gap:1.5rem;max-width:56.25rem}
.crumbs{font-family:var(--mono);font-size:0.8125rem;color:var(--muted)}
.crumbs a{color:var(--muted)}

/* ---------- Catálogo ---------- */
.catalog-tools{position:sticky;top:4.5625rem;z-index:10;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (max-width:900px){.catalog-tools{position:static}}
.catalog-tools .wrap{display:flex;flex-direction:column;gap:0.875rem;padding-top:1rem;padding-bottom:1rem}
.tools-row{display:flex;flex-wrap:wrap;gap:0.75rem;align-items:center}
.search{flex:1 1 17.5rem;position:relative}
.search input{width:100%;min-height:2.875rem;padding:0 0.875rem 0 2.625rem;border:1px solid #B9BEB4;border-radius:62.4375rem;font:inherit;font-size:1rem;background:#fff;color:var(--ink)}
.search input:focus{outline:2px solid var(--ink);outline-offset:1px}
.search svg{position:absolute;left:0.9375rem;top:50%;transform:translateY(-50%)}
.select{min-height:2.875rem;padding:0 2.5rem 0 1rem;border:1px solid #B9BEB4;border-radius:62.4375rem;font:inherit;font-size:0.9375rem;background:#fff;color:var(--ink);cursor:pointer}
.chips{display:flex;gap:0.5rem;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.chip{flex-shrink:0;min-height:2.5rem;padding:0 1rem;border-radius:62.4375rem;border:1px solid var(--line);background:var(--card);font:inherit;font-size:0.875rem;color:var(--ink);cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.count{font-family:var(--mono);font-size:0.8125rem;color:var(--muted)}

.flow-card{all:unset;box-sizing:border-box;background:var(--card);border:1px solid var(--line);border-radius:1.25rem;padding:1.625rem;display:flex;flex-direction:column;gap:0.875rem;cursor:pointer;transition:border-color .15s,transform .15s}
.flow-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.flow-card:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.flow-card .fc-top{display:flex;justify-content:space-between;gap:0.75rem;align-items:center}
.flow-card .sector{font-family:var(--mono);font-size:0.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.lvl{font-family:var(--mono);font-size:0.7188rem;padding:0.25rem 0.5625rem;border-radius:62.4375rem;border:1px solid var(--line);color:var(--text2);white-space:nowrap}
.lvl[data-l="Avanzado"]{background:var(--ink);color:var(--accent);border-color:var(--ink)}
.flow-card h3{margin:0;font-family:var(--display);font-weight:700;font-size:1.3125rem;line-height:1.18;letter-spacing:-.015em}
.flow-card p{margin:0;font-size:0.9375rem;line-height:1.55;color:var(--text2)}
.mini-steps{display:flex;flex-wrap:wrap;gap:0.375rem;align-items:center;font-family:var(--mono);font-size:0.7188rem;color:var(--muted)}
.mini-steps span{padding:0.25rem 0.5rem;border-radius:0.375rem;background:var(--soft)}
.flow-card .more{margin-top:auto;padding-top:0.875rem;border-top:1px solid var(--soft);display:flex;justify-content:space-between;align-items:center;font-size:0.875rem;font-weight:600}
.empty{padding:4rem 0;text-align:center;color:var(--muted);font-size:1.0625rem}

/* Ficha de flujo (diálogo) */
dialog.sheet{border:0;padding:0;border-radius:1.5rem;max-width:47.5rem;width:calc(100% - 2rem);max-height:calc(100dvh - 3rem);background:var(--paper);color:var(--ink);box-shadow:0 1.875rem 5rem rgba(0,0,0,.35)}
dialog.sheet::backdrop{background:rgba(16,19,23,.6);backdrop-filter:blur(0.1875rem)}
.sheet-head{background:var(--ink);color:var(--ondark);padding:1.75rem 1.75rem 1.625rem;display:flex;flex-direction:column;gap:0.75rem;position:relative}
.sheet-head .sector{font-family:var(--mono);font-size:0.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ondark2)}
.sheet-head h2{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(1.625rem,3.4vw,2.25rem);line-height:1.05;letter-spacing:-.025em;padding-right:3rem}
.sheet-close{position:absolute;top:1.125rem;right:1.125rem;width:2.75rem;height:2.75rem;border-radius:0.75rem;border:1px solid var(--darkline);background:transparent;color:var(--ondark);cursor:pointer;display:flex;align-items:center;justify-content:center}
.sheet-close:hover{background:var(--dark3)}
.sheet-body{padding:1.75rem;display:flex;flex-direction:column;gap:1.75rem}
.sheet-body .k{font-family:var(--mono);font-size:0.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:0.5rem}
.sheet-body p{margin:0;font-size:1rem;line-height:1.6;color:var(--text2)}
.pipeline{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.pipeline li{display:flex;gap:0.875rem}
.pipeline .rail{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.pipeline .n{width:2rem;height:2rem;border-radius:0.5625rem;background:var(--ink);color:var(--accent);font-family:var(--mono);font-size:0.8125rem;display:flex;align-items:center;justify-content:center}
.pipeline .l{width:2px;flex:1;min-height:0.875rem;background:var(--line);margin:0.25rem 0}
.pipeline li:last-child .l{display:none}
.pipeline .t{font-size:0.9688rem;line-height:1.5;padding:0.3125rem 0 1rem}
.techs{display:flex;flex-wrap:wrap;gap:0.5rem}
.techs span{font-family:var(--mono);font-size:0.7812rem;padding:0.375rem 0.625rem;border-radius:0.5rem;background:var(--card);border:1px solid var(--line)}
.gain{background:var(--card);border:1px solid var(--line);border-left:0;border-radius:0.875rem;padding:1.125rem 1.25rem;display:flex;gap:0.75rem;align-items:flex-start}
.gain p{color:var(--ink)}
.sheet-foot{display:flex;flex-wrap:wrap;gap:0.75rem;padding:0 1.75rem 1.75rem}

/* ---------- Tecnología ---------- */
.layers{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.layer{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;padding:1.75rem 0;border-bottom:1px solid var(--line)}
.layer-name{flex:1 1 16.25rem;min-width:0;display:flex;flex-direction:column;gap:0.375rem}
.layer-name h3{margin:0;font-family:var(--display);font-weight:700;font-size:1.375rem;letter-spacing:-.015em}
.layer-name p{margin:0;font-size:0.9375rem;line-height:1.55;color:var(--text2)}
.layer-tech{flex:2 1 32.5rem;min-width:0;display:flex;flex-wrap:wrap;gap:0.5rem;align-content:flex-start}
.layer-tech span{font-family:var(--mono);font-size:0.8125rem;padding:0.5rem 0.75rem;border-radius:0.625rem;background:var(--card);border:1px solid var(--line)}

.arch{background:var(--dark2);border:1px solid var(--darkline);border-radius:1.5rem;padding:clamp(1.25rem,3vw,2rem);display:flex;flex-direction:column;gap:0.875rem}
.arch-row{display:grid;gap:0.75rem}
.arch-row.r4{grid-template-columns:repeat(auto-fit,minmax(min(100%,11.25rem),1fr))}
.arch-row.r3{grid-template-columns:repeat(auto-fit,minmax(min(100%,13.75rem),1fr))}
.arch-box{border:1px solid var(--darkline);background:var(--dark3);border-radius:0.875rem;padding:1rem;display:flex;flex-direction:column;gap:0.375rem}
.arch-box.hl{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.arch-box .k{font-family:var(--mono);font-size:0.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ondark2)}
.arch-box.hl .k{color:var(--accent)}
.arch-box b{font-size:0.9688rem;color:var(--ondark)}
.arch-box small{font-family:var(--mono);font-size:0.7188rem;color:var(--ondark2);line-height:1.5}
.arch-arrow{display:flex;justify-content:center;color:var(--ondark2)}
.arch-side{border:1px dashed var(--darkline);border-radius:0.875rem;padding:0.875rem 1rem;display:flex;flex-wrap:wrap;gap:0.5rem 1.5rem;align-items:center;font-family:var(--mono);font-size:0.75rem;color:var(--ondark2)}
.arch-side strong{color:var(--ondark);font-weight:500}

.deploy{background:var(--card);border:1px solid var(--line);border-radius:1.25rem;padding:1.875rem;display:flex;flex-direction:column;gap:0.875rem}
.deploy h3{margin:0;font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em}
.deploy p{margin:0;font-size:1rem;line-height:1.55;color:var(--text2)}
.deploy .ideal{margin-top:auto;padding-top:0.875rem;border-top:1px solid var(--soft);font-size:0.875rem;color:var(--muted)}

/* =========================================================
   Ampliación: SEO, confianza y contenido
   ========================================================= */

/* Migas de pan */
.crumbs-bar{padding-top:1.25rem;font-family:var(--mono);font-size:0.8125rem;color:var(--muted)}
.crumbs-bar ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:0.375rem}
.crumbs-bar li+li::before{content:"/";margin-right:0.375rem;color:var(--line)}
.crumbs-bar a{color:var(--muted)}
.crumbs-bar [aria-current]{color:var(--ink)}
.page-hero{padding-top:2.5rem}


/* Sectores */
.sector-card{background:var(--card);border:1px solid var(--line);border-radius:1.125rem;padding:1.5rem;display:flex;flex-direction:column;gap:0.75rem;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.sector-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.sector-card .ic{width:3rem;height:3rem;border-radius:0.875rem;background:var(--ink);display:flex;align-items:center;justify-content:center}
.sector-card h3{margin:0;font-family:var(--display);font-weight:700;font-size:1.3125rem;line-height:1.15;letter-spacing:-.015em}
.sector-card p{margin:0;font-size:0.9375rem;line-height:1.5;color:var(--text2)}
.sector-card .go{margin-top:auto;font-size:0.875rem;font-weight:600;display:flex;justify-content:space-between;align-items:center;padding-top:0.75rem;border-top:1px solid var(--soft)}
.sector-card .go span{font-family:var(--mono);font-weight:400;color:var(--muted);font-size:0.7812rem}

/* Antes / después */
.ba{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22.5rem),1fr));gap:1rem}
.ba-col{border-radius:1.375rem;padding:1.875rem;display:flex;flex-direction:column;gap:1.125rem}
.ba-col.before{background:var(--card);border:1px solid var(--line)}
.ba-col.after{background:var(--ink);color:var(--ondark)}
.ba-col h3{margin:0;font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em}
.ba-col .k{font-family:var(--mono);font-size:0.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ba-col.after .k{color:var(--accent)}
.ba-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0.5rem}
.ba-steps li{display:flex;gap:0.75rem;align-items:center;padding:0.75rem 0.875rem;border-radius:0.75rem;font-size:0.9375rem;background:var(--soft)}
.ba-col.after .ba-steps li{background:var(--dark3)}
.ba-steps .who{flex-shrink:0;width:1.75rem;height:1.75rem;border-radius:0.5rem;display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--line)}
.ba-col.after .ba-steps .who{background:var(--accent);border-color:var(--accent)}
.ba-col.after .ba-steps .who.person{background:var(--dark2);border-color:var(--darkline)}
.ba-foot{margin-top:auto;font-size:0.875rem;line-height:1.5;color:var(--muted)}
.ba-col.after .ba-foot{color:var(--ondark2)}

/* Testimonios */
.quote{background:var(--card);border:1px solid var(--line);border-radius:1.25rem;padding:1.75rem;display:flex;flex-direction:column;gap:1.125rem;margin:0}
.quote blockquote{margin:0;font-family:var(--display);font-weight:500;font-size:1.25rem;line-height:1.4;letter-spacing:-.01em}
.quote figcaption{display:flex;gap:0.75rem;align-items:center;margin-top:auto;font-size:0.875rem;color:var(--muted)}
.quote figcaption b{display:block;color:var(--ink);font-weight:600}

/* Artículos */
.post-card{background:var(--card);border:1px solid var(--line);border-radius:1.25rem;padding:1.625rem;display:flex;flex-direction:column;gap:0.75rem;text-decoration:none;color:var(--ink);transition:border-color .15s}
.post-card:hover{border-color:var(--ink)}
.post-card .meta{font-family:var(--mono);font-size:0.7812rem;color:var(--muted);display:flex;gap:0.75rem;flex-wrap:wrap}
.post-card h3{margin:0;font-family:var(--display);font-weight:700;font-size:1.4375rem;line-height:1.15;letter-spacing:-.015em}
.post-card p{margin:0;font-size:0.9688rem;line-height:1.55;color:var(--text2)}
.post-card .go{margin-top:auto;font-weight:600;font-size:0.875rem}

.article{display:grid;grid-template-columns:minmax(0,1fr) 17.5rem;gap:4rem;align-items:start;padding-bottom:6rem}
@media (max-width:960px){.article{grid-template-columns:minmax(0,1fr)}.article aside{order:-1}}
.toc{position:sticky;top:6rem;background:var(--card);border:1px solid var(--line);border-radius:1.125rem;padding:1.375rem;display:flex;flex-direction:column;gap:0.625rem;font-size:0.9062rem}
@media (max-width:960px){.toc{position:static}}
.toc strong{font-family:var(--mono);font-size:0.75rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--muted)}
.toc a{text-decoration:none;color:var(--text2);line-height:1.4}
.toc a:hover{color:var(--ink);text-decoration:underline}
.article-meta{display:flex;flex-wrap:wrap;gap:1rem;font-family:var(--mono);font-size:0.8125rem;color:var(--muted)}

.prose{max-width:68ch;font-size:1.0938rem;line-height:1.7;color:var(--text2)}
.prose > *{margin:0}
.prose > * + *{margin-top:1.1em}
.prose h2{margin-top:2em;font-family:var(--display);font-weight:800;font-size:clamp(1.625rem,3vw,2rem);line-height:1.15;letter-spacing:-.02em;color:var(--ink);scroll-margin-top:6rem;text-wrap:balance}
.prose h2:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.3em;display:flex;flex-direction:column;gap:.5em}
.prose strong{color:var(--ink)}
.prose a{color:var(--ink);text-decoration-thickness:1.5px;text-underline-offset:0.1875rem}
.prose .lede{font-size:1.3125rem;line-height:1.55;color:var(--ink)}
.legal-prose h2{font-size:1.5rem}

.author-box{margin-top:3rem;padding:1.5rem;border-radius:1.125rem;background:var(--card);border:1px solid var(--line);display:flex;gap:1rem;align-items:flex-start;max-width:68ch}
.author-box p{margin:0.25rem 0 0;font-size:0.9375rem;line-height:1.55;color:var(--text2)}

/* Sobre nosotros */
.two-col{display:flex;flex-wrap:wrap;gap:3.5rem;align-items:flex-start}
.two-col .prose{flex:2 1 32.5rem;min-width:0}
.facts{flex:1 1 17.5rem;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:1.25rem;padding:0.5rem 1.5rem}
.fact{display:flex;flex-direction:column;gap:0.25rem;padding:1rem 0;border-bottom:1px solid var(--soft)}
.fact:last-child{border-bottom:0}
.fact .k{font-family:var(--mono);font-size:0.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fact b{font-weight:600;font-size:1rem}
.person{background:var(--paper);border-radius:1.25rem;padding:1.75rem;display:flex;flex-direction:column;gap:0.625rem}
.avatar{width:4rem;height:4rem;border-radius:1.125rem;background:var(--ink);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:1.375rem}
.person h3{margin:0.375rem 0 0;font-family:var(--display);font-weight:700;font-size:1.3125rem}
.person .role{margin:0;font-family:var(--mono);font-size:0.8125rem;color:var(--muted)}
.person p{margin:0;font-size:0.9375rem;line-height:1.55;color:var(--text2)}
.person .textlink{align-self:flex-start;font-size:0.875rem;margin-top:0.25rem}

/* Contacto */
.contact-info{margin:0.5rem 0 0;padding:1.25rem 0 0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12.5rem),1fr));gap:1rem;border-top:1.5px solid rgba(16,19,23,.2)}
.contact-info li{display:flex;flex-direction:column;gap:2px;font-size:1rem;font-weight:500}
.contact-info .ci-k{font-family:var(--mono);font-size:0.75rem;letter-spacing:.06em;text-transform:uppercase;font-weight:400}
.numbered{margin:0;padding:0 0 0 1.2em;display:flex;flex-direction:column;gap:0.75rem;font-size:1.0625rem;line-height:1.5}
.check{display:flex;gap:0.625rem;align-items:flex-start;font-size:0.875rem;line-height:1.5;color:var(--text2)}
.check input{width:1.25rem;height:1.25rem;margin-top:1px;accent-color:var(--ink);flex-shrink:0}

/* Ficha de flujo */
.flow-layout{display:grid;grid-template-columns:minmax(0,1fr) 21.25rem;gap:3.5rem;align-items:start;padding-bottom:5rem}
@media (max-width:960px){.flow-layout{grid-template-columns:minmax(0,1fr)}}
.flow-main{display:flex;flex-direction:column;gap:3rem;min-width:0}
.flow-main h2{margin:0 0 1.25rem;font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.6vw,1.875rem);letter-spacing:-.02em}
.big-pipeline{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.big-pipeline li{display:flex;gap:1.125rem}
.big-pipeline .rail{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.big-pipeline .n{width:2.75rem;height:2.75rem;border-radius:0.75rem;background:var(--ink);color:var(--accent);font-family:var(--mono);font-size:0.9375rem;display:flex;align-items:center;justify-content:center}
.big-pipeline .l{width:2px;flex:1;min-height:1.125rem;background:var(--line);margin:0.375rem 0}
.big-pipeline li:last-child .l{display:none}
.big-pipeline .t{font-size:1.0625rem;line-height:1.55;padding:0.5625rem 0 1.375rem}
.aside-card{position:sticky;top:6rem;background:var(--card);border:1px solid var(--line);border-radius:1.375rem;padding:1.625rem;display:flex;flex-direction:column;gap:0.25rem}
@media (max-width:960px){.aside-card{position:static}}
.aside-card .fact{padding:0.75rem 0}
.aside-card .btn{margin-top:0.875rem;justify-content:center}
.gain-big{background:var(--accent);border-radius:1.25rem;padding:1.625rem 1.75rem;font-size:1.125rem;line-height:1.55;font-weight:500}
.mini-faq{border-top:1px solid var(--line)}
.mini-faq details{border-bottom:1px solid var(--line)}
.mini-faq summary{cursor:pointer;padding:1rem 0.25rem;font-weight:600;font-size:1.0625rem;list-style:none;display:flex;justify-content:space-between;gap:0.75rem}
.mini-faq summary::-webkit-details-marker{display:none}
.mini-faq summary::after{content:"+";font-family:var(--mono);font-size:1.25rem;line-height:1}
.mini-faq details[open] summary::after{content:"–"}
.mini-faq p{margin:0;padding:0 0.25rem 1.125rem;font-size:1rem;line-height:1.6;color:var(--text2)}

/* Página de sector */
.pains{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:0.75rem}
.pains li{background:var(--card);border:1px solid var(--line);border-radius:0.875rem;padding:1.125rem;font-size:1rem;line-height:1.45;display:flex;gap:0.75rem;align-items:flex-start}
.pains li svg{flex-shrink:0;margin-top:2px}
.sector-hero{display:flex;flex-wrap:wrap;gap:2.5rem;align-items:flex-end}
.sector-hero .ic-big{width:5.5rem;height:5.5rem;border-radius:1.5rem;background:var(--ink);display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* Catálogo: tarjetas enlazadas */
a.flow-card{text-decoration:none;color:var(--ink)}

/* Insignias de confianza */
.trust{display:flex;flex-wrap:wrap;gap:0.625rem}
.trust span{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.8438rem;padding:0.5rem 0.75rem;border-radius:62.4375rem;background:var(--card);border:1px solid var(--line);color:var(--text2)}
.dark .trust span{background:var(--dark3);border-color:var(--darkline);color:var(--ondark)}

/* Footer ampliado */
footer.site .about{display:flex;flex-direction:column;gap:0.75rem;max-width:21.25rem}
footer.site .about p{margin:0;line-height:1.55}
footer.site .bottom{border-top:1px solid var(--line)}
footer.site .bottom .wrap{padding-top:1.25rem;padding-bottom:1.5rem;font-size:0.8125rem}

/* Las cabeceras de página se alinean con el resto del contenido */
.page-hero{max-width:75rem}
.page-hero > *{max-width:56.25rem}
.page-hero > .sector-hero{max-width:none}
.wrap.faq{max-width:75rem}
.wrap.faq > *{max-width:56.25rem}

.flow-card[hidden]{display:none}
footer.site .bottom .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0.75rem;color:var(--muted)}

/* =========================================================
   Sobriedad: tipografía, superficies y detalles del navegador
   ========================================================= */

/* Titulares con peso, sin estridencia */
.hero h1,.page-hero h1{font-weight:700;letter-spacing:-.032em}
.h2,.contact-copy h2,.cta-band h2,.sent h3{font-weight:700;letter-spacing:-.028em}
.card h3,.service h3,.sector-card h3,.post-card h3,.steps h3,.ba-col h3,.flow-card h3,.deploy h3,.layer-name h3,.why-item h3,.person h3,.cc-head h3{font-weight:600}
.result .big,.case-top .metric{font-weight:700}

/* La monoespaciada queda para datos y tecnología; las etiquetas usan la fuente de texto */
.tag,.case-body .k,.case-top .sector,.fact .k,.contact-info .ci-k,footer.site .col strong,.sheet-body .k,.toc strong,
.flow-card .sector,.post-card .meta,.steps .when,.ba-meter .lab,.crumbs-bar,.crumbs,.count,.lvl,.arch-box .k,.sector-card .go span{
  font-family:var(--body);letter-spacing:0;text-transform:none;font-size:0.8125rem;font-weight:500}
.tag{padding:0.3125rem 0.625rem}
.steps .when,.post-card .meta,.sector-card .go span{color:var(--muted)}
.ba-h,.ba-col h3 .pre{color:var(--muted)}
.ba-col.after h3 .pre{color:var(--accent)}
/* Ningún texto por debajo de 0.75rem */
.lvl{font-size:0.7812rem}

/* Superficies tranquilas: radios contenidos, sin brillos ni relieves */
.card,.service,.sector-card,.post-card,.quote,.steps li,.ba-col,.case,.deploy,.flow-card,.result,.calc-in,.calc-chart,.arch,.aside-card,.facts,.toc,.person{border-radius:1rem}
.contact,.cta-band{border-radius:1.25rem}
.card,.service,.sector-card,.post-card,.quote,.deploy,.flow-card,.case{transition:border-color .2s}
.card:hover,.service:hover,.sector-card:hover,.post-card:hover,.deploy:hover,.flow-card:hover{transform:none;border-color:var(--ink)}
.btn svg{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.btn:hover svg{transform:translateX(0.1875rem)}

/* Sectores: icono junto al título, no apilado en una baldosa */
.sector-card{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:0.75rem;align-items:center}
.sector-card .ic{width:auto;height:auto;background:none;border-radius:0}
.sector-card .ic svg{stroke:var(--ink)}
.sector-card > :not(.ic):not(h3){grid-column:1/-1}
.sector-card .go{align-self:end}

/* Lo que el navegador dibuja también lleva la marca */
::selection{background:var(--accent);color:var(--ink)}
html{scrollbar-color:#B9BEB4 var(--paper)}
input,textarea{caret-color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:0.1875rem}
.dark :focus-visible,.ba-col.after :focus-visible{outline-color:var(--accent)}
.prose a,.legal a,.check a,.contact-info a{text-underline-offset:0.1875rem;text-decoration-thickness:1px}

/* =========================================================
   Movimiento: un único momento en la portada y gráficos que se dibujan.
   Solo con JS (html.motion) y si no se ha pedido reducir el movimiento.
   ========================================================= */

header.site{transition:box-shadow .3s,background .3s}
header.site.scrolled{box-shadow:0 1px 0 var(--line),0 0.5rem 1.5rem -1rem rgba(16,19,23,.25);background:rgba(243,244,240,.95)}

html.motion [data-reveal]{opacity:0;transform:translate3d(0,0.875rem,0);transition:opacity .7s cubic-bezier(.25,1,.5,1),transform .7s cubic-bezier(.25,1,.5,1);transition-delay:var(--d,0ms)}
html.motion [data-reveal].is-in{opacity:1;transform:none}
html.motion [data-reveal].is-in.settled{transition-delay:0ms}

/* Portada: titular palabra a palabra y red de fondo */
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .w > span{display:inline-block}
html.motion .hero h1 .w > span{transform:translate3d(0,105%,0);animation:wordUp .9s cubic-bezier(.2,.75,.15,1) forwards;animation-delay:calc(120ms + var(--i) * 60ms)}
@keyframes wordUp{to{transform:none}}
html.motion .hero-copy > :not(h1){opacity:0;animation:fadeUp .9s cubic-bezier(.25,1,.5,1) forwards}
html.motion .hero-copy > .sub{animation-delay:.5s}
html.motion .hero-copy > .ctas{animation-delay:.62s}
html.motion .hero-copy > .badges{animation-delay:.74s}
@keyframes fadeUp{from{opacity:0;transform:translate3d(0,0.875rem,0)}to{opacity:1;transform:none}}
.hero-shell{position:relative;isolation:isolate;overflow:hidden}
.hero-net{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 80% 75% at 55% 45%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 80% 75% at 55% 45%,#000 30%,transparent 80%)}

@keyframes logIn{from{opacity:0;transform:translateY(0.375rem)}}

/* Franja de tecnología, quieta */
.stack .wrap{gap:0.75rem 1.75rem}
.stack-k{font-size:0.875rem;color:var(--muted)}
.stack-list{display:flex;flex-wrap:wrap;gap:0.5rem 1.75rem;flex:1;min-width:0}
.stack b{font-weight:500;font-size:0.9375rem;color:var(--text2);white-space:nowrap}
.stack .textlink{white-space:nowrap}

/* Antes / después: cuánto hace una persona */
.ba-meter{display:flex;flex-direction:column;gap:0.5rem}
.ba-meter .lab{display:flex;justify-content:space-between;gap:0.75rem;color:var(--muted)}
.ba-col.after .ba-meter .lab{color:var(--ondark2)}
.ba-meter .track{height:0.375rem;border-radius:0.375rem;background:var(--soft);overflow:hidden}
.ba-col.after .ba-meter .track{background:var(--dark3)}
.ba-meter .fill{height:100%;width:var(--w);border-radius:0.375rem;background:var(--ink);transform-origin:0 50%;transition:transform 1.4s cubic-bezier(.25,1,.5,1) .3s}
.ba-col.after .ba-meter .fill{background:var(--accent)}
html.motion .ba-col .ba-meter .fill{transform:scaleX(0)}
html.motion .ba-col.is-in .ba-meter .fill{transform:scaleX(1)}
html.motion .ba-col .ba-steps li{opacity:0;transform:translateX(-0.5rem);transition:opacity .5s,transform .5s cubic-bezier(.25,1,.5,1);transition-delay:calc(var(--i,0) * 70ms + 200ms)}
html.motion .ba-col.is-in .ba-steps li{opacity:1;transform:none}
/* El icono de persona no debe heredar la tarjeta de equipo de Nosotros */
.ba-steps .who.person{padding:0;flex-direction:row;gap:0}

/* Calculadora */
.calc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:stretch}
@media (max-width:860px){.calc{grid-template-columns:minmax(0,1fr)}}
.calc-in{background:var(--dark2);border:1px solid var(--darkline);padding:2rem;display:flex;flex-direction:column;gap:1.75rem}
.calc-foot{margin-top:auto;padding-top:1.5rem;border-top:1px solid var(--darkline);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.calc-foot .calc-note{margin:0;flex:1 1 13.75rem}
.calc-out{gap:1rem}
.calc-out .result{flex:1;justify-content:center}
.big{font-variant-numeric:tabular-nums}
.calc-chart{grid-column:1/-1;min-width:0;background:var(--dark2);border:1px solid var(--darkline);padding:1.5rem 1.5rem 0.75rem;display:flex;flex-direction:column;gap:0.875rem}
.cc-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0.5rem 1.5rem}
.cc-head h3{margin:0;font-family:var(--display);font-size:1.25rem;letter-spacing:-.01em}
.cc-legend{display:flex;flex-wrap:wrap;gap:0.375rem 1rem;font-size:0.8125rem;color:var(--ondark2)}
.cc-legend span{display:inline-flex;align-items:center;gap:0.5rem}
.cc-legend i{width:1.125rem;height:0;border-top:2px solid}
.cc-legend .m i{border-color:#7A828C;border-top-style:dashed}
.cc-legend .a i{border-color:var(--accent)}
.cc-legend .g i{height:0.625rem;border:0;border-radius:0.1875rem;background:color-mix(in srgb,var(--accent) 18%,transparent)}
.cc-plot{position:relative;touch-action:pan-y}
.cc-plot svg{width:100%;height:auto;overflow:visible}
.cc-plot .grid line{stroke:var(--darkline);stroke-width:1}
.cc-plot .axis text{fill:var(--ondark2);font-family:var(--mono);font-size:0.75rem}
.cc-plot .manual{fill:none;stroke:#7A828C;stroke-width:2;stroke-dasharray:5 5;stroke-linecap:round}
.cc-plot .auto{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round}
.cc-plot .gap{fill:color-mix(in srgb,var(--accent) 12%,transparent)}
.cc-plot .lbl{font-family:var(--mono);font-size:0.75rem;fill:var(--ondark)}
.cc-plot .cross{stroke:var(--ondark2);stroke-width:1;opacity:0}
.cc-plot .dot{stroke:var(--dark2);stroke-width:2;opacity:0}
.cc-plot.hover .cross,.cc-plot.hover .dot{opacity:1}
.cc-tip{position:absolute;top:0;left:0;pointer-events:none;background:var(--paper);color:var(--ink);border-radius:0.625rem;padding:0.625rem 0.75rem;font-size:0.8125rem;line-height:1.55;box-shadow:0 0.75rem 1.875rem rgba(0,0,0,.35);opacity:0;transition:opacity .15s;white-space:nowrap;min-width:11.875rem}
.cc-tip strong{display:block;font-weight:500;font-size:0.7812rem;color:var(--muted);margin-bottom:2px}
.cc-tip .r{display:flex;justify-content:space-between;gap:1rem}
.cc-tip .r b{font-family:var(--mono);font-weight:500}
.cc-plot.hover .cc-tip{opacity:1}
html.motion .calc-chart .cc-plot .auto{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1)}
html.motion .calc-chart.is-in .cc-plot .auto{stroke-dashoffset:0}

html.motion .faq-list details[open] p{animation:fadeUp .4s cubic-bezier(.25,1,.5,1)}

@media (prefers-reduced-motion:reduce){.hero-net{display:none}}

/* =========================================================
   Composición: un mismo ritmo, una misma rejilla
   ========================================================= */

.section{padding-top:7.5rem;padding-bottom:7.5rem}
@media (max-width:720px){.section{padding-top:4.5rem;padding-bottom:4.5rem}}

/* Cabecera de sección: título a la izquierda, contexto a la derecha */
.sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:1.5rem 4.5rem;align-items:end;margin:0 0 3.5rem;padding-top:1.75rem;border-top:1px solid var(--line)}
.dark .sec-head{border-top-color:var(--darkline)}
.sec-head .t{min-width:0}
.sec-head .h2{max-width:14em;text-wrap:balance}
.sec-head .r{display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem;min-width:0;padding-bottom:0.375rem}
.sec-head .lead{font-size:1.0625rem;max-width:30em}
@media (max-width:860px){.sec-head{grid-template-columns:minmax(0,1fr);gap:1.25rem;margin-bottom:2.5rem}}

/* Rejillas regulares: siempre filas completas */
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.grid-3{grid-template-columns:minmax(0,1fr)}}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:620px){.grid-2{grid-template-columns:minmax(0,1fr)}}
.card .textlink{align-self:flex-start;margin-top:auto}
.quotes{margin-top:1rem}
.steps{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}}
.why-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem 2.5rem}
@media (max-width:1000px){.why-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.why-list{grid-template-columns:minmax(0,1fr)}}
.ba{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){.ba{grid-template-columns:minmax(0,1fr)}}

/* Tarjetas: mismo relleno y misma jerarquía */
.card,.service,.sector-card,.post-card,.quote,.steps li,.ba-col{padding:1.875rem}
.steps li{background:var(--card);border:1px solid var(--line)}
.case-top,.case-body{padding:1.875rem}
.card,.service,.sector-card,.post-card,.quote,.steps li{gap:0.875rem}
.card h3,.service h3,.sector-card h3,.post-card h3,.steps h3,.ba-col h3{font-size:1.375rem;line-height:1.2;letter-spacing:-.015em}
.card p,.service p,.sector-card p,.post-card p,.steps p,.quote figcaption{font-size:0.9688rem}
.quote blockquote{font-size:1.1875rem}
.case-top .metric{font-size:2.25rem}

/* Páginas de sector: el icono acompaña al título, no compite con él */
.sector-hero{align-items:center;gap:1.75rem}
.sector-hero .ic-big{width:4rem;height:4rem;border-radius:1rem}
.sector-hero .ic-big svg{width:1.875rem;height:1.875rem}

/* =========================================================
   Portada orientada a venta: problema → solución → caso de uso
   ========================================================= */

/* Cada problema dice con qué se resuelve */
.problem .solve{margin-top:auto;padding-top:1rem;border-top:1px solid var(--soft);display:flex;align-items:center;gap:0.625rem;font-size:0.9062rem;color:var(--text2);text-decoration:none}
.problem .solve b{color:var(--ink);font-weight:600}
.problem .solve > svg:last-child{margin-left:auto;flex-shrink:0;transition:transform .25s cubic-bezier(.25,1,.5,1)}
.problem .solve:hover > svg:last-child{transform:translateX(0.1875rem)}
.solve-ic{display:inline-flex;color:var(--ink)}

/* Índice de soluciones */
.sol-intro{padding-top:0;padding-bottom:4.5rem}
.sol-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
@media (max-width:1000px){.sol-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sol-nav{grid-template-columns:minmax(0,1fr)}}
.sol-nav a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0.25rem 0.875rem;padding:1.375rem 0 0;border-top:2px solid var(--line);text-decoration:none;color:var(--ink);transition:border-color .25s}
.sol-nav a:hover{border-top-color:var(--ink)}
.sn-ic{grid-row:1/3;padding-top:2px}
.sn-t{display:flex;flex-direction:column;gap:0.25rem}
.sn-t b{font-family:var(--display);font-weight:600;font-size:1.1875rem;letter-spacing:-.01em}
.sn-t span{font-size:0.9375rem;color:var(--text2);line-height:1.45}
.sn-n{grid-column:2;font-size:0.8125rem;color:var(--muted);margin-top:0.375rem}

/* Capítulos de solución: texto a un lado, la solución funcionando al otro */
.cap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:2.5rem 4.5rem;align-items:start;padding-bottom:8.75rem}
.cap.rev .cap-text{order:2}
.cap-viz{position:sticky;top:6.5rem}
@media (max-width:960px){.cap{grid-template-columns:minmax(0,1fr);padding-bottom:6rem}.cap.rev .cap-text{order:0}.cap-viz{position:static}}
.cap-text{display:flex;flex-direction:column;gap:1.125rem;min-width:0}
.cap-h{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(2.125rem,3.8vw,3rem);line-height:1.02;letter-spacing:-.028em;text-wrap:balance}
.cap-lede{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(1.25rem,1.8vw,1.4375rem);line-height:1.3;letter-spacing:-.01em;text-wrap:balance}
.cap-def{margin:0;font-size:1.0312rem;line-height:1.65;color:var(--text2);max-width:36em}
.cap-sub{margin:0.875rem 0 0;font-family:var(--body);font-size:1rem;font-weight:600}
.cap-steps{margin:0;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:0.75rem}
.cap-steps li{counter-increment:s;display:grid;grid-template-columns:1.75rem minmax(0,1fr);gap:0.875rem;font-size:0.9688rem;line-height:1.5;color:var(--text2)}
.cap-steps li::before{content:counter(s);width:1.75rem;height:1.75rem;border-radius:50%;background:var(--ink);color:var(--accent);font-family:var(--mono);font-size:0.8125rem;display:flex;align-items:center;justify-content:center}
.cap-uses{display:flex;flex-direction:column;gap:0.625rem}
.cap-uses ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.cap-uses li a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.8125rem 2px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.cap-uses li a span{display:flex;flex-direction:column;gap:2px;min-width:0}
.cap-uses li b{font-weight:600;font-size:0.9688rem}
.cap-uses li small{font-size:0.8125rem;color:var(--muted)}
.cap-uses li svg{flex-shrink:0;transition:transform .25s cubic-bezier(.25,1,.5,1)}
.cap-uses li a:hover b{text-decoration:underline;text-underline-offset:0.1875rem;text-decoration-thickness:1px}
.cap-uses li a:hover svg{transform:translateX(0.1875rem)}
.cap-uses .textlink{align-self:flex-start;font-size:0.9375rem;margin-top:0.25rem}
.cap-foot{display:flex;flex-wrap:wrap;align-items:center;gap:0.875rem 1.25rem;margin-top:0.625rem}
.cap-tech{font-family:var(--mono);font-size:0.7812rem;line-height:1.6;color:var(--muted);flex:1 1 13.75rem}

/* Servicios que acompañan */
.cap-extra{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;padding-bottom:7.5rem}
@media (max-width:860px){.cap-extra{grid-template-columns:minmax(0,1fr)}}
.cx{background:var(--card);border:1px solid var(--line);border-radius:1rem;padding:1.875rem;display:flex;flex-direction:column;gap:0.75rem}
.cx h3{margin:0;font-family:var(--display);font-weight:600;font-size:1.375rem;letter-spacing:-.015em}
.cx p{margin:0;font-size:0.9688rem;line-height:1.6;color:var(--text2)}
.cx p b{color:var(--ink)}
.cx .textlink{align-self:flex-start;margin-top:auto;font-size:0.9375rem}

/* ---------- Visuales de cada solución ---------- */
.viz{background:var(--ink);color:var(--ondark);border-radius:1.25rem;padding:1.375rem;display:flex;flex-direction:column;gap:1.125rem;height:30rem;overflow:hidden;box-shadow:0 1.875rem 3.75rem -2.25rem rgba(16,19,23,.5)}
@media (max-width:560px){.viz{height:auto;min-height:26.25rem;padding:1.125rem}}
.viz-top{display:flex;justify-content:space-between;align-items:center;gap:0.75rem;padding-bottom:0.875rem;border-bottom:1px solid var(--darkline)}
.viz-top .name{font-family:var(--mono);font-size:0.7812rem;color:var(--ondark2)}
.viz-top .note{font-size:0.75rem;color:#7A828C}

/* Automatización: la factura se lee y se registra */
.va-stage{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.125rem;align-items:center;min-height:0}
@media (max-width:560px){.va-stage{grid-template-columns:minmax(0,1fr)}}
.va-doc{position:relative;overflow:hidden;background:var(--paper);color:var(--ink);border-radius:0.625rem;padding:1.125rem;display:flex;flex-direction:column;gap:0.625rem;box-shadow:0 1.125rem 1.875rem -1.125rem rgba(0,0,0,.6)}
.va-doc-h{display:flex;justify-content:space-between;align-items:baseline;gap:0.5rem}
.va-doc-h b{font-family:var(--display);font-size:1.1875rem;font-weight:700}
.va-doc-h span{font-family:var(--mono);font-size:0.75rem;color:var(--muted)}
.va-from{font-size:0.8125rem;font-weight:600;margin-bottom:0.25rem}
.va-l{height:0.4375rem;border-radius:0.25rem;background:var(--line);width:var(--w)}
.va-total{display:flex;justify-content:space-between;margin-top:0.5rem;padding-top:0.625rem;border-top:1px solid var(--line);font-size:0.8125rem}
.va-total b{font-family:var(--mono);font-weight:500}
.va-scan{position:absolute;left:0;right:0;top:0;height:2.875rem;background:linear-gradient(transparent,color-mix(in srgb,var(--accent) 45%,transparent));border-bottom:2px solid var(--accent);opacity:0;pointer-events:none}
.viz-auto:is([data-step="0"],[data-step="1"],[data-step="2"],[data-step="3"]) .va-scan{opacity:1;animation:scan 1.4s cubic-bezier(.45,0,.55,1) infinite}
@keyframes scan{from{transform:translateY(-2.875rem)}to{transform:translateY(18.75rem)}}
.va-fields{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0.5rem}
.va-fields li{display:flex;flex-direction:column;gap:2px;padding:0.625rem 0.75rem;border-radius:0.625rem;background:var(--dark2);border:1px solid var(--darkline);transition:opacity .4s,transform .4s cubic-bezier(.25,1,.5,1),border-color .4s}
.va-fields span{font-size:0.75rem;color:var(--ondark2)}
.va-fields b{font-family:var(--mono);font-size:0.8125rem;font-weight:500}
.va-fields em{font-style:normal;color:var(--accent);margin-left:0.375rem}
.va-status{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0.625rem;padding-top:0.875rem;border-top:1px solid var(--darkline)}
.va-pill{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;border-radius:62.4375rem;font-size:0.8125rem;font-weight:600;background:var(--accent);color:var(--ink);transition:opacity .4s,transform .4s cubic-bezier(.25,1,.5,1)}
.va-pill::before{content:"";width:0.625rem;height:0.375rem;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg) translateY(-2px)}
.va-count{font-size:0.8125rem;color:var(--ondark2)}
.va-count b{font-family:var(--mono);color:var(--ondark);font-weight:500}
.viz-auto[data-step] [data-k]{opacity:.22;transform:translateX(0.5rem)}
.viz-auto[data-step] .va-pill{transform:none}
.viz-auto:is([data-step="1"],[data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"]) [data-k="1"],
.viz-auto:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"]) [data-k="2"],
.viz-auto:is([data-step="3"],[data-step="4"],[data-step="5"]) [data-k="3"],
.viz-auto:is([data-step="4"],[data-step="5"]) [data-k="4"],
.viz-auto[data-step="5"] [data-k="5"]{opacity:1;transform:none}
.viz-auto:is([data-step="4"],[data-step="5"]) [data-k="4"]{border-color:var(--accent)}

/* Agentes: conversación con consultas a sistemas */
.vg-chat{flex:1;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;justify-content:flex-end;gap:0.625rem;min-height:0;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 3rem);mask-image:linear-gradient(transparent,#000 3rem)}
.vg-chat li{flex-shrink:0;max-width:86%;font-size:0.9062rem;line-height:1.5}
html.motion .vg-chat li{animation:logIn .45s cubic-bezier(.25,1,.5,1)}
.vg-chat .msg{padding:0.6875rem 0.875rem;border-radius:0.875rem}
.vg-chat .user{align-self:flex-end;background:var(--paper);color:var(--ink);border-bottom-right-radius:0.25rem}
.vg-chat .bot{align-self:flex-start;background:var(--dark3);border:1px solid var(--darkline);border-bottom-left-radius:0.25rem;min-height:2.875rem}
.vg-chat .bot.typing::after{content:"";display:inline-block;width:0.4375rem;height:0.9375rem;margin-left:2px;vertical-align:-2px;background:var(--accent);animation:caret .8s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
.vg-chat .tool{align-self:flex-start;display:flex;align-items:center;gap:0.625rem;font-family:var(--mono);font-size:0.7812rem;color:var(--ondark2);padding-left:0.25rem}
.vg-chat .tool i{width:1rem;height:1rem;border-radius:50%;flex-shrink:0;background:var(--accent);position:relative}
.vg-chat .tool i::after{content:"";position:absolute;left:0.3125rem;top:0.1875rem;width:0.25rem;height:0.4375rem;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg)}
.vg-chat .tool.busy i{background:none;border:2px solid var(--darkline);border-top-color:var(--accent);animation:spin .7s linear infinite}
.vg-chat .tool.busy i::after{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.vg-chat .handoff{align-self:center;max-width:none;font-size:0.8125rem;font-weight:600;color:var(--accent);padding:0.4375rem 0.875rem;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);border-radius:62.4375rem}

/* Datos: las fuentes alimentan la plataforma y el panel */
.vd-stage{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.3fr);gap:2.25rem;align-items:center;min-height:0}
@media (max-width:560px){.vd-stage{grid-template-columns:minmax(0,1fr);gap:1.875rem}}
.vd-wires{position:absolute;inset:0;pointer-events:none;overflow:visible}
.vd-wires path{fill:none;stroke:var(--darkline);stroke-width:1.5}
.vd-wires circle{fill:var(--accent)}
.vd-wires circle.out{fill:var(--paper)}
.vd-src{position:relative;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:1rem}
@media (max-width:560px){.vd-src{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:0.5rem}}
.vd-src li{padding:0.5625rem 0.75rem;border-radius:0.625rem;background:var(--dark2);border:1px solid var(--darkline);font-size:0.8438rem;font-weight:500;text-align:center}
.vd-hub{position:relative;padding:1.125rem 0.875rem;border-radius:0.875rem;border:1px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);display:flex;flex-direction:column;gap:0.25rem;text-align:center;transition:background .4s}
.vd-hub b{font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.2}
.vd-hub span{font-size:0.7812rem;color:var(--ondark2)}
.vd-hub.ping{animation:hubPing .9s cubic-bezier(.25,1,.5,1)}
@keyframes hubPing{30%{background:color-mix(in srgb,var(--accent) 22%,transparent)}}
.vd-dash{position:relative;background:var(--paper);color:var(--ink);border-radius:0.75rem;padding:1rem;display:flex;flex-direction:column;gap:0.75rem}
.vd-kpi{display:flex;flex-direction:column;gap:2px}
.vd-kpi span{font-size:0.75rem;color:var(--muted)}
.vd-kpi b{font-family:var(--display);font-weight:700;font-size:1.375rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.vd-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem;align-items:end;height:6rem}
.vd-bars div{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:0.375rem;height:100%}
.vd-bars i{display:block;height:calc(var(--h) * 4.375rem);border-radius:0.25rem 0.25rem 0 0;background:var(--ink);transition:height .8s cubic-bezier(.25,1,.5,1)}
.vd-bars div:nth-child(3) i{background:var(--accent);box-shadow:inset 0 0 0 1px rgba(16,19,23,.2)}
.vd-bars span{font-size:0.75rem;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vd-upd{font-size:0.75rem;color:var(--muted)}
.vd-upd b{font-family:var(--mono);font-weight:500;color:var(--ink)}

/* Predicción: histórico, previsión y su margen */
.vp-legend{display:flex;flex-wrap:wrap;gap:0.375rem 1.125rem;font-size:0.8125rem;color:var(--ondark2)}
.vp-legend span{display:inline-flex;align-items:center;gap:0.5rem}
.vp-legend i{width:1.125rem;height:0;border-top:2px solid var(--ondark)}
.vp-legend .f i{border-top:2px dashed var(--accent)}
.vp-legend .b i{height:0.625rem;border:0;border-radius:0.1875rem;background:color-mix(in srgb,var(--accent) 20%,transparent)}
.vp-plot{position:relative;flex:1;min-height:11.25rem;margin:0.375rem 0 0.25rem}
.vp-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vp-hist{fill:none;stroke:var(--ondark);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.vp-fc{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:6 5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.vp-band{fill:color-mix(in srgb,var(--accent) 16%,transparent)}
.vp-now{stroke:var(--darkline);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.vp-now-l{position:absolute;bottom:-1.375rem;transform:translateX(-50%);font-size:0.75rem;color:var(--ondark2)}
.vp-dot{position:absolute;width:0.875rem;height:0.875rem;margin:-0.4375rem 0 0 -0.4375rem;border-radius:50%;background:var(--accent);border:0.1875rem solid var(--ink)}
.vp-card{position:relative;align-self:flex-start;max-width:21.25rem;margin-top:1.375rem;display:flex;flex-direction:column;gap:0.25rem;padding:0.75rem 0.875rem;border-radius:0.75rem;background:var(--paper);color:var(--ink);font-size:0.8125rem;line-height:1.45;box-shadow:0 0.875rem 1.875rem -0.875rem rgba(0,0,0,.6)}
.vp-card b{font-weight:600;font-size:0.875rem}
.vp-card span{color:var(--text2)}
html.motion .viz-pred .vp-hist,html.motion .viz-pred .vp-fc{clip-path:inset(0 100% 0 0)}
html.motion .viz-pred .vp-band,html.motion .viz-pred .vp-dot,html.motion .viz-pred .vp-card{opacity:0}
html.motion .viz-pred .vp-card{transform:translateY(0.5rem)}
html.motion .viz-pred.play .vp-hist{clip-path:inset(0 0 0 0);transition:clip-path 2s cubic-bezier(.45,0,.55,1)}
html.motion .viz-pred.play .vp-band{opacity:1;transition:opacity .9s ease 2s}
html.motion .viz-pred.play .vp-fc{clip-path:inset(0 0 0 0);transition:clip-path 1.4s cubic-bezier(.25,1,.5,1) 2.1s}
html.motion .viz-pred.play .vp-dot{opacity:1;transition:opacity .3s 3.4s;animation:dotIn .6s cubic-bezier(.25,1,.5,1) 3.4s both}
html.motion .viz-pred.play .vp-card{opacity:1;transform:none;transition:opacity .5s 3.7s,transform .6s cubic-bezier(.25,1,.5,1) 3.7s}
@keyframes dotIn{from{transform:scale(.3)}to{transform:none}}

/* ---------- Buscador de casos de uso ---------- */
.uc-tools{display:flex;flex-direction:column;gap:0.875rem;margin-bottom:1.125rem}
.uc-search{position:relative;display:block;max-width:40rem}
.uc-search svg{position:absolute;left:1.125rem;top:50%;transform:translateY(-50%);color:var(--muted)}
.uc-search input{width:100%;min-height:3.5rem;padding:0 1.125rem 0 3.125rem;border:1px solid #B9BEB4;border-radius:62.4375rem;background:var(--card);font:inherit;font-size:1.0625rem;color:var(--ink)}
.uc-search input:focus{outline:2px solid var(--ink);outline-offset:2px}
.uc-tabs{display:flex;flex-wrap:wrap;gap:0.5rem}
.uc-tab{display:inline-flex;align-items:center;gap:0.5rem;min-height:2.625rem;padding:0 1rem;border-radius:62.4375rem;border:1px solid var(--line);background:var(--card);font:inherit;font-size:0.9062rem;font-weight:500;color:var(--ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.uc-tab span{font-size:0.8125rem;color:var(--muted)}
.uc-tab:hover{border-color:var(--ink)}
.uc-tab[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.uc-tab[aria-pressed="true"] span{color:var(--ondark2)}
.uc-count{margin:0 0 1rem;font-size:0.875rem;color:var(--muted);min-height:1.4em}
/* Cada solución con su forma: se distinguen sin depender del color */
[class^="d-"]{display:inline-block;width:0.5625rem;height:0.5625rem;flex-shrink:0;background:currentColor}
.d-auto{border-radius:50%}
.d-agentes{border-radius:50%;background:none;border:2px solid currentColor}
.d-datos{border-radius:2px}
.d-pred{transform:rotate(45deg) scale(.85)}
.uc-grid{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
@media (max-width:960px){.uc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.uc-grid{grid-template-columns:minmax(0,1fr)}}
.uc-grid li[hidden]{display:none}
html.motion .uc-grid.swap li{animation:ucIn .45s cubic-bezier(.25,1,.5,1) both;animation-delay:var(--d,0ms)}
@keyframes ucIn{from{opacity:0;transform:translateY(0.5rem)}}
.uc a{height:100%;display:flex;flex-direction:column;gap:0.625rem;padding:1.5rem;border-radius:1rem;background:var(--card);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:border-color .2s}
.uc a:hover{border-color:var(--ink)}
.uc-cap{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.8125rem;font-weight:500;color:var(--text2)}
.uc h3{margin:0;font-family:var(--display);font-weight:600;font-size:1.1875rem;line-height:1.2;letter-spacing:-.01em}
.uc p{margin:0;font-size:0.9062rem;line-height:1.55;color:var(--text2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.uc-foot{margin-top:auto;padding-top:0.75rem;border-top:1px solid var(--soft);display:flex;justify-content:space-between;align-items:center;gap:0.75rem;font-size:0.8125rem;color:var(--muted)}
.uc-foot svg{color:var(--ink);transition:transform .25s cubic-bezier(.25,1,.5,1)}
.uc a:hover .uc-foot svg{transform:translateX(0.1875rem)}
.uc-empty{margin:0.5rem 0 0;font-size:1rem;color:var(--text2)}
.uc-more{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;margin-top:1.75rem}
.uc-more .btn[hidden]{display:none}

/* ---------- Ahorro: una sola pregunta ---------- */
.sv{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:3rem 4.5rem;align-items:center}
@media (max-width:960px){.sv{grid-template-columns:minmax(0,1fr)}}
.sv-q{display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start}
.sv-sentence{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(1.625rem,2.9vw,2.375rem);line-height:1.3;letter-spacing:-.02em;text-wrap:balance}
.sv-sentence output,.sv-sentence b{font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.sv-range{display:block;width:100%}
.sv-range input{-webkit-appearance:none;appearance:none;width:100%;height:1.75rem;background:transparent;cursor:pointer}
.sv-range input::-webkit-slider-runnable-track{height:0.375rem;border-radius:0.375rem;background:linear-gradient(90deg,var(--accent) var(--fill,13%),var(--darkline) var(--fill,13%))}
.sv-range input::-moz-range-track{height:0.375rem;border-radius:0.375rem;background:var(--darkline)}
.sv-range input::-moz-range-progress{height:0.375rem;border-radius:0.375rem;background:var(--accent)}
.sv-range input::-webkit-slider-thumb{-webkit-appearance:none;width:1.625rem;height:1.625rem;margin-top:-0.625rem;border-radius:50%;background:var(--accent);border:0.25rem solid var(--ink);box-shadow:0 0 0 1px var(--accent)}
.sv-range input::-moz-range-thumb{width:1.125rem;height:1.125rem;border-radius:50%;background:var(--accent);border:0.25rem solid var(--ink)}
.sv-scale{display:flex;justify-content:space-between;width:100%;margin-top:-0.75rem;font-family:var(--mono);font-size:0.75rem;color:var(--ondark2)}
.sv-more{margin:0;font-size:1.125rem;line-height:1.55;color:var(--ondark)}
.sv-more b{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
.sv-q .calc-note{max-width:40em}
.sv-fig{margin:0;display:flex;flex-direction:column;gap:0.875rem}
.sv-dots{display:grid;grid-template-columns:repeat(25,1fr);gap:0.3125rem}
.sv-dots i{aspect-ratio:1;border-radius:2px;background:var(--dark3);transition:background .35s,transform .35s cubic-bezier(.25,1,.5,1)}
.sv-dots i.on{background:var(--accent)}
.sv-fig figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0.375rem 1rem;font-size:0.8125rem;color:var(--ondark2)}
.sv-fig figcaption span{display:inline-flex;align-items:center;gap:0.5rem}
.sv-fig figcaption i{width:0.5625rem;height:0.5625rem;border-radius:2px;background:var(--accent)}

/* En móvil, la solución funcionando aparece justo después del titular */
@media (max-width:960px){
  .cap{display:flex;flex-direction:column;gap:1.125rem}
  .cap-text{display:contents}
  .cap-h{order:1}.cap-lede{order:2}.cap-viz{order:3;margin:0.625rem 0 0.875rem}.cap-text > :not(.cap-h):not(.cap-lede){order:4}
}

/* =========================================================
   Portada centrada: el titular arriba y, debajo, todo lo que hacemos en un esquema
   ========================================================= */
.hero-c{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:4rem;padding-top:5.5rem;padding-bottom:6rem}
.hero-c .hero-copy{flex:none;align-items:center;text-align:center;max-width:61.25rem;margin:0 auto;gap:1.5rem}
.hero-c h1{font-size:clamp(2.625rem,6.2vw,5.25rem);max-width:12em;text-wrap:balance}
.hero-c .sub{max-width:40em}
.hero-c .ctas,.hero-c .badges{justify-content:center}
html.motion .hero .hx{opacity:0;animation:fadeUp 1s cubic-bezier(.25,1,.5,1) .55s forwards}
/* Portada: un problema concreto de cada solución, con una escena que enseña cómo se resuelve */
.hx{flex:1;display:flex;flex-direction:column;gap:1.25rem;padding:1.25rem;background:var(--card);border:1px solid var(--line);border-radius:1.5rem;box-shadow:0 2rem 4rem -2.5rem rgba(16,19,23,.28)}
.hx-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.375rem;padding:0.3125rem;border-radius:62.4375rem;background:var(--soft)}
.hx-tab{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:0.5rem;min-height:2.625rem;padding:0 0.75rem;border:0;border-radius:62.4375rem;background:none;font:inherit;font-size:0.875rem;font-weight:500;color:var(--muted);white-space:nowrap;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.hx-tab:hover{color:var(--ink)}
.hx-tab[aria-selected="true"]{background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(16,19,23,.12)}
.hx-ic{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:0.4375rem;background:var(--accent);color:var(--ink)}
.hx-ic svg{width:0.875rem;height:0.875rem}
.hx-bar{position:absolute;left:1rem;right:1rem;bottom:0;height:2px;border-radius:2px;background:var(--accent-d);transform:scaleX(0);transform-origin:left}
.hx.auto .hx-tab[aria-selected="true"] .hx-bar{animation:hxProg 7s linear forwards}
.hx.hold .hx-bar,.hx.away .hx-bar{animation-play-state:paused!important}
@keyframes hxProg{to{transform:scaleX(1)}}
/* Los cuatro paneles ocupan la misma celda: el recuadro no cambia de alto al pasar de uno a otro */
.hx-panels{flex:1;display:grid}
.hx-p{grid-area:1/1;display:flex;flex-direction:column;gap:1rem;padding:0 0.25rem;visibility:hidden;opacity:0;transition:opacity .35s,visibility 0s .35s}
.hx-p.on{visibility:visible;opacity:1;transition:opacity .45s .1s}
.hx-pain{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,1.9vw,1.5rem);line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.hx-pain span{display:block;margin-bottom:0.5rem;font-family:var(--mono);font-weight:400;font-size:0.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hx-stage{flex:1;position:relative;min-height:14rem;padding:2.75rem 1.25rem 1.25rem;border-radius:1.125rem;background:var(--tint);display:flex;align-items:center;justify-content:center;overflow:hidden}
/* antes y ahora, en una etiqueta en la esquina de la escena: lo manual se tacha cuando entra lo automático */
.hx-ba{position:absolute;top:0.75rem;left:0.75rem;right:0.75rem;display:flex;align-items:center;gap:0.375rem;font-size:0.75rem;line-height:1;white-space:nowrap;overflow:hidden}
.hx-ba > span{padding:0.3125rem 0.5625rem;border-radius:62.4375rem}
.ba-a{background:color-mix(in srgb,var(--card) 60%,transparent);color:var(--muted);text-decoration:line-through;text-decoration-color:var(--muted)}
.hx-ba i{font-style:normal;color:var(--muted)}
.ba-b{background:var(--card);color:var(--accent-d);font-weight:600;box-shadow:0 1px 2px rgba(16,19,23,.08)}
html.motion .hx-p.on .ba-a{animation:hxStrike .35s ease 2.2s both}
html.motion .hx-p.on .hx-ba i,html.motion .hx-p.on .ba-b{animation:hxPop .4s cubic-bezier(.34,1.56,.64,1) 2.4s both}
@keyframes hxStrike{from{text-decoration-color:transparent;color:var(--ink)}}
.hx-fix{margin:0;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;font-size:0.9375rem;line-height:1.45;color:var(--text2)}
.hx-fix b{color:var(--ink);font-weight:600}
.hx-fix a{flex-shrink:0;font-weight:600;font-size:0.9062rem;text-decoration:none;border-bottom:1.5px solid var(--accent-d);padding-bottom:1px}
.hx-fix a::after{content:" →"}
.hx-fix a:hover{color:var(--accent-d)}
/* piezas comunes de las escenas */
.hx-stage .ck{position:relative;width:1.125rem;height:1.125rem;flex-shrink:0;border-radius:50%;background:var(--accent-d)}
.hx-stage .ck::after{content:"";position:absolute;left:0.375rem;top:0.1875rem;width:0.25rem;height:0.5rem;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.sa-mail,.sa-erp,.sd-dash,.sb{background:var(--card);border-radius:0.875rem;box-shadow:0 1px 2px rgba(16,19,23,.06),0 0.5rem 1.5rem -0.75rem rgba(16,19,23,.18)}
/* 1 · el pedido del email entra solo en el ERP */
.sc-auto{display:grid;grid-template-columns:minmax(0,1fr) 3rem minmax(0,1.15fr);align-items:center}
.sa-mail{display:flex;flex-direction:column;gap:0.75rem;padding:0.875rem}
.sa-from{display:flex;align-items:center;gap:0.625rem;min-width:0}
.sa-from > i{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;flex-shrink:0;border-radius:50%;background:var(--soft);font-style:normal;font-size:0.75rem;font-weight:600;color:var(--muted)}
.sa-from b,.sa-from small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-from b{font-size:0.875rem}
.sa-from small{font-size:0.8125rem;color:var(--muted)}
.sa-from > span{min-width:0}
.sa-pdf{display:flex;align-items:center;gap:0.5rem;padding:0.4375rem 0.625rem;border:1px solid var(--line);border-radius:0.5rem;font-family:var(--mono);font-size:0.75rem;color:var(--text2);white-space:nowrap;overflow:hidden}
.sa-pdf b{padding:1px 0.3125rem;border-radius:0.25rem;background:#E5484D;color:#fff;font-family:var(--body);font-size:0.625rem}
.sa-pdf b.sepa{background:var(--c-pred-d)}
.sa-wire{position:relative;height:2px;margin:0 0.375rem;background:repeating-linear-gradient(90deg,var(--accent-d) 0 4px,transparent 4px 8px);opacity:.5}
.sa-wire i{position:absolute;top:-0.25rem;left:0;width:0.625rem;height:0.625rem;border-radius:50%;background:var(--accent-d);opacity:0}
.sa-erp{padding:0.375rem 0;overflow:hidden}
.sa-h{padding:0.375rem 0.875rem 0.5rem;font-size:0.75rem;font-weight:600;color:var(--muted)}
.sa-r{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:0.75rem;padding:0.5625rem 0.875rem;border-top:1px solid var(--soft);font-size:0.8438rem}
.sa-r span:first-child{font-family:var(--mono);font-size:0.75rem;color:var(--muted)}
.sa-r span:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-r.new{background:color-mix(in srgb,var(--accent) 22%,var(--card));font-weight:600}
html.motion .hx-p.on .sa-mail{animation:hxIn .5s cubic-bezier(.25,1,.5,1) both}
html.motion .hx-p.on .sa-wire i{animation:hxRun 1s ease-in-out .5s both}
html.motion .hx-p.on .sa-r.new{animation:hxRow .6s cubic-bezier(.25,1,.5,1) 1.4s both}
html.motion .hx-p.on .sa-r.new .ck{animation:hxPop .4s cubic-bezier(.34,1.56,.64,1) 1.9s both}
@keyframes hxRun{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 0.625rem);opacity:0}}
@keyframes hxRow{from{opacity:0;transform:translateY(-0.5rem);background:var(--accent)}}
/* 2 · el agente contesta solo */
.sc-chat{flex-direction:column;align-items:stretch;justify-content:center;gap:0.625rem}
.sb{max-width:82%;padding:0.625rem 0.875rem;font-size:0.875rem;line-height:1.45;border-radius:1rem}
.sb small{display:block;margin-top:0.25rem;font-size:0.6875rem;color:var(--muted)}
.sb.in{align-self:flex-start;border-bottom-left-radius:0.25rem}
.sb-slot{display:grid;justify-items:end}
.sb-slot > *{grid-area:1/1}
.sb.out{background:var(--ink);color:var(--ondark);border-bottom-right-radius:0.25rem}
.sb.out small{color:var(--ondark2)}
.sb.typing{display:flex;gap:0.25rem;align-self:start;padding:0.75rem 0.875rem;background:var(--ink);opacity:0}
.sb.typing i{width:0.375rem;height:0.375rem;border-radius:50%;background:var(--ondark2)}
.sc-note{align-self:flex-end;display:flex;align-items:center;gap:0.375rem;font-size:0.75rem;color:var(--accent-d);font-weight:600}
.sc-note::before{content:"";width:0.4375rem;height:0.4375rem;border-radius:50%;background:var(--accent-d)}
html.motion .hx-p.on .sb.in{animation:hxIn .5s cubic-bezier(.25,1,.5,1) both}
html.motion .hx-p.on .sb.typing{animation:hxType 1.4s ease .6s both}
html.motion .hx-p.on .sb.typing i{animation:hxDot .9s ease-in-out infinite}
html.motion .hx-p.on .sb.typing i:nth-child(2){animation-delay:.15s}
html.motion .hx-p.on .sb.typing i:nth-child(3){animation-delay:.3s}
html.motion .hx-p.on .sb.out{animation:hxIn .5s cubic-bezier(.25,1,.5,1) 2s both}
html.motion .hx-p.on .sc-note{animation:hxIn .5s ease 2.5s both}
@keyframes hxType{0%{opacity:0}15%,85%{opacity:1}100%{opacity:0}}
@keyframes hxDot{0%,100%{opacity:.35}50%{opacity:1;transform:translateY(-2px)}}
/* 3 · los datos sueltos acaban en un panel */
.sc-data{flex-direction:column;align-items:stretch;gap:0.75rem}
.sd-src{display:flex;flex-wrap:wrap;justify-content:center;gap:0.375rem}
.sd-src span{padding:0.25rem 0.625rem;border-radius:62.4375rem;background:var(--card);border:1px solid var(--line);font-family:var(--mono);font-size:0.7188rem;color:var(--text2)}
.sd-dash{flex:1;display:flex;flex-direction:column;gap:0.75rem;padding:0.875rem}
.sd-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.5rem}
.sd-kpis div{padding:0.5rem 0.625rem;border-radius:0.625rem;background:var(--paper);min-width:0}
.sd-kpis small{display:block;font-size:0.6875rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-kpis b{display:block;font-family:var(--display);font-size:1.125rem;letter-spacing:-.01em}
.sd-kpis em{font-style:normal;font-size:0.6875rem;font-weight:600;color:var(--c-agent-d)}
.sd-bars{height:3.5rem;display:flex;align-items:flex-end;gap:0.375rem}
.sd-bars i{flex:1;height:var(--h);border-radius:0.25rem 0.25rem 0 0;background:var(--accent);transform-origin:bottom}
.sd-bars i:last-child{background:var(--accent-d)}
.sd-foot{font-size:0.6875rem;color:var(--muted)}
html.motion .hx-p.on .sd-src span{animation:hxSrc .7s cubic-bezier(.25,1,.5,1) both;animation-delay:calc(var(--n,0) * 90ms)}
.sd-src span:nth-child(2){--n:1}.sd-src span:nth-child(3){--n:2}.sd-src span:nth-child(4){--n:3}
html.motion .hx-p.on .sd-dash{animation:hxIn .5s cubic-bezier(.25,1,.5,1) .5s both}
html.motion .hx-p.on .sd-bars i{animation:hxBar .6s cubic-bezier(.25,1,.5,1) both}
html.motion .hx-p.on .sd-bars i:nth-child(n){animation-delay:calc(.8s + var(--b,0) * 60ms)}
.sd-bars i:nth-child(2){--b:1}.sd-bars i:nth-child(3){--b:2}.sd-bars i:nth-child(4){--b:3}.sd-bars i:nth-child(5){--b:4}.sd-bars i:nth-child(6){--b:5}.sd-bars i:nth-child(7){--b:6}.sd-bars i:nth-child(8){--b:7}.sd-bars i:nth-child(9){--b:8}.sd-bars i:nth-child(10){--b:9}
@keyframes hxSrc{from{opacity:0;transform:translateY(-0.625rem)}}
@keyframes hxBar{from{transform:scaleY(0)}}
/* 4 · la previsión dice cuánto pedir */
.sc-pred{flex-direction:column;align-items:stretch;gap:0.875rem}
.sp-chart{position:relative;flex:1;min-height:8.5rem}
.sp-chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sp-chart path,.sp-chart line{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.sp-hist{stroke:var(--ink);stroke-width:2.5}
.sp-fc{stroke:var(--accent-d);stroke-width:2.5;stroke-dasharray:6 5}
.sp-band{fill:var(--accent)!important;opacity:.35}
.sp-now{stroke:var(--ink);stroke-width:1;stroke-dasharray:2 4;opacity:.4}
.sp-lbl{position:absolute;font-size:0.6875rem;font-weight:500;color:var(--muted)}
.sp-lbl.l{left:0;bottom:-0.25rem}
.sp-lbl.n{left:63.1%;top:-0.375rem;transform:translateX(-50%);padding:0 0.25rem;background:var(--tint)}
.sp-lbl.r{right:0;bottom:-0.25rem}
.sp-dot{position:absolute;left:85.6%;top:28.6%;width:0.75rem;height:0.75rem;margin:-0.375rem 0 0 -0.375rem;border-radius:50%;background:var(--accent-d);box-shadow:0 0 0 0.3125rem color-mix(in srgb,var(--accent-d) 20%,transparent)}
.sp-call{position:absolute;right:16%;top:28.6%;transform:translate(0,-180%);padding:0.25rem 0.5rem;border-radius:0.375rem;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:0.7188rem;white-space:nowrap}
.sp-act{display:flex;align-items:center;gap:0.5rem;align-self:flex-start;padding:0.5rem 0.875rem;border-radius:62.4375rem;background:var(--card);font-size:0.8438rem;font-weight:600;box-shadow:0 1px 2px rgba(16,19,23,.06)}
.sp-act::before{content:"";width:0.5rem;height:0.5rem;border-radius:50%;background:var(--accent-d)}
html.motion .hx-p.on .sp-hist{animation:hxDraw 1s ease-out both}
html.motion .hx-p.on .sp-band{animation:hxFade .6s ease 1s both}
html.motion .hx-p.on .sp-fc{animation:hxFade .6s ease 1.1s both}
html.motion .hx-p.on .sp-dot{animation:hxPop .45s cubic-bezier(.34,1.56,.64,1) 1.6s both}
html.motion .hx-p.on .sp-call{animation:hxFade .4s ease 1.8s both}
html.motion .hx-p.on .sp-act{animation:hxIn .5s cubic-bezier(.25,1,.5,1) 2.2s both}
@keyframes hxDraw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes hxFade{from{opacity:0}}
@keyframes hxIn{from{opacity:0;transform:translateY(0.5rem)}}
@keyframes hxPop{from{opacity:0;transform:scale(.3)}}
@media (max-width:620px){
  .hx{padding:0.875rem}
  .hx-tabs{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:1.25rem}
  /* en móvil la etiqueta de antes/ahora va en dos líneas y la escena baja para no pisarla */
  .hx-stage{padding:4.25rem 1rem 1rem}
  .hx-ba{flex-direction:column;align-items:flex-start;gap:0.25rem;right:auto}
  .hx-ba i{display:none}
  .sd-kpis b{font-size:0.9375rem;white-space:nowrap}
  .sc-auto{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1.75rem auto}
  .sa-wire{width:2px;height:auto;margin:0.25rem auto;align-self:stretch;background:repeating-linear-gradient(180deg,var(--accent-d) 0 4px,transparent 4px 8px)}
  .sa-wire i{display:none}
  .hx-fix{flex-direction:column;gap:0.5rem}
  .sb{max-width:92%}
}

/* Logotipos: monocromos, del color del texto */
.lg{display:inline-flex;align-items:center;gap:0.5rem;white-space:nowrap;font-weight:500;font-size:0.9375rem;color:var(--text2)}
.lg i{width:1.25rem;height:1.25rem;flex-shrink:0;background:currentColor;-webkit-mask:var(--l) center/contain no-repeat;mask:var(--l) center/contain no-repeat}
.lg i.wide{width:2.125rem;height:1.5rem}
.stack-list.logos{gap:0.75rem 1.75rem;align-items:center}

/* Proyectos tipo: dos por fila */
.grid.cases{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){.grid.cases{grid-template-columns:minmax(0,1fr)}}
.case-body{flex:1}
.case-body .textlink{align-self:flex-start;margin-top:auto;font-size:0.9375rem}
.mono-s{font-family:var(--mono);font-size:0.8125rem}

/* Franja de logotipos: rejilla regular de 2 filas */
.stack .wrap{flex-direction:column;align-items:center;gap:1.25rem;padding-top:1.875rem;padding-bottom:1.875rem}
.stack-list.logos{display:grid;grid-template-columns:repeat(7,auto);justify-content:space-between;width:100%;gap:1.125rem 1.5rem;flex:none}
@media (max-width:1100px){.stack-list.logos{grid-template-columns:repeat(4,auto)}}
@media (max-width:620px){.stack-list.logos{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* =========================================================
   Simetría: portada a dos columnas y capítulos sin elementos que se desplacen
   ========================================================= */
.hero-c{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3.5rem;align-items:stretch;padding-top:4.5rem;padding-bottom:5.5rem}
.hero-c .hero-copy{max-width:none;margin:0;align-items:flex-start;text-align:left;justify-content:center}
.hero-c h1{font-size:clamp(2.5rem,4.6vw,4.125rem);max-width:none}
.hero-c .sub{font-size:1.125rem;max-width:none}
.hero-c .ctas{justify-content:flex-start}
.hero-side{display:flex;flex-direction:column;gap:0.875rem;min-width:0}
.hero-side .badges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.625rem}
.hero-side .badges span{justify-content:center;padding:0.625rem 0.75rem;border:1px solid var(--line);border-radius:62.4375rem;background:var(--card);font-size:0.8438rem;color:var(--text2)}
@media (max-width:1060px){.hero-c{grid-template-columns:minmax(0,1fr);gap:2.5rem}}
@media (max-width:560px){.hero-side .badges{grid-template-columns:minmax(0,1fr)}}

.cap{display:block;padding-bottom:8.75rem}
.cap-main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4rem;align-items:stretch}
.cap-text{justify-content:center}
.cap-viz{position:static;display:flex}
.cap-viz .viz{flex:1;height:auto;min-height:30rem}
.cap-bottom{margin-top:3rem;display:flex;flex-direction:column;gap:1.125rem}
.cap-uses-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0.5rem 1rem}
.cap-uses-head .cap-sub{margin:0}
.cap-uses-head .textlink{font-size:0.9375rem}
ul.cap-uses{margin:0;padding:0;list-style:none;border:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
ul.cap-uses li a{height:100%;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:1.125rem;padding:1.25rem;border:1px solid var(--line);border-radius:1rem;background:var(--card);transition:border-color .2s}
ul.cap-uses li a:hover{border-color:var(--ink)}
ul.cap-uses li a svg{align-self:flex-end}
.cap-bottom .cap-foot{margin-top:0.375rem;justify-content:space-between}
.cap-bottom .cap-tech{flex:0 1 auto;text-align:right}
@media (max-width:1000px){ul.cap-uses{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:960px){
  .cap{display:block;padding-bottom:6rem}
  .cap-main{display:flex;flex-direction:column;gap:1.125rem}
  .cap-text{display:contents}
  .cap-viz .viz{min-height:26.25rem}
  .cap-bottom{margin-top:1.75rem}
  .cap-bottom .cap-tech{text-align:left}
}
@media (max-width:560px){ul.cap-uses{grid-template-columns:minmax(0,1fr)}}
.hero-c .ctas{flex-wrap:nowrap;gap:0.625rem}
.hero-c .ctas .btn{padding:0 1.25rem;font-size:1rem;white-space:nowrap}
@media (max-width:420px){.hero-c .ctas{flex-wrap:wrap}}
@media (max-width:560px){
  .hero-side .badges{display:flex;flex-wrap:wrap;gap:0.5rem 1.125rem}
  .hero-side .badges span{padding:0;border:0;background:none}
}

/* =========================================================
   Portada cuadrada, logos de marca y fotos
   ========================================================= */
/* El esquema arranca a la altura del titular y termina con la última línea del texto */
.hero-c{align-items:stretch}
.hero-c .hero-copy{justify-content:flex-start}
.hero-c h1{margin-top:-.07em}
.hero-c .ctas{margin-top:auto}
.hero-side{gap:0}
.trust{list-style:none;margin:-0.375rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0.375rem 1.125rem;font-size:0.8438rem;color:var(--muted)}
.trust li{display:inline-flex;align-items:center;gap:0.375rem}
.trust svg{opacity:.75}
html.motion .hero-copy > .trust{animation-delay:.74s}
@media (max-width:1060px){.hero-c .ctas{margin-top:0}}

/* Logo junto al nombre de cada tecnología */
.tl{display:inline-block;width:1rem;height:1rem;object-fit:contain;flex-shrink:0;vertical-align:-0.1875rem}
.tic{display:inline-block;width:0.875rem;height:0.875rem;flex-shrink:0;vertical-align:-2px;background:currentColor;opacity:.75;-webkit-mask:var(--l) center/contain no-repeat;mask:var(--l) center/contain no-repeat}
.techs span,.layer-tech span,.mini-steps span,.arch-side span{display:inline-flex;align-items:center;gap:0.4375rem}
.techs span .tl + .tl,.layer-tech span .tl + .tl,.mini-steps span .tl + .tl{margin-left:-0.1875rem}
.mini-steps span{gap:0.375rem}
.mini-steps .tl{width:0.875rem;height:0.875rem}
.layer-tech .tl{width:1.125rem;height:1.125rem}
.tli{white-space:nowrap}
.tli .tl{margin-right:0.3125rem}
.tli .tl + .tl{margin-left:-2px}
.dark .tl,.arch .tl{box-sizing:border-box;width:1.0625rem;height:1.0625rem;padding:2px;border-radius:0.25rem;background:#fff}
.case-body .tl{width:0.9375rem;height:0.9375rem}

/* Casos de uso de la portada: la tecnología, de un vistazo */
.uc-logos{display:flex;gap:0.375rem;margin-top:auto;padding-top:0.375rem}
.uc-logos img{box-sizing:border-box;width:1.875rem;height:1.875rem;padding:0.375rem;border-radius:0.5rem;background:var(--paper);border:1px solid var(--soft);object-fit:contain}
.uc-logos + .uc-foot{margin-top:0.25rem}

/* Franja de tecnologías: dos cintas de logos en movimiento */
.stack{overflow:hidden;padding-bottom:1.75rem}
.stack .wrap.stack-head{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0.5rem 1.5rem;padding-top:1.75rem;padding-bottom:1.25rem}
.mq{overflow:hidden}
.mq + .mq{margin-top:0.625rem}
.mq-move{display:flex;width:max-content}
.mq-track{display:flex;gap:0.625rem;margin:0;padding:0 0.625rem 0 0;list-style:none}
.mq-track li{display:inline-flex;align-items:center;gap:0.625rem;padding:0.5625rem 1.125rem 0.5625rem 0.75rem;border:1px solid var(--line);border-radius:62.4375rem;background:var(--paper);font-size:0.9375rem;font-weight:500;color:var(--text2);white-space:nowrap}
.mq-track img{width:1.375rem;height:1.375rem;object-fit:contain}
html.motion .mq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
html.motion .mq-move{animation:mq 70s linear infinite}
html.motion .mq.rev .mq-move{animation-direction:reverse;animation-duration:80s}
html.motion .mq:hover .mq-move{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
html:not(.motion) .mq-move{width:auto;max-width:75rem;margin:0 auto;padding:0 1.5rem}
html:not(.motion) .mq-track{flex-wrap:wrap;padding:0}
html:not(.motion) .mq-track[aria-hidden]{display:none}

/* Fotos */
.sector-card,.post-card{overflow:hidden}
.sector-card{grid-template-rows:auto auto auto 1fr}
.sc-photo,.pc-photo{display:block;width:calc(100% + 3.75rem);max-width:none;margin:-1.875rem -1.875rem 0.375rem;aspect-ratio:16/9;height:auto;object-fit:cover;background:var(--soft)}
.case-photo{display:block;width:100%;aspect-ratio:16/7;height:auto;object-fit:cover;background:var(--soft)}
.steps-cta{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem 1.25rem;margin-top:2.5rem}
.steps-cta span{font-size:0.9375rem;color:var(--muted)}
.sector-photo{margin-bottom:4.5rem}
.sp-img{width:100%;aspect-ratio:21/8;height:auto;object-fit:cover;border-radius:1.25rem;background:var(--soft)}
.about-photos{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:1rem;margin-bottom:4.5rem}
.ap-img{width:100%;height:clamp(13.75rem,32vw,23.75rem);object-fit:cover;border-radius:1.25rem;background:var(--soft)}
@media (max-width:760px){
  .sp-img{aspect-ratio:16/9}
  .about-photos{grid-template-columns:minmax(0,1fr)}
  .sector-photo{margin-bottom:3rem}
}
.aside-card{overflow:hidden}
.ac-photo{display:block;width:calc(100% + 3.25rem);max-width:none;margin:-1.625rem -1.625rem 0.875rem;aspect-ratio:16/9;height:auto;object-fit:cover;background:var(--soft)}
.page-hero .badges .tl{width:1.125rem;height:1.125rem}

/* =========================================================
   Pantallas grandes: todo crece en proporción a partir de 1500 px
   (las medidas están en rem; en portátiles y móviles la base sigue en 16 px)
   ========================================================= */
@media (min-width:1500px){html{font-size:clamp(16px, calc(16px + (100vw - 1500px) * .0088), 32px)}}
/* Los iconos con tamaño fijo en el HTML crecen con el resto */
svg[width="14"]{width:.875rem;height:.875rem}
svg[width="16"]{width:1rem;height:1rem}
svg[width="18"]{width:1.125rem;height:1.125rem}
svg[width="20"]{width:1.25rem;height:1.25rem}
svg[width="22"]{width:1.375rem;height:1.375rem}
svg[width="24"]{width:1.5rem;height:1.5rem}
svg[width="28"]{width:1.75rem;height:1.75rem}
svg[width="40"]{width:2.5rem;height:2.5rem}

/* Móviles pequeños: un poco más de aire en los laterales y titulares que no desbordan */
@media (max-width:380px){
  .wrap{padding-left:16px;padding-right:16px}
  .hero-c h1{font-size:2.4rem}
  .h2{font-size:1.9rem}
}

/* Portada más tranquila: la cinta de logos en gris, en color al pasar por encima */
.mq-track img{filter:grayscale(1);opacity:.7;transition:filter .25s,opacity .25s}
.mq-track li{color:var(--muted)}
.mq-track li:hover img{filter:none;opacity:1}
.mq-track li:hover{color:var(--ink)}

/* =========================================================
   Color con significado: cada solución tiene su tinta
   lima = automatización · coral = agentes de IA · cobalto = datos · turquesa = predicción
   ========================================================= */
[data-cap="auto"],#automatizacion,a[href$="#automatizacion"],.c-auto{--accent:var(--c-auto);--accent-d:var(--c-auto-d);--tint:var(--c-auto-t)}
[data-cap="agentes"],#agentes,a[href$="#agentes"],.c-agent{--accent:var(--c-agent);--accent-d:var(--c-agent-d);--tint:var(--c-agent-t)}
[data-cap="datos"],#datos,a[href$="#datos"],.c-data{--accent:var(--c-data);--accent-d:var(--c-data-d);--tint:var(--c-data-t)}
[data-cap="pred"],#prediccion,a[href$="#prediccion"],.c-pred{--accent:var(--c-pred);--accent-d:var(--c-pred-d);--tint:var(--c-pred-t)}

/* Las cuatro soluciones: navegación, problemas y capítulos */
.sol-nav a{border-top:3px solid var(--accent)}
.sol-nav a:hover{border-top-color:var(--accent-d)}
.sn-ic{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;border-radius:0.75rem;background:var(--accent);color:var(--ink)}
.sn-n{color:var(--accent-d)}
.solve-ic{flex-shrink:0;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:0.5rem;background:var(--tint);color:var(--accent-d)}
#automatizacion,#agentes,#datos,#prediccion{padding-top:6rem;padding-bottom:6rem;background:var(--tint);box-shadow:0 0 0 100vmax var(--tint);clip-path:inset(0 -100vmax)}
.cap-extra{padding-top:6rem}
.cap-h::before{content:"";display:inline-block;width:.36em;height:.36em;margin-right:.32em;vertical-align:.14em;background:var(--accent-d)}
#automatizacion .cap-h::before{border-radius:50%}
#agentes .cap-h::before{border-radius:50%;background:none;border:.09em solid var(--accent-d)}
#datos .cap-h::before{border-radius:.06em}
#prediccion .cap-h::before{transform:rotate(45deg) scale(.86)}
.cap-steps li::before{background:var(--accent-d);color:#fff}
.cap .textlink{color:var(--accent-d)}
ul.cap-uses li a:hover{border-color:var(--accent-d)}
.cap-tech{color:var(--text2)}

/* Casos de uso: el tipo de solución se ve de un vistazo */
.uc-cap{color:var(--accent-d)}
.uc-cap i,.uc-tab i{background:var(--accent-d)}
.uc-cap i.d-agentes,.uc-tab i.d-agentes{background:none;border-color:var(--accent-d)}
.uc a:hover,.flow-card[data-cap]:hover{border-color:var(--accent-d)}
.uc-tab[aria-pressed="true"] i{background:var(--accent)}
.uc-tab[aria-pressed="true"] i.d-agentes{background:none;border-color:var(--accent)}

/* Proyectos tipo, método y principios: el mismo código de color */
.grid.cases .case:nth-child(2){--accent:var(--c-agent)}
.grid.cases .case:nth-child(3){--accent:var(--c-data)}
.grid.cases .case:nth-child(4){--accent:var(--c-pred)}
.steps li:nth-child(2) .step-n{color:var(--c-agent)}
.steps li:nth-child(3) .step-n{color:var(--c-data)}
.steps li:nth-child(4) .step-n{color:var(--c-pred)}
.why-item:nth-child(4n+1){border-top-color:var(--c-auto)}
.why-item:nth-child(4n+2){border-top-color:var(--c-agent)}
.why-item:nth-child(4n+3){border-top-color:var(--c-data)}
.why-item:nth-child(4n+4){border-top-color:var(--c-pred)}

/* Tecnología: las capas de la arquitectura con la tinta de la solución que sostienen */
.arch-box.c-auto,.arch-box.c-agent,.arch-box.c-data,.arch-box.c-pred{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 8%,var(--dark3))}
.arch-box.c-auto .k,.arch-box.c-agent .k,.arch-box.c-data .k,.arch-box.c-pred .k{color:var(--accent)}

/* Guías: el tema, en su color */
.post-card[data-cat="IA"]{--tint:var(--c-agent-t);--accent-d:var(--c-agent-d)}
.post-card[data-cat="Datos"]{--tint:var(--c-data-t);--accent-d:var(--c-data-d)}
.post-card[data-cat="Predicción"]{--tint:var(--c-pred-t);--accent-d:var(--c-pred-d)}
.post-card[data-cat="Herramientas"],.post-card[data-cat="Integración"],.post-card[data-cat="Documentos"]{--tint:var(--c-auto-t);--accent-d:var(--c-auto-d)}
.post-card .meta > span:first-child{padding:0.125rem 0.5rem;margin:-0.125rem 0;border-radius:62.4375rem;background:var(--tint,var(--soft));color:var(--accent-d,var(--ink))}

/* La partitura: el motivo de Orquesta, con las formas y tintas de cada solución */
.page-hero::after{content:"";display:block;align-self:stretch;height:4.5rem;margin-top:0.5rem;background:url(img/partitura.svg) 0 50%/auto 100% repeat-x}
footer.site::before{content:"";display:block;height:4.5rem;background:url(img/partitura.svg) -18rem 50%/auto 100% repeat-x;border-bottom:1px solid var(--line)}
footer.site{border-top:0}

/* Superficies del navegador */
html{scrollbar-color:#B4B9AE var(--paper);accent-color:var(--c-auto-d)}
input,textarea{caret-color:var(--c-agent-d)}
.fc-cap{display:inline-flex;align-items:center;gap:0.5rem;color:var(--accent-d)}
.fc-cap i{background:var(--accent-d)}
.fc-cap i.d-agentes{background:none;border-color:var(--accent-d)}
/* La solución, como etiqueta con su forma y su tinta (sin franjas de color en las tarjetas) */
.fc-cap,.uc-cap{padding:0.25rem 0.625rem 0.25rem 0.5rem;border-radius:62.4375rem;background:var(--tint);font-size:0.8125rem;font-weight:600}
.uc-cap{align-self:flex-start}
.mini-steps{font-size:0.78rem}

/* =========================================================
   Cabecera: una cápsula de consola flotante. Una señal con el degradado de marca
   recorre su borde, como el trabajo que pasa de un sistema a otro.
   ========================================================= */
@property --sig{syntax:"<angle>";inherits:false;initial-value:0deg}
header.site,header.site.scrolled{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding-top:0.75rem;pointer-events:none}
header.site > .nav{position:relative;pointer-events:auto;max-width:none;margin-left:max(24px,calc(50% - 37.5rem + 24px));margin-right:max(24px,calc(50% - 37.5rem + 24px));padding:0.4375rem 0.4375rem 0.4375rem 1.25rem;border-radius:62.4375rem;background:rgba(16,19,23,.9);-webkit-backdrop-filter:blur(0.875rem) saturate(1.2);backdrop-filter:blur(0.875rem) saturate(1.2);box-shadow:0 0.75rem 2rem -1rem rgba(16,19,23,.55);color:var(--ondark);transition:box-shadow .3s}
header.site.scrolled > .nav{box-shadow:0 1rem 2.5rem -1rem rgba(16,19,23,.7)}
/* el borde: un hilo tenue con un destello del degradado que da la vuelta */
header.site > .nav::before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from var(--sig),rgba(233,236,228,.1) 0deg,rgba(233,236,228,.1) 250deg,#C8F03C 290deg,#74E39A 310deg,#34CDB9 330deg,#4FA3F2 348deg,rgba(233,236,228,.1) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
html.motion header.site > .nav::before{animation:signal 9s linear infinite}
@keyframes signal{to{--sig:360deg}}

/* logo y enlaces sobre la tinta */
header.site .logo{color:var(--ondark)}
header.site .logo svg rect{fill:#262C34}
.logo svg circle,.logo svg path{transform-box:fill-box;transform-origin:center;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.logo:hover svg circle:nth-of-type(1){transform:scale(1.3)}
.logo:hover svg circle:nth-of-type(2){transform:translate(1px,-1px)}
.logo:hover svg circle:nth-of-type(3){transform:translate(1px,1px)}
.navlinks{gap:0.25rem}
.nav-item{display:flex;align-items:center}
header.site .navlinks a.link{position:relative;display:inline-flex;align-items:center;gap:0.3rem;color:#D3D8CF;transition:color .2s}
header.site .navlinks a.link:hover,header.site .nav-item:focus-within > a.link{color:#fff}
.chev{width:0.875rem;height:0.875rem;opacity:.7;transition:transform .3s cubic-bezier(.25,1,.5,1)}
.nav-item:hover .chev,.nav-item:focus-within .chev{transform:rotate(180deg)}
.nav-cta{margin-left:0.625rem;gap:0.375rem;overflow:hidden}
.nav-cta svg{width:1rem;height:1rem;margin-right:-1.375rem;opacity:0;transform:translateX(-0.5rem);transition:margin .35s cubic-bezier(.22,1,.36,1),opacity .25s,transform .35s cubic-bezier(.22,1,.36,1)}
.nav-cta:hover svg,.nav-cta:focus-visible svg{margin-right:0;opacity:1;transform:none}

/* Menús desplegables: tarjetas que se abren bajo la cápsula, con sus piezas entrando una tras otra */
.mega{position:absolute;top:100%;left:0;right:0;margin-top:0.625rem;pointer-events:auto;background:var(--paper);border:1px solid var(--line);border-radius:1.5rem;box-shadow:0 2rem 3.5rem -1.75rem rgba(16,19,23,.4);visibility:hidden;clip-path:inset(0 0 100% 0 round 1.5rem);transition:clip-path .45s cubic-bezier(.22,1,.36,1),visibility 0s linear .45s}
.mega::before{content:"";position:absolute;left:0;right:0;top:-1.5rem;height:1.5rem}
.nav-item:hover > .mega,.nav-item:focus-within > .mega{visibility:visible;clip-path:inset(0 0 0 0 round 1.5rem);transition-delay:0s}
.mega-in{display:flex;flex-direction:column;gap:1.25rem;padding:1.5rem 1.75rem}
.mega .wrap{max-width:none}
.mm-grid{display:grid;gap:0.5rem}
.mm-grid > a{opacity:0;transform:translateY(0.625rem);transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1),background .15s}
.nav-item:hover .mm-grid > a,.nav-item:focus-within .mm-grid > a{opacity:1;transform:none;transition-delay:calc(80ms + var(--i,0) * 35ms),calc(80ms + var(--i,0) * 35ms),0s}
.mm-sols{grid-template-columns:repeat(4,minmax(0,1fr))}
.mm-secs{grid-template-columns:repeat(4,minmax(0,1fr));gap:0.25rem 0.5rem}
.mm-guides{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.mm-sol,.mm-sec{display:flex;align-items:flex-start;gap:0.875rem;padding:0.875rem;border-radius:1rem;text-decoration:none;color:var(--ink)}
.mm-sol{flex-direction:column;gap:0.75rem}
.mm-sol:hover,.mm-sec:hover,.mm-sol:focus-visible,.mm-sec:focus-visible{background:var(--card)}
.mm-shape{width:2.5rem;height:2.5rem;flex-shrink:0;border-radius:0.75rem;background:var(--accent);display:flex;align-items:center;justify-content:center;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.mm-sol:hover .mm-shape{transform:rotate(-8deg) scale(1.08)}
/* En el menú, cada solución lleva el mismo icono de línea que la navegación de la portada */
.mm-shape i{width:1.375rem;height:1.375rem;border:0;border-radius:0;transform:none;background:var(--ink);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.mm-shape i.d-auto{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h10M4 12h7M4 17h10'/%3E%3Cpath d='m16 9 4 3-4 3'/%3E%3C/svg%3E")}
.mm-shape i.d-agentes{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-7l-4 3v-3H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 10h.01M15 10h.01'/%3E%3C/svg%3E")}
.mm-shape i.d-datos{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='7' ry='3'/%3E%3Cpath d='M5 6v12c0 1.7 3.1 3 7 3s7-1.3 7-3V6M5 12c0 1.7 3.1 3 7 3s7-1.3 7-3'/%3E%3C/svg%3E")}
.mm-shape i.d-pred{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l5-5 4 3 8-8'/%3E%3Cpath d='M15 7h5v5'/%3E%3C/svg%3E")}
.mm-sol b,.mm-sec b{display:block;font-weight:600;font-size:0.9688rem;line-height:1.3}
.mm-sol small{display:block;margin-top:0.125rem;font-size:0.875rem;line-height:1.45;color:var(--text2)}
.mm-logos{display:flex;gap:0.375rem;margin-top:0.75rem}
.mm-logos img{box-sizing:border-box;width:1.875rem;height:1.875rem;padding:0.3125rem;border-radius:0.5rem;background:var(--card);border:1px solid var(--line);object-fit:contain;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.mm-sol:hover .mm-logos img{transform:translateY(-2px)}
.mm-sol:hover .mm-logos img:nth-child(2){transition-delay:40ms}
.mm-sol:hover .mm-logos img:nth-child(3){transition-delay:80ms}
.mm-sol:hover .mm-logos img:nth-child(4){transition-delay:120ms}
.mm-sec{align-items:center;padding:0.625rem 0.75rem}
.mm-ic{width:2.25rem;height:2.25rem;flex-shrink:0;border-radius:0.625rem;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.mm-sec:hover .mm-ic{transform:scale(1.1)}
.mm-sec small{font-size:0.8125rem;color:var(--muted)}
/* Sectores con el mismo aire que Servicios: icono en color (el degradado de la marca, columna a columna) y los programas típicos */
.mm-secs .mm-sec{align-items:flex-start}
.mm-secs .mm-ic{border-color:transparent;background:var(--c-auto)}
.mm-secs .mm-sec:nth-child(4n+2) .mm-ic{background:var(--c-agent)}
.mm-secs .mm-sec:nth-child(4n+3) .mm-ic{background:var(--c-data)}
.mm-secs .mm-sec:nth-child(4n) .mm-ic{background:var(--c-pred)}
.mm-sec:hover .mm-ic{transform:rotate(-8deg) scale(1.08)}
.mm-sec small{display:block;margin-top:0.0625rem;color:var(--text2)}
.mm-sec .mm-logos{gap:0.3125rem;margin-top:0.5rem}
.mm-sec .mm-logos img{width:1.625rem;height:1.625rem;padding:0.25rem;border-radius:0.4375rem}
.mm-sec:hover .mm-logos img{transform:translateY(-2px)}
.mm-sec:hover .mm-logos img:nth-child(2){transition-delay:40ms}
.mm-sec:hover .mm-logos img:nth-child(3){transition-delay:80ms}
.mm-guide{display:flex;flex-direction:column;gap:0.625rem;text-decoration:none;color:var(--ink)}
.mm-guide img{width:100%;aspect-ratio:16/8;height:auto;object-fit:cover;border-radius:0.75rem;background:var(--soft);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.mm-guide:hover img{transform:scale(1.03)}
.mm-guide small{display:block;font-family:var(--mono);font-size:0.75rem;color:var(--muted)}
.mm-guide b{display:block;margin-top:0.25rem;font-weight:600;font-size:0.9375rem;line-height:1.3}
.mm-foot{display:flex;flex-wrap:wrap;gap:0.5rem 2rem;padding-top:1rem;border-top:1px solid var(--line)}
.mm-more{display:inline-flex;align-items:center;gap:0.5rem;font-weight:600;font-size:0.875rem;color:var(--ink);text-decoration:none}
.mm-more svg{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.mm-more:hover svg{transform:translateX(0.25rem)}
html:not(.motion) .mega,html:not(.motion) .mm-grid > a,html:not(.motion) .nav-cta svg{transition:none}

@media (min-width:1081px){
  header.site .navlinks a.link{border-bottom:0;padding:0.5rem 0.75rem}
  /* subrayado que se dibuja de izquierda a derecha con el degradado; la página actual lo mantiene */
  header.site .navlinks a.link::after{content:"";position:absolute;left:0.75rem;right:0.75rem;bottom:0.25rem;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s cubic-bezier(.22,1,.36,1)}
  header.site .navlinks a.link:hover::after,header.site .nav-item:focus-within > a.link::after,header.site .navlinks a.link[aria-current="page"]::after{transform:scaleX(1)}
  header.site .navlinks a.link:has(.chev)::after{right:1.875rem}
  header.site .navlinks a.link[aria-current="page"]{color:#fff}
}
@media (max-width:1080px){
  header.site{padding-top:0.5rem}
  header.site > .nav{border-radius:1.75rem;padding-right:0.5rem;margin-left:12px;margin-right:12px}
  header.site .menu-btn{background:transparent;border-color:#3A414B;color:var(--ondark)}
  .mega,.chev{display:none}
  .nav-item{display:block}
  header.site .navlinks a.link{display:flex;width:100%;padding:0.875rem 0.25rem;border-bottom:1px solid #2A2F36}
  header.site .navlinks a.link[aria-current="page"]{color:var(--c-auto)}
  .nav-cta{margin:0.75rem 0 0.5rem;justify-content:center}
  .nav-cta svg{margin-right:0;opacity:1;transform:none}
}

/* El degradado de marca, también en la llamada a la acción */
.cta-band{background:var(--grad)}