:root {
      --navy: #213450;
      --pink: #E481A8;
      --blue: #B0C9F5;
      --lavender: #C7B3F5;
      --mint: #B8E3D1;
      --surface: #F4F6F9;
      --white: #FFFFFF;
      --ink: #1B2638;
      --muted: #667085;
      --line: rgba(33,52,80,.10);
      --radius-xl: 34px;
      --radius-lg: 26px;
      --radius-md: 18px;
      --shadow: 0 24px 80px rgba(33,52,80,.08);
      --max: 1220px;
      --serif: Georgia, "Times New Roman", serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      background:
        radial-gradient(circle at 15% 10%, rgba(176,201,245,.28), transparent 25rem),
        radial-gradient(circle at 90% 8%, rgba(199,179,245,.20), transparent 22rem),
        var(--surface);
      line-height: 1.5;
    }

    a { color: inherit; text-decoration: none; }
    button, a { -webkit-tap-highlight-color: transparent; }
    .shell { width: min(calc(100% - 32px), var(--max)); margin-inline: auto; }

    .site-card {
      margin: 26px auto 48px;
      border-radius: 40px;
      background: rgba(255,255,255,.78);
      border: 1px solid rgba(255,255,255,.84);
      box-shadow: var(--shadow);
      backdrop-filter: blur(20px);
      overflow: hidden;
    }

    nav {
      height: 88px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 38px;
      border-bottom: 1px solid var(--line);
    }

    .logo {
      display: flex;
      align-items: center;
      min-width: 122px;
    }
    .logo img { width: 116px; height: auto; display: block; }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 28px;
      font-size: 14px;
      color: #46536A;
    }
    .nav-links a { transition: .2s ease; }
    .nav-links a:hover { color: var(--navy); transform: translateY(-1px); }

    .nav-pill {
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 10px 14px;
      background: rgba(255,255,255,.72);
    }

    .hero {
      position: relative;
      min-height: 680px;
      padding: 96px 7vw 76px;
      display: grid;
      place-items: center;
      text-align: center;
      isolation: isolate;
      overflow: hidden;
    }

    .hero::before, .hero::after {
      content: "";
      position: absolute;
      z-index: -2;
      filter: blur(18px);
      opacity: .85;
      border-radius: 48% 52% 60% 40% / 44% 54% 46% 56%;
      animation: float 14s ease-in-out infinite alternate;
    }
    .hero::before {
      width: 580px; height: 420px;
      left: -90px; top: 80px;
      background:
        radial-gradient(circle at 30% 35%, rgba(176,201,245,.85), transparent 35%),
        radial-gradient(circle at 72% 42%, rgba(228,129,168,.48), transparent 36%),
        radial-gradient(circle at 55% 76%, rgba(184,227,209,.65), transparent 38%);
    }
    .hero::after {
      width: 520px; height: 390px;
      right: -80px; bottom: 30px;
      background:
        radial-gradient(circle at 28% 42%, rgba(199,179,245,.75), transparent 34%),
        radial-gradient(circle at 67% 58%, rgba(176,201,245,.65), transparent 38%),
        radial-gradient(circle at 52% 28%, rgba(228,129,168,.38), transparent 28%);
      animation-delay: -5s;
    }
    @keyframes float {
      from { transform: translate3d(0,0,0) rotate(-2deg) scale(1); }
      to { transform: translate3d(24px,-18px,0) rotate(3deg) scale(1.04); }
    }

    .hero-inner { max-width: 820px; position: relative; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      border: 1px solid rgba(33,52,80,.11);
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.64);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .12em;
      font-weight: 600;
      color: #4B5B73;
      backdrop-filter: blur(12px);
      margin-bottom: 28px;
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    .spark {
      width: 11px; height: 11px; position: relative; display: inline-block;
    }
    .spark::before, .spark::after {
      content:""; position:absolute; inset:0; margin:auto; background:var(--pink); border-radius:999px;
    }
    .spark::before { width: 2px; height: 11px; }
    .spark::after { width: 11px; height: 2px; }

    h1 {
      margin: 0;
      font-size: clamp(56px, 7vw, 98px);
      line-height: 1.02;
      letter-spacing: -0.055em;
      color: var(--navy);
      font-weight: 500;
      font-family: var(--serif);
    }
    .role {
      margin-top: 20px;
      font-size: clamp(18px, 2vw, 24px);
      color: var(--navy);
      font-weight: 560;
      letter-spacing: -0.02em;
    }
    .hero-copy {
      max-width: 700px;
      margin: 20px auto 0;
      font-size: clamp(17px, 1.5vw, 20px);
      line-height: 1.65;
      color: #526176;
    }

    .hero-actions {
      margin-top: 34px;
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 46px;
      padding: 0 18px;
      border-radius: 999px;
      border: 1px solid var(--line);
      font-size: 14px;
      font-weight: 600;
      transition: .22s ease;
    }
    .btn-primary { background: var(--navy); color: white; border-color: var(--navy); }
    .btn-secondary { background: rgba(255,255,255,.68); color: var(--navy); }
    .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(33,52,80,.10); }

    .hero-note {
      margin-top: 64px;
      display: flex;
      justify-content: center;
      gap: 10px;
      font-size: 12px;
      color: #7A8699;
    }

    .work {
      padding: 88px 38px 110px;
      border-top: 1px solid var(--line);
      background: rgba(255,255,255,.55);
    }
    .work-head {
      display: flex;
      justify-content: space-between;
      gap: 40px;
      align-items: end;
      margin-bottom: 34px;
    }
    
    .support-label {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .14em;
      font-weight: 600;
      color: #7B8797;
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      margin-bottom: 18px;
    }

