/* ManAIge — sistema visual compartido
   Colores tomados del logo: oro de "AI" y cian de la red neuronal. */

:root {
  --tinta: #0C1520;
  --tinta-2: #142231;
  --tinta-3: #1E3044;
  --oro: #CB9A04;
  --oro-claro: #E4B83A;
  --oro-texto: #8A6800;
  --cian: #62D0F8;
  --papel: #F3F5F7;
  --blanco: #FFFFFF;
  --grafito: #1B2733;
  --bruma: #566676;
  --bruma-oscura: #9AAABB;
  --linea: #D8DEE5;
  --linea-oscura: #26394D;

  --fuente: "Urbanist", system-ui, sans-serif;
  --radio: 6px;
  --ancho: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1);

  interpolate-size: allow-keywords;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
[id] { scroll-margin-top: 72px; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--grafito);
  font-family: var(--fuente);
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--oro); color: var(--tinta); padding: 10px 16px; font-weight: 700;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Tipografía ---------- */
.display {
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  font-weight: 250;
  letter-spacing: -0.025em;
  line-height: 1.02;
}
.h2 {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-weight: 300;
  letter-spacing: -0.02em;
}
.h3 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; }
.lead { font-size: clamp(1.15rem, 1.6vw, 1.3rem); line-height: 1.55; max-width: 60ch; }
.muted { color: var(--bruma); }
.on-dark .muted { color: var(--bruma-oscura); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .85em 1.5em; border-radius: var(--radio);
  font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  border: 2px solid transparent;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn-oro { background: var(--oro); color: var(--tinta); }
.btn-oro:hover { background: var(--oro-claro); }
.btn-linea { border-color: currentColor; background: transparent; }
.btn-linea:hover { background: var(--blanco); color: var(--tinta); border-color: var(--blanco); }
.btn-tinta { background: var(--tinta); color: var(--blanco); }
.btn-tinta:hover { background: var(--tinta-3); }

.link {
  font-weight: 700; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
  padding-bottom: 2px;
  transition: background-size .25s var(--ease);
}
.link:hover { background-size: 0 2px; background-position: 100% 100%; }

/* ---------- Encabezado: solo menú; el logo vive debajo, en grande ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(12, 21, 32, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea-oscura);
  color: var(--blanco);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 64px; }
.nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 36px); min-width: 0; }
.nav a {
  text-decoration: none; color: var(--bruma-oscura); font-weight: 500; white-space: nowrap;
  padding: 6px 0; border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav a:hover { color: var(--blanco); }
.nav a[aria-current="page"] { color: var(--blanco); border-bottom-color: var(--oro); }
.nav-cta { padding: .55em 1.1em; white-space: nowrap; flex: none; }

@media (max-width: 760px) {
  /* En celular el menú se desliza horizontalmente: todas las opciones siguen a la vista */
  .site-header .wrap { padding-inline: 0; gap: 0; height: auto; flex-direction: column; align-items: stretch; }
  .nav {
    overflow-x: auto; scrollbar-width: none; gap: 22px;
    padding: 14px var(--gutter);
    -webkit-mask: linear-gradient(90deg, #000 85%, transparent);
    mask: linear-gradient(90deg, #000 85%, transparent);
  }
  .nav::-webkit-scrollbar { display: none; }
}

/* Logo grande del hero */
.hero-logo img { height: clamp(58px, 9vw, 104px); width: auto; }
.hero-logo { justify-self: start; margin-bottom: 6px; }

/* ---------- Secciones ---------- */
.section { padding-block: clamp(72px, 10vw, 128px); }
.on-dark { background: var(--tinta); color: var(--blanco); }
.on-white { background: var(--blanco); }
.section-head { display: grid; gap: 18px; margin-bottom: clamp(40px, 6vw, 64px); max-width: 720px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: min(88vh, 820px);
  display: flex; align-items: center;
  background: var(--tinta); color: var(--blanco);
}
.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.hero::after {
  /* Protege la lectura del titular sobre la red */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--tinta) 0%, rgba(12,21,32,.85) 38%, rgba(12,21,32,0) 72%);
}
.hero .wrap { position: relative; z-index: 1; padding-block: clamp(56px, 8vw, 88px); }
.hero-copy { max-width: 760px; display: grid; gap: 28px; }
.hero .lead { color: #C9D4E0; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 8px; }

.hero-line {
  display: block;
  animation: rise .9s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 140ms + 200ms);
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

@media (max-width: 720px) {
  .hero::after { background: linear-gradient(180deg, rgba(12,21,32,.35) 0%, rgba(12,21,32,.85) 65%); }
}

/* ---------- Selector de problemas ---------- */
.selector { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.problem-list { display: grid; gap: 4px; }
.problem {
  text-align: left; background: none; border: 0; cursor: pointer;
  padding: 18px 20px 18px 22px; border-radius: var(--radio);
  font-size: 1.15rem; font-weight: 500; line-height: 1.35; color: var(--bruma);
  border-left: 3px solid var(--linea);
  transition: color .2s, background-color .2s, border-color .2s;
}
.problem:hover { color: var(--grafito); background: var(--papel); }
.problem[aria-selected="true"] { color: var(--grafito); font-weight: 700; border-left-color: var(--oro); background: var(--papel); }

.panel {
  background: var(--tinta); color: var(--blanco);
  border-radius: 10px; padding: clamp(28px, 4vw, 44px);
  display: grid; gap: 20px;
}
.panel[hidden] { display: none; }
.panel .muted { color: var(--bruma-oscura); }
.panel .tag { color: var(--oro-claro); font-weight: 700; font-size: 1rem; }
.panel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: #C9D4E0; }
.panel li { padding-left: 22px; position: relative; }
.panel li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px;
  border: 2px solid var(--cian); border-radius: 50%;
}
.panel .viz { width: 100%; height: auto; max-height: 190px; }
.panel.is-entering { animation: panel-in .45s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Diagramas de cada panel: se dibujan al activarse */
.viz .draw { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
.panel.is-entering .viz .draw, .panel.is-drawn .viz .draw, .viz.is-live .draw, .svc-row:is(:hover, :focus-visible) .viz .draw, .post:is(:hover, :focus-within) .viz .draw, .slide.is-active .viz .draw { animation: draw 1.1s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.viz .grow { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); }
.panel.is-entering .viz .grow, .panel.is-drawn .viz .grow, .viz.is-live .grow, .svc-row:is(:hover, :focus-visible) .viz .grow, .post:is(:hover, :focus-within) .viz .grow, .slide.is-active .viz .grow { animation: grow .8s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes grow { to { transform: scaleY(1); } }
.viz .pop { opacity: 0; }
.panel.is-entering .viz .pop, .panel.is-drawn .viz .pop, .viz.is-live .pop, .svc-row:is(:hover, :focus-visible) .viz .pop, .post:is(:hover, :focus-within) .viz .pop, .slide.is-active .viz .pop { animation: pop .4s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes pop { to { opacity: 1; } }
.viz .travel { animation: travel 3.2s linear infinite; animation-delay: var(--d, 0s); opacity: 0; }
/* Documentos grises entran al robot y salen procesados en oro */
@keyframes travel {
  0% { transform: translateX(0); opacity: 0; fill: #9AAABB; }
  8% { opacity: 1; }
  40% { transform: translateX(118px); opacity: 1; fill: #9AAABB; }
  44% { opacity: 0; }
  56% { transform: translateX(170px); opacity: 0; fill: #CB9A04; }
  60% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateX(286px); opacity: 0; fill: #CB9A04; }
}

@media (max-width: 880px) {
  .selector { grid-template-columns: 1fr; }
  .problem-list { grid-auto-flow: column; grid-auto-columns: minmax(230px, 78%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .problem { scroll-snap-align: start; border-left: 0; border-top: 3px solid var(--linea); background: var(--papel); }
  .problem[aria-selected="true"] { border-top-color: var(--oro); }
}

/* ---------- Calculadora ---------- */
.calc { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: stretch; }
.calc-form { display: grid; gap: 30px; }
.field { display: grid; gap: 10px; }
.field-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.field label, .field .label { font-weight: 600; }
.field output, .field .value { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--oro-claro); white-space: nowrap; }
.field .hint { font-size: .95rem; color: var(--bruma-oscura); }

input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--oro) var(--p, 50%), var(--linea-oscura) var(--p, 50%));
}
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--linea-oscura); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--oro); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%;
  background: var(--blanco); border: 4px solid var(--oro);
}
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--blanco); border: 4px solid var(--oro); }

.cost-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.input-dark {
  width: 100%; padding: 12px 14px; border-radius: var(--radio);
  background: var(--tinta-2); border: 1px solid var(--linea-oscura); color: var(--blanco);
  font-variant-numeric: tabular-nums;
}
.input-dark:focus { border-color: var(--cian); outline: none; }

.calc-result {
  background: var(--tinta-2); border: 1px solid var(--linea-oscura); border-radius: 10px;
  padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; gap: 24px;
}
.big-number {
  font-size: clamp(2.6rem, 5.6vw, 4.4rem); font-weight: 250; letter-spacing: -0.03em; line-height: 1;
  color: var(--oro-claro); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-top: 1px solid var(--linea-oscura); padding-top: 22px; }
.result-grid strong { display: block; font-size: 1.7rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.calc-note { font-size: .95rem; color: var(--bruma-oscura); margin-top: auto; }

@media (max-width: 880px) { .calc { grid-template-columns: 1fr; } }

/* ---------- Pasos de la metodología ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; counter-reset: paso; position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 1px; background: var(--linea); }
.steps li { counter-increment: paso; position: relative; display: grid; gap: 10px; align-content: start; }
.steps li::before {
  content: counter(paso); width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700;
  background: var(--papel); border: 1px solid var(--grafito); position: relative;
}
.steps h3 { font-size: 1.15rem; font-weight: 700; }
.steps p { font-size: 1rem; color: var(--bruma); }

@media (max-width: 880px) {
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .steps::before { left: 22px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .steps li { grid-template-columns: 44px 1fr; column-gap: 18px; }
  .steps li::before { grid-row: span 2; }
}

/* ---------- Guía descargable ---------- */
.guide { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.guide-form { display: grid; gap: 10px; max-width: 520px; margin-top: 10px; }
.guide-form .row { display: flex; gap: 10px; flex-wrap: wrap; }
.guide-form input { flex: 1 1 240px; }
.cover {
  aspect-ratio: 3 / 4; width: min(100%, 300px); justify-self: center;
  background: var(--tinta); color: var(--blanco); border-radius: 4px 10px 10px 4px;
  padding: 30px 26px; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: -10px 0 0 -4px var(--tinta-3), 0 30px 60px -20px rgba(12, 21, 32, .55);
  position: relative; overflow: hidden;
}
.cover svg { position: absolute; right: -20px; top: 40px; width: 90%; opacity: .9; }
.cover .cover-title { position: relative; font-size: 1.9rem; font-weight: 250; line-height: 1.05; letter-spacing: -.02em; }
.cover .cover-title b { font-weight: 800; display: block; color: var(--oro-claro); }
.cover .cover-foot { position: relative; font-size: .9rem; color: var(--bruma-oscura); }
@media (max-width: 880px) { .guide { grid-template-columns: 1fr; } .cover { order: -1; width: 200px; } }

/* ---------- Formularios claros ---------- */
.input {
  width: 100%; padding: 13px 14px; border-radius: var(--radio);
  background: var(--blanco); border: 1px solid #B9C3CE; color: var(--grafito);
}
.input:focus { border-color: var(--tinta); outline: 2px solid var(--cian); outline-offset: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid .full { grid-column: 1 / -1; }
.form-field { display: grid; gap: 6px; }
.form-field label { font-weight: 600; font-size: 1rem; }
.form-field .opt { font-weight: 400; color: var(--bruma); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.chip {
  border: 1px solid #B9C3CE; background: var(--blanco); border-radius: 999px;
  padding: 8px 16px; font-size: .98rem; font-weight: 600; cursor: pointer; color: var(--grafito);
  transition: background-color .2s, color .2s, border-color .2s;
}
.chip:hover { border-color: var(--grafito); }
.chip[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }

.faq-list { border-top: 1px solid var(--linea); }
.faq { border-bottom: 1px solid var(--linea); }
.faq[hidden] { display: none; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center;
  padding: 22px 0; font-size: 1.2rem; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { flex: none; width: 22px; height: 22px; position: relative; }
.faq summary .plus::before, .faq summary .plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px;
  background: var(--grafito); transition: transform .3s var(--ease);
}
.faq summary .plus::after { transform: rotate(90deg); }
.faq[open] summary .plus::after { transform: rotate(0deg); }
.faq summary:hover { color: var(--oro-texto); }
.faq .answer { padding: 0 44px 24px 0; color: var(--bruma); max-width: 68ch; }
.faq::details-content { block-size: 0; overflow: hidden; transition: block-size .35s var(--ease), content-visibility .35s allow-discrete; }
.faq[open]::details-content { block-size: auto; }
@media (max-width: 880px) { .faq-layout { grid-template-columns: 1fr; } }

/* ---------- Contacto ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 80px); }
.contact-info { display: grid; gap: 26px; align-content: start; }
.contact-info dl { margin: 0; display: grid; gap: 20px; }
.contact-info dt { font-weight: 700; }
.contact-info dd { margin: 2px 0 0; color: var(--bruma); }
.contact-info dd a { color: var(--grafito); }
.form-card { background: var(--blanco); border: 1px solid var(--linea); border-radius: 10px; padding: clamp(24px, 4vw, 44px); }
.form-status { margin-top: 16px; font-weight: 600; }
.form-status[data-state="ok"] { color: #1B6B3A; }
.form-status[data-state="error"] { color: #A12C1B; }
@media (max-width: 880px) { .contact { grid-template-columns: 1fr; } }

/* ---------- Pie ---------- */
.site-footer { background: var(--tinta); color: var(--bruma-oscura); padding-block: 64px 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.site-footer img { height: 40px; width: auto; margin-bottom: 18px; }
.site-footer h2 { font-size: 1rem; color: var(--blanco); margin-bottom: 14px; font-weight: 700; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--blanco); text-decoration: underline; }
.footer-base { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--linea-oscura); font-size: .95rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .viz .travel { display: none; }
}

/* ---------- Logo interactivo ---------- */
.logo-live { position: relative; display: inline-block; line-height: 0; }
.logo-live img { position: relative; }
.logo-net, .logo-shine { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.logo-shine {
  /* Barrido cian recortado con la forma de las letras */
  -webkit-mask: url(logo.webp) center / 100% 100% no-repeat;
  mask: url(logo.webp) center / 100% 100% no-repeat;
  background: linear-gradient(100deg, transparent 42%, rgba(98,208,248,.95) 50%, transparent 58%) no-repeat;
  background-size: 260% 100%;
  background-position: 130% 0;
  opacity: 0;
}
.logo-net line { stroke: #E4B83A; stroke-width: 1.4px; vector-effect: non-scaling-stroke; stroke-dasharray: 60; stroke-dashoffset: 60; opacity: 0; }
.logo-net circle { fill: #E4B83A; opacity: 0; transform-box: fill-box; transform-origin: center; }

.logo-live.is-playing .logo-shine { animation: logo-scan 1.1s var(--ease) forwards; }
.logo-live.is-playing .logo-net line { animation: logo-line 1.4s var(--ease) forwards; animation-delay: calc(.35s + var(--i) * 60ms); }
.logo-live.is-playing .logo-net circle { animation: logo-node 1.4s var(--ease) forwards; animation-delay: calc(.3s + var(--i) * 70ms); }

@keyframes logo-scan {
  0% { background-position: 130% 0; opacity: 1; }
  100% { background-position: -30% 0; opacity: 1; }
}
@keyframes logo-line {
  0% { opacity: 1; stroke-dashoffset: 60; }
  45% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes logo-node {
  0% { opacity: 0; transform: scale(.2); }
  35% { opacity: 1; transform: scale(1.4); }
  60% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

.site-footer .logo-live img { height: 64px; margin-bottom: 0; }
.site-footer .logo-live { margin-bottom: 18px; }

/* ---------- Textos originales del sitio ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tagline { font-size: clamp(1.9rem, 4.6vw, 3.9rem); color: var(--oro-claro); }
.kicker { font-weight: 700; color: var(--oro-texto); }
.hero-logo { margin: 0; }

/* Pestañas: título + frase original de cada pilar */
.problem strong { display: block; font-size: 1.25rem; font-weight: 700; color: var(--grafito); }
.problem span { display: block; margin-top: 4px; font-size: 1.02rem; font-weight: 400; color: var(--bruma); }
.problem[aria-selected="true"] { font-weight: 400; }
.section:not(.on-white) .problem:hover,
.section:not(.on-white) .problem[aria-selected="true"] { background: var(--blanco); }
@media (max-width: 880px) {
  .section:not(.on-white) .problem { background: var(--blanco); }
}

/* "Contáctenos" vive dentro del menú: a la derecha en escritorio, al final de la fila en celular */
.site-header .nav { flex: 1; }
.nav .nav-cta { margin-left: auto; color: var(--tinta); font-weight: 700; border-bottom: 0; padding: .55em 1.1em; }
.nav .nav-cta:hover { color: var(--tinta); }
.nav .nav-cta[aria-current="page"] { color: var(--tinta); border-bottom: 0; }  /* en Contacto: letra oscura sobre el dorado */
@media (max-width: 760px) {
  .nav .nav-cta { display: inline-flex; margin-left: 0; padding: .4em .9em; }
}

/* ======================================================
   Fase 2 — Páginas internas y servicios
   ====================================================== */

/* Cabecera de páginas internas: logo grande debajo del menú */
.page-hero { background: var(--tinta); color: var(--blanco); padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 96px); overflow: hidden; }
.page-hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.page-hero-copy { display: grid; gap: 20px; justify-items: start; }
.page-logo img { height: clamp(46px, 6vw, 76px); width: auto; }
.page-logo { margin-bottom: 18px; }
.page-hero .kicker { color: var(--oro-claro); }
.page-title { font-size: clamp(2.4rem, 5.4vw, 4.4rem); font-weight: 250; letter-spacing: -0.025em; line-height: 1.04; }
.page-hero .lead { color: #C9D4E0; }
.back {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  color: var(--bruma-oscura); font-weight: 600; font-size: 1rem;
}
.back svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.back:hover { color: var(--blanco); }
.back:hover svg { transform: translateX(-4px); }
.hero-viz { width: 100%; height: auto; }
.page-hero .hero-line { animation-delay: calc(var(--i, 0) * 110ms + 100ms); }
@media (max-width: 880px) {
  .page-hero .wrap { grid-template-columns: 1fr; }
  .hero-viz { max-width: 420px; }
}

/* Índice de servicios: cada fila se invierte a oscuro y dibuja su diagrama */
.svc-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.svc-row {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 240px; gap: clamp(16px, 3vw, 40px); align-items: center;
  padding: clamp(24px, 3.5vw, 36px) clamp(12px, 2vw, 28px);
  border-bottom: 1px solid var(--linea); text-decoration: none; color: var(--grafito);
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.svc-num { font-size: 1rem; font-weight: 700; color: var(--oro-texto); font-variant-numeric: tabular-nums; transition: color .35s; }
.svc-name { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 300; letter-spacing: -0.015em; line-height: 1.1; }
.svc-desc { margin-top: 10px; color: var(--bruma); max-width: 56ch; transition: color .35s; }
.svc-more { margin-top: 14px; display: inline-block; font-weight: 700; }
.svc-row .viz { opacity: 0; transform: translateX(12px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.svc-row:is(:hover, :focus-visible) { background: var(--tinta); color: var(--blanco); }
.svc-row:is(:hover, :focus-visible) .svc-num { color: var(--oro-claro); }
.svc-row:is(:hover, :focus-visible) .svc-desc { color: var(--bruma-oscura); }
.svc-row:is(:hover, :focus-visible) .svc-more { color: var(--oro-claro); }
.svc-row:is(:hover, :focus-visible) .viz { opacity: 1; transform: none; }
.svc-row:focus-visible { outline-offset: -3px; }
@media (max-width: 880px) {
  .svc-row { grid-template-columns: 40px minmax(0, 1fr); }
  .svc-row .viz { display: none; }
}

/* Banda de comunidad */
.band-oro { background: var(--oro); color: var(--tinta); padding-block: clamp(48px, 7vw, 72px); }
.band-oro .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.band-oro h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 400; letter-spacing: -0.015em; }
.band-oro .row { display: flex; gap: 10px; flex-wrap: wrap; }
.band-oro .input { flex: 1 1 240px; border-color: transparent; }
.band-oro .form-status[data-state="ok"] { color: var(--tinta); }
@media (max-width: 760px) { .band-oro .wrap { grid-template-columns: 1fr; } }

/* Detalle de servicio */
.argument { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.argument p { color: var(--bruma); font-size: 1.15rem; max-width: 62ch; }
.argument h2 { margin-bottom: 22px; }
.pull-quote {
  margin: 0; padding-left: 28px; border-left: 3px solid var(--oro);
  font-size: clamp(1.35rem, 2.4vw, 1.8rem); font-weight: 300; line-height: 1.35; letter-spacing: -0.01em; color: var(--grafito);
}
@media (max-width: 880px) { .argument { grid-template-columns: 1fr; } }

.detail-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.detail-cols h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 24px; }
.benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.benefits li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; color: var(--bruma); }
.benefits li strong { color: var(--grafito); }
.benefits svg { width: 26px; height: 26px; color: var(--oro); margin-top: 1px; }
@media (max-width: 880px) { .detail-cols { grid-template-columns: 1fr; } }

/* Portafolio seleccionable */
.pick-hint { color: var(--bruma); margin: -12px 0 18px; font-size: 1rem; }
.pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pick {
  width: 100%; display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; text-align: left;
  padding: 14px 16px; border-radius: var(--radio); cursor: pointer;
  background: var(--blanco); border: 1px solid var(--linea); color: var(--grafito); line-height: 1.45;
  transition: border-color .2s, background-color .2s;
}
.pick:hover { border-color: #9FB0C2; }
.pick .box {
  width: 22px; height: 22px; border-radius: 5px; border: 2px solid #9FB0C2; margin-top: 1px;
  display: grid; place-items: center; transition: background-color .2s, border-color .2s;
}
.pick .box svg { width: 14px; height: 14px; color: var(--tinta); stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .25s var(--ease); }
.pick[aria-pressed="true"] { border-color: var(--oro); background: #FBF6E6; }
.pick[aria-pressed="true"] .box { background: var(--oro); border-color: var(--oro); }
.pick[aria-pressed="true"] .box svg { stroke-dashoffset: 0; }

/* Cierre del servicio */
.final-cta { text-align: center; display: grid; gap: 24px; justify-items: center; }
.final-cta .btn { font-size: 1.1rem; padding: 1em 2em; }
.pick-summary { color: var(--bruma); max-width: 60ch; }
.pick-summary strong { color: var(--grafito); }
.cover .cover-title small { display: block; font-size: 1rem; font-weight: 500; color: var(--bruma-oscura); margin-top: 8px; letter-spacing: 0; }
.svc-tag { display: block; margin-top: 6px; font-size: .78rem; letter-spacing: .04em; color: var(--bruma); font-weight: 600; transition: color .35s; }
.svc-row:is(:hover, :focus-visible) .svc-tag { color: var(--bruma-oscura); }
.svc-row { grid-template-columns: 120px minmax(0, 1fr) 240px; }
@media (max-width: 880px) { .svc-row { grid-template-columns: 1fr; gap: 8px; } }
.viz-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.viz-tags span { border: 1px solid var(--linea-oscura); border-radius: 999px; padding: 5px 14px; font-size: .95rem; color: var(--bruma-oscura); }
.viz-tags span:first-child { border-color: var(--oro); color: var(--oro-claro); }

/* ======================================================
   Fase 3 — Metodología y Nosotros
   ====================================================== */

/* Metodología: anillo del ciclo fijo + etapas */
.method { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.cycle { position: sticky; top: 104px; }
.cycle-ring { position: relative; width: min(100%, 380px); aspect-ratio: 1; }
.cycle-ring svg { width: 100%; height: 100%; overflow: visible; }
.cycle-track { stroke: var(--linea); }
.cycle-progress { stroke: var(--oro); transition: stroke-dashoffset .7s var(--ease); }
.cycle-node circle { fill: var(--blanco); stroke: #9FB0C2; stroke-width: 2; transition: fill .35s, stroke .35s, r .35s; }
.cycle-node text { font: 700 15px var(--fuente); fill: var(--bruma); text-anchor: middle; dominant-baseline: central; pointer-events: none; transition: fill .35s; }
.cycle-node.is-done circle { fill: var(--oro); stroke: var(--oro); }
.cycle-node.is-done text { fill: var(--tinta); }
.cycle-node.is-active circle { fill: var(--tinta); stroke: var(--oro); stroke-width: 3; }
.cycle-node.is-active text { fill: var(--blanco); }
.cycle-node:hover circle { stroke: var(--grafito); }
.cycle-node:focus-visible { outline: none; }
.cycle-node:focus-visible circle { stroke: var(--cian); stroke-width: 3; }
.cycle-label {
  position: absolute; inset: 28%; display: grid; place-content: center; text-align: center; gap: 6px;
}
.cycle-label span { font-size: .95rem; font-weight: 600; color: var(--oro-texto); }
.cycle-label strong { font-size: clamp(1.1rem, 1.8vw, 1.45rem); font-weight: 600; line-height: 1.2; color: var(--grafito); }
.cycle-label strong.is-swapping { animation: label-in .45s var(--ease); }
@keyframes label-in { from { opacity: 0; transform: translateY(6px); } }

.stages { list-style: none; margin: 0; padding: 0; }
.stage { padding-block: clamp(36px, 5vw, 56px); border-top: 1px solid var(--linea); scroll-margin-top: 96px; }
.stage:first-child { border-top: 0; padding-top: 0; }
.stage-num { font-weight: 700; color: var(--oro-texto); font-variant-numeric: tabular-nums; }
.stage h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 300; letter-spacing: -0.015em; margin: 10px 0 14px; color: var(--bruma); transition: color .35s; }
.stage.is-active h2 { color: var(--grafito); }
.stage .sub { font-weight: 600; color: var(--grafito); margin-bottom: 16px; }
.stage ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--bruma); }
.stage li { padding-left: 22px; position: relative; }
.stage li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border: 2px solid var(--oro); border-radius: 50%; }
@media (max-width: 880px) {
  .method { grid-template-columns: 1fr; }
  .cycle { display: none; }
  .stages { border-left: 2px solid var(--linea); padding-left: 22px; }
  .stage { position: relative; border-top: 0; padding-block: 0 40px; }
  .stage::before {
    content: ""; position: absolute; left: -31px; top: 2px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--blanco); border: 2px solid #9FB0C2; transition: background-color .35s, border-color .35s;
  }
  .stage.is-active::before, .stage.is-done::before { background: var(--oro); border-color: var(--oro); }
}

.cta-block { text-align: center; display: grid; gap: 20px; justify-items: center; }
.cta-block .lead { margin-inline: auto; }

/* Nosotros: propósito, misión, visión */
.pmv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.pmv > div { border-top: 3px solid var(--oro); padding-top: 22px; display: grid; gap: 14px; align-content: start; }
.pmv h2 { font-size: 1.35rem; font-weight: 700; }
.pmv p { color: var(--bruma); font-size: 1.1rem; }
@media (max-width: 880px) { .pmv { grid-template-columns: 1fr; } }

.intro-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); margin-bottom: clamp(40px, 6vw, 64px); }
.intro-cols p { color: var(--bruma); font-size: 1.1rem; }
.intro-cols p + p { margin-top: 14px; }
@media (max-width: 880px) { .intro-cols { grid-template-columns: 1fr; } }
.panel .constellation { width: 150px; height: auto; }
.panel .constellation .c-node { fill: var(--linea-oscura); transition: fill .3s; }
.panel .constellation .c-node.is-on { fill: var(--oro); }
.panel .constellation line { stroke: var(--linea-oscura); stroke-width: 1.5; }

/* Fundador */
.founder { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; max-width: 820px; }
.founder-photo { width: clamp(140px, 18vw, 200px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--blanco), 0 0 0 6px var(--oro); }
.founder h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 300; letter-spacing: -0.015em; }
.founder .role { color: var(--oro-texto); font-weight: 700; margin: 6px 0 20px; }
@media (max-width: 640px) { .founder { grid-template-columns: 1fr; justify-items: start; } }

dialog.profile {
  width: min(760px, calc(100% - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 12px;
  background: var(--blanco); color: var(--grafito); box-shadow: 0 30px 80px -20px rgba(12, 21, 32, .6);
}
dialog.profile::backdrop { background: rgba(12, 21, 32, .78); backdrop-filter: blur(4px); }
dialog.profile[open] { animation: dialog-in .35s var(--ease); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.profile-inner { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 32px; padding: clamp(24px, 4vw, 44px); }
.profile-side { text-align: center; display: grid; gap: 6px; justify-items: center; align-content: start; }
.profile-side img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--oro); margin-bottom: 10px; }
.profile-side strong { font-size: 1.1rem; }
.profile-side span { color: var(--oro-texto); font-weight: 700; font-size: .95rem; }
.profile-body h2 { font-size: 1.6rem; font-weight: 700; margin-bottom: 14px; }
.profile-body p { color: var(--bruma); margin-bottom: 14px; }
.profile-body p:first-of-type { color: var(--grafito); font-weight: 600; }
.profile-close {
  position: sticky; top: 0; float: right; margin: 12px 12px 0 0; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: var(--papel); cursor: pointer; display: grid; place-items: center; z-index: 1;
}
.profile-close:hover { background: var(--linea); }
.profile-close svg { width: 22px; height: 22px; }
@media (max-width: 640px) { .profile-inner { grid-template-columns: 1fr; } }

/* ======================================================
   Fase 4 — Perspectivas, artículos y contacto
   ====================================================== */

/* Perspectivas: artículo destacado + dos secundarios */
.posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.post { display: grid; grid-template-rows: auto 1fr; border-radius: 10px; overflow: hidden; background: var(--blanco); border: 1px solid var(--linea); text-decoration: none; color: var(--grafito); transition: border-color .3s, transform .3s var(--ease); }
.post:first-child { grid-column: 1 / -1; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: none; }
.post:hover { border-color: var(--grafito); }
.post-cover { background: var(--tinta); display: grid; place-items: center; padding: clamp(24px, 4vw, 44px); min-height: 220px; }
.post-cover .viz { width: 100%; max-width: 420px; }
.post-body { padding: clamp(22px, 3vw, 36px); display: grid; gap: 10px; align-content: start; }
.post-meta { font-size: .95rem; color: var(--oro-texto); font-weight: 700; }
.post-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 300; letter-spacing: -0.015em; line-height: 1.15; }
.post-desc { color: var(--bruma); }
.post-more { margin-top: 8px; font-weight: 700; }
.post:hover .post-more { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 880px) {
  .posts { grid-template-columns: 1fr; }
  .post:first-child { grid-template-columns: 1fr; }
}

/* Artículo */
.reading-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 150; background: transparent; pointer-events: none; }
.reading-bar span { display: block; height: 100%; width: 100%; background: var(--oro); transform-origin: left; transform: scaleX(0); }
.article-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--bruma-oscura); }
.article-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.toc { position: sticky; top: 104px; font-size: .98rem; }
.toc p { font-weight: 700; margin-bottom: 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--linea); }
.toc a { display: block; padding: 7px 0 7px 16px; margin-left: -2px; border-left: 2px solid transparent; color: var(--bruma); text-decoration: none; line-height: 1.35; transition: color .2s, border-color .2s; }
.toc a:hover { color: var(--grafito); }
.toc a.is-active { color: var(--grafito); font-weight: 600; border-left-color: var(--oro); }
.article { max-width: 70ch; font-size: 1.15rem; line-height: 1.72; }
.article p { margin-bottom: 1.2em; color: #33414F; }
.article h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); font-weight: 400; letter-spacing: -0.012em; margin: 2.2em 0 .7em; scroll-margin-top: 96px; }
.article .article-lead { font-size: 1.3rem; line-height: 1.6; color: var(--grafito); padding-left: 24px; border-left: 3px solid var(--oro); margin-bottom: 1.6em; }
.article .article-ref { font-size: .95rem; color: var(--bruma); margin-top: -.4em; }
.article strong { color: var(--grafito); }
.article-keys { list-style: none; margin: 0 0 1.4em; padding: 0; display: grid; gap: 14px; }
.article-keys li { padding: 16px 18px 16px 22px; border-left: 3px solid var(--oro); background: var(--blanco); border-radius: 0 var(--radio) var(--radio) 0; color: #33414F; }
.table-wrap { overflow-x: auto; margin: 1.4em 0; border: 1px solid var(--linea); border-radius: 10px; background: var(--blanco); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 520px; }
.table-wrap th, .table-wrap td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.table-wrap thead th { background: var(--tinta); color: var(--blanco); font-weight: 700; }
.table-wrap thead th:nth-child(2) { color: var(--cian); }
.table-wrap thead th:nth-child(3) { color: var(--oro-claro); }
.table-wrap tbody td:first-child { font-weight: 700; color: var(--grafito); }
.table-wrap tbody tr { transition: background-color .2s; }
.table-wrap tbody tr:hover { background: #FBF6E6; }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.article-conclusion { background: var(--tinta); color: var(--blanco); border-radius: 10px; padding: clamp(24px, 4vw, 36px); margin: 2.4em 0; }
.article-conclusion h2 { margin: 0 0 .5em; color: var(--oro-claro); }
.article-conclusion p { color: #C9D4E0; margin: 0; }
.article-refs { margin-top: 3em; padding-top: 1.6em; border-top: 1px solid var(--linea); font-size: .98rem; }
.article-refs h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 1em; }
.article-refs ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--bruma); }
@media (max-width: 980px) {
  .article-layout { grid-template-columns: 1fr; }
  .toc { display: none; }
}

/* Contacto */
.contact-page { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.info-card { background: var(--tinta); color: var(--blanco); border-radius: 12px; padding: clamp(26px, 4vw, 44px); display: grid; gap: 26px; }
.info-card h2 { font-size: 1.6rem; font-weight: 400; }
.info-item { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.info-item .ico { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea-oscura); display: grid; place-items: center; color: var(--oro-claro); }
.info-item .ico svg { width: 20px; height: 20px; }
.info-item h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.info-item a, .info-item p { color: #C9D4E0; display: block; }
.info-item a:hover { color: var(--blanco); }
.contact-page h2.form-title { font-size: 1.6rem; font-weight: 400; margin-bottom: 20px; }
.prefill-note { display: none; margin-bottom: 18px; padding: 12px 16px; border-radius: var(--radio); background: #FBF6E6; border-left: 3px solid var(--oro); font-size: 1rem; }
.prefill-note.is-on { display: block; }
.success { text-align: center; display: grid; gap: 12px; justify-items: center; padding: clamp(32px, 5vw, 56px); background: var(--blanco); border: 1px solid var(--linea); border-radius: 10px; }
.success[hidden] { display: none; }
.success svg { width: 64px; height: 64px; }
.success circle { stroke: var(--oro); stroke-dasharray: 190; stroke-dashoffset: 190; animation: draw .7s var(--ease) forwards; }
.success path { stroke: var(--tinta); stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .45s var(--ease) .55s forwards; }
.success h3 { font-size: 1.7rem; font-weight: 400; }
.success p { color: var(--bruma); max-width: 44ch; }
@media (max-width: 880px) { .contact-page { grid-template-columns: 1fr; } }

/* Autorización de tratamiento de datos (Ley 1581 de 2012) */
.consent { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: .9rem; line-height: 1.5; color: var(--bruma); max-width: 68ch; }
.consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--oro); cursor: pointer; }
.consent label { cursor: pointer; }
.consent a { color: inherit; }
.band-oro .consent { color: var(--tinta); margin-top: 12px; }
.band-oro .consent input { accent-color: var(--tinta); }
.consent input:user-invalid + label { color: #A12C1B; }

/* Botón flotante de WhatsApp */
.wa-float {
  position: fixed; right: clamp(16px, 2.5vw, 28px); bottom: clamp(16px, 2.5vw, 28px); z-index: 90;
  display: inline-flex; align-items: center; gap: 0; height: 58px; padding: 0 15px;
  border-radius: 999px; background: #25D366; color: #fff; text-decoration: none; font-weight: 700;
  box-shadow: 0 10px 28px -8px rgba(12, 21, 32, .5);
  transition: gap .3s var(--ease), padding .3s var(--ease), background-color .2s;
}
.wa-float svg { width: 28px; height: 28px; flex: none; }
.wa-float span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .3s var(--ease); }
.wa-float:hover, .wa-float:focus-visible { gap: 10px; padding: 0 20px 0 16px; background: #1EBE5A; }
.wa-float:hover span, .wa-float:focus-visible span { max-width: 120px; }
.wa-float:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.wa-float.is-nudging { animation: wa-nudge 1.4s var(--ease) 1; }
@keyframes wa-nudge {
  0%, 100% { box-shadow: 0 10px 28px -8px rgba(12, 21, 32, .5), 0 0 0 0 rgba(37, 211, 102, .55); }
  50% { box-shadow: 0 10px 28px -8px rgba(12, 21, 32, .5), 0 0 0 16px rgba(37, 211, 102, 0); }
}
@media print { .wa-float { display: none; } }

/* Referencias enlazadas en los artículos */
.article-refs a { color: var(--grafito); text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: 3px; }
.article-refs a:hover { color: var(--oro-texto); }
.article-refs a::after { content: " \2197"; font-size: .85em; color: var(--oro-texto); }

/* ======================================================
   Presentación ejecutiva (Nosotros)
   Todo se mide en "cqw" (1% del ancho del recuadro): se ve igual
   en la página y en pantalla completa o proyector.
   ====================================================== */
.deck-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.deck { position: relative; outline: none; }
.deck-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--tinta); color: var(--blanco); border-radius: 12px;
  container-type: inline-size; box-shadow: 0 30px 70px -30px rgba(12, 21, 32, .55);
}
.deck:focus-visible .deck-stage { outline: 3px solid var(--cian); outline-offset: 4px; }

/* Pantalla completa: la diapositiva conserva 16:9 y se centra */
.deck:fullscreen, .deck.is-max { background: var(--tinta); display: grid; place-items: center; align-content: center; padding: 0; }
.deck.is-max { position: fixed; inset: 0; z-index: 1000; }
.deck:fullscreen .deck-stage, .deck.is-max .deck-stage { width: min(100vw, 177.78vh); border-radius: 0; box-shadow: none; }
.deck:fullscreen .deck-controls, .deck.is-max .deck-controls {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); margin: 0;
  background: rgba(20, 34, 49, .88); border: 1px solid var(--linea-oscura); border-radius: 999px; padding: 6px 10px;
  opacity: 0; transition: opacity .3s;
}
.deck:fullscreen:hover .deck-controls, .deck.is-max:hover .deck-controls,
.deck:fullscreen:focus-within .deck-controls, .deck.is-max:focus-within .deck-controls { opacity: 1; }
.deck:fullscreen .deck-controls button, .deck.is-max .deck-controls button { color: var(--blanco); border-color: var(--linea-oscura); }
.deck:fullscreen .deck-count, .deck.is-max .deck-count { color: var(--bruma-oscura); }

