/* ==========================================================
   RESET
   ========================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  background:
    var(--background);

  color:
    var(--text);

  overflow-x: hidden;

  transition:
    background-color 0.5s ease,
    color 0.5s ease;
}


button,
input,
textarea,
select {
  font: inherit;
}


button,
a {
  -webkit-tap-highlight-color:
    transparent;
}


a {
  color: inherit;
}



/* ==========================================================
   VARIABLES
   ========================================================== */

html[data-theme="light"] {

  --background:
    #f5f5f7;

  --text:
    #111111;

  --secondary-text:
    rgba(20,20,20,.5);

  --tertiary-text:
    rgba(20,20,20,.22);

  --line:
    rgba(0,0,0,.1);

  --card:
    rgba(255,255,255,.45);

  --card-strong:
    rgba(255,255,255,.72);

  --button-background:
    rgba(255,255,255,.58);

  --button-hover:
    rgba(255,255,255,.95);

  --button-border:
    rgba(0,0,0,.08);

  --scroll-line:
    rgba(0,0,0,.12);

  --scroll-light:
    rgba(0,0,0,.7);

  --contact-background:
    #111111;

  --contact-text:
    #f5f5f7;

  --contact-muted:
    rgba(255,255,255,.5);

  --contact-line:
    rgba(255,255,255,.15);

}


html[data-theme="dark"] {

  --background:
    #000000;

  --text:
    #f5f5f7;

  --secondary-text:
    rgba(255,255,255,.48);

  --tertiary-text:
    rgba(255,255,255,.18);

  --line:
    rgba(255,255,255,.13);

  --card:
    rgba(255,255,255,.04);

  --card-strong:
    rgba(255,255,255,.07);

  --button-background:
    rgba(255,255,255,.08);

  --button-hover:
    rgba(255,255,255,.14);

  --button-border:
    rgba(255,255,255,.12);

  --scroll-line:
    rgba(255,255,255,.16);

  --scroll-light:
    rgba(255,255,255,.9);

  --contact-background:
    #f0f0f2;

  --contact-text:
    #111111;

  --contact-muted:
    rgba(0,0,0,.48);

  --contact-line:
    rgba(0,0,0,.13);

}



/* ==========================================================
   FONDO
   ========================================================== */

.animated-background {

  position: fixed;

  inset: 0;

  z-index: -2;

  overflow: hidden;

  background:
    var(--background);

  pointer-events: none;

}


.background-noise {

  position: fixed;

  inset: 0;

  z-index: -1;

  pointer-events: none;

  opacity: .014;

  background-image:
    repeating-radial-gradient(
      circle at 0 0,
      transparent 0,
      currentColor 1px,
      transparent 2px
    );

  background-size:
    5px 5px;

}


.blob {

  position: absolute;

  border-radius: 50%;

  filter:
    blur(90px);

  will-change:
    transform;

}


.blob-one {

  width: 550px;
  height: 550px;

  left: -130px;
  top: -100px;

  background:
    rgba(145,155,175,.10);

  animation:
    blobOneMovement
    18s
    ease-in-out
    infinite;

}


.blob-two {

  width: 650px;
  height: 650px;

  right: -220px;
  top: 28%;

  background:
    rgba(170,175,190,.08);

  animation:
    blobTwoMovement
    22s
    ease-in-out
    infinite;

}


.blob-three {

  width: 500px;
  height: 500px;

  left: 35%;
  bottom: -220px;

  background:
    rgba(125,135,155,.07);

  animation:
    blobThreeMovement
    20s
    ease-in-out
    infinite;

}


html[data-theme="dark"] .blob {

  opacity: .65;

}


@keyframes blobOneMovement {

  0%,
  100% {
    transform:
      translate3d(0,0,0)
      scale(1);
  }

  50% {
    transform:
      translate3d(120px,80px,0)
      scale(1.12);
  }

}


@keyframes blobTwoMovement {

  0%,
  100% {
    transform:
      translate3d(0,0,0)
      scale(1);
  }

  50% {
    transform:
      translate3d(-130px,-60px,0)
      scale(1.08);
  }

}


@keyframes blobThreeMovement {

  0%,
  100% {
    transform:
      translate3d(0,0,0)
      scale(1);
  }

  50% {
    transform:
      translate3d(80px,-100px,0)
      scale(1.15);
  }

}



/* ==========================================================
   CONTROLES SUPERIORES
   ========================================================== */