.kicker {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .14em;
      color: #7B8797;
      margin-bottom: 18px;
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-weight: 600;
    }
    .work h2 {
      margin: 0;
      max-width: 720px;
      font-size: clamp(34px, 4vw, 56px);
      line-height: 1.06;
      letter-spacing: -.045em;
      color: var(--navy);
      font-weight: 500;
      font-family: var(--serif);
    }
    .work-intro {
      max-width: 360px;
      font-size: 15px;
      color: #6B7687;
      margin: 0;
    }

    .project-grid {
      display: grid;
      grid-template-columns: 1.28fr .72fr;
      gap: 18px;
    }
    .project {
      position: relative;
      min-height: 420px;
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid rgba(33,52,80,.08);
      padding: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: .25s ease;
      isolation: isolate;
    }
    .project:hover { transform: translateY(-3px); box-shadow: 0 18px 50px rgba(33,52,80,.09); }

    .project-card-link { color: inherit; text-decoration: none; }
    .project-card-link:focus-visible { outline: 3px solid rgba(33,52,80,.28); outline-offset: 4px; }

    .project-primary {
      background:
        radial-gradient(circle at 78% 30%, rgba(228,129,168,.38), transparent 28%),
        radial-gradient(circle at 56% 82%, rgba(184,227,209,.52), transparent 35%),
        linear-gradient(135deg, #EEF3FB 0%, #F9F8FC 100%);
    }
    .project-secondary {
      background:
        radial-gradient(circle at 38% 34%, rgba(199,179,245,.55), transparent 30%),
        linear-gradient(150deg, #F7F4FE 0%, #EEF4FB 100%);
    }
    .project-tertiary {
      grid-column: 1 / -1;
      min-height: 300px;
      background: var(--navy);
      color: white;
    }

    .project-num { font-size: 12px; color: #728096; }
    .project-tertiary .project-num { color: rgba(255,255,255,.55); }
    .project-copy { max-width: 620px; position: relative; z-index: 2; }
    .project h3 {
      margin: 0 0 14px;
      font-size: clamp(26px, 3vw, 42px);
      line-height: 1.1;
      letter-spacing: -.025em;
      font-weight: 540;
      color: var(--navy);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    .project-tertiary h3 { color: white; }
    .project p { margin: 0; max-width: 580px; color: #627187; font-size: 15px; line-height: 1.65; }
    .project-tertiary p { color: rgba(255,255,255,.72); }

    .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
    .tag {
      font-size: 11px;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.58);
      border: 1px solid rgba(33,52,80,.08);
      color: #506078;
    }
    .project-tertiary .tag {
      color: rgba(255,255,255,.8);
      border-color: rgba(255,255,255,.14);
      background: rgba(255,255,255,.08);
    }
    .arrow {
      position: absolute;
      right: 26px; bottom: 24px;
      width: 44px; height: 44px;
      display:grid; place-items:center;
      border-radius:50%;
      border:1px solid rgba(33,52,80,.11);
      background: rgba(255,255,255,.65);
      color: var(--navy);
      font-size: 20px;
    }
    .project-tertiary .arrow {
      border-color: rgba(255,255,255,.16);
      background: rgba(255,255,255,.08);
      color: white;
    }

    .project-shape {
      position: absolute;
      border-radius: 48% 52% 58% 42% / 44% 56% 44% 56%;
      opacity: .72;
      filter: blur(34px);
      z-index: 0;
      pointer-events: none;
      transform-origin: center;
    }
    .project-primary .project-shape {
      width: 320px;
      height: 250px;
      right: 24px;
      top: 28px;
      background:
        radial-gradient(circle at 30% 35%, rgba(176,201,245,.62), transparent 44%),
        radial-gradient(circle at 70% 60%, rgba(228,129,168,.30), transparent 48%),
        radial-gradient(circle at 48% 76%, rgba(184,227,209,.38), transparent 46%);
      transform: rotate(-10deg);
    }
    .project-secondary .project-shape {
      width: 240px;
      height: 210px;
      right: -18px;
      top: 84px;
      background:
        radial-gradient(circle at 36% 36%, rgba(199,179,245,.50), transparent 46%),
        radial-gradient(circle at 68% 64%, rgba(228,129,168,.26), transparent 50%),
        radial-gradient(circle at 48% 78%, rgba(176,201,245,.26), transparent 52%);
      transform: rotate(14deg);
    }
    .project-tertiary .project-shape {
      width: 480px;
      height: 290px;
      right: -52px;
      top: 10px;
      background:
        radial-gradient(circle at 26% 36%, rgba(228,129,168,.42), transparent 45%),
        radial-gradient(circle at 60% 58%, rgba(199,179,245,.26), transparent 48%),
        radial-gradient(circle at 78% 72%, rgba(184,227,209,.22), transparent 48%);
      filter: blur(42px);
    }

    .foot-note {
      padding: 20px 38px 34px;
      font-size: 12px;
      color: #8A94A4;
      display: flex;
      justify-content: space-between;
      gap: 20px;
      border-top: 1px solid var(--line);
      background: rgba(255,255,255,.55);
    }


    .philosophy,
    .skills,
    .contact {
      padding: 110px 38px;
      border-top: 1px solid var(--line);
    }

    .philosophy {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 85% 18%, rgba(199,179,245,.20), transparent 22rem),
        radial-gradient(circle at 12% 82%, rgba(184,227,209,.20), transparent 24rem),
        rgba(255,255,255,.68);
    }

    .section-inner {
      max-width: 920px;
      margin: 0 auto;
    }

    .section-title {
      margin: 0;
      color: var(--navy);
      font-family: var(--serif);
      font-size: clamp(42px, 5.4vw, 74px);
      line-height: 1.06;
      letter-spacing: -.045em;
      font-weight: 500;
    }

    .section-copy {
      margin-top: 30px;
      max-width: 760px;
      color: #5E6B7E;
      font-size: clamp(17px, 1.6vw, 20px);
      line-height: 1.72;
    }
    .title-support {
      margin-top: 22px;
    }


    .decision-rotation {
      margin-top: 46px;
      min-height: 92px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px 14px;
      color: var(--navy);
      font-size: clamp(28px, 3.4vw, 46px);
      line-height: 1.14;
      letter-spacing: -.035em;
      font-weight: 560;
    }

    .decision-prefix {
      flex: 0 0 auto;
    }

    .decision-word-wrap {
      position: relative;
      display: inline-grid;
      min-width: 12ch;
      min-height: 1.2em;
      align-items: center;
      overflow: hidden;
    }

    .decision-word {
      grid-area: 1 / 1;
      opacity: 0;
      transform: translateY(.55em);
      transition: opacity .45s ease, transform .45s ease;
      color: var(--navy);
      font-weight: 620;
    }

    .decision-word.is-active {
      opacity: 1;
      transform: translateY(0);
    }

    .decision-word.is-leaving {
      opacity: 0;
      transform: translateY(-.45em);
    }

    .statement {
      margin-top: 48px;
      padding: 24px 28px;
      border-radius: 22px;
      background: rgba(255,255,255,.74);
      border: 1px solid rgba(33,52,80,.08);
      color: var(--navy);
      font-size: clamp(18px, 1.8vw, 24px);
      line-height: 1.45;
      font-weight: 600;
      box-shadow: 0 14px 42px rgba(33,52,80,.06);
    }

    
    .skills {
      background: #fff;
      overflow: hidden;
    }

    .skills-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: center;
    }

    .skills-copy {
      max-width: 600px;
    }

    
    
    .skills-pool {
      position: relative;
      min-height: 500px;
      border-radius: 34px;
      padding: 42px;
      background:
        radial-gradient(circle at 50% 48%, rgba(199,179,245,.16), transparent 20rem),
        radial-gradient(circle at 20% 25%, rgba(176,201,245,.15), transparent 14rem),
        radial-gradient(circle at 78% 72%, rgba(184,227,209,.16), transparent 14rem),
        linear-gradient(180deg, rgba(244,246,249,.82), rgba(255,255,255,.98));
      border: 1px solid rgba(33,52,80,.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.76), 0 16px 42px rgba(33,52,80,.05);
      overflow: hidden;
    }

    .pool-field {
      position: absolute;
      inset: 30px;
      border-radius: 28px;
      border: 1px dashed rgba(33,52,80,.09);
      pointer-events: none;
    }

    .skills-puzzle {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: repeat(5, 72px);
      gap: 14px;
      align-items: stretch;
    }

    .puzzle-piece {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 18px;
      border-radius: 28px;
      border: 1px solid rgba(33,52,80,.08);
      font-size: 14px;
      font-weight: 580;
      color: #4E5C72;
      background: rgba(255,255,255,.88);
      box-shadow: 0 10px 26px rgba(33,52,80,.045);
      transition: transform .22s ease, box-shadow .22s ease, filter .22s ease, opacity .22s ease;
    }

    .puzzle-piece:hover,
    .puzzle-piece:focus-visible {
      transform: translateY(-3px);
      box-shadow: 0 16px 34px rgba(33,52,80,.08);
      outline: none;
      z-index: 4;
    }

    .skills-puzzle:has(.puzzle-piece:hover) .puzzle-piece:not(:hover) {
      opacity: .72;
      filter: saturate(.8);
    }

    .piece-producto { grid-column: 1 / span 2; grid-row: 1; background: rgba(244,246,249,.96); }
    .piece-analisis { grid-column: 3 / span 2; grid-row: 1; background: rgba(176,201,245,.28); }
    .piece-diseno { grid-column: 5 / span 2; grid-row: 1; background: rgba(199,179,245,.27); }

    .piece-comunicacion { grid-column: 1 / span 3; grid-row: 2; background: rgba(228,129,168,.17); }
    .piece-documentacion { grid-column: 4 / span 3; grid-row: 2; background: rgba(184,227,209,.23); }

    .piece-ai {
      grid-column: 3 / span 2;
      grid-row: 3 / span 2;
      border-radius: 50%;
      min-width: 150px;
      width: 150px;
      height: 150px;
      align-self: center;
      justify-self: center;
      font-size: 22px;
      font-weight: 680;
      color: var(--navy);
      background:
        radial-gradient(circle at 32% 28%, rgba(255,255,255,.75), transparent 34%),
        rgba(199,179,245,.34);
      border-color: rgba(120,126,196,.16);
      box-shadow: 0 18px 38px rgba(33,52,80,.08);
    }

    .piece-branding { grid-column: 1 / span 2; grid-row: 4; background: rgba(184,227,209,.22); }
    .piece-visuales { grid-column: 5 / span 2; grid-row: 4; background: rgba(176,201,245,.22); }

    .piece-video { grid-column: 2 / span 2; grid-row: 5; background: rgba(228,129,168,.12); }
    .piece-estrategia { grid-column: 4 / span 2; grid-row: 5; background: rgba(199,179,245,.17); }


.skills-note {
      margin-top: 30px;
      color: #5E6B7E;
      font-size: 17px;
      line-height: 1.72;
      max-width: 580px;
    }


    .contact {
      background: var(--navy);
      color: white;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .contact::before {
      content: "";
      position: absolute;
      width: 520px;
      height: 340px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background:
        radial-gradient(circle at 30% 35%, rgba(228,129,168,.34), transparent 44%),
        radial-gradient(circle at 68% 56%, rgba(199,179,245,.22), transparent 46%),
        radial-gradient(circle at 54% 78%, rgba(184,227,209,.18), transparent 48%);
      filter: blur(44px);
      pointer-events: none;
    }

    .contact .section-inner { position: relative; z-index: 2; }

    .contact .section-title {
      margin: 0;
      color: var(--navy);
      font-family: var(--serif);
      font-size: clamp(42px, 5.4vw, 74px);
      line-height: 1.06;
      letter-spacing: -.045em;
      font-weight: 500;
    }

    .contact p {
      max-width: 680px;
      margin: 30px auto 0;
      color: rgba(255,255,255,.76);
      font-size: 18px;
      line-height: 1.65;
    }

    .contact-actions {
      margin-top: 32px;
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .contact-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 46px;
      padding: 0 18px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.08);
      color: white;
      font-size: 14px;
      font-weight: 600;
      transition: .22s ease;
    }

    .contact-link:hover {
      background: rgba(255,255,255,.14);
      transform: translateY(-2px);
    }

    @media (max-width: 820px) {
      .site-card { border-radius: 28px; margin-top: 16px; }
      nav { padding: 0 20px; height: 74px; }
      .nav-links a:not(.nav-pill) { display:none; }
      .hero { min-height: 620px; padding: 76px 22px 56px; }
      .hero::before { width: 420px; height: 320px; left:-170px; }
      .hero::after { width: 380px; height: 280px; right:-170px; }
      .work { padding: 70px 20px 80px; }
      .work-head { display:block; }
      .work-intro { margin-top: 18px; }
      .project-grid { grid-template-columns: 1fr; }
      .project-tertiary { grid-column:auto; }
      .project { min-height: 360px; }
      .foot-note { padding-inline:20px; flex-direction:column; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .hero::before, .hero::after { animation: none; }
      .btn, .project { transition: none; }
    }
  
    /* --- Safe polish overrides: navbar / CTA / footer --- */
    nav {
      position: sticky;
      top: 0;
      z-index: 40;
      background: rgba(255,255,255,.82);
      backdrop-filter: blur(18px);
    }

    .nav-links {
      gap: 22px;
    }

    .nav-pill {
      background: var(--navy);
      color: #fff;
      border-color: var(--navy);
      font-weight: 600;
      box-shadow: 0 8px 22px rgba(33,52,80,.10);
    }

    .nav-pill:hover {
      color: #fff !important;
      transform: translateY(-1px);
    }

    .contact {
      text-align: left;
      padding-top: 118px;
      padding-bottom: 118px;
    }

    .contact .section-inner {
      max-width: 980px;
      margin: 0 auto;
    }

    .contact .section-title {
      margin: 0;
      color: var(--navy);
      font-family: var(--serif);
      font-size: clamp(42px, 5.4vw, 74px);
      line-height: 1.06;
      letter-spacing: -.045em;
      font-weight: 500;
    }

    .contact p {
      margin: 30px 0 0;
      max-width: 700px;
    }

    .contact-actions {
      justify-content: flex-start;
      margin-top: 34px;
    }

    .contact-link.primary {
      background: #fff;
      color: var(--navy);
      border-color: #fff;
    }

    .site-footer {
      padding: 30px 38px 34px;
      background: rgba(255,255,255,.72);
      border-top: 1px solid var(--line);
    }

    .footer-top {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      align-items: center;
      padding-bottom: 24px;
    }

    .footer-brand img {
      width: 104px;
      display: block;
    }

    .footer-links {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      font-size: 13px;
      color: #667085;
    }

    .footer-bottom {
      border-top: 1px solid var(--line);
      padding-top: 18px;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      font-size: 12px;
      color: #8A94A4;
    }

    @media (max-width: 820px) {
      .nav-links a:not(.nav-pill) { display: none; }
      .contact { padding-top: 82px; padding-bottom: 82px; }
      .footer-top { flex-direction: column; align-items: flex-start; }
      .footer-bottom { flex-direction: column; }
    }

  
    html {
      scroll-padding-top: 118px;
    }

    section[id] {
      scroll-margin-top: 118px;
    }

    .main-nav {
      position: fixed;
      top: 18px;
      left: 50%;
      transform: translateX(-50%);
      width: min(calc(100% - 48px), 1180px);
      z-index: 90;
      border: 1px solid rgba(255,255,255,.72);
      border-radius: 24px;
      background: rgba(255,255,255,.68);
      backdrop-filter: blur(18px) saturate(1.18);
      -webkit-backdrop-filter: blur(18px) saturate(1.18);
      box-shadow: 0 14px 40px rgba(33,52,80,.08);
      transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
    }

    .main-nav.is-scrolled {
      background: rgba(255,255,255,.58);
      border-color: rgba(255,255,255,.82);
      box-shadow: 0 18px 44px rgba(33,52,80,.11);
    }

    @media (max-width: 820px) {
      .page-subnav-inner { width: 100%; justify-content: flex-start; }
      .skills-pool { min-height: auto; padding: 28px 20px 58px; }
      .skills-puzzle {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        gap: 10px;
      }
      .puzzle-piece,
      .piece-producto, .piece-analisis, .piece-diseno,
      .piece-comunicacion, .piece-documentacion, .piece-branding,
      .piece-visuales, .piece-video, .piece-estrategia {
        grid-column: auto;
        grid-row: auto;
        min-height: 54px;
      }
      .piece-ai {
        grid-column: 1 / -1;
        grid-row: auto;
        width: 96px;
        height: 96px;
        min-width: 96px;
        justify-self: center;
      }
    }

  
    @media (max-width: 820px) {
      body { padding-top: 92px; }
      .main-nav {
        top: 12px;
        width: calc(100% - 24px);
        border-radius: 20px;
      }
    }

  
    /* Floating menu card that stays visible on scroll */
    .nav-wrap {
      position: sticky;
      top: 14px;
      z-index: 120;
      width: min(calc(100% - 32px), var(--max));
      margin: 14px auto 0;
      pointer-events: none;
    }

    .nav-wrap .main-nav {
      pointer-events: auto;
      position: relative;
      top: auto;
      left: auto;
      transform: none;
      width: 100%;
      max-width: none;
      min-height: 84px;
      padding: 0 34px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.82);
      background: rgba(255,255,255,.88);
      backdrop-filter: blur(18px) saturate(1.12);
      -webkit-backdrop-filter: blur(18px) saturate(1.12);
      box-shadow: 0 18px 50px rgba(33,52,80,.08);
      transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
    }

    .nav-wrap .main-nav.is-scrolled {
      background: rgba(255,255,255,.66);
      backdrop-filter: blur(22px) saturate(1.18);
      -webkit-backdrop-filter: blur(22px) saturate(1.18);
      border-color: rgba(255,255,255,.90);
      box-shadow: 0 20px 56px rgba(33,52,80,.12);
    }

    /* keep the content card separate from the sticky menu */
    .site-card {
      margin-top: 14px;
    }

    @media (max-width: 820px) {
      .nav-wrap {
        top: 10px;
        width: calc(100% - 20px);
        margin-top: 10px;
      }

      .nav-wrap .main-nav {
        min-height: 72px;
        padding: 0 18px;
        border-radius: 24px;
      }
    }

  
    .contact .section-title {
      color: #fff !important;
      opacity: 1;
      mix-blend-mode: normal;
      text-shadow: none;
    }

    .contact .support-label {
      color: rgba(255,255,255,.62) !important;
    }

    .contact p {
      color: rgba(255,255,255,.80);
    }

    .contact-link.primary {
      background: #fff;
      color: var(--navy);
      border-color: #fff;
    }

    .contact-link:not(.primary) {
      color: #fff;
      border-color: rgba(255,255,255,.22);
      background: rgba(255,255,255,.08);
    }

  
    .nav-agents {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    @media (max-width: 820px) {
      .nav-agents
    }

  
    .lang-switch {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-height: 34px;
      padding: 0 9px;
      border-radius: 999px;
      border: 1px solid rgba(33,52,80,.08);
      background: rgba(255,255,255,.60);
    }

    .lang-btn {
      appearance: none;
      border: 0;
      background: transparent;
      padding: 0;
      color: #8A94A4;
      font: inherit;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      letter-spacing: .08em;
    }

    .lang-btn.is-active {
      color: var(--navy);
    }

    .lang-divider {
      color: #B1B8C3;
      font-size: 11px;
    }

    .scroll-nav {
      position: fixed;
      right: 22px;
      bottom: 22px;
      top: auto;
      transform: none;
      z-index: 85;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 26px;
      border: 1px solid rgba(255,255,255,.78);
      background: rgba(255,255,255,.70);
      backdrop-filter: blur(18px) saturate(1.12);
      -webkit-backdrop-filter: blur(18px) saturate(1.12);
      box-shadow: 0 16px 44px rgba(33,52,80,.08);
    }

    .scroll-nav-body {
      display: flex;
      align-items: center;
      overflow: hidden;
      max-width: 210px;
      opacity: 1;
      transition: max-width .25s ease, opacity .2s ease;
    }

    .scroll-nav.is-collapsed .scroll-nav-body {
      max-width: 0;
      opacity: 0;
      pointer-events: none;
    }

    .scroll-collapse {
      appearance: none;
      width: 26px;
      height: 38px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--navy);
      font-size: 24px;
      line-height: 1;
      cursor: pointer;
      transition: transform .2s ease, opacity .2s ease;
    }

    .scroll-collapse:hover {
      opacity: .7;
    }

    .scroll-nav.is-collapsed .scroll-collapse {
      transform: rotate(180deg);
    }

    .scroll-nav-copy {
      display: grid;
      min-width: 132px;
      gap: 3px;
      padding: 2px 4px 2px 0;
      align-content: center;
    }

    .scroll-nav-current {
      font-size: 13px;
      color: var(--navy);
      font-weight: 650;
    }

    .scroll-nav-next {
      font-size: 10px;
      color: #7D8796;
      line-height: 1.25;
    }

    .scroll-nav-controls {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .scroll-arrow {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid rgba(33,52,80,.08);
      background: rgba(255,255,255,.86);
      color: var(--navy);
      font-size: 15px;
      cursor: pointer;
      transition: transform .2s ease, background .2s ease, opacity .2s ease;
      box-shadow: 0 8px 22px rgba(33,52,80,.05);
    }

    .scroll-arrow:hover:not(:disabled) {
      transform: translateY(-1px);
      background: #fff;
    }

    .scroll-arrow:disabled {
      opacity: .35;
      cursor: default;
    }

    .scroll-nav.is-collapsed {
      padding-left: 8px;
    }

    

    

    @media (max-width: 820px) {
      .lang-switch {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-height: 34px;
      padding: 0 9px;
      border-radius: 999px;
      border: 1px solid rgba(33,52,80,.08);
      background: rgba(255,255,255,.60);
    }

      .nav-links a:not(.nav-pill),
      .nav-agents {
        display: none;
      }

      .scroll-nav {
        right: 10px;
        bottom: 10px;
        padding: 8px;
      }

      .scroll-nav-next {
        display: none;
      }

      .scroll-nav-copy {
        min-width: 94px;
      }
    }

  
    .statement {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 16px;
      align-items: start;
    }

    .statement-icon {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.68));
      border: 1px solid rgba(33,52,80,.08);
      color: var(--navy);
      box-shadow: 0 8px 22px rgba(33,52,80,.06);
      flex-shrink: 0;
    }

    .statement-icon svg {
      width: 22px;
      height: 22px;
      display: block;
    }

    .statement span {
      display: block;
    }

    @media (max-width: 820px) {
      .statement {
        grid-template-columns: 1fr;
        gap: 12px;
      }
    }

  

/* v27 — align Home scale and global spacing with finalized About */
:root{
  --max:1480px;
}

/* Same outer width as About */
.shell{
  width:min(calc(100% - 28px),var(--max));
}

/* Same floating navigation proportions as About */
.nav-wrap{
  top:14px;
  width:min(calc(100% - 28px),var(--max));
  margin:14px auto 0;
}
.nav-wrap .main-nav{
  min-height:86px;
  padding:18px 22px 18px 26px;
  border-radius:22px;
  gap:24px;
}
.nav-wrap .logo{
  min-width:0;
}
.nav-wrap .logo img{
  width:188px;
  height:auto;
}
.nav-wrap .nav-links{
  gap:28px;
  font-size:14px;
}
.nav-wrap .nav-pill{
  padding:14px 22px;
}

/* Match About's card footprint/rhythm without changing Home content */
.site-card{
  margin:18px auto 28px;
  border-radius:34px;
}

/* Preserve Home's internal layout, only scale the hero to the wider system */
.hero{
  min-height:760px;
  padding:96px 7vw 76px;
}
.hero-inner{
  max-width:900px;
}

@media(max-width:820px){
  .shell{
    width:calc(100% - 28px);
  }
  .nav-wrap{
    width:calc(100% - 28px);
    margin-top:14px;
  }
  .nav-wrap .main-nav{
    min-height:72px;
    padding:14px 16px;
  }
  .nav-wrap .logo img{
    width:145px;
  }
  .site-card{
    margin-top:18px;
    border-radius:26px;
  }
  .hero{
    min-height:auto;
  }
}


/* v28 — consistent section rhythm and padding */
.work,
.philosophy,
.skills,
.contact{
  padding:88px 82px 96px !important;
}

/* Keep all section content anchored to the same left/right grid */
.work{
  background:rgba(255,255,255,.55);
}

.philosophy .section-inner{
  width:100%;
  max-width:1120px;
  margin:0;
}

.skills .section-inner{
  width:100%;
  max-width:none;
  margin:0;
}

.skills-layout{
  grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);
  gap:72px;
  align-items:center;
}

