:root {
  --color-primary: #DBE9F8;
  --color-secondary: #012169;
  --color-tertiary: #fefefe;
  --color-text: #012169;

  --radius: 0.1875rem;

  --max-width: 75rem;

  --section-padding:
    clamp(3rem, 6vw, 6rem);
}


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

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
}

body {
  margin: 0;

  min-width: 20rem;

  background:
    var(--color-primary);

  color:
    var(--color-text);

  font-family:
    /* "Federo", */
    "IBM Plex Sans",
    sans-serif;

  font-size: 0.875rem;

  line-height: 1.65;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

h2,
h3,
p {
  margin-top: 0;
}

h2,
h3,
strong {
  font-weight: 400;
}

h2 {
  margin-bottom: 2.5rem;

  font-size:
    clamp(
      1.75rem,
      3vw,
      2.5rem
    );

  line-height: 1.1;
}

h3 {
  margin-bottom: 0.75rem;

  font-size: 1.125rem;

  line-height: 1.3;
}

strong,
.resume-card h3 {
  font-weight: 700;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.button {
  display: inline-flex;

  min-height: 2.75rem;

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

  padding:
    0.65rem
    1.25rem;

  border:
    1px solid
    var(--color-tertiary);

  border-radius:
    var(--radius);

  background:
    var(--color-secondary);

  color:
    var(--color-tertiary);

  text-decoration: none;

  transition:
    transform 160ms ease,
    opacity 160ms ease;
}

.button:hover,
.button:focus-visible {
  opacity: 0.9;

  transform:
    translateY(-0.125rem);
}


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

.hero {
  --hero-image-width: 80rem;
  --hero-image-height: 45rem;

  --hero-image-scale: 1.8;

  --hero-image-x: 51rem;
  --hero-image-y: 10rem;

  width: 100%;

  overflow: hidden;

  background:
    var(--color-secondary);

  color:
    var(--color-tertiary);
}


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

.hero__nav-shell {
  position: relative;

  z-index: 20;

  width: 100%;

  background:
    var(--color-secondary);
}


.hero__nav-inner {
  position: relative;

  display: flex;

  width:
    min(
      calc(100% - 6rem),
      var(--max-width)
    );

  min-height: 5rem;

  margin:
    0 auto;

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


.main-nav {
  display: flex;

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

  gap:
    clamp(
      1.5rem,
      4vw,
      3.5rem
    );
}


.main-nav a {
  position: relative;

  color:
    var(--color-tertiary);

  font-size: 1rem;

  text-decoration: none;
}


.main-nav a::after {
  position: absolute;

  right: 0;
  bottom: -0.4rem;
  left: 0;

  height: 1px;

  background:
    var(--color-tertiary);

  content: "";

  opacity: 0;

  transform:
    scaleX(0);

  transform-origin:
    center;

  transition:
    opacity 160ms ease,
    transform 160ms ease;
}


.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  opacity: 1;

  transform:
    scaleX(1);
}


/* =========================================================
   MOBILE MENU BASE
   ========================================================= */

.menu-toggle,
.menu-button {
  display: none;
}


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

.hero__inner {
  display: grid;

  width:
    min(
      calc(100% - 6rem),
      var(--max-width)
    );

  min-height:
    calc(100vh - 5rem);

  margin:
    0 auto;

  grid-template-rows:
    1fr;
}


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

.hero__content {
  display: grid;

  min-height: 0;

  grid-template-columns:
    minmax(0, 0.8fr)
    minmax(0, 1.2fr);

  align-items: stretch;
}


/* =========================================================
   HERO LEFT COLUMN
   ========================================================= */

.hero__identity {
  position: relative;

  z-index: 10;

  display: flex;

  align-self: stretch;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;

  padding-right:
    clamp(
      1rem,
      2vw,
      2rem
    );

  color:
    var(--color-tertiary);
}


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

.hero__title {
  width: 100%;

  margin:
    0 0 2rem;

  color:
    var(--color-tertiary);

  font-size:
    clamp(
      2.75rem,
      6vw,
      3.5rem
    );

  line-height: 0.95;
}


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

.button--contact {
  min-width: 10rem;

  border:
    1px solid
    var(--color-tertiary);
}


/* =========================================================
   SOCIAL
   ========================================================= */

.social {
  display: flex;

  gap: 1rem;

  margin-top: 1.5rem;
}


.social a {
  display: inline-flex;

  width: 2.75rem;
  height: 2.75rem;

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

  border-radius: 50%;

  color:
    var(--color-tertiary);

  text-decoration: none;

  transition:
    background-color 160ms ease,
    transform 160ms ease;
}


.social a:hover,
.social a:focus-visible {
  background:
    rgba(
      254,
      254,
      254,
      0.12
    );

  transform:
    translateY(-0.125rem);
}


.social i {
  width: 1.5rem;
  height: 1.5rem;

  font-size: 1.5rem;

  line-height: 1.5rem;

  text-align: center;
}


/* =========================================================
   HERO IMAGE STAGE
   ========================================================= */

.hero__image-stage {
  position: relative;

  z-index: 1;

  overflow: hidden;

  min-width: 0;

  min-height:
    var(--hero-image-height);
}


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

.hero__image {
  position: absolute;

  right: 0;
  bottom: 0;

  width:
    var(--hero-image-width);

  max-width: none;

  height:
    var(--hero-image-height);

  object-fit: contain;

  object-position:
    right bottom;

  transform:
    translate(
      var(--hero-image-x),
      var(--hero-image-y)
    )
    scale(
      var(--hero-image-scale)
    );

  transform-origin:
    right bottom;
}


/* =========================================================
   MOBILE CONTACT BAR
   ========================================================= */

.mobile-contact-bar {
  display: none;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.section {
  padding:
    var(--section-padding)
    clamp(
      1.25rem,
      4vw,
      3rem
    );
}


.section:nth-of-type(even) {
  background:
    rgba(
      254,
      254,
      254,
      0.28
    );
}


.section__inner {
  width:
    min(
      100%,
      var(--max-width)
    );

  margin:
    0 auto;
}


.section__inner--narrow {
  width:
    min(
      100%,
      62rem
    );
}


.section__subheading {
  margin-top:
    var(--section-padding);
}


/* =========================================================
   BIOGRAPHY
   ========================================================= */

.biography {
  columns:
    2 21rem;

  column-gap:
    clamp(
      2rem,
      5vw,
      4.5rem
    );
}


.biography p {
  break-inside: avoid;

  margin-bottom: 1.25rem;
}


/* =========================================================
   EXPERIENCE / EDUCATION
   ========================================================= */

.experience-grid,
.education-grid {
  display: grid;

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

  gap: 1.25rem;
}


.resume-card {
  min-width: 0;

  padding: 1.5rem;

  border:
    1px solid
    rgba(
      1,
      33,
      105,
      0.2
    );

  border-radius:
    var(--radius);

  background:
    rgba(
      254,
      254,
      254,
      0.34
    );
}


.resume-card p {
  margin-bottom: 0.5rem;
}


.resume-row {
  display: grid;

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

  gap: 1rem;

  align-items: start;

  padding:
    0.45rem 0;
}


.resume-row + .resume-row {
  border-top:
    1px solid
    rgba(
      1,
      33,
      105,
      0.1
    );
}


.resume-year {
  text-align: right;

  white-space: nowrap;
}


.location {
  margin-top: 0.75rem;
  margin-bottom: 0;

  opacity: 0.78;
}


/* =========================================================
   MEDIA
   ========================================================= */

.section--media {
  padding-bottom:
    clamp(
      4rem,
      8vw,
      8rem
    );
}


/*
 * 290px = 18.125rem
 * 500px = 31.25rem
 *
 * En desktop cada portada puede alcanzar exactamente
 * 290px de ancho y su altura queda determinada por
 * aspect-ratio.
 */

.media-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 18.125rem)
    );

  justify-content: center;

  gap:
    clamp(
      1rem,
      3vw,
      2rem
    );
}