.top-actions {

  position: fixed;

  top: 28px;
  right: 32px;

  z-index: 100;

  display: flex;

  align-items: center;

  gap: 10px;

}



/* ==========================================================
   SELECTOR DE IDIOMA
   ========================================================== */

.language-toggle {

  height: 46px;

  display: flex;

  align-items: center;

  padding:
    0 16px;

  gap: 7px;

  border:
    1px solid
    var(--button-border);

  border-radius:
    100px;

  background:
    var(--button-background);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

}


.language-option {

  border: 0;

  padding: 0;

  background: none;

  color:
    var(--secondary-text);

  cursor: pointer;

  font-size: 10px;

  font-weight: 700;

  letter-spacing:
    .12em;

  transition:
    color .25s ease,
    opacity .25s ease;

}


.language-option.active {

  color:
    var(--text);

}


.language-option:hover {

  color:
    var(--text);

}


.language-divider {

  color:
    var(--tertiary-text);

}



/* ==========================================================
   TEMA
   ========================================================== */

.theme-toggle {

  position: relative;

  width: 46px;
  height: 46px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  border:
    1px solid
    var(--button-border);

  background:
    var(--button-background);

  color:
    var(--text);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  cursor: pointer;

  transition:
    transform .25s ease,
    background .25s ease;

}


.theme-toggle:hover {

  transform:
    scale(1.06);

  background:
    var(--button-hover);

}


.theme-icon {

  position: absolute;

  width: 19px;
  height: 19px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;

  transition:
    opacity .35s ease,
    transform .45s ease;

}


html[data-theme="light"]
.sun-icon {

  opacity: 0;

  transform:
    rotate(-90deg)
    scale(.7);

}


html[data-theme="light"]
.moon-icon {

  opacity: 1;

}


html[data-theme="dark"]
.sun-icon {

  opacity: 1;

}


html[data-theme="dark"]
.moon-icon {

  opacity: 0;

  transform:
    rotate(90deg)
    scale(.7);

}



/* ==========================================================
   HERO
   ========================================================== */

.hero {

  position: relative;

  min-height: 100vh;

  display: flex;

  align-items: center;
  justify-content: center;

  padding:
    80px 24px;

}


.hero-content {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  transform:
    translateY(-12px);

  will-change:
    transform,
    opacity;

}


.clock-container {

  margin-bottom:
    30px;

}


.clock-time {

  display: block;

  font-size:
    clamp(2rem,4vw,3.25rem);

  font-weight: 300;

  letter-spacing:
    -.04em;

  line-height: 1;

}


.clock-locale {

  margin-top: 10px;

  color:
    var(--secondary-text);

  font-size: 10px;

  font-weight: 600;

  letter-spacing:
    .17em;

  text-transform:
    uppercase;

}


.welcome-container {

  display: flex;

  align-items: baseline;

  justify-content: center;

  min-height:
    clamp(75px,12vw,140px);

}


.typed-word {

  font-size:
    clamp(3.3rem,9vw,8.5rem);

  font-weight: 600;

  line-height: 1;

  letter-spacing:
    -.055em;

  white-space: nowrap;

}


.caret {

  display: inline-block;

  width: 3px;

  height:
    clamp(3rem,8vw,7.2rem);

  margin-left:
    8px;

  border-radius:
    3px;

  background:
    var(--text);

  animation:
    caretBlink
    1s
    steps(1)
    infinite;

}


.caret.typing {

  animation: none;

  opacity: 1;

}


@keyframes caretBlink {

  0%,
  45% {
    opacity: 1;
  }

  46%,
  100% {
    opacity: 0;
  }

}



/* ==========================================================
   SCROLL INDICATOR
   ========================================================== */

.scroll-indicator {

  position: absolute;

  left: 50%;
  bottom: 28px;

  transform:
    translateX(-50%);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 12px;

}


.scroll-label {

  color:
    var(--secondary-text);

  font-size: 9px;

  font-weight: 600;

  letter-spacing:
    .22em;

  text-transform:
    uppercase;

}


.scroll-line {

  position: relative;

  width: 1px;
  height: 52px;

  overflow: hidden;

  background:
    var(--scroll-line);

}


.scroll-light {

  position: absolute;

  top: -20px;

  width: 1px;
  height: 22px;

  background:
    linear-gradient(
      to bottom,
      transparent,
      var(--scroll-light),
      transparent
    );

  box-shadow:
    0 0 8px
    var(--scroll-light);

  animation:
    scrollLightMovement
    2.2s
    ease-in-out
    infinite;

}