.deck-progress { position: absolute; top: 0; left: 0; right: 0; height: .35cqw; min-height: 3px; background: rgba(255,255,255,.06); z-index: 3; }
.deck-progress span { display: block; height: 100%; width: 100%; background: var(--oro); transform-origin: left; transform: scaleX(0); transition: transform .5s var(--ease); }

.deck-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.deck-controls button {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; min-width: 42px; padding: 0 12px; justify-content: center;
  border-radius: 999px; border: 1px solid #B9C3CE; background: transparent; color: var(--grafito); cursor: pointer; font-weight: 600; font-size: .95rem;
}
.deck-controls button:hover { border-color: var(--oro); }
.deck-controls svg { width: 20px; height: 20px; }
.deck-count { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; color: var(--bruma); font-weight: 600; }

/* Diapositivas */
.slide {
  position: absolute; inset: 0; padding: 6.2cqw 7cqw; display: grid; align-content: center; gap: 2.2cqw;
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s;
}
.slide.is-active { opacity: 1; visibility: visible; transition: opacity .5s var(--ease); z-index: 1; }
.slide .r { opacity: 0; }
.slide.is-active .r { animation: deck-in .75s var(--ease) both; animation-delay: calc(var(--d, 0) * 120ms + 150ms); }
@keyframes deck-in { from { opacity: 0; transform: translateY(1.4cqw); } to { opacity: 1; transform: none; } }

