:root {
  --paper: #f8f6f1;
  --cream: #f8f6f1;
  --surface: color-mix(in srgb, var(--cream) 92%, var(--cobalt));
  --surface-deep: color-mix(in srgb, var(--cream) 87%, var(--amber));
  --warm: color-mix(in srgb, var(--cream) 88%, var(--amber));
  --paper-dark: color-mix(in srgb, var(--cream) 94%, var(--ink));
  --charcoal: #0d0d0d;
  --ink: #0d0d0d;
  --ink-soft: color-mix(in srgb, var(--ink) 68%, var(--cream));
  --line: color-mix(in srgb, var(--ink) 22%, var(--cream));
  --cobalt: #1b4fd8;
  --amber: #c8873a;
  --on-dark: #f8f6f1;
  --on-dark-soft: color-mix(in srgb, var(--cream) 76%, var(--ink));
  --line-dark: color-mix(in srgb, var(--cream) 22%, var(--ink));
  --serif: "Fraunces", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --content: min(84rem, calc(100vw - 3rem));
  --text: 46rem;
  --rule-w: 0px;
  --rule: var(--rule-w) solid var(--line);
  --rule-dark: var(--rule-w) solid var(--line-dark);
  --lift: 0 14px 30px -18px rgb(13 13 13 / .45);
  --section: clamp(6.5rem, 12vw, 11rem);
  --photo-shadow: 0 2px 6px rgb(13 13 13 / .08), 0 18px 34px -12px rgb(13 13 13 / .32), 0 44px 80px -40px rgb(13 13 13 / .45);
  --orb-amber:linear-gradient(140deg, color-mix(in srgb, var(--amber) 62%, transparent) 0%, color-mix(in srgb, var(--amber) 0%, transparent) 74%);
  --orb-cobalt: linear-gradient(140deg, color-mix(in srgb, var(--cobalt) 46%, transparent) 0%, color-mix(in srgb, var(--cobalt) 0%, transparent) 74%);
  --orb-amber-up: linear-gradient(45deg, color-mix(in srgb, var(--amber) 0%, transparent) 30%, color-mix(in srgb, var(--amber) 75%, transparent) 100%);
  --orb-cobalt-up: linear-gradient(45deg, color-mix(in srgb, var(--cobalt) 0%, transparent) 30%, color-mix(in srgb, var(--cobalt) 55%, transparent) 100%);
  --orb-cobalt-dark:linear-gradient(140deg, color-mix(in srgb, var(--cobalt) 78%, transparent) 0%, color-mix(in srgb, var(--cobalt) 0%, transparent) 72%);
}