.skills-copy{
  max-width:620px;
}

.contact .section-inner{
  max-width:920px;
  margin:0 auto;
}

/* Give the philosophy content the same visual breathing room as other sections */
.philosophy .section-title{
  max-width:980px;
}

.philosophy .section-copy{
  max-width:820px;
}

.philosophy .statement{
  max-width:920px;
}

/* Align section starts consistently */
.work-head,
.philosophy .section-inner,
.skills-layout{
  position:relative;
}

/* Tablet */
@media(max-width:1050px){
  .work,
  .philosophy,
  .skills,
  .contact{
    padding:72px 52px 80px !important;
  }

  .skills-layout{
    grid-template-columns:1fr;
    gap:42px;
  }

  .skills-pool{
    min-height:460px;
  }
}

/* Mobile */
@media(max-width:760px){
  .work,
  .philosophy,
  .skills,
  .contact{
    padding:56px 24px !important;
  }

  .philosophy .section-inner,
  .skills .section-inner{
    max-width:none;
  }

  .skills-layout{
    gap:32px;
  }
}


/* v29 — contact aligned to the same page grid */
.contact{
  padding:88px 82px 96px !important;
}
.contact .section-inner{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}
.contact .contact-wrap,
.contact .contact-content{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}
@media(max-width:1050px){
  .contact{padding:72px 52px 80px !important;}
}
@media(max-width:760px){
  .contact{padding:56px 24px !important;}
}