.s-kicker { font-size: 1.3cqw; font-weight: 700; color: var(--oro-claro); letter-spacing: .02em; }
.s-title { font-size: 4.3cqw; font-weight: 250; line-height: 1.06; letter-spacing: -0.02em; max-width: 72cqw; }
.s-text { font-size: 1.6cqw; line-height: 1.5; color: #C9D4E0; max-width: 62cqw; }
.s-small { font-size: 1.25cqw; line-height: 1.5; color: var(--bruma-oscura); }
.s-num { position: absolute; right: 3.2cqw; bottom: 2.6cqw; font-size: 1cqw; color: var(--bruma-oscura); font-variant-numeric: tabular-nums; }
.s-brand { position: absolute; left: 7cqw; bottom: 2.4cqw; width: 8.5cqw; height: auto; opacity: .55; }
.s-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* 1. Portada */
.s-cover { gap: 2.4cqw; }
.s-cover .s-logo { justify-self: start; }
.s-cover .s-logo img { width: 44cqw; height: auto; }
.s-cover .s-tag { font-size: 3.6cqw; font-weight: 250; color: var(--oro-claro); letter-spacing: -0.015em; }

/* Columnas */
.s-cols { display: grid; gap: 3cqw; }
.s-cols.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s-col { border-top: .25cqw solid var(--oro); padding-top: 1.6cqw; display: grid; gap: 1cqw; align-content: start; }
.s-col h3 { font-size: 1.75cqw; font-weight: 700; }
.s-col p { font-size: 1.35cqw; line-height: 1.5; color: #C9D4E0; }
.s-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5cqw; align-items: center; }

/* 4. Diferencial */
.s-venn { width: 100%; height: auto; overflow: visible; }
.s-venn text { font-family: var(--fuente); }
.s-quote { font-size: 1.75cqw; font-weight: 300; line-height: 1.45; border-left: .3cqw solid var(--oro); padding-left: 2cqw; color: var(--blanco); }

/* 5. Portafolio */
.s-services { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5cqw; }
.s-service { background: var(--tinta-2); border: 1px solid var(--linea-oscura); border-radius: .8cqw; padding: 1.5cqw 1.3cqw; display: grid; gap: .9cqw; align-content: start; }
.s-service .viz { width: 100%; height: auto; }
.s-service span { font-size: 1cqw; font-weight: 700; color: var(--oro-claro); }
.s-service h3 { font-size: 1.45cqw; font-weight: 700; line-height: 1.2; }
.s-service p { font-size: 1.08cqw; line-height: 1.45; color: var(--bruma-oscura); }

/* 6. Metodología */
.s-ring { width: 100%; max-width: 30cqw; height: auto; justify-self: center; overflow: visible; }
.s-ring .ring-progress { stroke-dasharray: var(--c); stroke-dashoffset: var(--c); }
.slide.is-active .s-ring .ring-progress { animation: ring-fill 2.4s var(--ease) .3s forwards; }
@keyframes ring-fill { to { stroke-dashoffset: 0; } }
.s-ring text { font-family: var(--fuente); font-weight: 800; }
.s-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3cqw; counter-reset: s; }
.s-steps li { counter-increment: s; display: grid; grid-template-columns: 3.2cqw 1fr; gap: 1.2cqw; align-items: start; }
.s-steps li::before { content: counter(s); width: 3.2cqw; height: 3.2cqw; border-radius: 50%; display: grid; place-items: center; background: var(--oro); color: var(--tinta); font-weight: 800; font-size: 1.3cqw; }
.s-steps strong { display: block; font-size: 1.5cqw; }
.s-steps span { display: block; font-size: 1.12cqw; line-height: 1.4; color: var(--bruma-oscura); margin-top: .2cqw; }