/* Círculos degradados: derivan de los nodos del isologo. */
.hero::before, .hero::after, .identification::before, .identification::after, .ia-section::before, .ia-section::after, .approach-section::before, .approach-section::after, .dimensions-section::before, .audience-section::before, .audience-section::after, .about-section::before, .clients-section::after, .clients-section::before, .testimonials-section::before, .testimonials-section::after, .faq-section::before, .final-cta::before, .final-cta::after { position: absolute; z-index: -1; aspect-ratio: 1; border-radius: 50%; content: ""; pointer-events: none; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 1.025rem/1.6 var(--sans);
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.shell { position: relative; z-index: 1; width: var(--content); margin: auto; }
.section { position: relative; isolation: isolate; overflow: hidden; padding: var(--section) 0; border-top: 0; }
.skip-link { position: fixed; z-index: 100; top: 1rem; left: -100rem; padding: .75rem 1rem; background: var(--ink); color: var(--paper); }
.skip-link:focus { left: 1rem; }

.site-header { position: sticky; top: 0; z-index: 20; border-top: 3px solid var(--ink); background: var(--cream); transition: box-shadow .25s ease; }
.site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgb(13 13 13 / .35); }
/* Barra de progreso de lectura: el hilo conductor del recorrido. */
.site-header::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--amber); content: ""; transform: scaleX(var(--progress, 0)); transform-origin: left; }
.nav-wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; min-height: 6rem; gap: 2rem; }
.brand-logo { display: inline-flex; align-items: center; gap: clamp(.8rem, 1.2vw, 1.1rem); color: var(--ink); text-decoration: none; }
.brand-logo__mark { width: clamp(4.4rem, 5.6vw, 5.4rem); height: auto; }
.brand-logo__text { display: flex; flex-direction: column; gap: .35rem; }
.brand-logo__name { font-family: var(--serif); font-size: clamp(1.55rem, 2vw, 1.95rem); font-weight: 400; letter-spacing: -.03em; line-height: 1; }
.brand-logo__slogan { color: var(--ink-soft); font-size: clamp(.62rem, .72vw, .7rem); font-weight: 600; letter-spacing: .24em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.primary-nav { display: flex; justify-content: center; gap: clamp(1.2rem, 2.4vw, 2.5rem); }
.primary-nav a { position: relative; padding: .5rem 0; font-size: .88rem; font-weight: 500; text-decoration: none; }
.primary-nav a:not(.nav-cta)::after { position: absolute; right: 0; bottom: .2rem; left: 0; height: 2px; background: var(--amber); content: ""; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.primary-nav a:hover { color: var(--cobalt); }
.primary-nav a:hover::after, .primary-nav a[aria-current="true"]::after { transform: scaleX(1); }
.primary-nav .nav-cta { display: none; }
.menu-button { display: none; border: 0; background: transparent; color: var(--ink); font: 700 .72rem var(--sans); letter-spacing: .11em; text-transform: uppercase; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; min-height: 3.1rem; padding: .8rem 1.05rem; border: 1px solid var(--cobalt); background: var(--cobalt); color: var(--cream); font-size: .84rem; font-weight: 600; letter-spacing: .01em; text-decoration: none; box-shadow: 0 14px 28px -14px rgb(27 79 216 / .7); transition: background .2s, border-color .2s, transform .2s, box-shadow .2s; }
.button:hover { border-color: var(--ink); background: var(--ink); box-shadow: 0 16px 30px -14px rgb(13 13 13 / .6); transform: translateY(-2px); }
.button:active { transform: translateY(0) scale(.98); }
.button--small { min-height: 2.6rem; padding: .6rem .95rem; font-size: .78rem; }
.button--cream { border-color: var(--paper); background: var(--paper); color: var(--ink); }
.button--cream:hover { border-color: var(--amber); background: var(--amber); }
.text-link { display: inline-block; padding: .7rem 0; font-size: .9rem; font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: .4rem; }
.text-link:hover { color: var(--cobalt); }

.eyebrow { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.5rem; color: var(--cobalt); font-size: .76rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.eyebrow::before { width: 1.75rem; height: 2px; flex: 0 0 auto; background: var(--amber); content: ""; }
/* En secciones centradas la línea pasa a subrayar la etiqueta. */
.center-section .eyebrow { display: block; width: fit-content; margin: 0 auto 1.75rem; padding: 0 .1em .6rem; border-bottom: 2px solid var(--amber); text-align: center; }
.center-section .eyebrow::before { display: none; }.eyebrow--light { color: var(--amber); }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 300; letter-spacing: -.035em; line-height: 1.02; }
h1 { max-width: 10.5ch; font-size: clamp(3.25rem, 6.2vw, 6.75rem); }
h2 { max-width: 15ch; font-size: clamp(2.4rem, 4.4vw, 4.6rem); }
h3 { font-size: clamp(1.4rem, 1.9vw, 1.8rem); letter-spacing: -.02em; line-height: 1.12; }
p { margin-top: 0; }

.hero { padding: clamp(4.5rem, 8vw, 7rem) 0 clamp(5.5rem, 10vw, 9rem); background: var(--cream); }
.hero-stack { display: grid; justify-items: center; gap: clamp(3.5rem, 6vw, 5.5rem); text-align: center; }
.hero-copy { display: grid; justify-items: center; }
.brand-nodes { pointer-events: none; user-select: none; clip-path: circle(40% at 50% 50%); opacity: .3; }
.hero-nodes { position: absolute; z-index: 0; top: clamp(4rem, 9vw, 8rem); right: max(2rem, calc((100vw - 76rem) / 2)); width: clamp(12rem, 22vw, 20rem); height: auto; }
.section-nodes { position: absolute; z-index: 0; height: auto; }
.node-audience { right: -6rem; bottom: 2rem; width: clamp(13rem, 22vw, 24rem); }
.hero .hero-nodes { display: none; }
.hero-copy { padding-bottom: .1rem; }
.hero-copy .eyebrow { margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem); }
.hero h1 { max-width: 16ch; margin-inline: auto; text-shadow: 0 2px 18px rgb(248 246 241 / .9); }
.hero h1 em { color: var(--cobalt); font-style: italic; font-weight: 300; }
.lead { max-width: var(--text); margin: clamp(1.75rem, 3vw, 2.5rem) auto clamp(2.25rem, 3.5vw, 3rem); color: var(--ink-soft); font-size: clamp(1.1rem, 1.45vw, 1.3rem); line-height: 1.6; }
.actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.25rem 2rem; }
.button--hero { min-height: 3.5rem; padding: 1rem 1.5rem; font-size: .95rem; }
.hero-note { margin: 1.25rem 0 0; color: var(--ink-soft); font-size: .86rem; }
.hero::before { top: -16rem; right: -14rem; width: clamp(28rem, 50vw, 48rem); background: var(--orb-amber); opacity: .5; }
.hero::after { top: 34%; left: -16rem; width: clamp(24rem, 40vw, 38rem); background: var(--orb-cobalt); opacity: .4; }
.hero-figure { position: relative; width: min(100%, 68rem); margin: 0; }
.hero-figure img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 35%; box-shadow: var(--photo-shadow); }
.amber-dot { display: inline-block; width: 1.1rem; height: 1px; margin-right: .35rem; vertical-align: middle; background: var(--amber); }