/* v31 — safe rebalance of Cómo pienso: keep original markup, only rhythm/spacing */
.philosophy{
  padding:104px 82px 108px !important;
}

.philosophy .section-inner{
  width:100% !important;
  max-width:1080px !important;
  margin:0 !important;
  display:block !important;
}

.philosophy .section-title{
  max-width:1040px !important;
  margin:0 0 40px !important;
}

.philosophy .section-copy{
  max-width:840px !important;
  margin:0 0 20px !important;
}

.philosophy .decision-rotation{
  margin-top:58px !important;
  margin-bottom:58px !important;
}

.philosophy .statement{
  max-width:940px !important;
  margin-top:0 !important;
}

/* Tablet */
@media(max-width:1050px){
  .philosophy{
    padding:88px 52px 92px !important;
  }
  .philosophy .section-title{
    margin-bottom:34px !important;
  }
  .philosophy .decision-rotation{
    margin-top:48px !important;
    margin-bottom:48px !important;
  }
}

/* Mobile */
@media(max-width:760px){
  .philosophy{
    padding:64px 24px 68px !important;
  }
  .philosophy .section-title{
    margin-bottom:28px !important;
  }
  .philosophy .section-copy{
    margin-bottom:18px !important;
  }
  .philosophy .decision-rotation{
    margin-top:38px !important;
    margin-bottom:38px !important;
  }
}


