:root{--bg:#03111b;--bg2:#071c2a;--card:#092235;--text:#f4f7fa;--muted:#b7c6d4;--line:#16455f;--cyan:#10c9ef;--cyan2:#078dc4;--green:#37d99a;--max:1460px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at 55% 18%,rgba(0,178,235,.14),transparent 32rem),linear-gradient(180deg,#03101a,#04121d 70%,#061725);line-height:1.55}a{color:inherit;text-decoration:none}.container{width:min(calc(100% - 72px),var(--max));margin:auto}.site-header{position:sticky;top:0;z-index:30;background:rgba(2,13,22,.9);backdrop-filter:blur(16px);border-bottom:1px solid rgba(49,174,220,.22)}.nav{height:72px;display:flex;align-items:center;gap:28px}.brand{font-weight:850;font-size:1.15rem}.brand span{color:var(--cyan)}.nav-links{margin-left:auto;display:flex;gap:34px;color:#e2eaf0;font-size:.94rem}.nav-links a:hover{color:var(--cyan)}.langs{display:flex;gap:8px;margin-left:18px}.langs a{width:40px;height:40px;display:grid;place-items:center;border:1px solid #173d54;border-radius:50%;font-size:.78rem;color:#aebfcb}.langs a.active,.langs a:hover{border-color:var(--cyan);color:#fff}.menu-btn{display:none;background:transparent;border:1px solid var(--line);color:#fff;border-radius:9px;padding:8px 11px}.hero{position:relative;overflow:hidden;border-bottom:1px solid rgba(24,113,153,.28)}.hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 76% 35%,rgba(0,194,255,.18),transparent 28%),linear-gradient(90deg,rgba(2,13,22,.15),rgba(2,13,22,0));pointer-events:none}.hero-grid{min-height:720px;display:grid;grid-template-columns:1.05fr .78fr .72fr;gap:24px;align-items:center;position:relative;z-index:2;padding-top:46px}.hero-copy{align-self:center}.eyebrow{color:#39e2dd;font-weight:800;letter-spacing:.22em;text-transform:uppercase;font-size:.77rem;margin-bottom:14px}h1{font-size:clamp(4.3rem,7.2vw,7.7rem);line-height:.78;letter-spacing:-.065em;margin:0 0 32px}h1 .accent{display:block;color:var(--cyan)}.hero h2{font-size:clamp(1.45rem,2vw,2rem);margin:0 0 16px}.hero-copy p{max-width:650px;color:var(--muted);font-size:1.03rem}.actions{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0 20px}.btn{min-height:52px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #24536e;border-radius:13px;font-weight:800;transition:.18s}.btn.primary{background:linear-gradient(135deg,#26d4f1,#08aee1);color:#001019;border-color:transparent;box-shadow:0 10px 32px rgba(0,190,235,.22)}.btn:hover{transform:translateY(-2px);border-color:var(--cyan)}.socials{display:flex;gap:12px}.socials a{width:46px;height:46px;border:1px solid #24536e;border-radius:50%;display:grid;place-items:center;color:#eaf7ff;font-weight:800}.portrait-wrap{height:650px;align-self:end;display:flex;align-items:flex-end;justify-content:center;position:relative}.portrait-wrap:before{content:"";position:absolute;width:92%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(0,201,239,.42),rgba(0,123,174,.08) 52%,transparent 70%);filter:blur(10px);bottom:70px}.portrait{position:relative;z-index:2;width:min(100%,520px);max-height:625px;object-fit:cover;object-position:50% 18%;border-radius:260px 260px 24px 24px;mix-blend-mode:normal;box-shadow:0 0 0 1px rgba(52,201,245,.15),0 35px 70px rgba(0,0,0,.38)}.hero-card{background:linear-gradient(145deg,rgba(7,33,51,.96),rgba(4,22,35,.97));border:1px solid #1689b5;border-radius:26px;padding:28px;box-shadow:0 24px 70px rgba(0,0,0,.34)}.mini-label{font-size:.72rem;color:#7ca1b7;text-transform:uppercase;letter-spacing:.16em}.hero-card>strong{font-size:1.15rem;display:block;margin:8px 0 4px}.company{color:#b7c7d3;font-size:.92rem}.current{font-size:.83rem;color:#a9c0ce;margin:8px 0 20px}.current:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:8px}.stat-grid{border-top:1px solid #1a5875;padding-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.stat{padding:17px;background:rgba(255,255,255,.025);border:1px solid rgba(82,155,190,.2);border-radius:13px}.stat b{font-size:1.35rem;display:block}.stat span{font-size:.76rem;color:#a8bdca}.techbar{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:12px 18px;border:1px solid #175b7b;border-radius:13px;background:rgba(4,25,39,.88);margin-bottom:24px;overflow:auto}.techbar>span{font-size:.83rem;white-space:nowrap;margin-right:8px}.tag{white-space:nowrap;border:1px solid #1c516c;background:#0a2638;padding:7px 13px;border-radius:999px;font-size:.78rem;color:#d7e5ed}section:not(.hero){padding:82px 0}.section-head{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px;margin-bottom:38px}.section-head h2{font-size:clamp(2.2rem,4vw,4rem);line-height:1;margin:0;letter-spacing:-.04em}.section-head p{margin:0;color:var(--muted);max-width:780px}.about-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:42px}.about-grid h3{font-size:2.25rem;margin:0}.expertise{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:20px;background:rgba(7,31,47,.72)}.expert{padding:28px 22px;border-right:1px solid var(--line)}.expert:last-child{border:0}.expert b{display:block;font-size:1.05rem;margin:8px 0}.expert p{font-size:.86rem;color:var(--muted);margin:0}.icon{font-size:1.6rem;color:var(--cyan)}.timeline{display:grid;gap:12px}.job{display:grid;grid-template-columns:190px 1fr;gap:28px;padding:23px 26px;border:1px solid var(--line);border-radius:17px;background:rgba(8,30,45,.72)}.job .date{color:#39e2dd;font-weight:800}.job h3{margin:0}.job p{margin:4px 0 0;color:var(--muted)}.skills,.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.skill-card,.project-card,.edu-card{padding:25px;border:1px solid var(--line);border-radius:18px;background:rgba(8,30,45,.72)}.skill-card h3,.project-card h3,.edu-card h3{margin-top:0}.tags{display:flex;flex-wrap:wrap;gap:8px}.projects p,.edu-card p{color:var(--muted)}.edu{display:grid;grid-template-columns:1fr 1fr;gap:15px}.contact-box{padding:36px;border:1px solid #1689b5;border-radius:24px;background:linear-gradient(135deg,rgba(8,45,67,.8),rgba(5,24,38,.9));display:flex;justify-content:space-between;align-items:center;gap:20px}.contact-box h2{margin:0}.contact-box p{color:var(--muted);margin:6px 0 0}footer{border-top:1px solid var(--line);padding:28px 0;color:#90a9b9}.footer-row{display:flex;justify-content:space-between;gap:20px}.hide-desktop{display:none}@media(max-width:1100px){.hero-grid{grid-template-columns:1fr 1fr}.hero-copy{grid-row:1}.portrait-wrap{grid-row:1;grid-column:2}.hero-card{grid-column:1/-1;margin-bottom:10px}.techbar{grid-row:auto}.expertise{grid-template-columns:1fr 1fr}.expert:nth-child(2){border-right:0}.expert:nth-child(-n+2){border-bottom:1px solid var(--line)}}@media(max-width:760px){.container{width:min(calc(100% - 28px),var(--max))}.nav{height:64px}.menu-btn{display:block;margin-left:auto}.nav-links{display:none;position:absolute;left:14px;right:14px;top:66px;flex-direction:column;background:#061724;border:1px solid var(--line);border-radius:15px;padding:18px}.nav-links.open{display:flex}.langs{margin-left:0}.hero-grid{display:flex;flex-direction:column;padding-top:55px}.hero-copy{width:100%}h1{font-size:clamp(4rem,20vw,6rem)}.portrait-wrap{height:470px;width:100%;order:2}.portrait{max-height:455px;width:360px}.hero-card{width:100%;order:3}.techbar{order:4;width:100%}.section-head,.about-grid{grid-template-columns:1fr;gap:22px}.expertise,.skills,.projects,.edu{grid-template-columns:1fr}.expert{border-right:0!important;border-bottom:1px solid var(--line)}.expert:last-child{border-bottom:0}.job{grid-template-columns:1fr;gap:5px}.contact-box{flex-direction:column;align-items:flex-start}.footer-row{flex-direction:column}.hide-mobile{display:none}}

/* Exact desktop opening screen based on the approved first visual concept. */
.reference-stage { display:none; }

@media (min-width:1100px) {
  body { background:#03101a; }
  .reference-stage {
    display:block;
    position:relative;
    width:100%;
    max-width:1536px;
    margin:0 auto;
    aspect-ratio:3 / 2;
    overflow:hidden;
    background:#03101a;
  }
  .reference-stage-image {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    user-select:none;
    -webkit-user-drag:none;
  }
  .site-header,
  .hero,
  #about-content { display:none !important; }
  .hotspot {
    position:absolute;
    display:block;
    z-index:5;
    background:transparent;
    border:0;
    cursor:pointer;
  }
  .hotspot:focus-visible {
    outline:2px solid #20c9ff;
    outline-offset:2px;
    border-radius:12px;
  }
  .reference-anchor { position:absolute; width:1px; height:1px; }
  .reference-anchor-about { left:0; top:78.2%; }

  /* Clickable regions mapped to the approved 1536 × 1024 visual. */
  .hs-logo          { left:2.6%; top:1.1%; width:16.2%; height:5.2%; }
  .hs-about         { left:30.4%; top:1.2%; width:5.4%;  height:5.2%; }
  .hs-exp-nav       { left:36.0%; top:1.2%; width:7.4%;  height:5.2%; }
  .hs-skills-nav    { left:43.8%; top:1.2%; width:7.3%;  height:5.2%; }
  .hs-projects-nav  { left:51.2%; top:1.2%; width:5.7%;  height:5.2%; }
  .hs-education-nav { left:56.6%; top:1.2%; width:7.7%;  height:5.2%; }
  .hs-contact-nav   { left:64.0%; top:1.2%; width:5.6%;  height:5.2%; }
  .hs-pl            { left:77.8%; top:1.0%; width:3.3%;  height:5.4%; }
  .hs-en            { left:81.3%; top:1.0%; width:3.3%;  height:5.4%; }
  .hs-es            { left:84.9%; top:1.0%; width:3.3%;  height:5.4%; }
  .hs-contact-top   { left:88.2%; top:1.0%; width:8.3%;  height:5.4%; }
  .hs-experience    { left:4.5%; top:50.0%; width:17.2%; height:5.5%; }
  .hs-cv            { left:22.6%; top:50.0%; width:13.2%; height:5.5%; }
  .hs-email         { left:4.4%; top:57.0%; width:4.0%;  height:5.4%; }

  /* Continue the real, selectable HTML portfolio below the exact opening screen. */
  #experience { padding-top:88px; }
}

@media (min-width:1537px) {
  .reference-stage { max-width:none; }
  .reference-stage-image { object-fit:cover; object-position:top center; }
}

/* Mobile refinement — same approved first visual, adapted to a narrow viewport. */
@media (max-width:760px){
  body{background:linear-gradient(180deg,#020d16 0,#03121d 50%,#061725 100%)}
  .site-header{position:sticky;top:0;background:rgba(2,13,22,.94)}
  .brand{font-size:1rem}
  .langs a{width:34px;height:34px;font-size:.7rem}
  .hero{background:
    radial-gradient(circle at 50% 42%,rgba(0,190,240,.18),transparent 44%),
    linear-gradient(180deg,#03101a,#031520 78%,#061725)}
  .hero:after{display:none}
  .hero-grid{padding-top:34px;gap:18px;min-height:auto}
  .hero-copy{order:1}
  .eyebrow{font-size:.64rem;letter-spacing:.18em;margin-bottom:10px}
  h1{font-size:clamp(3.15rem,17vw,4.7rem);line-height:.82;margin-bottom:22px}
  .hero h2{font-size:1.15rem;line-height:1.25;margin-bottom:12px}
  .hero-copy p{font-size:.91rem;line-height:1.55;margin:0;color:#b8c8d5}
  .actions{margin:20px 0 14px;gap:10px}
  .btn{min-height:46px;padding:0 15px;font-size:.86rem}
  .socials{margin-bottom:4px}
  .socials a{width:40px;height:40px}

  .portrait-wrap{
    order:2;
    width:100%;
    height:auto;
    min-height:0;
    margin-top:2px;
    border:1px solid #126588;
    border-radius:22px;
    overflow:hidden;
    background:#04131f;
    box-shadow:0 24px 60px rgba(0,0,0,.38);
  }
  .portrait-wrap:before{display:none}
  .portrait{
    width:100%;
    height:auto;
    max-height:none;
    border-radius:0;
    object-fit:contain;
    object-position:center;
    box-shadow:none;
    display:block;
  }

  .hero-card{order:3;padding:20px;border-radius:19px;margin:0}
  .hero-card>strong{font-size:1rem;line-height:1.35}
  .company{font-size:.84rem}
  .current{font-size:.77rem;margin-bottom:14px}
  .stat-grid{gap:9px;padding-top:14px}
  .stat{padding:13px 12px}
  .stat b{font-size:1.12rem}
  .stat span{font-size:.68rem}

  .techbar{
    order:4;
    margin:0 0 16px;
    padding:10px 11px;
    gap:8px;
    border-radius:12px;
    scroll-snap-type:x proximity;
  }
  .techbar>span{font-size:.72rem}
  .tag{font-size:.7rem;padding:6px 10px;scroll-snap-align:start}

  section:not(.hero){padding:54px 0}
  #about-content{padding-top:38px}
  .about-grid h3{font-size:1.75rem;line-height:1.1}
  .about-grid p{font-size:.9rem}
  .expertise{border-radius:16px}
  .expert{padding:19px 17px}
  .expert b{font-size:.98rem}
  .expert p{font-size:.8rem}

  .section-head{margin-bottom:24px}
  .section-head h2{font-size:2.05rem}
  .section-head p{font-size:.88rem}
  .job{padding:17px;border-radius:14px}
  .job .date{font-size:.8rem}
  .job h3{font-size:1rem}
  .job p{font-size:.82rem}
  .skill-card,.project-card,.edu-card{padding:18px;border-radius:15px}
  .skill-card h3,.project-card h3,.edu-card h3{font-size:1rem}
  .projects p,.edu-card p{font-size:.82rem}
  .contact-box{padding:22px;border-radius:18px}
  .contact-box h2{font-size:1.6rem}
  .contact-box p{font-size:.86rem}
}

/* Mobile v2: compact ergonomics while preserving the approved visual identity. */
@media (max-width:760px){
  .container{width:min(calc(100% - 24px),var(--max))}
  .hero-grid{padding-top:24px;gap:14px}
  .eyebrow{font-size:.6rem;margin-bottom:8px}
  h1{font-size:clamp(3rem,16vw,4.35rem);margin-bottom:16px}
  .hero h2{font-size:1.08rem;margin-bottom:9px}
  .hero-copy p{font-size:.86rem;line-height:1.45}
  .actions{margin:16px 0 11px}
  .btn{min-height:43px;padding:0 13px;font-size:.8rem}
  .socials a{width:37px;height:37px}
  .portrait-wrap{max-width:390px;align-self:center;border-radius:18px}
  .portrait{aspect-ratio:1.16/1;object-fit:cover;object-position:center 25%}
  .hero-card{padding:16px;border-radius:17px}
  .hero-card>strong{font-size:.94rem;margin-top:5px}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:7px;padding-top:11px}
  .stat{padding:10px}
  .stat b{font-size:1rem}.stat span{font-size:.63rem}
  .techbar{margin-bottom:8px;padding:8px 9px}
  .tag{padding:5px 8px;font-size:.66rem}

  section:not(.hero){padding:40px 0}
  #about-content{padding-top:30px}
  .about-grid{gap:16px}
  .about-grid h3{font-size:1.55rem}
  .about-grid p{font-size:.84rem;line-height:1.5}
  .expertise{grid-template-columns:repeat(2,1fr)}
  .expert{padding:15px 13px!important;border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)}
  .expert:nth-child(2n){border-right:0!important}
  .expert:nth-last-child(-n+2){border-bottom:0}
  .expert b{font-size:.9rem}.expert p{font-size:.73rem}.icon{font-size:1.35rem}

  .section-head{gap:10px;margin-bottom:17px}
  .section-head h2{font-size:1.75rem;line-height:1.05}
  .section-head p{font-size:.79rem;line-height:1.45}
  .timeline{gap:8px}
  .job{padding:13px 14px;gap:2px}
  .job .date{font-size:.73rem}.job h3{font-size:.9rem}.job p{font-size:.74rem;margin-top:2px}
  .skills{grid-template-columns:repeat(2,1fr);gap:9px}
  .skill-card{padding:14px}
  .skill-card h3{font-size:.9rem;margin-bottom:10px}
  .skill-card .tags{gap:5px}
  .skill-card .tag{font-size:.62rem;padding:5px 7px}
  .projects{gap:9px}.project-card{padding:15px}
  .project-card h3{font-size:.9rem;margin-bottom:6px}.projects p{font-size:.74rem;line-height:1.45}
  .edu{gap:9px}.edu-card{padding:15px}.edu-card h3{font-size:.88rem}.edu-card p{font-size:.73rem;line-height:1.45}
  .contact-box{padding:18px}.contact-box h2{font-size:1.35rem}.contact-box p{font-size:.78rem}
  footer{padding:20px 0;font-size:.75rem}
}

@media (max-width:390px){
  .skills{grid-template-columns:1fr}
}


/* EN/ES desktop: same approved first layout, with localized live text over the same visual. */
.localized-reference-stage { display:none; }

@media (min-width:1100px) {
  body.lang-localized .reference-stage { display:none !important; }

  .localized-reference-stage {
    display:block;
    position:relative;
    width:100%;
    max-width:1536px;
    margin:0 auto;
    aspect-ratio:3 / 2;
    overflow:hidden;
    background:#03101a;
  }

  .localized-reference-stage .ref-bg {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    user-select:none;
    -webkit-user-drag:none;
  }

  .localized-reference-stage .loc-header {
    position:absolute;
    left:0; top:0; right:0;
    height:7.2%;
    z-index:3;
    display:flex;
    align-items:center;
    padding:0 4.2%;
    background:rgba(2,13,22,.985);
    border-bottom:1px solid rgba(30,122,160,.38);
    font-size:.86vw;
  }
  .loc-brand { font-size:1.22vw; font-weight:850; letter-spacing:-.025em; white-space:nowrap; }
  .loc-brand span { color:#18c8f5; }
  .loc-nav { margin-left:auto; display:flex; gap:2.2vw; align-items:center; }
  .loc-nav a { color:#eaf1f5; }
  .loc-langs { display:flex; gap:.55vw; margin-left:7.1vw; }
  .loc-langs a {
    width:2.55vw; height:2.55vw; min-width:32px; min-height:32px;
    display:grid; place-items:center; border-radius:50%;
    border:1px solid #214a61; color:#a9bdc9; font-size:.72vw;
  }
  .loc-langs a.active { border-color:#18c8f5; color:#fff; }
  .loc-contact {
    margin-left:1vw; padding:.65vw 1.25vw; border:1px solid #158cb7;
    border-radius:1.3vw; font-weight:700; white-space:nowrap;
  }

  .localized-reference-stage .loc-left-cover {
    position:absolute; z-index:2;
    left:0; top:7.2%; width:43%; height:59.5%;
    background:
      linear-gradient(90deg,rgba(2,13,22,.995) 0%,rgba(2,13,22,.985) 72%,rgba(2,13,22,.68) 91%,rgba(2,13,22,0) 100%),
      linear-gradient(180deg,rgba(2,13,22,.96),rgba(2,13,22,.88));
  }
  .loc-hero-copy {
    position:absolute; z-index:4;
    left:4.5%; top:13.2%; width:36%;
  }
  .loc-eyebrow {
    color:#3ee1dd; text-transform:uppercase; letter-spacing:.25em;
    font-weight:850; font-size:.72vw; margin-bottom:1.35vw;
  }
  .loc-name {
    margin:0 0 .75vw; font-size:5.35vw; line-height:.81;
    letter-spacing:-.06em; font-weight:900; color:#f5f7f8;
  }
  .loc-name span { display:block; color:#11bfe8; }
  .loc-role { font-size:1.55vw; line-height:1.15; font-weight:820; margin:0 0 1.15vw; }
  .loc-desc { color:#c3d0d9; font-size:.95vw; line-height:1.48; max-width:95%; margin:0; }
  .loc-actions { display:flex; gap:1.15vw; margin-top:1.8vw; }
  .loc-btn {
    height:3.35vw; min-height:42px; padding:0 1.55vw; border-radius:.72vw;
    display:inline-flex; align-items:center; justify-content:center;
    font-weight:800; font-size:.82vw; border:1px solid #2b5e77;
  }
  .loc-btn.primary {
    color:#00121b; border-color:transparent;
    background:linear-gradient(135deg,#34d8f3,#10b6e5);
    box-shadow:0 .65vw 1.9vw rgba(0,193,235,.22);
  }
  .loc-socials { display:flex; gap:.9vw; margin-top:1.2vw; }
  .loc-socials a {
    width:2.75vw; height:2.75vw; min-width:36px; min-height:36px;
    border:1px solid #24536e; border-radius:50%;
    display:grid; place-items:center; color:#f0f7fb; font-size:1vw;
  }

  .localized-reference-stage .loc-card-cover {
    position:absolute; z-index:3;
    left:70.7%; top:29.8%; width:25.2%; height:38%;
    border-radius:1.55vw;
    background:linear-gradient(145deg,rgba(7,33,51,.985),rgba(4,22,35,.99));
    border:1px solid #1689b5;
    box-shadow:0 1.6vw 4vw rgba(0,0,0,.3);
  }
  .loc-card { position:absolute; z-index:4; left:73%; top:32.4%; width:20.8%; }
  .loc-card .mini { color:#55d9ed; letter-spacing:.18em; font-size:.65vw; font-weight:800; text-transform:uppercase; }
  .loc-card .job-title { font-size:1.05vw; line-height:1.25; font-weight:850; margin:.85vw 0 .32vw; }
  .loc-card .company { color:#c1d0da; font-size:.78vw; }
  .loc-card .since { color:#a9bdc9; font-size:.68vw; margin:.55vw 0 1.25vw; }
  .loc-card .since:before { content:""; display:inline-block; width:.48vw; height:.48vw; min-width:6px; min-height:6px; border-radius:50%; background:#37d99a; margin-right:.42vw; }
  .loc-stats {
    border-top:1px solid #1a5875; padding-top:1.15vw;
    display:grid; grid-template-columns:1fr 1fr; gap:.75vw;
  }
  .loc-stat { padding:.82vw; border:1px solid rgba(82,155,190,.2); border-radius:.72vw; background:rgba(255,255,255,.025); }
  .loc-stat b { display:block; font-size:1.15vw; }
  .loc-stat span { display:block; color:#a8bdca; font-size:.61vw; line-height:1.25; }

  .localized-reference-stage .loc-tech-cover {
    position:absolute; z-index:3;
    left:4.4%; top:67.4%; width:91.5%; height:6.6%;
    background:rgba(4,25,39,.975); border:1px solid #175b7b; border-radius:.75vw;
  }
  .loc-tech {
    position:absolute; z-index:4; left:6%; top:69.1%; width:88%;
    display:flex; gap:.75vw; align-items:center; white-space:nowrap; font-size:.68vw;
  }
  .loc-tech-label { margin-right:.5vw; }
  .loc-chip { border:1px solid #1c516c; background:#0a2638; padding:.42vw .72vw; border-radius:1.2vw; }
  .loc-tech-tail { margin-left:auto; color:#8bc9e2; }

  .localized-reference-stage .loc-about-cover {
    position:absolute; z-index:3;
    left:0; bottom:0; width:100%; height:23.7%;
    background:linear-gradient(180deg,rgba(3,16,26,.99),rgba(4,18,29,.995));
    border-top:1px solid rgba(24,113,153,.28);
  }
  .loc-about-left { position:absolute; z-index:4; left:4.5%; top:80.2%; width:41%; }
  .loc-about-left .kicker { color:#3ee1dd; letter-spacing:.23em; font-size:.64vw; font-weight:800; text-transform:uppercase; }
  .loc-about-left h3 { font-size:1.65vw; margin:.65vw 0 .65vw; }
  .loc-about-left p { color:#b8c8d5; font-size:.73vw; line-height:1.5; margin:0; }

  .loc-expertise {
    position:absolute; z-index:4; left:49.3%; top:80.5%; width:46.7%; height:16.5%;
    display:grid; grid-template-columns:repeat(4,1fr);
    border:1px solid #16455f; border-radius:1.15vw; overflow:hidden;
    background:rgba(7,31,47,.75);
  }
  .loc-exp { padding:1.05vw 1.15vw; border-right:1px solid #16455f; }
  .loc-exp:last-child { border-right:0; }
  .loc-exp .ico { color:#18c8f5; font-size:1.55vw; }
  .loc-exp b { display:block; font-size:.85vw; margin:.35vw 0; }
  .loc-exp p { color:#b7c6d4; font-size:.64vw; line-height:1.42; margin:0; }

  body.lang-localized > .site-header,
  body.lang-localized > main > .hero,
  body.lang-localized > main > #about-content { display:none !important; }
  body.lang-localized #experience { padding-top:88px; }
}

@media (min-width:1537px) {
  .localized-reference-stage { max-width:none; }
  .localized-reference-stage .ref-bg { object-fit:cover; object-position:top center; }
}

@media (min-width:1100px){
  .translated-reference-stage{
    display:block;
    position:relative;
    width:100%;
    max-width:1536px;
    margin:0 auto;
    aspect-ratio:3/2;
    overflow:hidden;
  }
  .translated-reference-stage img{
    width:100%;height:100%;display:block;object-fit:contain;
  }
  .translated-reference-stage .hotspot{
    position:absolute;z-index:10;display:block;background:transparent;
  }
  .tr-logo{left:3.9%;top:1.4%;width:13.5%;height:4.5%;}
  .tr-about{left:30.7%;top:1.8%;width:5.5%;height:3.3%;}
  .tr-expnav{left:36.2%;top:1.8%;width:7.3%;height:3.3%;}
  .tr-skills{left:43.6%;top:1.8%;width:6.2%;height:3.3%;}
  .tr-projects{left:49.8%;top:1.8%;width:6.6%;height:3.3%;}
  .tr-education{left:56.5%;top:1.8%;width:7.5%;height:3.3%;}
  .tr-contactnav{left:64.0%;top:1.8%;width:6.2%;height:3.3%;}
  .tr-pl{left:77.9%;top:1.4%;width:3.1%;height:4.2%;}
  .tr-en{left:81.1%;top:1.4%;width:3.1%;height:4.2%;}
  .tr-es{left:84.3%;top:1.4%;width:3.1%;height:4.2%;}
  .tr-contact{left:88.2%;top:1.2%;width:8.3%;height:4.4%;}
  .tr-experience{left:4.5%;top:50.1%;width:17.2%;height:5.3%;}
  .tr-cv{left:22.6%;top:50.1%;width:13.2%;height:5.3%;}
  .tr-email{left:4.5%;top:56.8%;width:3.6%;height:5.3%;}
  .tr-linkedin{left:9.0%;top:56.8%;width:3.7%;height:5.3%;}
  body.lang-static > .site-header,
  body.lang-static > main > .hero,
  body.lang-static > main > #about-content{display:none!important;}
  body.lang-static #experience{padding-top:82px;}
}
@media (max-width:1099px){
  .translated-reference-stage{display:none!important;}
}