.section-heading { max-width: 61rem; }
.split-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 1.5rem 5rem; }
.split-heading .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.intro { max-width: 28rem; margin: 0; color: var(--ink-soft); font-size: 1.05rem; }
.challenges-heading h2 { max-width: 18ch; }
.challenges-heading h2 span, .challenges-heading h2 strong { display: block; }
.challenges-heading h2 span { color: var(--ink-soft); }
.challenges-heading h2 strong { margin-top: .12em; color: var(--ink); font-weight: 400; }
.challenge-prompt { margin: clamp(3.5rem, 6vw, 5rem) 0 0; color: var(--ink); font-size: clamp(1.05rem, 1.3vw, 1.2rem); font-weight: 500; }
.challenge-prompt em { font-style: normal; }
.identification::before { top: -12rem; right: -12rem; width: clamp(24rem, 40vw, 38rem); background: var(--orb-cobalt); opacity: .5; }
.identification::after { bottom: -14rem; left: -14rem; width: clamp(24rem, 40vw, 38rem); background: var(--orb-amber); opacity: .45; }

/* Íconos: un único estilo para todo el sitio. Trazo tinta, detalle y fondo en el color del círculo. */
.icon-badge { --badge: var(--cobalt); display: grid; width: 5rem; height: 5rem; flex: 0 0 auto; place-items: center; border-radius: 50%; background: linear-gradient(140deg, color-mix(in srgb, var(--badge) 30%, var(--cream)), var(--cream) 85%); box-shadow: 0 2px 6px rgb(13 13 13 / .08), 0 14px 30px -12px rgb(13 13 13 / .3); }
.icon-badge--amber { --badge: var(--amber); }
.icon { display: block; width: 2.9rem; height: 2.9rem; fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.icon .fill { fill: var(--badge); stroke: none; }
.icon .fill-soft { fill: color-mix(in srgb, var(--badge) 22%, transparent); stroke: var(--ink); }
.line-icon { display: block; width: 2.75rem; height: 2.75rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.problem-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3.5rem, 5vw, 4.5rem) clamp(3rem, 7vw, 7rem); max-width: 68rem; margin: clamp(3rem, 5vw, 4.5rem) auto 0; }
.problem-card { display: grid; justify-items: center; align-content: start; gap: .9rem; text-align: center; }
.problem-card .icon-badge { margin-bottom: .6rem; }
.problem-card h3 { margin: 0; color: var(--cobalt); font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .2em; line-height: 1.4; text-transform: uppercase; }
.problem-card p { max-width: 30rem; margin: 0; color: var(--ink-soft); font-family: var(--sans); font-size: clamp(1.1rem, 1.35vw, 1.25rem); line-height: 1.5; }
.problem-card strong { color: var(--ink); font-weight: 700; }
/* Separadores: mismo grosor en todo el sitio y tan anchos como el bloque que separan. */
.section-close { width: fit-content; max-width: 100%; margin: clamp(4rem, 7vw, 6rem) auto 0; padding-top: clamp(2.5rem, 4vw, 3.5rem); border-top: var(--rule); text-align: center; }
.section-close__title { margin: 0 0 clamp(1.75rem, 3vw, 2.25rem); color: var(--ink); font-family: var(--serif); font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 300; letter-spacing: -.03em; line-height: 1.1; }
/* Los tres efectos se encadenan como un proceso: flecha entre cada ítem. */
.result-list { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; list-style: none; }
.result-list li { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2rem); color: var(--ink-soft); font-family: var(--sans); font-size: clamp(1.05rem, 1.25vw, 1.15rem); line-height: 1.5; }
.result-list li + li { margin-left: clamp(1.25rem, 2.5vw, 2rem); }
.result-list li + li::before { color: var(--amber); content: "⟶"; font-size: 1.9rem; line-height: 1; }
.result-list span { max-width: 15rem; }
.result-list strong { color: var(--ink); font-weight: 700; }

.identification {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 18%, transparent);
  background: var(--warm);
}