/* v32 — intentional two-column structure for Cómo pienso */
.philosophy{
  padding:96px 82px 104px !important;
}

.philosophy .section-inner{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  display:block !important;
}

.philosophy .support-label{
  margin-bottom:18px !important;
}

.philosophy .section-title{
  max-width:1080px !important;
  margin:0 0 54px !important;
}

.philosophy-body{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.75fr);
  gap:76px;
  align-items:start;
}

.philosophy-copy-block{
  max-width:760px;
}

.philosophy-copy-block .section-copy{
  max-width:none !important;
  margin:0 0 26px !important;
}

.philosophy-copy-block .section-copy:last-child{
  margin-bottom:0 !important;
}

.philosophy-side{
  min-width:0;
  padding-top:6px;
}

.philosophy-side .decision-rotation{
  margin:0 !important;
  min-height:126px;
  display:flex;
  align-content:flex-start;
  align-items:flex-start;
}

.philosophy-side .decision-prefix{
  display:block;
  width:100%;
}

.philosophy-side .decision-word-wrap{
  margin-top:8px;
}

.philosophy-side .statement{
  margin:34px 0 0 !important;
  max-width:none !important;
  padding:22px 24px;
}

/* Tablet */
@media(max-width:1050px){
  .philosophy{
    padding:84px 52px 90px !important;
  }

  .philosophy .section-title{
    margin-bottom:44px !important;
  }

  .philosophy-body{
    grid-template-columns:1fr;
    gap:48px;
  }

  .philosophy-copy-block{
    max-width:820px;
  }

  .philosophy-side{
    max-width:820px;
    padding-top:0;
  }

  .philosophy-side .decision-rotation{
    min-height:92px;
  }
}