@keyframes scrollLightMovement {

  0% {
    transform:
      translateY(-20px);

    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform:
      translateY(90px);

    opacity: 0;
  }

}



/* ==========================================================
   GENERAL
   ========================================================== */

.section-shell {

  width:
    min(1500px,88vw);

  margin:
    0 auto;

}


.section-label {

  display: block;

  margin-bottom:
    32px;

  color:
    var(--secondary-text);

  font-size: 10px;

  font-weight: 700;

  letter-spacing:
    .2em;

}


.section-title {

  max-width:
    950px;

  font-size:
    clamp(3.5rem,7vw,7.5rem);

  font-weight: 600;

  line-height:
    .92;

  letter-spacing:
    -.06em;

}


.section-intro {

  max-width:
    380px;

  color:
    var(--secondary-text);

  font-size:
    1rem;

  line-height:
    1.6;

}



/* ==========================================================
   ABOUT
   ========================================================== */

.about-section {

  position: relative;

  min-height:
    145vh;

}


.about-sticky {

  position: sticky;

  top: 0;

  min-height: 100vh;

  display: flex;

  align-items: center;

  overflow: hidden;

  padding:
    80px 6vw;

}


.about-container {

  position: relative;

  z-index: 2;

  width: 100%;

  max-width:
    1500px;

  margin:
    0 auto;

  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(320px,.72fr);

  gap:
    clamp(55px,9vw,160px);

  align-items: center;

}


.about-copy,
.about-visual {

  opacity: 0;

  will-change:
    transform,
    opacity;

}


.about-title {

  font-size:
    clamp(3.7rem,7vw,8rem);

  font-weight: 600;

  line-height:
    .88;

  letter-spacing:
    -.065em;

}


.muted-title {

  color:
    var(--secondary-text);

}


.about-description {

  max-width:
    560px;

  margin-top:
    42px;

  color:
    var(--secondary-text);

  font-size:
    clamp(1rem,1.4vw,1.3rem);

  line-height:
    1.6;

}


.about-disciplines {

  margin-top:
    48px;

  border-top:
    1px solid
    var(--line);

}


.discipline {

  display: grid;

  grid-template-columns:
    55px 1fr;

  padding:
    13px 0;

  border-bottom:
    1px solid
    var(--line);

  font-size:
    11px;

  letter-spacing:
    .12em;

}


.discipline-number {

  color:
    var(--secondary-text);

}


.portrait-frame {

  position: relative;

  width: 100%;

  max-width:
    520px;

  margin-left:
    auto;

  overflow: hidden;

  border-radius:
    32px;

  background:
    var(--card-strong);

}


.portrait-frame::before {

  content: "";

  display: block;

  padding-top:
    125%;

}


.portrait-image {

  position: absolute;

  inset: -7% 0;

  width: 100%;
  height: 114%;

  object-fit: cover;

  object-position: center;

  transform:
    scale(1.08);

  will-change:
    transform;

}


.portrait-caption {

  position: absolute;

  left: 18px;
  right: 18px;
  bottom: 18px;

  display: flex;

  justify-content: space-between;

  padding:
    13px 15px;

  border:
    1px solid
    rgba(255,255,255,.2);

  border-radius:
    100px;

  background:
    rgba(0,0,0,.2);

  color:
    #ffffff;

  backdrop-filter:
    blur(14px);

  font-size: 9px;

  font-weight: 600;

  letter-spacing:
    .15em;

}


.portrait-role {

  display: block;

  width:
    fit-content;

  margin:
    18px 4px 0 auto;

  color:
    var(--secondary-text);

  font-size: 9px;

  letter-spacing:
    .14em;

}


.about-background-number {

  position: absolute;

  left: -3vw;
  bottom: -9vw;

  color:
    var(--tertiary-text);

  font-size:
    clamp(16rem,35vw,38rem);

  font-weight: 700;

  line-height: .7;

  letter-spacing:
    -.1em;

  opacity: .17;

  pointer-events: none;

}



/* ==========================================================
   WORK
   ========================================================== */

.work-section {

  position: relative;

  padding:
    160px 0 180px;

}


.work-header {

  display: grid;

  grid-template-columns:
    1fr auto;

  gap:
    50px;

  align-items: end;

  margin-bottom:
    70px;

}


.work-filters {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom:
    50px;

}