.ia-section {
  color: var(--on-dark);
  background: var(--ink);
}
.ia-section { padding: clamp(8rem, 15vw, 13rem) 0; }
.ia-section::before { bottom: -16rem; left: -14rem; width: clamp(26rem, 44vw, 42rem); background: var(--orb-cobalt-dark); opacity: .6; }
.ia-section::after { top: -14rem; right: -14rem; width: clamp(24rem, 40vw, 38rem); background: var(--orb-amber); opacity: .35; }
.ia-statement { display: grid; justify-items: center; text-align: center; }
.quote-mark { color: var(--amber); }
.ia-statement h2 { max-width: 26ch; font-family: var(--serif); font-size: clamp(2.2rem, 3.9vw, 4rem); font-style: italic; font-weight: 300; letter-spacing: -0.025em; line-height: 1.15; text-shadow: 0 4px 30px rgb(0 0 0 / .6); }
/* Resaltado tipo marcador en cobalto, sutil: cubre la mitad inferior de la línea. */
.ia-statement mark { padding: 0 .08em; background: linear-gradient(to top, rgb(27 79 216 / .5) 0 42%, transparent 42%); color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ia-copy { display: grid; justify-items: center; }
.ia-copy > p { width: fit-content; max-width: var(--text); margin: clamp(2.5rem, 4vw, 3.5rem) 0 0; padding-top: clamp(2rem, 3vw, 2.5rem); border-top: var(--rule-dark); color: var(--on-dark-soft); font-size: clamp(1.05rem, 1.35vw, 1.18rem); font-weight: 400; line-height: 1.65; }

.approach-section { background: var(--cream); }
.approach-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, .75fr); align-items: end; gap: clamp(2.5rem, 7vw, 7rem); }
.approach-heading h2 { max-width: 12ch; }
.approach-intro { max-width: var(--text); color: var(--ink-soft); font-size: 1.07rem; line-height: 1.58; }
.approach-intro p { margin: 0; }
.approach-intro p + p { margin-top: 1rem; }
/* Etapas encadenadas: una flecha entre cada etapa marca el proceso. */
.approach-stages { --stage-gap: clamp(3rem, 6vw, 6rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--stage-gap); max-width: 72rem; margin: clamp(3.5rem, 7vw, 6rem) auto 0; padding: 0; list-style: none; }
.approach-stages li { position: relative; display: grid; justify-items: center; text-align: center; }
.approach-stages li + li::before { position: absolute; top: 2.5rem; left: calc(var(--stage-gap) / -2); color: var(--amber); content: "⟶"; font-size: 2.2rem; line-height: 1; transform: translate(-50%, -50%); }
.approach-stages .icon-badge { margin-bottom: clamp(1.5rem, 2.5vw, 2rem); }
.approach-section::before { top: 18%; right: -16rem; width: clamp(24rem, 38vw, 36rem); background: var(--orb-amber); opacity: .4; }
.approach-section::after { bottom: -16rem; left: -14rem; width: clamp(24rem, 38vw, 36rem); background: var(--orb-cobalt); opacity: .35; }
.approach-stages h3 { max-width: 12ch; }
.approach-stages p { margin: 1rem 0 0; color: var(--ink-soft); font-size: .96rem; line-height: 1.58; }
.approach-stages .approach-subtitle { max-width: 26ch; margin-top: 1.1rem; color: var(--ink-soft); font-size: 1.08rem; font-weight: 400; }
.approach-principle { display: grid; width: fit-content; max-width: 100%; justify-items: center; gap: 1.5rem; margin: clamp(4rem, 7vw, 6rem) auto 0; padding: clamp(2.5rem, 4vw, 3.5rem) 0 0; border-top: var(--rule); text-align: center; }
.approach-principle p { margin: 0; }
.approach-principle p:first-child { font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 300; letter-spacing: -.03em; line-height: 1.15; }
.approach-principle p:first-child span { display: block; }
.approach-principle p:first-child span:last-child { color: var(--cobalt); }
.approach-principle p:last-child { max-width: var(--text); padding-top: .4rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }

.dimensions-section { overflow: clip; background: var(--paper-dark); }
.dimensions-section::before { bottom: -16rem; left: -14rem; width: clamp(24rem, 40vw, 38rem); background: var(--orb-amber); opacity: .4; }
.dimensions-heading { display: grid; justify-items: center; gap: 1.5rem; text-align: center; }
.dimensions-heading .eyebrow { margin-bottom: 0; }
.dimensions-heading h2 { max-width: 40ch; text-wrap: balance; }
.dimensions-heading > p:last-child { max-width: var(--text); margin: 0 auto; color: var(--ink-soft); font-size: clamp(1.08rem, 1.3vw, 1.2rem); line-height: 1.6; }
.dimensions-collage { position: relative; display: grid; grid-template-columns: .8fr 1fr 1fr; grid-template-rows: repeat(2, clamp(12rem, 17vw, 16.5rem)); gap: clamp(1rem, 1.8vw, 1.5rem); margin: clamp(4.5rem, 8vw, 7rem) 0 0; }
.dimensions-collage::before { position: absolute; z-index: -1; top: -5rem; right: -6rem; width: clamp(14rem, 24vw, 22rem); aspect-ratio: 1; border-radius: 50%; background: var(--orb-cobalt-up); content: ""; }
.collage-item { margin: 0; overflow: hidden; box-shadow: var(--photo-shadow); }
.collage-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.collage-item:hover img { transform: scale(1.03); }
.collage-item--tall { grid-row: span 2; }
.collage-item--tall img { object-position: 50% 30%; }
.collage-item--wide { grid-column: span 2; }
.collage-item--wide img { object-position: 50% 45%; }
.dimensions-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(3rem, 5vw, 5rem); margin-top: clamp(4rem, 7vw, 6rem); }
.dimension-card { display: grid; justify-items: center; text-align: center; }
.dimension-card .icon-badge { margin-bottom: 1.5rem; }
.dimension-category { margin: 0 0 .6rem; color: var(--cobalt); font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.dimension-card h3 { max-width: 18ch; }
.dimension-card > p:last-child { max-width: 24rem; margin: .9rem 0 0; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.6; }

.audience-section { overflow: clip; background: var(--charcoal); color: var(--on-dark); }
.audience-section .eyebrow { color: var(--amber); }
.audience-section::before { bottom: -14rem; left: -14rem; width: clamp(24rem, 40vw, 38rem); background: var(--orb-cobalt-dark); opacity: .55; }
.audience-section::after { top: -14rem; right: -14rem; width: clamp(22rem, 36vw, 34rem); background: var(--orb-amber); opacity: .3; }
.audience-grid { display: grid; justify-items: center; gap: clamp(3rem, 5vw, 4.5rem); text-align: center; }
.audience-section h2 { max-width: 18ch; text-shadow: 0 4px 30px rgb(0 0 0 / .6); }
.audience-intro { width: fit-content; max-width: var(--text); margin: 1.75rem auto 0; color: var(--on-dark-soft); font-size: clamp(1.05rem, 1.3vw, 1.18rem); line-height: 1.6; }
/* Mismo recurso que las preguntas frecuentes: la frase cambia de color y se desplaza al pasar el cursor. */
.audience-list { width: min(100%, 56rem); border-top: var(--rule-dark); }
.audience-lead { margin: 0 0 1rem; color: var(--amber); font-family: var(--serif); font-size: clamp(1.4rem, 2vw, 1.8rem); font-style: italic; font-weight: 300; }
/* Indicador de que la frase se despliega: chevron junto al texto que gira al abrir. */
.audience-list summary, .faqs summary { cursor: pointer; text-decoration: underline dotted color-mix(in srgb, currentColor 35%, transparent); text-decoration-thickness: 1px; text-underline-offset: .35em; }
.audience-list summary::after, .faqs summary::after { position: static; display: inline-block; width: .5rem; height: .5rem; margin: 0 0 .3rem .7rem; border-right: 2px solid var(--amber); border-bottom: 2px solid var(--amber); font-size: 1rem; content: ""; vertical-align: middle; transform: rotate(45deg); transition: transform .25s ease; }
.audience-list details[open] summary::after, .faqs details[open] summary::after { content: ""; transform: rotate(-135deg) translate(-.2rem, -.2rem); }
.audience-list summary:hover, .faqs summary:hover, .audience-list details[open] summary, .faqs details[open] summary { text-decoration-color: currentColor; }
.audience-list details { border-bottom: var(--rule-dark); }
.audience-list summary { padding: clamp(1.2rem, 2vw, 1.6rem) 0; color: var(--on-dark); font-weight: 300; font-size: clamp(1.3rem, 1.85vw, 1.65rem); text-align: center; }
.audience-list summary strong { font-weight: 500; }
.audience-list summary:hover, .audience-list details[open] summary { color: var(--amber); }
.audience-list details p { max-width: 40rem; margin: -.4rem auto 2rem; color: var(--on-dark-soft); text-align: center; }

.about-section { background: var(--cream); }
.about-section::before { top: 8rem; right: -16rem; width: clamp(24rem, 40vw, 38rem); background: var(--orb-cobalt); opacity: .35; }
.about-grid { display: grid; grid-template-columns: 1fr; justify-items: center; gap: clamp(3rem, 5vw, 4rem); text-align: center; }
.about-mark { position: relative; width: min(100%, 22rem); }
.about-mark::before { position: absolute; z-index: -1; top: -3rem; left: -4rem; width: 85%; aspect-ratio: 1; border-radius: 50%; background: var(--orb-amber); content: ""; }
.about-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; box-shadow: var(--photo-shadow); filter: grayscale(1) contrast(1.04); }
.about-content { display: grid; justify-items: center; }
.about-content h2 { max-width: 30ch; text-wrap: balance; }
/* Un solo tamaño para todo el texto: título y cuerpo, sin escalones intermedios. */
.about-copy { max-width: var(--text); margin: clamp(2rem, 3vw, 2.75rem) auto 0; color: var(--ink-soft); font-size: clamp(1.05rem, 1.2vw, 1.12rem); line-height: 1.7; }
.about-copy p { margin: 0; }
.about-copy p + p { margin-top: 1.15rem; }
.about-copy strong { color: var(--ink); font-weight: 600; }
.about-credentials { display: grid; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(2rem, 3vw, 3rem); margin: 0; padding-top: clamp(2.5rem, 4vw, 3.5rem); border-top: var(--rule); }
.about-credentials dt, .about-credentials dd { margin: 0; }
.about-credentials dt { margin-bottom: .7rem; }
.about-credentials dt strong { display: block; color: var(--ink); font-family: var(--serif); font-size: clamp(1.3rem, 1.7vw, 1.6rem); font-weight: 400; letter-spacing: -.03em; line-height: 1.15; }
.about-credentials dd { max-width: 17rem; margin-inline: auto; color: var(--ink-soft); font-size: .95rem; line-height: 1.55; }

