/* ================================================================
   CAPA ESPECÍFICA – página principal del portfolio
   ================================================================ */

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-section);
  gap: 50px;
}
.hero-name-left {
  font-weight: var(--font-black);
  font-family: var(--font-inter);
  font-size: clamp(72px, 10vw, 100px);
  color: var(--blue);
  letter-spacing: -.02em;
  line-height: 1;
}
.hero-name-right {
  font-weight: var(--font-black);
  font-family: var(--font-inter);
  font-size: clamp(72px, 10vw, 100px);
  color: var(--blue);
  letter-spacing: -.02em;
  line-height: 1;
  text-align: right;
}
.hero-photo {
  flex: 0 0 auto;
  width: clamp(260px, 18vw, 520px);
  height: clamp(280px, 20vw, 550px);
  border-radius: 40px;
  overflow: hidden;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.portfolio-header {
  text-align: center;
  padding: var(--padding-section);
}
.portfolio-title {
  font-family: var(--font-didot);
  font-size: clamp(48px, 4vw, 64px);
  letter-spacing: .15em;
  color: var(--blue);
  margin-bottom: 16px;
}
.portfolio-title em {
  font-family: var(--font-didot);
  font-style: italic;
  font-size: .9em;
  color: var(--blue);
}
.tags {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tag {
  border: 1.5px solid var(--blue);
  border-radius: 999px;
  padding: 12px 42px;
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--blue);
  letter-spacing: .04em;
}
.arrow-down {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
.arrow-btn {
  width: 60px;
  height: 60px;
  background: var(--blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
  text-decoration: none;
  transition: background .2s, transform .2s;
}
.arrow-btn:hover { background: var(--dark); transform: translateY(3px); }

.sobre-mi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 49px;
  padding: var(--padding-section);
  align-items: start;
}
.sobre-mi-text h2 {
  font-size: var(--text-xl);
  color: var(--dark);
  margin-bottom: 16px;
}
.sobre-mi-text p {
  font-size: var(--text-md);
  color: #333;
  margin-bottom: var(--margin-between-paragraphs);
}
.sobre-mi-text strong { color: var(--dark); }
.sobre-mi-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.sobre-mi-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  position: relative;
}
.photo-grid-item {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1 / 1.1;
  background: linear-gradient(135deg, #d4cbf0, #9b86d5);
}
.photo-grid-item.tall { grid-row: span 2; aspect-ratio: auto; }
.photo-grid-item img { width: 100%; height: 100%; object-fit: cover; }

.social-icons-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}
.social-icons-right-inline {
  flex-direction: row;
  margin-top: 16px;
}
/* Mismo estilo que el botón de web de Patricia Nicolás (.pn-globe) */
.social-icons-right a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--dark);
  border-radius: 50%;
  text-decoration: none;
  transition: background .2s;
}
.social-icons-right a img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}
.social-icons-right a:hover { background: var(--dark); }
.social-icons-right a:hover img { filter: brightness(0) invert(1); }

.marquee-cv {
  margin: 32px 0 0;
  padding: 10px 0;
}
.marquee-cv .marquee-track { animation-direction: reverse; }

.proyectos-section { padding: var(--padding-section); }
.proyecto-link {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 16px;
  text-decoration: none;
  border-bottom: 2px solid var(--blue);
  padding: 14px 0;
  transition: padding-left .25s;
}
.proyecto-img {
  position: absolute;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  z-index: 1;
  display: none;
}
.proyecto-img.freakit { top: 50px; left: 50%; aspect-ratio: 7 / 5; width: 800px; }
.proyecto-img.the-house { top: -100px; left: 50%; aspect-ratio: 6 / 5; width: 600px; }
.proyecto-img.lucia-be { top: -200px; left: 60%; aspect-ratio: 4 / 5; width: 400px; }
.proyecto-img.patricia-nicolas { top: -300px; left: 65%; aspect-ratio: 4 / 5; width: 450px; }
.proyecto-img.personales { top: -400px; left: 60%; aspect-ratio: 60 / 55; width: 500px; height: 550px; }
.proyecto-link:hover .proyecto-img { opacity: 1; display: block; }
.proyecto-link:hover { padding-left: 12px; }
.proyecto-nombre {
  font-family: var(--font-didot);
  font-size: clamp(48px, 8vw, 100px);
  line-height: 1.05;
  color: var(--blue);
  letter-spacing: -.02em;
}
.proyecto-link:nth-child(2) .proyecto-nombre { color: var(--blue); }
.proyecto-link:nth-child(4) .proyecto-nombre { font-family: var(--font-didot); color: var(--blue); }
.proyecto-link:nth-child(5) .proyecto-nombre {
  font-family: var(--font-didot);
  font-style: italic;
  font-size: clamp(40px, 6vw, 80px);
}
.proyecto-nombre--personal {
  font-family: var(--font-didot);
  font-style: italic;
  font-size: clamp(38px, 5.5vw, 76px);
}
.proyecto-arrow {
  font-size: clamp(40px, 6vw, 80px);
  color: var(--blue);
  transition: transform .25s;
}
.proyecto-arrow--personal { font-size: clamp(32px, 4.5vw, 64px); }
.proyecto-link:hover .proyecto-arrow { transform: translate(6px, -4px); }