/* Mobile */
@media(max-width:760px){
  .philosophy{
    padding:60px 24px 66px !important;
  }

  .philosophy .section-title{
    margin-bottom:34px !important;
  }

  .philosophy-body{
    gap:38px;
  }

  .philosophy-copy-block .section-copy{
    margin-bottom:20px !important;
  }

  .philosophy-side .decision-rotation{
    min-height:84px;
  }

  .philosophy-side .statement{
    margin-top:26px !important;
  }
}


/* v33 — Cómo pienso: two paragraph columns + full-width motion + full-width statement */
.philosophy{
  padding:96px 82px 104px !important;
}

.philosophy .section-inner{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  display:block !important;
}

.philosophy .support-label{
  margin-bottom:18px !important;
}

.philosophy .section-title{
  max-width:1080px !important;
  margin:0 0 54px !important;
}

.philosophy-copy-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:56px;
  align-items:start;
}

.philosophy-copy-col{
  min-width:0;
}

.philosophy-copy-col .section-copy{
  max-width:none !important;
  margin:0 !important;
}

.philosophy-rotation-full{
  width:100%;
  margin:64px 0 0 !important;
  min-height:112px;
  display:flex;
  align-items:center;
}

.philosophy-statement-full{
  width:100% !important;
  max-width:none !important;
  margin:34px 0 0 !important;
  padding:24px 28px !important;
}