.filter-button {

  padding:
    11px 17px;

  border:
    1px solid
    var(--line);

  border-radius:
    100px;

  background:
    transparent;

  color:
    var(--secondary-text);

  cursor: pointer;

  font-size:
    10px;

  font-weight:
    600;

  letter-spacing:
    .09em;

  transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease;

}


.filter-button:hover {

  transform:
    translateY(-2px);

  color:
    var(--text);

}


.filter-button.active {

  background:
    var(--text);

  color:
    var(--background);

}



/* ==========================================================
   PROJECT GRID
   ========================================================== */

.projects-grid {

  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:
    70px 24px;

}


.project-card {

  min-width: 0;

  transition:
    opacity .4s ease,
    transform .4s ease;

}


.project-card.is-hidden {

  display: none;

}


.project-card-wide {

  grid-column:
    1 / -1;

}


.project-media {

  position: relative;

  aspect-ratio:
    4 / 3;

  overflow: hidden;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius:
    28px;

  background:
    linear-gradient(
      135deg,
      rgba(150,150,160,.16),
      rgba(255,255,255,.02)
    );

  border:
    1px solid
    var(--line);

  transition:
    transform .5s
    cubic-bezier(.2,.7,.2,1);

}


.project-card:hover
.project-media {

  transform:
    scale(.985);

}


.project-card-wide
.project-media {

  aspect-ratio:
    16 / 7;

}


.project-placeholder {

  color:
    var(--secondary-text);

  font-size:
    clamp(2rem,5vw,5.5rem);

  font-weight: 600;

  letter-spacing:
    -.055em;

}


.project-number {

  position: absolute;

  right: 22px;
  top: 22px;

  font-size:
    10px;

  letter-spacing:
    .14em;

  color:
    var(--secondary-text);

}


.media-dark {

  background:
    linear-gradient(
      135deg,
      #111111,
      #303033
    );

  color:
    #ffffff;

}


.media-dark
.project-placeholder {

  color:
    rgba(255,255,255,.7);

}


.media-code {

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 44px,
      var(--line) 45px
    );

}


.media-editorial {

  background:
    linear-gradient(
      45deg,
      var(--card),
      transparent
    );

}


.media-photo {

  background:
    radial-gradient(
      circle at 50% 40%,
      var(--card-strong),
      var(--card)
    );

}


.project-info {

  display: flex;

  justify-content: space-between;

  gap: 30px;

  margin-top:
    18px;

}


.project-category {

  display: block;

  margin-bottom:
    6px;

  color:
    var(--secondary-text);

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    .13em;

}


.project-info h3 {

  font-size:
    clamp(1.35rem,2vw,2rem);

  font-weight:
    500;

  letter-spacing:
    -.035em;

}


.project-tech {

  max-width:
    210px;

  color:
    var(--secondary-text);

  text-align: right;

  font-size:
    11px;

  line-height:
    1.5;

}


.projects-note {

  display: flex;

  align-items: center;

  gap: 18px;

  margin-top:
    80px;

  padding-top:
    30px;

  border-top:
    1px solid
    var(--line);

}


.projects-note span {

  font-size:
    2rem;

  font-weight:
    300;

}


.projects-note p {

  color:
    var(--secondary-text);

}



/* ==========================================================
   CV
   ========================================================== */

.cv-section {

  padding:
    170px 0;

  border-top:
    1px solid
    var(--line);

}


.cv-heading-row {

  display: flex;

  justify-content: space-between;

  gap:
    50px;

  align-items: end;

}


.download-cv {

  flex-shrink: 0;

  display: flex;

  align-items: center;

  gap: 24px;

  padding:
    14px 18px;

  border:
    1px solid
    var(--line);

  border-radius:
    100px;

  text-decoration: none;

  font-size:
    10px;

  font-weight:
    600;

  letter-spacing:
    .1em;

  transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease;

}


.download-cv:hover {

  background:
    var(--text);

  color:
    var(--background);

  transform:
    translateY(-2px);

}


.cv-summary {

  max-width:
    1000px;

  margin:
    90px 0;

}


.cv-summary p {

  font-size:
    clamp(1.8rem,3.5vw,3.6rem);

  line-height:
    1.12;

  letter-spacing:
    -.045em;

}


.cv-layout {

  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:
    9vw;

}


.cv-column-title {

  display: block;

  margin-bottom:
    28px;

  color:
    var(--secondary-text);

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    .18em;

}


.timeline-item {

  display: grid;

  grid-template-columns:
    105px 1fr;

  gap:
    24px;

  padding:
    25px 0;

  border-top:
    1px solid
    var(--line);

}


