:root {
      /* Paleta tomada de la fotografía: lila azulado + gris carbón.
         Los tonos de texto/CTA se oscurecieron para cumplir WCAG AA. */
      --bg: #EEF0FB;
      --paper: #FFFFFF;
      --stone: #D7DBEF;
      --stone-2: #9AA1D5;
      --ink: #232630;
      --muted: #515571;
      --accent: #515571;
      --accent-2: #3F456F;
      --accent-soft: #9AA1D5;
      --accent-mid: #8283B5;
      --line: rgba(35, 38, 48, .18);
      --white: #fff;
      --shadow: 0 24px 70px rgba(16, 24, 20, .12);
      --radius: 26px;
      --container: 1320px;
      --section: clamp(86px, 10vw, 156px);
      --header-h: 76px;
      --ease: cubic-bezier(.2,.8,.2,1);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 18px); }
    body {
      margin: 0;
      overflow-x: hidden;
      background: var(--bg);
      color: var(--ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
      line-height: 1.55;
    }
    body.modal-open { overflow: hidden; }
    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { font: inherit; }
    button { color: inherit; }
    img { display: block; max-width: 100%; }
    ::selection { background: var(--accent); color: var(--white); }
    :focus-visible { outline: 3px solid var(--accent-2); outline-offset: 4px; }

    .skip-link { position:fixed; left:16px; top:12px; z-index:3000; padding:12px 18px; border-radius:10px; background:#fff; color:var(--ink); border:2px solid var(--accent-2); transform:translateY(-160%); transition:transform .2s; font-weight:800; }
    .skip-link:focus { transform:translateY(0); }
    .container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
    .section { padding-block: var(--section); position: relative; }
    .section--paper { background: var(--paper); }
    .section--dark { background: var(--ink); color: var(--white); }
    .section--accent { background: var(--accent); color: var(--white); }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      text-transform: uppercase;
      letter-spacing: .13em;
      font-size: .74rem;
      font-weight: 760;
    }
    .eyebrow::before { content:""; width: 30px; height: 1px; background: currentColor; opacity: .55; }
    .display {
      margin: 0;
      font-size: clamp(3rem, 7.3vw, 7.75rem);
      line-height: .9;
      letter-spacing: -.068em;
      font-weight: 760;
    }
    .section-title {
      max-width: 1040px;
      margin: 18px 0 0;
      font-size: clamp(2.25rem, 5vw, 5.4rem);
      line-height: .96;
      letter-spacing: -.055em;
      font-weight: 720;
    }
    .lead {
      max-width: 720px;
      margin: 26px 0 0;
      color: var(--muted);
      font-size: clamp(1.08rem, 1.7vw, 1.38rem);
      line-height: 1.55;
    }
    .section--dark .lead { color: rgba(255,255,255,.78); }
    .section--accent .lead { color: rgba(255,255,255,.82); }
    .muted { color: var(--muted); }
    .rule { height: 1px; background: var(--line); }
    .btn {
      min-height: 54px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border: 1px solid transparent;
      border-radius: 999px;
      padding: 13px 22px;
      cursor: pointer;
      font-weight: 760;
      font-size: 1rem;
      position:relative;
      overflow:hidden;
      isolation:isolate;
      box-shadow: 0 8px 22px rgba(35,38,48,.10);
      transition: transform .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease), box-shadow .28s var(--ease), filter .28s var(--ease);
    }
    .btn::before {
      content:"";
      position:absolute;
      inset:-1px auto -1px -36%;
      width:34%;
      background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.42), rgba(255,255,255,0));
      transform:skewX(-22deg);
      opacity:0;
      transition:transform .55s var(--ease), opacity .4s var(--ease);
      z-index:-1;
    }
    .btn:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 14px 30px rgba(35,38,48,.16); }
    .btn:hover::before { opacity:1; transform:translateX(430%) skewX(-22deg); }
    .btn:active { transform: translateY(-1px) scale(.995); }
    .btn--primary { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: var(--white); border-color: transparent; box-shadow: 0 14px 34px rgba(71,82,155,.24); }
    .btn--primary:hover { background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 100%); box-shadow: 0 18px 40px rgba(71,82,155,.30); filter:saturate(1.04); }
    .btn--ghost { border: 2px solid rgba(94,103,179,.48); background: rgba(255,255,255,.84); color: var(--ink); backdrop-filter: blur(6px); }
    .btn--ghost:hover { background: var(--white); border-color: var(--accent-2); color: var(--ink); box-shadow:0 14px 30px rgba(23,27,40,.12); }
    .section--dark .btn--ghost, .section--accent .btn--ghost { border-color: rgba(255,255,255,.88); background: transparent; color: white; }
    .section--dark .btn--ghost:hover, .section--accent .btn--ghost:hover { background: #fff; color: var(--accent-2); border-color: #fff; }
    .btn--light { background:#fff; color:var(--accent-2); border-color:#fff; box-shadow:0 14px 30px rgba(255,255,255,.18); }
    .btn--light:hover { background:var(--stone); color:var(--accent-2); border-color:var(--stone); box-shadow:0 16px 34px rgba(35,38,48,.16); }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 1000;
      height: var(--header-h);
      transition: background .25s, box-shadow .25s, backdrop-filter .25s;
    }
    .site-header.scrolled {
      background: rgba(238,240,251,.94);
      backdrop-filter: blur(16px);
      box-shadow: 0 1px 0 var(--line);
    }
    .header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
    .brand { font-size: 1.05rem; font-weight: 820; letter-spacing: -.03em; white-space: nowrap; }
    .brand span { color: var(--accent); }
    .nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 36px); }
    .nav a:not(.btn) { font-size: .92rem; color: var(--ink); position: relative; font-weight:650; }
    .nav a:not(.btn)::after { content:""; position:absolute; left:0; right:100%; bottom:-7px; height:1px; background:var(--accent); transition:right .25s; }
    .nav a:not(.btn):hover::after { right:0; }
    .menu-toggle { display: none; width: 46px; height: 46px; border-radius: 50%; border:1px solid var(--line); background: transparent; cursor:pointer; }

    .hero {
      position:relative;
      isolation:isolate;
      overflow:hidden;
      /* Hero adaptable a cualquier viewport: vh = fallback, svh = viewport estable, dvh = viewport dinámico móvil */
      min-height: calc(100vh - var(--header-h));
      min-height: calc(100svh - var(--header-h));
      min-height: calc(100dvh - var(--header-h));
      width:100%;
      padding: clamp(18px, 3vh, 42px) 0;
      display:flex;
      align-items:center;
      background: linear-gradient(135deg, rgba(255,255,255,.98) 0%, #f8f9ff 46%, #eaedf9 100%);
    }
    .hero::before,
    .hero::after {
      content:"";
      position:absolute;
      inset:-8%;
      pointer-events:none;
      z-index:0;
    }
    .hero::before {
      background:
        radial-gradient(circle at 16% 24%, rgba(255,255,255,.98), transparent 30%),
        radial-gradient(circle at 80% 16%, rgba(139,147,214,.34), transparent 36%),
        radial-gradient(circle at 42% 88%, rgba(184,190,232,.22), transparent 28%),
        linear-gradient(118deg, rgba(255,255,255,.96) 0%, rgba(233,236,251,.72) 54%, rgba(168,177,230,.28) 100%);
      animation: heroGradientFloat 12s ease-in-out infinite alternate;
      opacity:1;
      filter: saturate(1.06);
    }
    .hero::after {
      background:
        radial-gradient(circle at 74% 74%, rgba(124,133,205,.20), transparent 24%),
        radial-gradient(circle at 22% 70%, rgba(154,161,213,.15), transparent 22%);
      animation: heroGradientShift 16s ease-in-out infinite alternate;
      opacity:.92;
      mix-blend-mode:multiply;
    }
    .hero-grid {
      position:relative;
      z-index:1;
      min-height:0;
      display:grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
      gap: clamp(34px, 5.4vw, 82px);
      align-items:center;
    }
    .hero-copy {
      display:flex;
      flex-direction:column;
      justify-content:center;
      min-height:100%;
      max-width: 780px;
    }
    .hero-copy .display { max-width: 830px; margin-top:10px; }
    .hero-copy .display em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; color: var(--accent); }
    .hero-copy p { max-width: 650px; font-size: clamp(1.02rem, 1.55vw, 1.22rem); color: var(--muted); margin: 18px 0 0; }
    .hero-actions { margin-top: 22px; display:flex; flex-wrap:wrap; gap:14px; position:relative; z-index:3; }
    .hero .hero-actions .btn { min-width:190px; }
    .hero-credentials { margin:16px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,minmax(240px,1fr)); gap:10px 14px; max-width:760px; color:var(--ink); font-size:.84rem; }
    .hero-credentials li { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; background:rgba(255,255,255,.58); border:1px solid rgba(95,100,123,.16); border-radius:16px; backdrop-filter:blur(4px); line-height:1.35; }
    .hero-credentials li::before { content:'•'; color:var(--accent); font-weight:900; line-height:1.2; }
    .hero-meta { margin-top: 12px; display:flex; gap:10px 12px; flex-wrap:wrap; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); font-weight:760; }
    .hero-meta span { display:inline-flex; align-items:center; min-height:36px; padding:8px 12px; border-radius:999px; background:rgba(94,103,179,.08); border:1px solid rgba(94,103,179,.18); }

    .portrait-wrap { position:relative; height:clamp(400px, 68dvh, 690px); min-height:400px; max-height:690px; }
    .portrait-frame {
      position:absolute; inset:0 0 50px 46px; overflow:hidden; border-radius: 0;
      background: linear-gradient(145deg, #D7DBEF, #9AA1D5); box-shadow: var(--shadow);
    }
    .portrait-frame::after {
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(180deg, rgba(23,27,40,.00) 0%, rgba(23,27,40,.12) 48%, rgba(23,27,40,.56) 100%);
      pointer-events:none;
    }
    .profile-photo { position:relative; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center 17%; filter:saturate(.82) contrast(1.02); }
    .portrait-fallback {
      position:absolute; inset:0; display:grid; place-items:center;
      background: radial-gradient(circle at 50% 22%, #dededb 0 24%, transparent 25%),
                  radial-gradient(ellipse at 50% 72%, #171917 0 35%, transparent 36%),
                  linear-gradient(145deg,#D7DBEF,#9AA1D5);
      color:rgba(255,255,255,.8); text-align:center; padding:40px; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase;
    }
    .portrait-fallback strong { display:block; font-size:clamp(2.2rem,5vw,4.5rem); letter-spacing:-.05em; line-height:1; }
    .portrait-index { position:absolute; left:0; bottom:0; width:120px; height:120px; border-radius:50%; background:var(--accent); color:white; display:grid; place-items:center; font-size:2.1rem; font-family:Georgia,serif; z-index:2; }
    .portrait-note {
      position:absolute;
      top:18px;
      right:14px;
      bottom:18px;
      z-index:2;
      display:flex;
      align-items:flex-end;
      color:#fff;
      font-size:clamp(.92rem,1.08vw,1.04rem);
      font-weight:430;
      line-height:1;
      letter-spacing:.055em;
      writing-mode:vertical-rl;
      transform:rotate(180deg);
      text-transform:none;
      text-shadow:0 8px 22px rgba(0,0,0,.46);
      white-space:nowrap;
    }


    @keyframes heroGradientFloat {
      0% { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
      100% { transform: translate3d(-3%, 2%, 0) scale(1.08) rotate(-1deg); }
    }
    @keyframes heroGradientShift {
      0% { transform: translate3d(0,0,0) scale(1); opacity:.55; }
      100% { transform: translate3d(3%, -2%, 0) scale(1.09); opacity:1; }
    }
    .diagnostic-shell { margin-top:60px; display:grid; grid-template-columns: .9fr 1.1fr; border-top:1px solid var(--line); }
    .diagnostic-options { padding:38px 48px 38px 0; border-right:1px solid var(--line); }
    .diagnostic-result { padding:46px 0 46px 58px; position:sticky; top:110px; align-self:start; }
    .problem-option { width:100%; padding:18px 0; border:0; border-bottom:1px solid var(--line); background:transparent; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer; font-size:clamp(1rem,1.6vw,1.25rem); }
    .problem-option span:last-child { width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; transition:.25s; }
    .problem-option:hover span:last-child, .problem-option.active span:last-child { background:var(--accent); color:white; border-color:var(--accent); }
    .diagnostic-card { min-height:350px; display:flex; flex-direction:column; justify-content:space-between; }
    .diagnostic-card h3 { font-size:clamp(2rem,3.4vw,3.6rem); letter-spacing:-.045em; line-height:1; margin:14px 0 18px; }
    .diagnostic-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:32px; }
    .diagnostic-grid small { display:block; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-bottom:7px; }

    .quotes-short { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:52px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
    .quote-short { padding:32px 26px; border-right:1px solid var(--line); }
    .quote-short:last-child { border-right:0; }
    .quote-short p { margin:0 0 22px; font-size:1.04rem; }
    .quote-short small { color:var(--muted); }

    .authority-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:start; margin-top:60px; }
    .authority-sticky { position:sticky; top:110px; }
    .authority-list { border-top:1px solid rgba(255,255,255,.2); }
    .authority-row { display:grid; grid-template-columns:120px 1fr; gap:20px; padding:28px 0; border-bottom:1px solid rgba(255,255,255,.18); }
    .authority-row b { font-size:2.2rem; font-family:Georgia,serif; font-weight:400; }
    .authority-row p { margin:0; color:rgba(255,255,255,.68); }

    .segments { margin-top:60px; border-top:1px solid var(--line); }
    .segment { display:grid; grid-template-columns:100px .75fr 1fr; gap:28px; padding:34px 0; border-bottom:1px solid var(--line); transition:padding-left .25s, background .25s; }
    .segment:hover { padding-left:18px; background:rgba(255,255,255,.3); }
    .segment .num { color:var(--accent); font-family:Georgia,serif; font-size:1.35rem; }
    .segment h3 { margin:0; font-size:clamp(1.4rem,2.2vw,2rem); letter-spacing:-.035em; }
    .segment p { margin:0; color:var(--muted); }

    .problem-layout { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:start; margin-top:55px; }
    .problem-sticky { position:sticky; top:110px; }
    .frictions { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
    .frictions li { display:flex; justify-content:space-between; gap:20px; padding:21px 0; border-bottom:1px solid var(--line); font-size:clamp(1.05rem,1.7vw,1.3rem); }
    .frictions span { color:var(--muted); font-size:.8rem; }

    .agitation { padding-block: clamp(110px,15vw,220px); overflow:hidden; }
    .agitation-words { display:flex; flex-direction:column; gap:5px; }
    .agitation-word { font-size:clamp(3.8rem,9vw,9.7rem); line-height:.82; letter-spacing:-.075em; font-weight:760; opacity:.13; transform:translateX(-20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
    .agitation-word.in { opacity:1; transform:none; }
    .agitation-word:nth-child(even) { margin-left:8vw; font-family:Georgia,serif; font-weight:400; font-style:italic; }

    .principle { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:end; }
    .principle blockquote { margin:0; font-size:clamp(2.6rem,5.5vw,6rem); line-height:.95; letter-spacing:-.055em; font-weight:700; }
    .principle blockquote em { font-family:Georgia,serif; font-weight:400; color:var(--accent); }
    .journey { margin-top:80px; display:flex; align-items:center; overflow-x:auto; padding-bottom:15px; scrollbar-width:thin; }
    .journey-step { flex:0 0 auto; display:flex; align-items:center; }
    .journey-step b { width:136px; height:136px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; text-align:center; padding:20px; font-size:.9rem; }
    .journey-step::after { content:""; width:58px; height:1px; background:var(--line); }
    .journey-step:last-child::after { display:none; }

    .personal-grid { display:grid; grid-template-columns:.86fr 1.14fr; gap:80px; align-items:center; }
    .personal-photo { aspect-ratio: .84; position:relative; overflow:hidden; background:#c7c7c3; }
    .personal-photo .profile-photo { object-position:center 18%; }
    .personal-photo::after { content:"UX / UI"; position:absolute; left:18px; bottom:14px; color:white; font-size:clamp(2rem,5vw,5rem); font-weight:800; letter-spacing:-.07em; mix-blend-mode:difference; }
    .personal-copy .kicker { font-family:Georgia,serif; font-size:1.35rem; color:var(--accent); }
    .personal-copy h2 { font-size:clamp(2.5rem,5vw,5.3rem); line-height:.96; letter-spacing:-.055em; margin:16px 0 28px; }
    .personal-copy p { font-size:1.12rem; color:var(--muted); max-width:660px; }
    .credentials-list { margin:30px 0 32px; border-top:1px solid var(--line); }
    .credential { display:grid; grid-template-columns:42px 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
    .credential b { color:var(--accent); font-family:Georgia,serif; font-size:1.15rem; }
    .credential strong { display:block; color:var(--ink); margin-bottom:3px; }
    .credential span { color:var(--muted); font-size:.94rem; }

    /* METODOLOGÍA COMPACTA — dos columnas, 4 principios */
    .section--compact { padding-block: clamp(76px, 7vw, 112px); }
    .method-compact { display:grid; grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr); gap:clamp(42px,7vw,100px); align-items:start; }
    .method-intro { position:sticky; top:110px; }
    .method-intro .section-title { max-width:620px; }
    .method-intro .lead { max-width:560px; color:rgba(255,255,255,.78); }
    .method-chain { margin-top:30px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:rgba(255,255,255,.78); font-size:.83rem; letter-spacing:.05em; text-transform:uppercase; }
    .method-chain span:not(:last-child)::after { content:'→'; margin-left:8px; color:#cbd0ff; }
    .method-principles { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid rgba(255,255,255,.24); border-left:1px solid rgba(255,255,255,.24); }
    .method-principle { min-height:310px; padding:30px; border-right:1px solid rgba(255,255,255,.24); border-bottom:1px solid rgba(255,255,255,.24); display:flex; flex-direction:column; position:relative; overflow:hidden; transition:background .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); }
    .method-principle::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0) 55%); opacity:0; transition:opacity .28s var(--ease); pointer-events:none; }
    .method-principle:hover { background:rgba(255,255,255,.065); transform:translateY(-4px); box-shadow:0 16px 34px rgba(8,12,24,.18); border-color:rgba(255,255,255,.34); }
    .method-principle:hover::before { opacity:1; }
    .method-top { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
    .method-icon { width:54px; height:54px; display:grid; place-items:center; color:#d6d9ff; }
    .method-icon svg { width:48px; height:48px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
    .method-index { font-family:Georgia,serif; color:rgba(255,255,255,.52); font-size:1rem; }
    .method-principle h3 { margin:28px 0 7px; font-size:clamp(1.6rem,2.5vw,2.45rem); letter-spacing:-.045em; line-height:1; }
    .method-verbs { margin:0 0 16px; color:#d6d9ff; font-size:.82rem; font-weight:760; letter-spacing:.08em; text-transform:uppercase; }
    .method-principle p:last-child { margin:auto 0 0; color:rgba(255,255,255,.78); max-width:36ch; }

    /* SERVICIOS COMPACTOS — 4 familias, no 11 filas */
    .services-head { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr); gap:clamp(36px,7vw,100px); align-items:end; }
    .services-head .lead { margin:0; max-width:620px; }
    .service-family-grid { margin-top:52px; display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); border-left:1px solid var(--line); }
    .service-family { min-height:330px; padding:32px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; position:relative; overflow:hidden; background:rgba(255,255,255,.22); transition:background .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); }
    .service-family::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(94,103,179,.10), rgba(255,255,255,0) 58%); opacity:0; transition:opacity .28s var(--ease); pointer-events:none; }
    .service-family:hover { background:rgba(255,255,255,.72); transform:translateY(-4px); box-shadow:0 18px 36px rgba(23,27,40,.10); border-color:rgba(94,103,179,.24); }
    .service-family:hover::before { opacity:1; }
    .service-family-top { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
    .service-family-icon { width:58px; height:58px; color:var(--accent-2); display:grid; place-items:center; }
    .service-family-icon svg { width:52px; height:52px; stroke:currentColor; fill:none; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
    .service-family-index { font-family:Georgia,serif; color:var(--accent-2); font-size:1.05rem; }
    .service-family h3 { margin:28px 0 10px; font-size:clamp(1.65rem,2.6vw,2.55rem); line-height:1; letter-spacing:-.045em; }
    .service-family > p { margin:0; color:var(--muted); max-width:48ch; }
    .service-tags { margin-top:auto; padding-top:24px; display:flex; flex-wrap:wrap; gap:8px; }
    .service-tags span { padding:7px 10px; border:1px solid rgba(35,38,48,.16); border-radius:999px; color:#40455e; background:rgba(255,255,255,.56); font-size:.78rem; font-weight:690; }
    .services-note { margin-top:28px; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:24px; }
    .services-note p { margin:0; color:var(--muted); max-width:700px; }

    .process-track { margin-top:70px; position:relative; }
    .process-track::before { content:""; position:absolute; left:0; right:0; top:25px; height:1px; background:rgba(255,255,255,.26); }
    .process-steps { display:grid; grid-template-columns:repeat(9,minmax(145px,1fr)); overflow-x:auto; gap:0; padding-bottom:24px; }
    .process-step { position:relative; min-width:145px; padding:0 20px 0 0; }
    .process-dot { width:50px; height:50px; background:var(--ink); border:1px solid rgba(255,255,255,.4); border-radius:50%; display:grid; place-items:center; position:relative; z-index:1; font-size:.8rem; }
    .process-step h3 { margin:25px 0 10px; font-size:1.05rem; }
    .process-step p { margin:0; color:rgba(255,255,255,.82); font-size:.86rem; }

    .projects-grid { margin-top:65px; display:grid; grid-template-columns:1.08fr .92fr; gap:28px; align-items:start; }
    .project-card { position:relative; overflow:hidden; background:var(--paper); cursor:pointer; border:1px solid var(--line); transition:transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease); }
    .project-card::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(94,103,179,.08), rgba(255,255,255,0) 54%); opacity:0; transition:opacity .3s var(--ease); pointer-events:none; z-index:0; }
    .project-card:hover { transform:translateY(-6px) scale(1.006); box-shadow:var(--shadow); border-color:rgba(94,103,179,.24); }
    .project-card:hover::before { opacity:1; }
    .project-card:nth-child(3) { grid-column:2; }
    .project-card:nth-child(4) { grid-column:1; grid-row:2 / span 2; margin-top:-90px; }
    .project-visual { aspect-ratio: 1.35; padding:26px; overflow:hidden; position:relative; z-index:1; }
    .project-card:nth-child(4) .project-visual { aspect-ratio:.93; }
    .project-meta { padding:28px; display:grid; grid-template-columns:1fr auto; gap:30px; position:relative; z-index:1; }
    .project-meta h3 { margin:0 0 8px; font-size:clamp(1.5rem,2.4vw,2.3rem); letter-spacing:-.04em; }
    .project-meta p { margin:0; color:var(--muted); }
    .project-index { font-family:Georgia,serif; color:var(--accent); font-size:1.2rem; }
    .mock-browser { background:#dfe4fb; }
    .mock-browser .screen { height:100%; background:#fff; border-radius:12px 12px 4px 4px; box-shadow:0 20px 55px rgba(0,0,0,.12); overflow:hidden; }
    .mock-browser .bar { height:32px; border-bottom:1px solid #eee; display:flex; align-items:center; gap:6px; padding:0 12px; }
    .mock-browser .bar i { width:7px; height:7px; border-radius:50%; background:#bbb; }
    .mock-edu .hero-mini { height:43%; background:var(--accent); padding:28px; color:white; display:flex; align-items:end; font-size:clamp(1.4rem,3vw,3.5rem); font-weight:760; letter-spacing:-.05em; }
    .mock-edu .blocks { display:grid; grid-template-columns:1.3fr .7fr; gap:10px; padding:16px; }
    .mock-edu .blocks span { height:78px; background:#efede7; }
    .mock-dashboard { background:#171b28; }
    .dashboard-ui { height:100%; display:grid; grid-template-columns:24% 76%; background:#f5f3ed; border-radius:8px; overflow:hidden; }
    .dashboard-ui aside { background:#515571; }
    .dashboard-main { padding:17px; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:9px; }
    .dashboard-main span { background:white; border:1px solid #ddd8cf; border-radius:8px; }
    .dashboard-main span:nth-child(4) { grid-column:1/4; }
    .mock-institution { background:#cfd5f2; }
    .inst-ui { height:100%; background:#f8f9ff; display:grid; grid-template-rows:18% 52% 30%; }
    .inst-ui .navmini { border-bottom:1px solid #ddd; }
    .inst-ui .feature { display:grid; grid-template-columns:1.1fr .9fr; }
    .inst-ui .feature div:first-child { padding:25px; background:#eef0fb; }
    .inst-ui .feature div:last-child { background:linear-gradient(135deg,#7c87c7,#515571); }
    .inst-ui .footer-mini { background:#171b28; }
    .mock-app { background:#d4d8ee; display:grid; place-items:center; }
    .phone { width:58%; height:92%; background:#232840; border-radius:34px; padding:8px; box-shadow:0 18px 40px rgba(0,0,0,.24); transform:rotate(4deg); }
    .phone-screen { height:100%; border-radius:27px; background:#f8f9ff; padding:18px 12px; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
    .phone-screen .pill { width:42%; height:8px; background:#c2c8e5; border-radius:8px; margin:0 auto 10px; }
    .phone-screen .app-hero { height:26%; background:#515571; border-radius:16px; }
    .phone-screen .app-row { height:13%; background:#dfe4fb; border-radius:12px; }

    .logos { margin-top:52px; display:grid; grid-template-columns:repeat(6,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
    .logo-placeholder { min-height:115px; display:grid; place-items:center; border-right:1px solid var(--line); border-bottom:1px solid var(--line); color:#6d706c; font-weight:800; letter-spacing:-.03em; }

    .testimonial-rail { margin-top:60px; display:grid; grid-auto-flow:column; grid-auto-columns:min(520px,88vw); gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:16px; }
    .testimonial { scroll-snap-align:start; background:var(--paper); border:1px solid var(--line); padding:40px; min-height:340px; display:flex; flex-direction:column; justify-content:space-between; }
    .testimonial blockquote { margin:0; font-size:clamp(1.3rem,2vw,1.75rem); line-height:1.35; letter-spacing:-.025em; }
    .testimonial footer { border-top:1px solid var(--line); padding-top:20px; display:flex; justify-content:space-between; gap:20px; color:var(--muted); }

    .faq-list { margin-top:60px; border-top:1px solid var(--line); }
    .faq-item { border-bottom:1px solid var(--line); }
    .faq-question { width:100%; border:0; background:transparent; display:grid; grid-template-columns:1fr 40px; gap:20px; align-items:center; text-align:left; padding:27px 0; cursor:pointer; font-size:clamp(1.15rem,2vw,1.55rem); font-weight:650; }
    .faq-question .plus { font-size:1.65rem; transition:transform .25s; }
    .faq-item.open .plus { transform:rotate(45deg); }
    .faq-answer { max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
    .faq-answer p { max-width:820px; margin:0 0 28px; color:var(--muted); }
    .faq-item.open .faq-answer { max-height:230px; }

    .newsletter-shell { display:grid; grid-template-columns:1.2fr .8fr; gap:70px; align-items:end; }
    .newsletter-shell h2 { font-size:clamp(3rem,6.8vw,7rem); line-height:.9; letter-spacing:-.065em; margin:15px 0 0; }
    .inline-form { display:block; }
    .newsletter-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:stretch; }
    .newsletter-row .field, .newsletter-row .btn { height:54px; min-height:54px; }
    .newsletter-row .btn { margin:0; min-width:148px; align-self:stretch; }
    .field, .textarea, .select {
      width:100%; border:1px solid var(--line); background:rgba(255,255,255,.58); color:var(--ink); border-radius:12px; min-height:52px; padding:13px 15px; transition:border .2s, box-shadow .2s, background .2s;
    }
    .field:focus, .textarea:focus, .select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(23,59,50,.1); outline:0; background:white; }
    .textarea { min-height:150px; resize:vertical; }
    label { display:block; font-size:.82rem; font-weight:700; margin-bottom:8px; }
    .help, .error { display:block; min-height:18px; margin-top:6px; font-size:.76rem; }
    .error { color:#a3312b; }
    .form-status { margin-top:14px; font-size:.88rem; min-height:24px; }

    .contact-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:80px; align-items:start; margin-top:58px; }
    .contact-aside { position:sticky; top:110px; }
    .contact-aside p { color:var(--muted); font-size:1.08rem; }
    .contact-details { margin-top:30px; border-top:1px solid var(--line); }
    .contact-details div { padding:16px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; }
    .contact-form { display:grid; grid-template-columns:1fr 1fr; gap:22px 18px; }
    .form-group--wide { grid-column:1/-1; }

    .final-cta { overflow:hidden; }
    .final-grid { min-height:auto; display:grid; grid-template-columns:1fr; gap:24px; align-items:end; }
    .final-copy { padding-block:100px; position:relative; z-index:2; }
    .final-copy h2 { margin:16px 0 30px; max-width:850px; font-size:clamp(3rem,7vw,7.5rem); line-height:.88; letter-spacing:-.067em; }
    .final-portrait { display:none; }
    .final-portrait .portrait-frame { inset:50px -6vw 0 0; border-radius:220px 220px 0 0; background:#cfd4ef; }
    .final-portrait .profile-photo { object-position:center 17%; }

    .site-footer { padding:40px 0; background:#101210; color:white; }
    .footer-grid { display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; }
    .footer-links { display:flex; flex-wrap:wrap; gap:22px; color:rgba(255,255,255,.62); font-size:.85rem; }

    .floating-actions { position:fixed; right:20px; bottom:20px; z-index:1050; display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
    .float-btn { width:56px; height:56px; border-radius:50%; border:0; box-shadow:0 12px 35px rgba(0,0,0,.2); display:grid; place-items:center; cursor:pointer; font-weight:850; transition:transform .22s var(--ease), box-shadow .22s var(--ease), opacity .22s var(--ease), visibility .22s; }
    .float-btn svg { width:25px; height:25px; display:block; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
    .float-btn:hover { transform:translateY(-4px) scale(1.04); box-shadow:0 16px 38px rgba(0,0,0,.24); }
    .whatsapp { background:#176b4f; color:white; border:2px solid white; animation:attentionBounce 6.4s ease-in-out infinite; }
    .whatsapp svg { width:27px; height:27px; fill:currentColor; stroke:none; }
    .assistant-toggle { background:var(--ink); color:white; animation:attentionBounce 6.4s ease-in-out 3.2s infinite; }
    .back-to-top { background:rgba(255,255,255,.96); color:var(--accent-2); border:1px solid rgba(94,103,179,.24); opacity:0; visibility:hidden; transform:translateY(10px) scale(.92); }
    .back-to-top.visible { opacity:1; visibility:visible; transform:none; }
    .back-to-top:hover { background:var(--white); color:var(--ink); }
    @keyframes attentionBounce {
      0%, 72%, 100% { transform:translateY(0) scale(1); }
      76% { transform:translateY(-5px) scale(1.025); }
      80% { transform:translateY(0) scale(1); }
      84% { transform:translateY(-2px) scale(1.012); }
      88% { transform:translateY(0) scale(1); }
    }

    /* Micro-CTA rotativo: persuasión ética, sin falsa escasez ni actividad inventada */
    .action-nudge {
      position:fixed;
      left:20px;
      bottom:20px;
      z-index:1040;
      width:min(390px,calc(100vw - 40px));
      background:rgba(248,249,255,.96);
      color:var(--ink);
      border:1px solid rgba(94,103,179,.20);
      border-radius:20px;
      box-shadow:0 20px 55px rgba(23,27,40,.16);
      backdrop-filter:blur(14px);
      padding:18px 18px 16px;
      opacity:0;
      visibility:hidden;
      transform:translateY(16px) scale(.985);
      transition:opacity .34s var(--ease), transform .34s var(--ease), visibility .34s;
    }
    .action-nudge.show { opacity:1; visibility:visible; transform:none; }
    .action-nudge.nudge-swap .action-nudge-head,
    .action-nudge.nudge-swap .action-nudge-actions { animation:nudgeContentSwap .48s var(--ease) both; }
    @keyframes nudgeContentSwap {
      0% { opacity:.18; transform:translateY(8px); }
      100% { opacity:1; transform:none; }
    }
    .action-nudge-head { display:flex; align-items:flex-start; gap:12px; padding-right:32px; }
    .action-nudge-icon { flex:0 0 38px; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:rgba(94,103,179,.10); color:var(--accent-2); }
    .action-nudge-icon svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
    .action-nudge-copy { min-width:0; }
    .action-nudge-kicker { display:block; margin:0 0 3px; font-size:.70rem; font-weight:800; text-transform:uppercase; letter-spacing:.11em; color:var(--accent-2); }
    .action-nudge h3 { margin:0; font-size:1.02rem; line-height:1.22; letter-spacing:-.015em; }
    .action-nudge p { margin:8px 0 0; color:var(--muted); font-size:.88rem; line-height:1.45; }
    .action-nudge-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
    .action-nudge-cta { min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 14px; border-radius:999px; background:var(--accent-2); color:#fff; font-size:.82rem; font-weight:760; border:1px solid var(--accent-2); cursor:pointer; transition:transform .2s, background .2s; }
    .action-nudge-cta:hover { transform:translateY(-2px); background:var(--ink); border-color:var(--ink); }
    .action-nudge-dots { display:flex; gap:5px; align-items:center; }
    .action-nudge-dots i { width:6px; height:6px; border-radius:50%; background:rgba(95,100,123,.25); transition:width .2s, background .2s; }
    .action-nudge-dots i.active { width:18px; border-radius:999px; background:var(--accent); }
    .action-nudge-close { position:absolute; top:10px; right:10px; width:30px; height:30px; border:0; border-radius:50%; background:transparent; color:var(--muted); cursor:pointer; font-size:1.1rem; }
    .action-nudge-close:hover { background:rgba(94,103,179,.08); color:var(--ink); }
    .assistant-panel { width:min(370px,calc(100vw - 32px)); background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:22px; box-shadow:0 24px 70px rgba(0,0,0,.2); overflow:hidden; transform-origin:bottom right; display:none; }
    .assistant-panel.open { display:block; animation:pop .25s var(--ease); }
    @keyframes pop { from { opacity:0; transform:scale(.96) translateY(8px); } to { opacity:1; transform:none; } }
    .assistant-head { padding:18px 18px 16px; background:var(--accent); color:white; display:flex; justify-content:space-between; gap:20px; align-items:center; }
    .assistant-head b { display:block; }
    .assistant-head small { color:rgba(255,255,255,.7); }
    .assistant-close { width:34px; height:34px; border:1px solid rgba(255,255,255,.26); background:transparent; border-radius:50%; color:white; cursor:pointer; }
    .assistant-body { padding:18px; max-height:480px; overflow:auto; }
    .assistant-message { background:#eceffd; padding:12px 14px; border-radius:14px 14px 14px 3px; margin-bottom:14px; font-size:.9rem; }
    .quick-actions { display:flex; flex-wrap:wrap; gap:8px; }
    .quick-action { border:1px solid var(--line); background:white; border-radius:999px; padding:9px 12px; cursor:pointer; font-size:.8rem; }
    .quick-action:hover { border-color:var(--accent); color:var(--accent); }

    .modal { position:fixed; inset:0; z-index:2000; background:rgba(9,12,10,.75); display:none; place-items:center; padding:24px; backdrop-filter:blur(10px); }
    .modal.open { display:grid; }
    .modal-dialog { width:min(980px,100%); max-height:min(850px,92vh); overflow:auto; background:var(--paper); border-radius:22px; box-shadow:var(--shadow); }
    .modal-top { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; gap:20px; padding:20px 24px; background:rgba(251,250,247,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
    .modal-close { width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:transparent; cursor:pointer; }
    .modal-content { padding:36px; }
    .modal-content h2 { font-size:clamp(2.3rem,5vw,4.8rem); line-height:.95; letter-spacing:-.055em; margin:8px 0 30px; }
    .case-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
    .case-block { border-top:1px solid var(--line); padding-top:18px; }
    .case-block h3 { margin:0 0 8px; font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
    .case-block p { margin:0; }

    /* Animación editorial ligera: entrada breve, sin movimientos bruscos */
    .reveal {
      opacity:0;
      transform:translateY(14px);
      filter:blur(2px);
      transition:
        opacity .62s var(--ease) var(--reveal-delay, 0ms),
        transform .62s var(--ease) var(--reveal-delay, 0ms),
        filter .62s var(--ease) var(--reveal-delay, 0ms);
      will-change:opacity, transform;
    }
    .reveal.is-visible { opacity:1; transform:translateY(0); filter:blur(0); }

    /* Entrada inicial del Hero: cada línea aparece de forma secuencial */
    .hero-copy.reveal.is-visible > * {
      animation:heroTextIn .68s var(--ease) both;
    }
    .hero-copy.reveal.is-visible > *:nth-child(1) { animation-delay:.04s; }
    .hero-copy.reveal.is-visible > *:nth-child(2) { animation-delay:.10s; }
    .hero-copy.reveal.is-visible > *:nth-child(3) { animation-delay:.17s; }
    .hero-copy.reveal.is-visible > *:nth-child(4) { animation-delay:.24s; }
    .hero-copy.reveal.is-visible > *:nth-child(5) { animation-delay:.31s; }
    .hero-copy.reveal.is-visible > *:nth-child(6) { animation-delay:.38s; }
    .portrait-wrap.reveal.is-visible .portrait-frame { animation:portraitIn .82s var(--ease) both; }
    .portrait-wrap.reveal.is-visible .portrait-note { animation:portraitLabelIn .72s var(--ease) .35s both; }

    @keyframes heroTextIn {
      from { opacity:0; transform:translateY(12px); }
      to { opacity:1; transform:translateY(0); }
    }
    @keyframes portraitIn {
      from { opacity:0; transform:translateY(10px) scale(.992); }
      to { opacity:1; transform:translateY(0) scale(1); }
    }

    /* Entrada visible para los textos principales de cada sección.
       Las clases se añaden con JS para evitar ocultar contenido si JS no carga. */
    .section-text-reveal {
      opacity:0;
      transform:translateY(30px);
      filter:blur(5px);
      clip-path:inset(0 0 42% 0);
      transition:
        opacity .82s var(--ease) var(--text-delay, 0ms),
        transform .82s var(--ease) var(--text-delay, 0ms),
        filter .82s var(--ease) var(--text-delay, 0ms),
        clip-path .9s var(--ease) var(--text-delay, 0ms);
      will-change:opacity,transform,filter,clip-path;
    }
    .section-text-reveal.text-visible {
      opacity:1;
      transform:translateY(0);
      filter:blur(0);
      clip-path:inset(0 0 0 0);
    }
    .eyebrow.section-text-reveal {
      transform:translateX(-20px);
      filter:blur(2px);
      clip-path:none;
    }
    .eyebrow.section-text-reveal.text-visible { transform:translateX(0); }
    .lead.section-text-reveal {
      transform:translateY(18px);
      filter:blur(2px);
      clip-path:none;
    }
    .lead.section-text-reveal.text-visible { transform:translateY(0); }

    /* Pequeño barrido tipográfico en títulos, visible sin ser invasivo */
    .section-title.section-text-reveal { position:relative; }
    .section-title.section-text-reveal::after {
      content:"";
      position:absolute;
      left:0;
      bottom:-10px;
      width:min(120px,22vw);
      height:2px;
      background:currentColor;
      opacity:.34;
      transform:scaleX(0);
      transform-origin:left center;
      transition:transform .72s var(--ease) calc(var(--text-delay, 0ms) + 360ms);
    }
    .section-title.section-text-reveal.text-visible::after { transform:scaleX(1); }
    @keyframes portraitLabelIn {
      from { opacity:0; transform:rotate(180deg) translateY(10px); }
      to { opacity:1; transform:rotate(180deg) translateY(0); }
    }


    /* =========================================================
       ANIMACIÓN TIPOGRÁFICA POR SECCIÓN — visible y controlada
       Cada sección dispara su propia secuencia al entrar al viewport.
       ========================================================= */
    .section-motion-eyebrow,
    .section-motion-title,
    .section-motion-lead {
      opacity:0;
      will-change:opacity, transform, filter;
    }
    .section-motion-eyebrow { transform:translateX(-26px); filter:blur(2px); }
    .section-motion-title { transform:translateY(42px) scale(.992); filter:blur(7px); transform-origin:left bottom; }
    .section-motion-lead { transform:translateY(24px); filter:blur(3px); }

    .section-motion-active .section-motion-eyebrow {
      animation:sectionEyebrowIn .68s var(--ease) both;
    }
    .section-motion-active .section-motion-title {
      animation:sectionTitleIn .92s var(--ease) .12s both;
    }
    .section-motion-active .section-motion-lead {
      animation:sectionLeadIn .76s var(--ease) .34s both;
    }
    .section-motion-title::after {
      content:"";
      display:block;
      width:min(120px,22vw);
      height:2px;
      margin-top:18px;
      background:currentColor;
      opacity:.28;
      transform:scaleX(0);
      transform-origin:left center;
    }
    .section-motion-active .section-motion-title::after {
      animation:sectionRuleIn .72s var(--ease) .58s both;
    }
    @keyframes sectionEyebrowIn {
      from { opacity:0; transform:translateX(-26px); filter:blur(2px); }
      to { opacity:1; transform:translateX(0); filter:blur(0); }
    }
    @keyframes sectionTitleIn {
      from { opacity:0; transform:translateY(42px) scale(.992); filter:blur(7px); }
      to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
    }
    @keyframes sectionLeadIn {
      from { opacity:0; transform:translateY(24px); filter:blur(3px); }
      to { opacity:1; transform:translateY(0); filter:blur(0); }
    }
    @keyframes sectionRuleIn {
      from { transform:scaleX(0); }
      to { transform:scaleX(1); }
    }


    /* =========================================================
       ANIMACIÓN DE TEXTO ROBUSTA — se activa por el elemento real
       ========================================================= */
    .text-entry {
      opacity:0;
      transform:translateY(48px);
      filter:blur(8px);
      clip-path:inset(0 0 34% 0);
      transition:
        opacity .9s var(--ease) var(--entry-delay,0ms),
        transform .9s var(--ease) var(--entry-delay,0ms),
        filter .9s var(--ease) var(--entry-delay,0ms),
        clip-path .95s var(--ease) var(--entry-delay,0ms);
      will-change:opacity,transform,filter,clip-path;
    }
    .text-entry.text-in {
      opacity:1;
      transform:translateY(0);
      filter:blur(0);
      clip-path:inset(0 0 0 0);
    }
    .eyebrow.text-entry {
      transform:translateX(-28px);
      filter:blur(3px);
      clip-path:none;
      transition-duration:.72s;
    }
    .eyebrow.text-entry.text-in { transform:translateX(0); filter:blur(0); }
    .lead.text-entry {
      transform:translateY(24px);
      filter:blur(3px);
      clip-path:none;
      transition-duration:.78s;
    }
    .lead.text-entry.text-in { transform:translateY(0); filter:blur(0); }



    /* =========================================================
       REVISIÓN EDITORIAL: AUDIENCIA + FRICCIÓN
       ========================================================= */
    .section-title--compact { font-size: clamp(2.2rem, 4.4vw, 4.65rem); }
    .audience-friction-grid {
      display:grid;
      grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
      gap:clamp(50px,7vw,110px);
      align-items:start;
    }
    .audience-pane { position:sticky; top:110px; }
    .audience-list { margin-top:44px; border-top:1px solid var(--line); }
    .audience-item { display:grid; grid-template-columns:46px 1fr; gap:18px; padding:21px 0; border-bottom:1px solid var(--line); align-items:start; }
    .audience-icon { width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(63,69,111,.34); border-radius:50%; color:var(--accent-2); font-weight:800; }
    .audience-item strong { display:block; font-size:1.05rem; margin-bottom:4px; }
    .audience-item p { margin:0; color:var(--muted); font-size:.93rem; }
    .friction-pane { background:var(--ink); color:var(--white); padding:clamp(32px,5vw,64px); border-radius:28px; box-shadow:var(--shadow); }
    .friction-pane .eyebrow { color:#dfe2ff; }
    .friction-pane h3 { margin:20px 0 20px; font-size:clamp(2.25rem,4.2vw,4.7rem); line-height:.96; letter-spacing:-.052em; max-width:720px; }
    .friction-pane > p { color:rgba(255,255,255,.78); font-size:1.08rem; max-width:690px; }
    .friction-map { margin-top:36px; display:grid; grid-template-columns:1fr 1fr; border-top:1px solid rgba(255,255,255,.2); border-left:1px solid rgba(255,255,255,.2); }
    .friction-node { min-height:98px; display:flex; gap:14px; align-items:center; padding:18px; border-right:1px solid rgba(255,255,255,.2); border-bottom:1px solid rgba(255,255,255,.2); }
    .friction-node span { width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; }
    .friction-node b { font-size:.94rem; }
    .friction-cta { margin-top:34px; padding-top:28px; border-top:1px solid rgba(255,255,255,.2); }
    .friction-cta p { margin:0 0 20px; color:rgba(255,255,255,.85); }
    .friction-pane .btn--primary { background:#f4f5ff; color:#252a45; border-color:#f4f5ff; }
    .friction-pane .btn--primary:hover { background:#ffffff; color:#171b28; }

    /* =========================================================
       ENFOQUE GRÁFICO — PERSONAS COMO NÚCLEO DE DECISIÓN
       ========================================================= */
    .approach-grid {
      display:grid;
      grid-template-columns:minmax(470px,.98fr) minmax(0,1.02fr);
      gap:clamp(56px,8vw,118px);
      align-items:center;
    }
    .approach-system {
      min-height:570px;
      position:relative;
      display:grid;
      grid-template-columns:220px minmax(0,1fr);
      align-items:center;
      gap:0;
      padding:52px 34px 52px 22px;
      border:1px solid rgba(63,69,111,.13);
      border-radius:34px;
      background:
        radial-gradient(circle at 20% 50%, rgba(94,103,179,.14), transparent 32%),
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(240,242,253,.78));
      overflow:hidden;
      box-shadow:0 26px 70px rgba(42,45,70,.08);
    }
    .approach-system::after {
      content:"";
      position:absolute;
      width:430px;
      height:430px;
      border-radius:50%;
      border:1px solid rgba(94,103,179,.11);
      left:-220px;
      top:50%;
      transform:translateY(-50%);
      pointer-events:none;
    }
    .approach-hub {
      width:190px;
      height:190px;
      border-radius:50%;
      position:relative;
      z-index:3;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
      color:#fff;
      background:linear-gradient(145deg,#6972c1 0%,#3f456f 72%);
      box-shadow:0 22px 50px rgba(63,69,111,.28), 0 0 0 12px rgba(94,103,179,.08);
    }
    .approach-hub-index {
      position:absolute;
      top:-14px;
      left:-8px;
      width:46px;
      height:46px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:#fff;
      color:var(--accent-2);
      border:1px solid rgba(63,69,111,.16);
      font:700 .76rem/1 Inter, sans-serif;
      box-shadow:0 10px 24px rgba(42,45,70,.12);
    }
    .approach-hub-icon { width:58px; height:58px; margin-bottom:10px; }
    .approach-hub-icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
    .approach-hub strong { font-size:1.22rem; letter-spacing:-.02em; }
    .approach-hub small { max-width:140px; margin-top:7px; color:rgba(255,255,255,.78); font-size:.72rem; line-height:1.35; }

    .approach-branches {
      position:relative;
      z-index:2;
      display:grid;
      gap:12px;
      margin-left:-2px;
    }
    .approach-branch {
      min-height:92px;
      position:relative;
      display:grid;
      grid-template-columns:46px 48px 1fr;
      gap:14px;
      align-items:center;
      padding:13px 18px 13px 64px;
      border:1px solid rgba(63,69,111,.12);
      border-radius:18px;
      background:rgba(255,255,255,.78);
      transition:transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease);
    }
    .approach-branch:hover {
      transform:translateX(6px);
      border-color:rgba(94,103,179,.26);
      background:#fff;
      box-shadow:0 14px 32px rgba(42,45,70,.09);
    }
    .branch-line {
      position:absolute;
      left:-52px;
      top:50%;
      width:52px;
      height:1px;
      background:linear-gradient(90deg,rgba(94,103,179,.5),rgba(94,103,179,.12));
    }
    .branch-line::before {
      content:"";
      position:absolute;
      left:-3px;
      top:-3px;
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 5px rgba(94,103,179,.09);
    }
    .branch-number {
      position:absolute;
      left:16px;
      top:16px;
      color:#858bac;
      font-size:.68rem;
      font-weight:800;
      letter-spacing:.08em;
    }
    .branch-icon {
      width:46px;
      height:46px;
      display:grid;
      place-items:center;
      border-radius:14px;
      color:var(--accent-2);
      background:#e8ebfb;
    }
    .branch-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
    .approach-branch b { display:block; font-size:1rem; letter-spacing:-.01em; }
    .approach-branch small { display:block; margin-top:4px; color:var(--muted); font-size:.76rem; }
    .approach-caption {
      position:absolute;
      left:28px;
      bottom:24px;
      display:flex;
      align-items:center;
      gap:10px;
      color:#686e91;
      font-size:.72rem;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.06em;
    }
    .approach-caption i { width:64px; height:1px; background:rgba(94,103,179,.32); }

    .approach-copy blockquote { margin:18px 0 0; font-size:clamp(3rem,5.5vw,6.1rem); line-height:.93; letter-spacing:-.058em; font-weight:720; }
    .approach-copy blockquote em { font-family:Georgia,serif; font-weight:400; color:var(--accent-2); }
    .approach-flow { margin-top:36px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
    .approach-flow span { padding:10px 14px; border:1px solid rgba(63,69,111,.28); border-radius:999px; color:#343955; font-weight:720; font-size:.84rem; background:rgba(255,255,255,.62); }
    .approach-flow i { color:var(--accent-2); font-style:normal; }

    /* =========================================================
       PROCESO UX VISUAL EN 3 MOMENTOS
       ========================================================= */
    .process-journey { margin-top:70px; display:grid; grid-template-columns:repeat(3,1fr); position:relative; border-top:1px solid rgba(255,255,255,.3); }
    .process-phase { padding:34px clamp(20px,3vw,42px) 16px 0; position:relative; }
    .process-phase + .process-phase { padding-left:clamp(20px,3vw,42px); border-left:1px solid rgba(255,255,255,.24); }
    .process-phase-head { display:flex; align-items:flex-end; gap:16px; margin-bottom:32px; }
    .process-phase-index { font-family:Georgia,serif; font-size:3.4rem; line-height:1; color:rgba(255,255,255,.42); }
    .process-phase-head h3 { margin:0; font-size:clamp(1.35rem,2vw,2rem); letter-spacing:-.03em; }
    .process-phase-head small { display:block; color:rgba(255,255,255,.7); margin-top:5px; }
    .process-step-visual { display:grid; grid-template-columns:54px 1fr; gap:15px; align-items:start; padding:18px 0; border-top:1px solid rgba(255,255,255,.18); }
    .process-step-visual:last-child { border-bottom:1px solid rgba(255,255,255,.18); }
    .process-icon { width:50px; height:50px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3); color:#fff; }
    .process-icon svg { width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .process-step-visual h4 { margin:2px 0 5px; font-size:1.05rem; }
    .process-step-visual p { margin:0; color:rgba(255,255,255,.72); font-size:.86rem; }
    .process-phase-arrow { position:absolute; top:-16px; right:-15px; width:32px; height:32px; border-radius:50%; background:#f4f5ff; color:#353a60; display:grid; place-items:center; z-index:2; font-weight:800; }
    .process-phase:last-child .process-phase-arrow { display:none; }


    /* ENTREGABLES: sustituye testimonios demostrativos por valor verificable */
    .deliverables-grid { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(55px,8vw,120px); align-items:start; }
    .deliverables-intro { position:sticky; top:110px; }
    .deliverables-list { border-top:1px solid var(--line); }
    .deliverables-list article { display:grid; grid-template-columns:70px 1fr; gap:20px; padding:28px 0; border-bottom:1px solid var(--line); }
    .deliverables-list article > span { font-family:Georgia,serif; font-size:1.45rem; color:var(--accent-2); }
    .deliverables-list h3 { margin:0 0 7px; font-size:clamp(1.25rem,1.9vw,1.65rem); letter-spacing:-.025em; }
    .deliverables-list p { margin:0; color:var(--muted); }

    @media (max-width: 1050px) {
      .nav { position:fixed; inset:var(--header-h) 0 auto 0; padding:24px 20px 30px; background:var(--bg); border-bottom:1px solid var(--line); display:none; flex-direction:column; align-items:stretch; }
      .nav.open { display:flex; }
      .nav .btn { width:100%; }
      .menu-toggle { display:grid; place-items:center; }
      .hero-grid, .personal-grid, .contact-grid, .principle, .authority-grid, .newsletter-shell, .audience-friction-grid, .approach-grid, .deliverables-grid { grid-template-columns:1fr; }
      .deliverables-intro { position:relative; top:auto; }
      .audience-pane { position:relative; top:auto; }
      .approach-system { max-width:720px; width:100%; justify-self:center; }
      .process-journey { grid-template-columns:1fr; border-top:0; }
      .process-phase, .process-phase + .process-phase { padding:28px 0; border-left:0; border-top:1px solid rgba(255,255,255,.26); }
      .process-phase-arrow { top:auto; bottom:-16px; right:calc(50% - 16px); transform:rotate(90deg); }
      .hero { min-height:calc(100vh - var(--header-h)); min-height:calc(100svh - var(--header-h)); min-height:calc(100dvh - var(--header-h)); }
      .portrait-wrap { height:clamp(480px,62dvh,650px); min-height:480px; max-height:650px; max-width:650px; width:100%; justify-self:end; }
      .diagnostic-shell { grid-template-columns:1fr; }
      .diagnostic-options { border-right:0; padding-right:0; }
      .diagnostic-result { position:relative; top:auto; padding:46px 0 0; }
      .quotes-short { grid-template-columns:1fr 1fr; }
      .quote-short:nth-child(2) { border-right:0; }
      .quote-short:nth-child(-n+2) { border-bottom:1px solid var(--line); }
      .authority-sticky, .problem-sticky, .contact-aside { position:relative; top:auto; }
      .segment { grid-template-columns:70px .8fr 1.2fr; }
      .problem-layout { gap:50px; }
      .project-card:nth-child(4) { margin-top:0; }
      .logos { grid-template-columns:repeat(3,1fr); }
      .service { grid-template-columns:70px .9fr 1.1fr 32px; }
      .final-grid { grid-template-columns:1fr; }
      .method-compact, .services-head { grid-template-columns:1fr; }
      .method-intro { position:relative; top:auto; }
    }

    @media (max-width: 760px) {
      :root { --header-h: 68px; }
      .container { width:min(calc(100% - 28px),var(--container)); }
      .section { padding-block:clamp(72px,18vw,105px); }
      .section--compact { padding-block:clamp(64px,15vw,88px); }
      .method-principle, .service-family { padding:24px; }
      .display { font-size:clamp(3.05rem,15vw,5.3rem); }
      .section-title { font-size:clamp(2.25rem,11vw,4rem); }
      .hero-grid { gap:32px; min-height:0; align-content:center; }
      .hero-copy p { font-size:1.02rem; }
      .hero-credentials { grid-template-columns:1fr; max-width:100%; }
      .hero-meta { margin-top:12px; gap:10px; }
      .portrait-wrap { height:clamp(360px,52dvh,460px); min-height:360px; max-height:460px; }
      .portrait-frame { inset:0 0 45px 26px; border-radius:0; }
      .portrait-index { width:90px; height:90px; }
      .portrait-note { top:18px; right:12px; bottom:18px; left:auto; font-size:.92rem; max-width:none; }

      .hero-actions { gap:12px; }
      .hero-credentials li { font-size:.82rem; }
      .diagnostic-grid { grid-template-columns:1fr; }
      .quotes-short { grid-template-columns:1fr; }
      .quote-short, .quote-short:nth-child(2) { border-right:0; border-bottom:1px solid var(--line); }
      .quote-short:last-child { border-bottom:0; }
      .authority-row { grid-template-columns:80px 1fr; }
      .segment { grid-template-columns:52px 1fr; }
      .segment p { grid-column:2; }
      .problem-layout { grid-template-columns:1fr; }
      .friction-map { grid-template-columns:1fr; }
      .approach-system { min-height:540px; grid-template-columns:170px minmax(0,1fr); padding:38px 22px 38px 18px; }
      .approach-hub { width:150px; height:150px; }
      .approach-branch { min-height:82px; padding-left:56px; grid-template-columns:42px 1fr; }
      .branch-icon { width:42px; height:42px; }
      
      .agitation-word:nth-child(even) { margin-left:0; }
      .journey-step b { width:112px; height:112px; }
      .journey-step::after { width:32px; }
      .personal-grid { gap:45px; }
      .method-compact, .services-head { grid-template-columns:1fr; }
      .method-intro { position:relative; top:auto; }
      .method-principles, .service-family-grid { grid-template-columns:1fr; }
      .method-principle, .service-family { min-height:auto; }
      .services-note { align-items:flex-start; flex-direction:column; }
      .services-note .btn { width:100%; }
      .projects-grid { grid-template-columns:1fr; }
      .project-card:nth-child(3), .project-card:nth-child(4) { grid-column:auto; grid-row:auto; margin-top:0; }
      .project-card:nth-child(4) .project-visual { aspect-ratio:1.2; }
      .logos { grid-template-columns:repeat(2,1fr); }
      .testimonial { padding:28px; }
      .newsletter-row { grid-template-columns:1fr; }
      .newsletter-row .field, .newsletter-row .btn { width:100%; }
      .contact-form { grid-template-columns:1fr; }
      .form-group--wide { grid-column:auto; }
      .final-grid { display:block; }
      .final-copy { padding:80px 0 20px; }
      .final-portrait { min-height:440px; }
      .final-portrait .portrait-frame { inset:20px -15vw 0 10vw; }
      .footer-grid { align-items:flex-start; flex-direction:column; }
      .case-grid { grid-template-columns:1fr; }
      .modal { padding:10px; }
      .modal-content { padding:26px 20px 30px; }
      .floating-actions { right:12px; bottom:12px; }
      .action-nudge { left:12px; bottom:12px; width:min(360px,calc(100vw - 90px)); padding:15px 15px 14px; }
      .action-nudge p { font-size:.82rem; }
    }

    @media (max-height: 720px) and (min-width: 761px) {
      .hero { padding-block:16px; }
      .hero-copy .display { font-size:clamp(2.65rem,6.2vw,5.7rem); }
      .hero-copy p { margin-top:14px; font-size:1rem; }
      .hero-actions { margin-top:16px; }
      .hero-credentials { margin-top:12px; }
      .hero-meta { margin-top:10px; }
      .portrait-wrap { height:clamp(380px,60dvh,560px); min-height:380px; max-height:560px; }
    }

    @media (max-width: 430px) {
      .hero-actions .btn { width:100%; }
      .hero-copy .display { margin-top:8px; }
      .hero-credentials li { padding:9px 11px; }
      .hero-meta span { width:100%; justify-content:center; }
      .hero-credentials { grid-template-columns:1fr; }
      .approach-system { min-height:auto; display:block; padding:28px 18px 26px; }
      .approach-hub { width:154px; height:154px; margin:0 auto 32px; }
      .approach-branches { margin-left:0; gap:10px; }
      .approach-branch { padding:14px 14px 14px 54px; grid-template-columns:42px 1fr; }
      .branch-line { display:none; }
      .approach-caption { display:none; }
      .portrait-wrap { height:clamp(330px,48dvh,420px); min-height:330px; max-height:420px; }
      .portrait-note { top:16px; right:10px; bottom:16px; left:auto; max-width:none; font-size:.86rem; }
      .diagnostic-card { min-height:0; }
      .logo-placeholder { min-height:90px; font-size:.82rem; }
    }

    /* WCAG AA: texto normal usa relaciones de contraste >= 4.5:1;
       CTAs principales usan blanco sobre #515571 (~7.27:1). */

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior:auto; }
      *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
      .hero::before, .hero::after { animation:none !important; }
      .reveal, .agitation-word, .section-text-reveal, .section-motion-eyebrow, .section-motion-title, .section-motion-lead { opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; }
      .text-entry { opacity:0 !important; transform:none !important; filter:none !important; clip-path:none !important; transition:opacity .22s linear !important; }
      .text-entry.text-in { opacity:1 !important; }
      .section-title.section-text-reveal::after, .section-motion-title::after { transform:scaleX(1) !important; transition:none !important; animation:none !important; }
      .hero-copy.reveal.is-visible > *, .portrait-wrap.reveal.is-visible .portrait-frame, .portrait-wrap.reveal.is-visible .portrait-note { animation:none !important; }
    }

/* =========================================================
   SEGURIDAD / DESPLIEGUE: clases sin estilos inline
   ========================================================= */
.footer-specialty { color: rgba(255,255,255,.78); }
.dynamic-cta-wrap { margin-top: 32px; }
.case-block--wide { grid-column: 1 / -1; }
.visit-counter {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  color:rgba(255,255,255,.82);
  font-size:.78rem;
  white-space:nowrap;
}
.visit-counter::before {
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#cbd0ff;
  box-shadow:0 0 0 4px rgba(203,208,255,.10);
}
.visit-counter strong { color:#fff; font-variant-numeric: tabular-nums; }


/* Formularios conectados al servidor */
.hp-field {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
.form-privacy { margin:10px 0 0; font-size:.78rem; line-height:1.45; color:var(--muted); }
.section--accent .form-privacy { color:rgba(255,255,255,.78); }
.form-status.is-success { color:#1f6b45; font-weight:700; }
.form-status.is-error { color:#9a2f2a; font-weight:700; }
.section--accent .form-status.is-success { color:#ffffff; }
.section--accent .form-status.is-error { color:#ffe0dd; }
.btn[disabled] { opacity:.68; cursor:wait; transform:none !important; }