/* 7. Principios */
.s-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4cqw 3cqw; }
.s-principle { display: grid; grid-template-columns: 1.4cqw 1fr; gap: 1.2cqw; }
.s-principle::before { content: ""; width: 1.2cqw; height: 1.2cqw; margin-top: .5cqw; border-radius: 50%; border: .22cqw solid var(--cian); }
.s-principle:nth-child(3n+2)::before { border-color: var(--oro); background: var(--oro); }
.s-principle h3 { font-size: 1.6cqw; font-weight: 700; }
.s-principle p { font-size: 1.2cqw; line-height: 1.45; color: var(--bruma-oscura); margin-top: .4cqw; }

/* 8. Cómo trabajamos */
.s-model li { font-size: 1.3cqw; line-height: 1.45; color: #C9D4E0; }
.s-model ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .6cqw; }
.s-model li::before { content: ""; display: inline-block; width: .8cqw; height: .8cqw; border-radius: 50%; background: var(--oro); margin-right: .8cqw; vertical-align: .15cqw; }

/* 9. Resultados */
.s-big { white-space: nowrap; font-size: 5.6cqw; font-weight: 250; line-height: 1; color: var(--oro-claro); letter-spacing: -0.03em; }
.s-kpis { display: flex; gap: 1.2cqw; flex-wrap: wrap; }
.s-kpis span { border: 1px solid var(--linea-oscura); border-radius: 999px; padding: .7cqw 1.5cqw; font-size: 1.3cqw; }
.s-kpis span:first-child { border-color: var(--oro); color: var(--oro-claro); }