.clients-section { padding-bottom: var(--section); background: var(--ink); color: var(--on-dark); }
.clients-section .eyebrow { color: var(--amber); }
.clients-section::before { top: -12rem; right: -14rem; width: clamp(24rem, 38vw, 36rem); background: var(--orb-amber); opacity: .35; }
.clients-section::after { bottom: -16rem; left: -14rem; width: clamp(24rem, 40vw, 38rem); background: var(--orb-cobalt-dark); opacity: .55; }
.clients-intro { padding-bottom: clamp(3rem, 5vw, 4rem); text-align: center; }
.clients-intro h2 { max-width: 22ch; }
/* Dos cintas de logos en sentidos opuestos: cada una muestra la mitad de las marcas, sin repetir. */
.logo-marquee { --logo-gap: clamp(3.5rem, 6vw, 6.5rem); position: relative; z-index: 1; display: grid; width: 100%; overflow: hidden; }
.logo-track { display: flex; width: max-content; animation: client-logos-scroll 40s linear infinite; }
/* Cada cinta es al menos tan ancha como la pantalla, así ningún logo aparece dos veces a la vista. */
.logo-track { --logo-gap: max(3rem, calc((100vw - 30rem) / 6)); }
.logo-track--reverse { --logo-gap: max(3rem, calc((100vw - 44rem) / 6)); animation-direction: reverse; animation-duration: 46s; }
.logo-set { display: flex; flex: 0 0 auto; align-items: center; gap: var(--logo-gap); height: 7.5rem; padding-right: var(--logo-gap); }
.client-logo { --h: 2.5rem; display: flex; flex: 0 0 auto; align-items: center; justify-content: center; height: 100%; }
.client-logo--01 { --h: 4.1rem; }
.client-logo--02 { --h: 1.68rem; }
.client-logo--03 { --h: 3.1rem; }
.client-logo--04 { --h: 3.47rem; }
.client-logo--05 { --h: 4.2rem; }
.client-logo--06 { --h: 2.12rem; }
.client-logo--07 { --h: 3.36rem; }
.client-logo--08 { --h: 2.06rem; }
.client-logo--09 { --h: 2.1rem; }
.client-logo--10 { --h: 1.85rem; }
.client-logo--11 { --h: 2.35rem; }
.client-logo--12 { --h: 2.85rem; }
.client-logo img { display: block; width: auto; height: calc(var(--h) * 1.15); object-fit: contain; opacity: .9; transition: opacity .2s ease; }
.client-logo:hover img { opacity: 1; }
@keyframes client-logos-scroll { to { transform: translateX(-25%); } }

.testimonials-section { background: var(--warm); }
.testimonials-section::before { top: -12rem; left: -14rem; width: clamp(24rem, 38vw, 36rem); background: var(--orb-cobalt); opacity: .45; }
.testimonials-section::after { bottom: -16rem; right: -14rem; width: clamp(24rem, 38vw, 36rem); background: var(--orb-amber); opacity: .4; }
.testimonials-heading { display: block; }
.testimonials-heading h2 { max-width: 20ch; }
.testimonials-heading > p { max-width: 34rem; margin: 0; color: var(--ink-soft); font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.58; }
/* Testimonios apilados: se recorren con el mismo scroll que el resto de la página. */
.testimonials-list { margin-top: clamp(3rem, 5vw, 4.75rem); }
.testimonial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); text-align: left; }
.testimonial-track { display: flex; gap: clamp(1rem, 2vw, 1.5rem); overflow-x: auto; margin: -1.5rem -1.5rem 0; padding: 1.5rem 1.5rem 3rem; scroll-padding-inline: 1.5rem; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-card { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.75rem, 3vw, 2.75rem); background: var(--cream); box-shadow: 0 2px 6px rgb(13 13 13 / .06), 0 26px 46px -26px rgb(13 13 13 / .4); }
.testimonial-card blockquote { margin: 0; }
.testimonial-card blockquote p { margin: 0; color: var(--ink); font-family: var(--serif); font-size: clamp(1.15rem, 1.45vw, 1.35rem); font-weight: 300; letter-spacing: -.01em; line-height: 1.5; }
.testimonial-card blockquote strong { color: var(--ink); font-weight: 400; }
.testimonial-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .3rem 1rem; margin-top: 2.25rem; padding: 1.4rem 0 0; border-top: var(--rule); color: var(--ink); }
.testimonial-meta p { margin: 0; }
.testimonial-avatar { display: grid; grid-row: span 2; width: 3.25rem; height: 3.25rem; place-items: center; border-radius: 50%; background: var(--ink); color: var(--cream); font-family: var(--serif); font-size: 1.1rem; letter-spacing: .02em; }
.testimonial-card:nth-child(2n) .testimonial-avatar { background: var(--cobalt); }
.testimonial-person strong { display: block; font-size: 1rem; font-weight: 600; }
.testimonial-person span { display: block; margin-top: .1rem; color: var(--ink-soft); font-size: .86rem; }
.testimonial-source { color: var(--ink-soft); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.testimonial-stars { margin-right: .4rem; color: var(--amber); font-size: .85rem; letter-spacing: .12em; }
.testimonial-card--video .testimonial-media { min-height: 12rem; margin-bottom: 1.5rem; background: var(--ink); }
.testimonial-card--video .testimonial-play { border: 1px solid var(--cream); background: transparent; color: var(--cream); }
.testimonial-controls { display: flex; align-items: center; justify-content: center; gap: 2rem; margin-top: 0; }
.testimonial-arrows, .testimonial-pagination { display: flex; align-items: center; gap: .5rem; }
.testimonial-arrow { display: grid; width: 2.85rem; height: 2.85rem; place-items: center; border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: 400 1.25rem/1 var(--sans); cursor: pointer; }
.testimonial-arrow:hover:not(:disabled), .testimonial-arrow:focus-visible { border-color: var(--cobalt); background: var(--cobalt); color: var(--cream); }
.testimonial-arrow:disabled { border-color: var(--line); color: var(--line); cursor: default; }
.testimonial-pagination button { width: 1.5rem; height: .3rem; padding: 0; border: 0; border-radius: 0; background: color-mix(in srgb, var(--ink) 28%, var(--cream)); cursor: pointer; }
.testimonial-pagination button[aria-current="true"] { background: var(--cobalt); }
.testimonial-pagination button:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }

.faq-section { background: var(--cream); color: var(--ink); }
.faq-section::before { top: 20%; right: -16rem; width: clamp(24rem, 38vw, 36rem); background: var(--orb-cobalt); opacity: .35; }
.faq-grid { display: grid; justify-items: center; gap: clamp(3rem, 5vw, 4rem); text-align: center; }
.faq-section h2 { max-width: 20ch; }
.faqs { width: min(100%, 56rem); border-top: var(--rule); }
.faqs summary { min-height: auto; padding: clamp(1.2rem, 2vw, 1.5rem) 0; text-align: center; }
.faqs details p { margin: -.2rem auto 2rem; text-align: center; }
details { border-bottom: var(--rule); }
summary { position: relative; min-height: 5.25rem; padding: 1.45rem 3rem 1.45rem 0; cursor: pointer; font-family: var(--serif); font-size: clamp(1.25rem, 1.8vw, 1.65rem); letter-spacing: -.03em; line-height: 1.2; }
summary::after { position: absolute; top: 1.2rem; right: .1rem; color: var(--ink); content: "+"; font-family: var(--sans); font-size: 1.9rem; font-weight: 300; line-height: 1; transition: color .2s; }
summary { transition: color .25s ease, transform .25s ease; }
summary:hover { transform: translateX(.4rem); }
summary:hover::after, details[open] summary::after { color: var(--cobalt); }
details[open] summary::after { content: "−"; }
summary:hover { color: var(--cobalt); }
details p { max-width: 40rem; margin: -.2rem 3rem 2rem 0; color: var(--ink-soft); font-size: clamp(1rem, 1.15vw, 1.08rem); line-height: 1.65; }
.faq-more { margin: 2.5rem 0 0; text-align: center; color: var(--ink-soft); font-family: var(--serif); font-size: clamp(1.15rem, 1.5vw, 1.35rem); font-style: italic; font-weight: 300; }
.faq-more a { display: inline-block; padding: .5rem 0; color: var(--cobalt); font-style: normal; font-weight: 400; text-decoration-thickness: 1px; text-underline-offset: .3rem; }
.faq-more a:hover { color: var(--ink); }
.faq-more .faq-more__arrow { margin-left: .4rem; padding: .2rem .5rem; font-size: 1.5rem; line-height: 1; text-decoration: none; transition: transform .25s ease; }
.faq-more .faq-more__arrow:hover { transform: translateY(.3rem); }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