/* Tablet */
@media(max-width:1050px){
  .philosophy{
    padding:84px 52px 90px !important;
  }

  .philosophy .section-title{
    margin-bottom:44px !important;
  }

  .philosophy-copy-grid{
    gap:38px;
  }

  .philosophy-rotation-full{
    margin-top:52px !important;
  }
}

/* Mobile */
@media(max-width:760px){
  .philosophy{
    padding:60px 24px 66px !important;
  }

  .philosophy .section-title{
    margin-bottom:34px !important;
  }

  .philosophy-copy-grid{
    grid-template-columns:1fr;
    gap:20px;
  }

  .philosophy-rotation-full{
    margin-top:38px !important;
    min-height:88px;
  }

  .philosophy-statement-full{
    margin-top:26px !important;
    padding:22px 20px !important;
  }
}


/* v34 — statement spans the full available section width */
.philosophy-statement-full{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  width:auto !important;
  max-width:none !important;
  min-width:100% !important;
  box-sizing:border-box !important;
  margin:34px 0 0 !important;
  justify-self:stretch !important;
  align-self:stretch !important;
}

.philosophy-statement-full > span{
  min-width:0;
}

@media(max-width:760px){
  .philosophy-statement-full{
    grid-template-columns:1fr !important;
    min-width:100% !important;
  }
}