/* 10. Contacto */
.s-contact { display: grid; gap: 1.2cqw; }
.s-contact a, .s-contact p { font-size: 1.7cqw; color: var(--blanco); text-decoration: none; display: grid; grid-template-columns: 3cqw 1fr; align-items: center; gap: 1cqw; }
.s-contact a:hover { color: var(--oro-claro); }
.s-contact svg { width: 2.2cqw; height: 2.2cqw; color: var(--oro-claro); }

@media (max-width: 760px) { .deck-controls .lbl { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .slide .r { opacity: 1; }
  .s-ring .ring-progress { stroke-dashoffset: 0; }
}

.s-chart .viz { width: 100%; max-width: 30cqw; height: auto; }
.s-close .s-logo img { width: 30cqw; }
.s-close .s-tag { font-size: 2.4cqw; }
.s-close .s-contact { position: relative; background: rgba(12, 21, 32, .82); padding: 2.4cqw; border-radius: 1cqw; border: 1px solid var(--linea-oscura); }

/* Diapositiva de servicios: los 5 diagramas se mueven en ciclo continuo
   (el del Servicio 02 ya lo hacía con los documentos que viajan hacia el robot). */
.slide.is-active .s-service .viz .draw { animation: draw-loop 4.2s var(--ease) infinite; animation-delay: var(--d, 0s); }
.slide.is-active .s-service .viz .grow { animation: grow-loop 4.2s var(--ease) infinite; animation-delay: var(--d, 0s); }
.slide.is-active .s-service .viz .pop { animation: pop-loop 4.2s var(--ease) infinite; animation-delay: var(--d, 0s); }
@keyframes draw-loop {
  0% { stroke-dashoffset: var(--len, 400); opacity: 1; }
  45%, 82% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes grow-loop {
  0% { transform: scaleY(0); }
  35%, 82% { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}
@keyframes pop-loop {
  0%, 15% { opacity: 0; }
  30%, 82% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .slide .s-service .viz .draw, .slide .s-service .viz .grow, .slide .s-service .viz .pop {
    animation: none !important; stroke-dashoffset: 0; transform: none; opacity: 1;
  }
}

/* Portada y cierre de la presentación: red interactiva con velo para proteger el texto (como el Inicio) */
.s-cover .s-net { z-index: 0; }
.s-cover::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--tinta) 0%, rgba(12,21,32,.85) 38%, rgba(12,21,32,0) 72%);
}
.s-cover > :not(.s-bg):not(.s-num):not(.s-brand) { position: relative; z-index: 2; }
.s-cover .s-num, .s-cover .s-brand { z-index: 2; }