:root{--navy:#101d2b;--navy2:#17384a;--gold:#c5a46d;--gold2:#dfc391;--paper:#f7f7f4;--warm:#efeee9;--ink:#17232d;--muted:#697681;--line:rgba(255,255,255,.16);--serif:Georgia,'Times New Roman',serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:86px}body{margin:0;font-family:'DM Sans',Arial,sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.site-header{height:82px;padding:0 7.2%;display:flex;align-items:center;justify-content:space-between;background:var(--navy);color:#fff;position:relative;z-index:10}.brand{font:800 17px 'Manrope',sans-serif;letter-spacing:.07em;color:#fff}.brand span{color:var(--gold)}.main-nav{display:flex;align-items:center;gap:34px;font-size:12px;color:#e6e9eb}.main-nav a{transition:color .2s}.main-nav a:hover{color:var(--gold2)}.nav-contact{border:1px solid rgba(197,164,109,.65);padding:12px 17px}.nav-contact span{color:var(--gold);margin-left:8px}.menu-toggle{display:none}.hero{min-height:690px;background:var(--navy);color:white;display:grid;grid-template-columns:1.02fr .98fr;position:relative;padding:75px 7.2% 105px;overflow:hidden}.hero:before{content:"";position:absolute;width:550px;height:550px;border:1px solid rgba(197,164,109,.12);border-radius:50%;right:18%;top:10%;pointer-events:none}.hero-copy{position:relative;z-index:2;align-self:center;padding:10px 0 20px}.eyebrow,.overline,.section-kicker{font-size:10px;letter-spacing:.2em;font-weight:700}.eyebrow{color:var(--gold);display:flex;align-items:center;gap:12px;margin:0 0 29px}.eyebrow span{height:1px;width:34px;background:var(--gold)}h1,h2,h3,p{margin-top:0}h1,h2{font-family:'Manrope',sans-serif;letter-spacing:-.055em}h1{font-size:clamp(46px,5.2vw,76px);line-height:1.08;font-weight:600;margin:0 0 25px}h1 em{font-family:var(--serif);font-weight:400;color:var(--gold2)}.hero-lead{font-size:20px;line-height:1.5;max-width:510px;color:#e5e8e9;margin-bottom:13px}.hero-description{font-size:14px;line-height:1.8;color:#aebbc3;max-width:470px}.hero-actions{display:flex;align-items:center;gap:30px;margin-top:34px}.button{display:inline-flex;align-items:center;gap:25px;padding:17px 22px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;transition:transform .2s,background .2s}.button:hover{transform:translateY(-3px)}.button-gold{background:var(--gold);color:var(--navy)}.button-gold:hover{background:var(--gold2)}.button span{font-size:17px}.text-link{font-size:11px;color:#dbe0e3}.text-link span{color:var(--gold);padding-left:7px}.hero-index{display:flex;align-items:center;gap:13px;margin-top:65px;color:#87949d;font-size:9px;letter-spacing:.17em}.hero-index>span:first-child{color:var(--gold)}.index-line{height:1px;width:52px;background:rgba(197,164,109,.6)}.hero-visual{position:relative;align-self:center;justify-self:end;width:min(100%,490px);padding:0 22px 28px 0}.photo-frame{position:relative;z-index:1;height:490px;overflow:hidden;background:#27313a}.photo-frame:after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.18);pointer-events:none}.photo-frame img{width:100%;height:100%;object-fit:cover;object-position:center 35%;display:block;filter:saturate(.88)}.hero-visual:before{content:"";position:absolute;right:0;bottom:0;width:78%;height:78%;border:1px solid var(--gold);z-index:0}.photo-caption{display:flex;justify-content:space-between;padding:14px 0 0;color:#aab4bb;font-size:8px;letter-spacing:.16em}.vertical-note{position:absolute;right:-22px;top:25%;writing-mode:vertical-rl;color:var(--gold);font-size:8px;letter-spacing:.2em}.hero-bottom{position:absolute;bottom:0;left:7.2%;right:7.2%;height:48px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;color:#8d9aa3;font-size:8px;letter-spacing:.16em}.section-light,.section-warm,.section-dark{padding:105px 10%}.section-light{background:var(--paper)}.section-dark{background:var(--navy);color:#fff}.section-warm{background:var(--warm)}.section-kicker{color:var(--gold);margin-bottom:65px}.intro{display:grid;grid-template-columns:1fr 2.2fr .8fr;gap:45px}.intro .section-kicker{grid-column:1/-1;margin-bottom:0}.overline{color:#a47e43;margin-bottom:22px}.intro h2,.section-heading h2,.experience h2,.projects h2,.contact h2{font-size:clamp(36px,4.3vw,58px);line-height:1.14;font-weight:600;margin-bottom:25px}.intro h2 span,.section-heading h2 span,.experience h2 span,.projects h2 span,.contact h2 span{font-family:var(--serif);font-weight:400;color:#a98956}.body-large{font-size:19px;line-height:1.65;color:#263641;max-width:680px}.body-copy{font-size:14px;line-height:1.9;color:var(--muted);max-width:680px}.intro-aside{align-self:end;border-left:1px solid #d5d5ce;padding-left:25px;margin-bottom:8px}.aside-number{font:400 52px var(--serif);color:#b18f5c}.aside-number span{font:400 22px 'DM Sans';padding-left:8px}.intro-aside p{font-size:9px;line-height:2.1;letter-spacing:.14em;color:#78838a;margin:12px 0 0}.section-heading{max-width:720px;margin-bottom:55px}.section-heading .overline{color:var(--gold)}.section-heading h2{margin-bottom:0}.expertise-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.expertise-card{padding:28px 23px 32px 0;min-height:255px;border-right:1px solid var(--line);position:relative}.expertise-card:not(:first-child){padding-left:23px}.expertise-card:last-child{border-right:0}.card-number{font-size:9px;color:var(--gold);letter-spacing:.12em}.line-icon{font:300 30px var(--serif);color:var(--gold);margin:25px 0 18px}.expertise-card h3{font:600 17px 'Manrope';line-height:1.35;margin-bottom:12px}.expertise-card p{font-size:12px;line-height:1.8;color:#aeb9c0;margin:0}.disclaimer{font-size:10px;line-height:1.7;color:#87949d;margin:22px 0 0}.experience-layout{display:grid;grid-template-columns:1fr 1fr;gap:12%;align-items:start}.experience h2{margin:0}.experience-copy{padding-top:40px}.experience-copy .body-large{font-size:18px}.underlined-link{display:inline-block;margin-top:22px;padding-bottom:10px;border-bottom:1px solid var(--gold);font-size:11px;font-weight:700;letter-spacing:.04em}.underlined-link span{color:#a47e43;margin-left:18px}.projects-top{display:grid;grid-template-columns:1.1fr .9fr;gap:12%;align-items:end;margin-bottom:50px}.projects h2{margin-bottom:0}.projects-intro{font-size:14px;line-height:1.85;color:#66727a;max-width:390px;margin-bottom:8px}.project-list{border-top:1px solid #d0d0c8}.project-item{display:grid;grid-template-columns:70px 1fr 35px;gap:20px;align-items:center;padding:25px 0;border-bottom:1px solid #d0d0c8}.project-no{font:italic 18px var(--serif);color:#a98956}.project-item h3{font:700 14px 'Manrope';letter-spacing:.04em;margin:0 0 7px}.project-item p{font-size:12px;color:#6d7880;margin:0;line-height:1.6}.project-arrow{font-size:20px;color:#a98956;justify-self:end}.contact{padding-top:95px;padding-bottom:100px}.contact .section-kicker{margin-bottom:60px}.contact h2{max-width:800px;margin-bottom:20px}.contact h2 span{color:var(--gold2)}.contact-copy{font-size:14px;line-height:1.8;color:#aeb9c0;max-width:520px;margin-bottom:30px}.site-footer{background:#0b1520;color:#aab4bb;padding:32px 7.2%;display:grid;grid-template-columns:1fr 1fr auto;gap:20px;align-items:center}.site-footer .brand{font-size:14px}.site-footer p{font-size:10px;letter-spacing:.08em;margin:0}.back-top{font-size:9px;letter-spacing:.13em;color:var(--gold)}.site-footer small{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:20px;font-size:9px;color:#78858e}
@media(max-width:900px){.site-header{padding:0 5%;height:72px}.main-nav{gap:18px}.hero{padding-left:6%;padding-right:6%;grid-template-columns:1fr  .85fr;min-height:620px}.photo-frame{height:410px}.section-light,.section-warm,.section-dark{padding:80px 7%}.intro{grid-template-columns:1fr 2fr}.intro-aside{display:none}.expertise-grid{grid-template-columns:repeat(2,1fr)}.expertise-card:nth-child(2){border-right:0}.expertise-card:nth-child(3){padding-left:0;border-top:1px solid var(--line)}.expertise-card:nth-child(4){border-top:1px solid var(--line)}}
@media(max-width:650px){.site-header{height:68px}.menu-toggle{display:flex;flex-direction:column;gap:6px;border:0;background:none;padding:10px}.menu-toggle i{width:23px;height:1px;background:#fff;display:block}.main-nav{display:none;position:absolute;top:68px;left:0;right:0;background:#101d2b;padding:22px 7% 28px;flex-direction:column;align-items:flex-start;gap:22px;border-top:1px solid var(--line)}.main-nav.is-open{display:flex}.hero{display:flex;flex-direction:column;padding:65px 7% 85px;gap:45px}.hero-copy{padding:0}.hero h1{font-size:clamp(43px,12vw,62px)}.hero-lead{font-size:18px}.hero-actions{gap:18px;flex-wrap:wrap}.hero-index{margin-top:42px}.hero-visual{width:90%;max-width:420px;align-self:center;margin-right:10px}.photo-frame{height:auto;aspect-ratio:4/4.5}.vertical-note{right:-20px}.hero-bottom{left:7%;right:7%;font-size:7px}.hero-bottom span:last-child{display:none}.section-light,.section-warm,.section-dark{padding:70px 7%}.section-kicker{margin-bottom:42px}.intro{display:block}.intro h2,.section-heading h2,.experience h2,.projects h2,.contact h2{font-size:39px}.intro .section-kicker{margin-bottom:42px}.body-large{font-size:17px}.expertise-grid{grid-template-columns:1fr}.expertise-card,.expertise-card:not(:first-child){padding:24px 0;border-right:0;border-bottom:1px solid var(--line);min-height:0}.expertise-card:nth-child(3){border-top:0}.expertise-card:last-child{border-bottom:0}.line-icon{margin:17px 0 12px}.experience-layout,.projects-top{grid-template-columns:1fr;gap:25px}.experience-copy{padding-top:0}.projects-top{margin-bottom:35px}.project-item{grid-template-columns:32px 1fr 20px;gap:12px;padding:22px 0}.project-item h3{font-size:12px}.project-item p{font-size:11px}.contact .section-kicker{margin-bottom:42px}.site-footer{grid-template-columns:1fr auto;padding:28px 7%}.site-footer p{grid-column:1/-1;grid-row:2}.back-top{grid-column:2;grid-row:1}.site-footer small{grid-column:1/-1}}

/* ==========================================
   CRISTIAN GAVIRIA - ACTUALIZACION VISUAL 2026
   ========================================== */

:root {
  --navy: #0b1927;
  --navy2: #142b3d;
  --gold: #c6a16b;
  --gold2: #e4c797;
  --paper: #faf9f6;
  --ink: #172633;
}

/* Navegación */
.site-header {
  position: sticky;
  top: 0;
  height: 76px;
  background: rgba(11, 25, 39, .97);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background .3s ease;
}

.brand {
  font-size: 18px;
  letter-spacing: .09em;
}

.main-nav {
  font-size: 13px;
  gap: 38px;
}

.main-nav a:not(.nav-contact) {
  position: relative;
  padding: 10px 0;
}

.main-nav a:not(.nav-contact)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width .3s ease;
}

.main-nav a:hover::after {
  width: 100%;
}

.nav-contact {
  transition: all .3s ease;
}

.nav-contact:hover {
  background: var(--gold);
  color: var(--navy);
}

/* Portada */
.hero {
  min-height: 740px;
  padding-top: 90px;
  padding-bottom: 110px;
  background:
    radial-gradient(ellipse at 75% 45%,
    rgba(35, 74, 96, .28), transparent 50%),
    var(--navy);
}

.hero h1 {
  font-size: clamp(52px, 5.5vw, 82px);
  letter-spacing: -.065em;
  line-height: 1.04;
}

.hero-lead {
  font-size: 21px;
  max-width: 540px;
}

.hero-description {
  max-width: 490px;
  line-height: 1.9;
}

.hero-visual {
  width: min(100%, 510px);
}

.photo-frame {
  height: 530px;
  box-shadow: 0 30px 80px rgba(0,0,0,.24);
}

.photo-frame img {
  transition: transform .8s ease;
}

.photo-frame:hover img {
  transform: scale(1.035);
}

.hero-visual:before {
  transition: transform .4s ease;
}

.hero-visual:hover:before {
  transform: translate(8px, 8px);
}

/* Botones */
.button {
  transition: transform .25s ease,
              box-shadow .25s ease,
              background .25s ease;
}

.button-gold {
  box-shadow: 0 8px 25px rgba(198,161,107,.12);
}

.button-gold:hover {
  box-shadow: 0 12px 30px rgba(198,161,107,.24);
}

/* Secciones */
.section-light,
.section-warm,
.section-dark {
  padding-top: 115px;
  padding-bottom: 115px;
}

.section-kicker {
  letter-spacing: .23em;
  font-size: 10px;
}

.intro h2,
.section-heading h2,
.experience h2,
.projects h2,
.contact h2 {
  letter-spacing: -.055em;
}

.body-large {
  font-size: 20px;
  line-height: 1.75;
}

/* Tarjetas de formación */
.expertise-card {
  padding-top: 35px;
  padding-bottom: 38px;
  transition: background .3s ease,
              transform .3s ease;
}

.expertise-card:hover {
  background: rgba(255,255,255,.035);
  transform: translateY(-5px);
}

.expertise-card h3 {
  font-size: 18px;
  line-height: 1.45;
}

.expertise-card p {
  font-size: 13px;
  line-height: 1.9;
}

/* Experiencia */
.experience-layout {
  gap: 15%;
}

.experience-copy .body-large {
  line-height: 1.8;
}

.underlined-link {
  transition: color .3s ease;
}

.underlined-link:hover {
  color: #a47e43;
}

/* Proyectos */
.project-item {
  padding: 32px 15px;
  transition: background .3s ease,
              padding .3s ease;
}

.project-item:hover {
  background: rgba(255,255,255,.65);
  padding-left: 25px;
  padding-right: 25px;
}

.project-item h3 {
  font-size: 15px;
  letter-spacing: .055em;
}

.project-item p {
  font-size: 13px;
  line-height: 1.8;
}

.project-arrow {
  transition: transform .3s ease;
}

.project-item:hover .project-arrow {
  transform: translate(5px,-5px);
}

/* Contacto */
.contact {
  background:
    radial-gradient(ellipse at 80% 50%,
    rgba(35,74,96,.3), transparent 55%),
    var(--navy);
}

.contact h2 {
  font-size: clamp(42px, 5vw, 68px);
  line-height: 1.16;
}

.contact-copy {
  font-size: 15px;
  line-height: 1.9;
}

/* Pie de página */
.site-footer {
  padding-top: 45px;
  padding-bottom: 30px;
}

.site-footer .brand {
  letter-spacing: .08em;
}

/* Accesibilidad */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 5px;
}

/* Adaptación móvil */
@media (max-width: 900px) {
  .hero {
    min-height: auto;
    padding-top: 75px;
    padding-bottom: 100px;
  }

  .photo-frame {
    height: 420px;
  }

  .main-nav {
    gap: 20px;
  }
}

@media (max-width: 650px) {
  .site-header {
    position: sticky;
    height: 68px;
  }

  .hero {
    padding-top: 60px;
    padding-bottom: 85px;
  }

  .hero h1 {
    font-size: clamp(43px, 11vw, 61px);
  }

  .hero-visual {
    width: 88%;
  }

  .photo-frame {
    height: auto;
    aspect-ratio: 4 / 4.5;
  }

  .section-light,
  .section-warm,
  .section-dark {
    padding: 75px 7%;
  }

  .expertise-card:hover {
    transform: none;
  }

  .project-item:hover {
    padding-left: 10px;
    padding-right: 10px;
  }

  .site-footer {
    gap: 18px;
  }
}

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

/* ==========================================
   PERFIL PERSONAL - CRISTIAN GAVIRIA
========================================== */

.profile-section {
  background: #f8f7f4;
  color: #102532;
  padding: 95px 7.5% 110px;
}

.profile-container {
  max-width: 1320px;
  margin: 0 auto;
}

.profile-label {
  color: #b88b55;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  margin-bottom: 75px;
}

.profile-header {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 90px;
  align-items: end;
  margin-bottom: 65px;
}

.profile-overline {
  color: #b88b55;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  margin-bottom: 24px;
}

.profile-header h2 {
  max-width: 720px;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(36px, 4.5vw, 62px);
  line-height: 1.12;
  letter-spacing: -2.5px;
  font-weight: 600;
  margin: 0;
}

.profile-header h2 span {
  display: block;
  color: #b88b55;
  font-family: Georgia, serif;
  font-weight: 400;
  font-style: italic;
}

.profile-introduction p {
  color: #304451;
  font-size: 19px;
  line-height: 1.8;
  margin: 0;
}

.profile-description {
  max-width: 950px;
  border-top: 1px solid #d9d5ce;
  padding-top: 35px;
  margin-bottom: 90px;
}

.profile-description p {
  color: #53636d;
  font-size: 15px;
  line-height: 1.95;
  margin: 0 0 20px;
}

.profile-academic {
  border-top: 1px solid #d9d5ce;
  padding-top: 55px;
}

.profile-academic-heading {
  margin-bottom: 35px;
}

.profile-academic-heading h3 {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(25px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -1px;
  margin: 0;
}

.academic-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.academic-card {
  background: #fff;
  border: 1px solid #e5e0d8;
  padding: 35px;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform .3s ease, border-color .3s ease;
}

.academic-card:hover {
  transform: translateY(-5px);
  border-color: #b88b55;
}

.academic-number {
  color: #b88b55;
  font-family: Georgia, serif;
  font-size: 22px;
  margin-bottom: 28px;
}

.academic-category {
  color: #9b825f;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  margin: 0 0 15px;
}

.academic-card h4 {
  color: #102532;
  font-family: 'Manrope', sans-serif;
  font-size: 19px;
  line-height: 1.5;
  font-weight: 600;
  margin: 0 0 25px;
}

.academic-status {
  display: inline-block;
  padding: 8px 13px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: auto;
}

.academic-status.completed {
  color: #315f4c;
  background: #e8f0e9;
}

.academic-status.ongoing {
  color: #80602e;
  background: #f5eddf;
}

.profile-purpose {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 35px;
  border-top: 1px solid #d9d5ce;
  margin-top: 85px;
  padding-top: 55px;
}

.purpose-number {
  color: #b88b55;
  font-family: Georgia, serif;
  font-size: 27px;
}

.profile-purpose h3 {
  max-width: 650px;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -1px;
  margin: 0 0 20px;
}

.profile-purpose > div:last-child > p:last-child {
  max-width: 760px;
  color: #53636d;
  font-size: 15px;
  line-height: 1.9;
}

/* RESPONSIVE */

@media (max-width: 768px) {
  .profile-section {
    padding: 65px 7% 75px;
  }

  .profile-label {
    margin-bottom: 45px;
  }

  .profile-header {
    grid-template-columns: 1fr;
    gap: 25px;
    margin-bottom: 40px;
  }

  .profile-header h2 {
    font-size: 39px;
    letter-spacing: -1.5px;
  }

  .profile-introduction p {
    font-size: 16px;
  }

  .profile-description {
    margin-bottom: 60px;
  }

  .academic-grid {
    grid-template-columns: 1fr;
  }

  .academic-card {
    min-height: 220px;
    padding: 27px;
  }

  .profile-purpose {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 60px;
    padding-top: 40px;
  }
}

@media (max-width: 400px) {
  .profile-header h2 {
    font-size: 33px;
  }

  .profile-academic-heading h3 {
    font-size: 25px;
  }
}