/* v1.2 — mobile navigation + English coming soon */
.lang-btn:disabled,
.lang-btn[aria-disabled="true"]{
  color:#AAB2BE !important;
  opacity:.55;
  cursor:not-allowed;
}
.mobile-nav{display:none;position:relative}
.mobile-nav summary{
  list-style:none;cursor:pointer;width:48px;height:48px;border-radius:999px;
  background:var(--navy);display:grid;place-content:center;gap:6px
}
.mobile-nav summary::-webkit-details-marker{display:none}
.mobile-nav summary span{display:block;width:18px;height:2px;border-radius:2px;background:#fff}
.mobile-nav-panel{
  position:absolute;right:0;top:58px;width:min(320px,calc(100vw - 40px));
  padding:14px;border-radius:20px;background:rgba(255,255,255,.96);
  backdrop-filter:blur(22px);border:1px solid var(--line);box-shadow:0 18px 42px rgba(33,52,80,.12);
  display:grid;gap:4px;z-index:999
}
.mobile-nav-panel>a{padding:13px 14px;border-radius:14px;color:#4F5D73;font-size:14px}
.mobile-nav-panel>a.active{background:#F3F6FB;color:var(--navy);font-weight:700}
.mobile-nav-footer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;
  padding-top:12px;border-top:1px solid var(--line)
}
@media(max-width:760px){
  .nav-links{display:none !important}
  .mobile-nav{display:block}
}