.final-cta { overflow: hidden; background: var(--ink); color: var(--on-dark); }
.final-cta::before { right: -14rem; bottom: -16rem; width: clamp(26rem, 44vw, 42rem); background: var(--orb-cobalt-dark); opacity: .65; }
.final-cta::after { top: -14rem; left: -14rem; width: clamp(24rem, 38vw, 36rem); background: var(--orb-amber); opacity: .3; }
.final-cta .shell { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr); grid-template-rows: auto auto auto 1fr; align-items: start; column-gap: clamp(3rem, 7vw, 7rem); }
.final-cta .eyebrow { grid-column: 1 / -1; }
.final-cta h2 { grid-column: 1; grid-row: 2 / span 3; max-width: 13ch; font-size: clamp(2.6rem, 5vw, 5rem); }
.final-cta-portrait { width: clamp(8rem, 11vw, 10rem); height: auto; aspect-ratio: 1; margin-bottom: 1.5rem; border-radius: 50%; object-fit: cover; object-position: 50% 50%; box-shadow: 0 0 0 1px rgb(27 79 216 / .35), 0 0 46px rgb(27 79 216 / .35), 0 22px 46px -16px rgb(27 79 216 / .8); }
.final-cta p:not(.eyebrow) { grid-column: 2; max-width: 30rem; margin: 0 0 2rem; color: var(--on-dark-soft); font-size: 1.1rem; line-height: 1.6; }
.final-cta-actions { grid-column: 2; max-width: 24rem; }
.final-cta-actions .button { flex: 1 1 100%; justify-content: center; }
.final-cta-actions { display: flex; flex-wrap: wrap; gap: .85rem; }
.final-cta .button { min-height: 3.35rem; padding: .9rem 1.2rem; }
.final-cta-icon { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-linecap: square; stroke-linejoin: miter; stroke-width: 1.7; }
.final-cta .button--calendly { border-color: var(--cobalt); background: var(--cobalt); color: var(--cream); }
.final-cta .button--calendly:hover { border-color: var(--paper); background: var(--paper); color: var(--ink); }
.final-cta .button--whatsapp { border-color: var(--cream); background: transparent; color: var(--cream); }
.final-cta .button--whatsapp:hover { border-color: var(--amber); background: var(--amber); color: var(--ink); }
footer { padding: clamp(3rem, 5vw, 4rem) 0 2.5rem; background: var(--cream); color: var(--ink); }
.footer-grid { display: grid; justify-items: center; gap: 1.75rem; text-align: center; }
.social-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.social-links a { display: grid; width: 2.9rem; height: 2.9rem; place-items: center; border: 1px solid var(--ink); border-radius: 50%; color: var(--ink); transition: background .2s, border-color .2s, color .2s; }
.social-links a:hover { border-color: var(--cobalt); background: var(--cobalt); color: var(--cream); }
.social-links svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.social-links svg .fill { fill: currentColor; stroke: none; }
footer p { margin: 0; color: var(--ink-soft); font-size: .8rem; }
.privacy { max-width: var(--text); padding-top: 1.75rem; border-top: var(--rule); }
.footer-copy { text-align: center; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }
/* Aparición suave al hacer scroll. */
.motion-ready .reveal { opacity: 0; transform: translateY(2rem); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.motion-ready .reveal.is-visible { opacity: 1; transform: none; }

/* Secciones con composición centrada */
.center-section .eyebrow { justify-content: center; }
.center-section h2 { margin-inline: auto; text-align: center; }
.identification .section-heading { margin-inline: auto; text-align: center; }
.center-section .approach-heading { grid-template-columns: 1fr; justify-items: center; gap: 1.75rem; text-align: center; }
.center-section .approach-intro { margin-inline: auto; }
.center-section .approach-principle p:last-child { margin-inline: auto; }
.center-section .clients-intro, .center-section .testimonials-heading { text-align: center; }
.final-cta.center-section .shell { display: flex; flex-direction: column; align-items: center; text-align: center; }
.final-cta.center-section .final-cta-portrait { order: -1; margin-bottom: 2rem; }
.final-cta.center-section h2 { max-width: 16ch; }
.final-cta.center-section p:not(.eyebrow) { max-width: var(--text); margin: 1.75rem auto 2.25rem; }
.final-cta.center-section h2 { text-shadow: 0 4px 30px rgb(0 0 0 / .6); }
.final-cta.center-section .final-cta-actions { max-width: none; justify-content: center; }
.final-cta.center-section .final-cta-actions .button { flex: 0 0 auto; }

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

@media (max-width: 58rem) {
  html { scroll-padding-top: 5.5rem; }
  .nav-wrap { grid-template-columns: auto auto; min-height: 5.25rem; justify-content: space-between; }
  .menu-button { display: block; min-height: 2.75rem; padding: 0; }
  .header-cta { display: none; }
  .primary-nav { position: fixed; inset: calc(5.25rem + 4px) 0 auto; display: none; min-height: calc(100vh - 5.25rem); padding: 2rem; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1.5rem; border-top: 1px solid var(--line); background: var(--paper); }
  .primary-nav.is-open { display: flex; }
  .primary-nav a { font-family: var(--serif); font-size: 2rem; letter-spacing: -.04em; }
  .primary-nav .nav-cta { display: inline-flex; margin-top: 1rem; font-family: var(--sans); font-size: .95rem; letter-spacing: .01em; text-decoration: none; }
  .primary-nav .nav-cta:hover { color: var(--cream); text-decoration: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 2.75rem; }
  .hero-figure img { aspect-ratio: 4 / 3; }
  .problem-grid { grid-template-columns: 1fr; }
  .result-list { flex-direction: column; }
  .result-list li { flex-direction: column; gap: 1rem; }
  .result-list li + li { margin: 1rem 0 0; }
  .result-list li + li::before { content: "↓"; }
  .result-list span { max-width: 20rem; }
  .approach-heading, .approach-principle, .dimensions-heading { grid-template-columns: 1fr; }
  .dimensions-grid { grid-template-columns: 1fr; gap: 3rem; }
  .dimensions-collage { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .collage-item--tall { grid-row: auto; aspect-ratio: 3 / 4; }
  .collage-item--wide { grid-column: auto; aspect-ratio: 3 / 4; }
  .collage-item:not(.collage-item--tall):not(.collage-item--wide) { aspect-ratio: 4 / 3; }
  .approach-stages { grid-template-columns: 1fr; --stage-gap: 4.5rem; }
  .approach-stages li + li::before { top: calc(var(--stage-gap) / -2); left: 50%; content: "↓"; font-size: 1.9rem; }
  .about-credentials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .testimonial-grid { grid-template-columns: 1fr; }
  .final-cta .shell { display: block; }
  .final-cta p:not(.eyebrow) { margin-top: 1.7rem; }
  .hero-nodes { right: -3rem; }
}

@media (max-width: 40rem) {
  :root { --content: min(100vw - 2.25rem, 76rem); --section: 5.5rem; }
  body { background-size: auto, 11px 11px; }
  .hero { padding-top: 4.5rem; }
  h1 { font-size: clamp(3.05rem, 15.4vw, 4.7rem); }
  .brand-logo__mark { width: 3.6rem; }
  .brand-logo__name { font-size: 1.4rem; }
  .brand-logo__slogan { font-size: .54rem; letter-spacing: .18em; }
  .actions { align-items: stretch; flex-direction: column; gap: 1.25rem; }
  .actions .text-link { align-self: center; }
  .dimensions-collage::before { top: -1.5rem; right: -1.5rem; }
  .dimensions-collage { gap: .75rem; }
  .about-credentials { grid-template-columns: 1fr; }
  .section-nodes { opacity: .26; }
  .logo-set { height: 6rem; }
  .client-logo img { height: calc(var(--h) * .9); }
  .final-cta-actions { align-items: stretch; flex-direction: column; width: 100%; }
  .final-cta-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; }
}