.timeline-date {

  color:
    var(--secondary-text);

  font-size:
    10px;

  letter-spacing:
    .08em;

}


.timeline-item h3 {

  margin-bottom:
    5px;

  font-size:
    1.15rem;

  font-weight:
    500;

}


.timeline-role {

  display: block;

  margin-bottom:
    12px;

  color:
    var(--secondary-text);

  font-size:
    11px;

}


.timeline-item p {

  color:
    var(--secondary-text);

  line-height:
    1.6;

  font-size:
    .9rem;

}


.skills-grid {

  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  border-top:
    1px solid
    var(--line);

}


.skill-group {

  padding:
    20px 15px 20px 0;

  border-bottom:
    1px solid
    var(--line);

}


.skill-group span {

  display: block;

  margin-bottom:
    8px;

  color:
    var(--secondary-text);

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    .13em;

}


.skill-group p {

  line-height:
    1.6;

  font-size:
    .88rem;

}


.education-block {

  margin-top:
    65px;

}


.education-row {

  display: grid;

  grid-template-columns:
    105px 1fr;

  gap:
    24px;

  padding-top:
    22px;

  border-top:
    1px solid
    var(--line);

}


.education-row > span {

  color:
    var(--secondary-text);

  font-size:
    10px;

}


.education-row strong {

  display: block;

  max-width:
    450px;

  font-weight:
    500;

  line-height:
    1.45;

}


.education-row p {

  margin-top:
    8px;

  color:
    var(--secondary-text);

}



/* ==========================================================
   CONTACT
   ========================================================== */

.contact-section {

  position: relative;

  width:
    calc(100% - 32px);

  margin:
    16px;

  padding:
    110px
    clamp(24px,6vw,100px)
    35px;

  border-radius:
    38px;

  background:
    var(--contact-background);

  color:
    var(--contact-text);

}


.contact-shell {

  width:
    min(1400px,100%);

  margin:
    0 auto;

  display: grid;

  grid-template-columns:
    minmax(0,1.1fr)
    minmax(340px,.75fr);

  gap:
    clamp(60px,10vw,160px);

  align-items: start;

}


.contact-label {

  color:
    var(--contact-muted);

}


.contact-message h2 {

  max-width:
    820px;

  font-size:
    clamp(4rem,8vw,9rem);

  font-weight:
    600;

  line-height:
    .86;

  letter-spacing:
    -.07em;

}


.contact-message > p {

  max-width:
    520px;

  margin-top:
    45px;

  color:
    var(--contact-muted);

  font-size:
    clamp(1rem,1.3vw,1.25rem);

  line-height:
    1.6;

}


.contact-email {

  display: inline-block;

  margin-top:
    40px;

  color:
    var(--contact-text);

  font-size:
    clamp(1rem,1.6vw,1.35rem);

  text-decoration:
    underline;

  text-decoration-thickness:
    1px;

  text-underline-offset:
    6px;

}


.contact-orbit {

  display: flex;

  align-items: center;

  gap:
    10px;

  margin-top:
    60px;

  color:
    var(--contact-muted);

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    .14em;

}


.orbit-dot {

  width: 8px;
  height: 8px;

  border-radius:
    50%;

  background:
    #52d273;

  box-shadow:
    0 0 18px
    rgba(82,210,115,.7);

  animation:
    statusPulse
    2.4s
    ease-in-out
    infinite;

}


@keyframes statusPulse {

  50% {
    transform:
      scale(.7);

    opacity:
      .45;
  }

}



/* ==========================================================
   CONTACT FORM
   ========================================================== */

.contact-form-container {

  padding:
    35px;

  border:
    1px solid
    var(--contact-line);

  border-radius:
    30px;

  background:
    rgba(127,127,127,.06);

}


.form-field {

  margin-bottom:
    27px;

}


.form-field label {

  display: block;

  margin-bottom:
    10px;

  color:
    var(--contact-muted);

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;

}


.form-field input,
.form-field textarea,
.form-field select {

  width: 100%;

  padding:
    13px 0;

  border: 0;

  border-bottom:
    1px solid
    var(--contact-line);

  border-radius: 0;

  outline: none;

  background:
    transparent;

  color:
    var(--contact-text);

  font-size:
    1rem;

  transition:
    border-color .25s ease;

}


.form-field textarea {

  resize:
    vertical;

  min-height:
    120px;

}


.form-field select {

  cursor:
    pointer;

}


.form-field option {

  color:
    #111111;

}