.media-card {
  width: 100%;

  margin: 0;

  aspect-ratio:
    290 / 500;

  overflow: hidden;

  border-radius:
    var(--radius);
}


.media-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (min-width: 64rem) {

  .hero {
    --hero-image-scale: 1.4;

    --hero-image-x: 36rem;
  }

}


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

@media (max-width: 56rem) {


  /* =======================================================
     CONTROLES FOTO MÓVIL
     ======================================================= */

  .hero {
    --hero-mobile-image-height: 32rem;

    --hero-mobile-image-width: 48rem;

    --hero-mobile-image-scale: 1.15;

    --hero-mobile-image-x: 0rem;

    --hero-mobile-image-y: 3.2rem;
  }


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

  .hero__nav-shell {
    position: relative;

    width: 100%;

    min-height: 3.5rem;
  }


  .hero__nav-inner {
    position: relative;

    width: 100%;

    min-height: 3.5rem;
  }


  .menu-button {
    position: absolute;

    top: 0;
    left: 0;

    z-index: 30;

    display: flex;

    width: 3.5rem;
    height: 3.5rem;

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

    color:
      var(--color-tertiary);

    cursor: pointer;

    font-size: 1.5rem;
  }


  .main-nav {
    position: absolute;

    top: 3.5rem;
    right: 0;
    left: 0;

    z-index: 25;

    display: none;

    width: 100%;

    flex-direction: column;

    gap: 0;

    padding:
      0
      1rem
      1rem;

    background:
      var(--color-secondary);
  }


  .main-nav a {
    display: block;

    width: 100%;

    padding:
      0.9rem 0;

    border-top:
      1px solid
      rgba(
        254,
        254,
        254,
        0.16
      );

    color:
      var(--color-tertiary);

    text-align: center;
  }


  .main-nav a::after {
    display: none;
  }


  .menu-toggle:checked ~ .main-nav {
    display: flex;
  }


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

  .hero__inner {
    width: 100%;

    min-height: auto;

    margin: 0;

    grid-template-rows:
      auto;
  }


  .hero__content {
    display: grid;

    grid-template-columns:
      1fr;

    grid-template-rows:
      auto auto;
  }


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

  .hero__identity {
    order: 1;

    min-height: auto;

    padding:
      1.5rem
      1.25rem
      1rem;
  }


  .hero__identity > .button,
  .hero__identity > .social {
    display: none;
  }


  .hero__title {
    width: 100%;

    margin: 0;

    padding: 0;

    font-size:
      clamp(
        2.5rem,
        12vw,
        4rem
      );

    line-height: 1;
  }


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

  .hero__image-stage {
    order: 2;

    position: relative;

    min-height:
      var(--hero-mobile-image-height);

    overflow: hidden;
  }


  .hero__image {
    position: absolute;

    right: 50%;
    bottom: 0;

    width:
      var(--hero-mobile-image-width);

    max-width: none;

    height:
      var(--hero-mobile-image-height);

    object-fit: contain;

    object-position:
      center bottom;

    transform:
      translateX(50%)
      translate(
        var(--hero-mobile-image-x),
        var(--hero-mobile-image-y)
      )
      scale(
        var(--hero-mobile-image-scale)
      );

    transform-origin:
      center bottom;
  }


  /* =======================================================
     MOBILE CONTACT BAR
     ======================================================= */

  .mobile-contact-bar {
    display: block;

    width: 100%;

    background:
      var(--color-primary);
  }


  .mobile-contact-bar__inner {
    display: flex;

    width: 100%;

    min-height: 5.5rem;

    padding:
      1rem
      1.25rem;

    align-items: center;

    justify-content: center;

    gap: 1rem;

    flex-wrap: wrap;
  }


  .mobile-contact-bar .button--contact {
    flex:
      0 0 auto;
  }


  .social--mobile {
    margin-top: 0;

    flex:
      0 0 auto;
  }


  .social--mobile a {
    color:
      var(--color-secondary);
  }


  .social--mobile a:hover,
  .social--mobile a:focus-visible {
    background:
      rgba(
        1,
        33,
        105,
        0.08
      );
  }


  /* =======================================================
     EXPERIENCE / EDUCATION
     ======================================================= */

  .experience-grid,
  .education-grid {
    grid-template-columns:
      1fr;
  }


  /* =======================================================
     BIOGRAPHY
     ======================================================= */

  .biography {
    columns: 1;
  }


  /* =======================================================
     MEDIA
     ======================================================= */

  .media-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 18.125rem)
      );
  }

}


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

@media (max-width: 36rem) {

  .hero__identity {
    padding:
      1.25rem
      1rem
      0.75rem;
  }


  .mobile-contact-bar__inner {
    gap: 0.75rem;

    padding:
      0.875rem
      1rem;
  }


  .social--mobile {
    gap: 0.35rem;
  }


  .social--mobile a {
    width: 2.25rem;
    height: 2.25rem;
  }


  .section {
    padding-left: 1rem;
    padding-right: 1rem;
  }


  .resume-card {
    padding: 1.15rem;
  }


  .resume-row {
    grid-template-columns:
      1fr;

    gap: 0.25rem;
  }


  .resume-year {
    text-align: left;

    font-weight: bold;
  }


  /*
   * Una sola portada por fila.
   * Sigue conservando exactamente la proporción 290:500.
   */

  .media-grid {
    grid-template-columns:
      minmax(0, 18.125rem);
  }

}