.experiencia-section { padding: var(--padding-section); }
.exp-col {
  display: grid;
  column-gap: clamp(40px, 5vw, 100px);
  row-gap: var(--margin-between-paragraphs);
  grid-template-columns: 1fr 1fr;
}
.exp-col h2 {
  grid-column: span 2;
  font-size: var(--text-xl);
  color: var(--dark);
  margin-bottom: 32px;
}
.exp-item { grid-column: 1; }
.exp-item:nth-child(n+4) { grid-column: 1 / -1; }
.exp-item h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--dark);
  margin-bottom: 6px;
}
.exp-item ul { list-style: none; padding: 0; }
.exp-item ul li {
  font-size: var(--text-md);
  color: #444;
  padding-left: 10px;
  position: relative;
  margin-bottom: var(--margin-between-paragraphs);
}
.exp-item ul li::before {
  content: '-';
  position: absolute;
  left: 0;
  color: var(--blue);
}

.sidebar {
  grid-column: 2;
  grid-row: 2 / 4;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sidebar-card {
  border-radius: 16px;
  padding: 20px 22px;
  border: 2px solid var(--border);
}
.sidebar-card h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.contacto-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #333;
  margin-bottom: 8px;
  text-decoration: none;
}
.contacto-item:hover { color: var(--dark); }
.contacto-icon {
  width: 28px;
  height: 28px;
  background: var(--tag-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  color: var(--blue);
}
.contacto-icon img { width: 14px; height: 14px; object-fit: contain; display: block; }
.formacion-item {
  font-size: 12.5px;
  color: #444;
  margin-bottom: 8px;
  line-height: 1.5;
  border-left: 2px solid var(--border);
  padding-left: 10px;
}
.formacion-item strong { color: var(--dark); font-size: 13px; }
.skills-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-tag {
  background: var(--tag-bg);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--blue);
}

.grid-color-1 { background: linear-gradient(135deg, #c8bfe8, #9b86d5); }
.grid-color-2 { background: linear-gradient(135deg, #d0cce8, #7c6db0); }
.grid-color-3 { background: linear-gradient(135deg, #b8aee0, #8b78c0); }
.grid-color-4 { background: linear-gradient(135deg, #ddd8f0, #a090cc); }

.flecha-scroll {
  width: 60px;
  height: 60px;
  margin: 20px auto 20px 20px;
  display: block;
  cursor: pointer;
}
.flecha-scroll:hover {
  transform: translateY(-3px);
  transition: transform .2s;
}

/* ================================================================
   RESPONSIVE – TABLET (≤1024px)
   ================================================================ */
@media (max-width: 1024px) {
  .hero { gap: 24px; }
  .sobre-mi { gap: 32px; }
  .exp-col { column-gap: 40px; }
}

/* ================================================================
   RESPONSIVE – MÓVIL (≤640px)
   ================================================================ */
@media (max-width: 640px) {
  .hero {
    flex-direction: column;
    gap: 16px;
  }
  .hero-name-left, .hero-name-right {
    text-align: center;
    font-size: clamp(48px, 16vw, 72px);
  }
  .hero-photo {
    width: min(320px, 80vw);
    height: auto;
    aspect-ratio: .93;
  }

  .portfolio-title {
    letter-spacing: .08em;
    font-size: clamp(36px, 8vw, 56px);
  }
  .tag { padding: 10px 22px; }

  .sobre-mi { grid-template-columns: 1fr; gap: 28px; }
  .sobre-mi-btns { width: 100%; }
  .btn-group-sobre-mi { flex-direction: column; width: 100%; }
  .btn-group-sobre-mi a { justify-content: center; }

  .proyecto-img { display: none !important; }
  /* Nombre a la izquierda y flecha alineada a la derecha y centrada verticalmente,
     aunque el nombre ocupe dos líneas */
  .proyecto-link {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
  }
  .proyecto-link:hover { padding-left: 0; }
  .proyecto-nombre { flex: 1; min-width: 0; font-size: clamp(34px, 12vw, 56px); }
  .proyecto-nombre--personal { font-size: clamp(28px, 9vw, 44px); }
  .proyecto-arrow,
  .proyecto-arrow--personal {
    flex-shrink: 0;
    line-height: 1;
    font-size: clamp(28px, 9vw, 44px);
  }

  .exp-col { grid-template-columns: 1fr; }
  .sidebar { grid-column: 1; grid-row: auto; margin-top: 12px; }
}