.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {

  border-color:
    var(--contact-text);

}


.form-field input::placeholder,
.form-field textarea::placeholder {

  color:
    var(--contact-muted);

}


.send-button {

  width: 100%;

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-top:
    15px;

  padding:
    17px 20px;

  border: 0;

  border-radius:
    100px;

  background:
    var(--contact-text);

  color:
    var(--contact-background);

  cursor:
    pointer;

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    .1em;

  transition:
    transform .3s ease;

}


.send-button:hover {

  transform:
    scale(.985);

}


.send-arrow {

  font-size:
    1.2rem;

}


.form-status {

  min-height:
    20px;

  margin-top:
    16px;

  color:
    var(--contact-muted);

  font-size:
    11px;

  line-height:
    1.5;

}



/* ==========================================================
   FOOTER
   ========================================================== */

.portfolio-footer {

  width:
    min(1400px,100%);

  margin:
    110px auto 0;

  padding-top:
    25px;

  display: flex;

  justify-content: space-between;

  border-top:
    1px solid
    var(--contact-line);

  color:
    var(--contact-muted);

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    .14em;

}


.portfolio-footer a {

  text-decoration:
    none;

}



/* ==========================================================
   REVEAL
   ========================================================== */

.reveal {

  opacity: 0;

  transform:
    translateY(50px);

  transition:
    opacity .9s
    cubic-bezier(.2,.7,.2,1),
    transform .9s
    cubic-bezier(.2,.7,.2,1);

}


.reveal.is-visible {

  opacity: 1;

  transform:
    translateY(0);

}



/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

  .work-header,
  .cv-heading-row,
  .contact-shell {

    grid-template-columns:
      1fr;

  }


  .work-header {

    display: block;

  }


  .section-intro {

    margin-top:
      30px;

  }


  .about-section {

    min-height:
      auto;

  }


  .about-sticky {

    position: relative;

    min-height:
      auto;

    padding:
      130px 24px;

  }


  .about-container {

    grid-template-columns:
      1fr;

  }


  .about-copy,
  .about-visual {

    opacity: 1;

  }


  .projects-grid {

    grid-template-columns:
      1fr;

  }


  .project-card-wide {

    grid-column:
      auto;

  }


  .project-card-wide
  .project-media {

    aspect-ratio:
      4 / 3;

  }


  .cv-heading-row {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

  }


  .cv-layout {

    grid-template-columns:
      1fr;

    gap:
      80px;

  }


  .contact-shell {

    display: grid;

    gap:
      80px;

  }


  .contact-message h2 {

    max-width:
      700px;

  }

}



/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 600px) {

  .top-actions {

    top: 18px;
    right: 18px;

  }


  .theme-toggle {

    width: 44px;
    height: 44px;

  }


  .language-toggle {

    height: 44px;

    padding:
      0 13px;

  }


  .typed-word {

    font-size:
      clamp(2.8rem,14vw,4.8rem);

  }


  .caret {

    height:
      clamp(2.7rem,12vw,4.2rem);

  }


  .section-shell {

    width:
      calc(100% - 40px);

  }


  .about-sticky {

    padding:
      110px 20px;

  }


  .about-title {

    font-size:
      clamp(3.2rem,16vw,5.2rem);

  }


  .portrait-frame {

    border-radius:
      22px;

  }


  .work-section,
  .cv-section {

    padding:
      120px 0;

  }


  .section-title {

    font-size:
      clamp(3rem,15vw,5rem);

  }


  .project-info {

    flex-direction:
      column;

    gap:
      10px;

  }


  .project-tech {

    text-align:
      left;

  }


  .timeline-item,
  .education-row {

    grid-template-columns:
      1fr;

    gap:
      10px;

  }


  .skills-grid {

    grid-template-columns:
      1fr;

  }


  .contact-section {

    width:
      calc(100% - 16px);

    margin:
      8px;

    padding:
      80px 20px
      28px;

    border-radius:
      26px;

  }


  .contact-message h2 {

    font-size:
      clamp(3.5rem,16vw,5.7rem);

  }


  .contact-form-container {

    padding:
      24px;

    border-radius:
      22px;

  }


  .portfolio-footer {

    margin-top:
      80px;

  }

}



/* ==========================================================
   REDUCIR MOVIMIENTO
   ========================================================== */

@media
(prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .blob,
  .scroll-light,
  .orbit-dot {

    animation:
      none !important;

  }

  .reveal {

    opacity: 1;

    transform: none;

    transition: none;

  }

}