@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=Instrument+Sans:wght@400..700&display=swap");

:root {
  --bg-dark: #0a0e14;
  --bg-section: #111823;
  --bg-teal: #082f2c;
  --header-bg: #e2d8c3;
  --primary-color: #2ea043;
  --accent-color: #3fb950;
  --text-main: #e6edf3;
  --text-muted: #848d97;
  --border-color: #21262d;

  /* Gris oscuro del header: letras, iconos, borde del logo y fondo de los botones */
  --header-ink: #32322f;

  /* Altura del header fijo (en móvil se redefine más abajo) */
  --header-h: 70px;

  /* Tipografías: display para nombre, títulos y etiquetas; body para descripciones */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(
    --header-h
  ); /* el título no queda tapado por el header al saltar */
}

html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.01em; /* letras más juntas en las descripciones */
  line-height: 1.6;
  margin: 0;
  padding: var(--header-h) 0 0; /* espacio para el header fijo */
}

/* =========================================
   HEADER / NAVBAR
========================================= */
header.navbar {
  background-color: var(--header-bg);
  color: var(--header-ink);
  font-family: var(--font-body);
  width: 100%;
  height: var(--header-h);
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Mismo margen lateral que las secciones: 5% o centrado en 1100px */
  padding: 0 max(5%, calc((100% - 1100px) / 2));
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  /* La línea inferior no es un borde: la dibuja la chispa (ver header.navbar::before) */
}

/* ---------- La línea del header se dibuja al cargar la web ---------- */
/* Línea de 1px que crece de izquierda a derecha al mismo ritmo que la chispa.
   Al terminar se queda completa. Solo usa transform, así que va fluida. */
header.navbar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #171716;
  pointer-events: none;
  will-change: transform;
  transform: scaleX(0);
  transform-origin: left;
  animation: dibujar-linea-header 2.3s linear 0.4s both;
}

@keyframes dibujar-linea-header {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ---------- Chispa que va dibujando la línea ---------- */
/* La punta (borde derecho) coincide siempre con el final de la línea dibujada.
   Va dejando su rastro detrás y se apaga al llegar al final. */
header.navbar::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px; /* centrada sobre la línea del header */
  width: 160px;
  height: 3px;
  border-radius: 2px;
  pointer-events: none; /* no intercepta clics ni selección */
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 138, 76, 0.9) 70%,
    #fff3d8 100%
  );
  box-shadow: 0 0 10px 2px rgba(255, 122, 58, 0.8);
  will-change: transform, opacity;
  opacity: 0;
  transform: translate3d(-160px, 0, 0);
  animation: chispa-header 2.3s linear 0.4s both;
}

/* La punta recorre de 0 a 100vw (igual que la línea) y se apaga al final */
@keyframes chispa-header {
  0% {
    transform: translate3d(-160px, 0, 0);
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    transform: translate3d(calc(100vw - 160px), 0, 0);
    opacity: 0;
  }
}

/* Sin animación: la línea aparece completa y no hay chispa */
@media (prefers-reduced-motion: reduce) {
  header.navbar::before {
    animation: none;
    transform: none;
  }

  header.navbar::after {
    display: none;
  }
}
.nav-left {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
}

.nav-avatar {
  width: 40px;
  object-fit: cover;
  border: 1px solid var(--header-ink);
}

/* Logo: negrita intermedia + punto terracota */
.nav-name {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.3rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--header-ink);
}

.nav-name::after {
  content: ".";
  color: #b5492e;
}

.nav-mail {
  font-weight: 550;
  font-size: 0.9rem;
  text-transform: lowercase;
  white-space: nowrap;
  color: var(--header-ink);
}

nav.nav-right {
  --nav-icon: 28px; /* tamaño común del botón CV y de los iconos */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px; /* mismo espacio entre palabras, botón CV e iconos */
}

nav.nav-right a {
  text-decoration: none;
  color: var(--header-ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 550;
  letter-spacing: 0;
  transition: color 0.3s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* El hover solo existe con ratón: en el móvil se quedaría "pegado" tras pulsar */
@media (hover: hover) {
  nav.nav-right a:hover {
    color: #b5492e;
    transform: scale(1.05);
  }
}

nav.nav-right a i {
  font-size: var(--nav-icon);
}

/* Subrayado animado en los enlaces a secciones */
nav.nav-right a[href^="#"] {
  position: relative;
}

nav.nav-right a[href^="#"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 3px;
  border-radius: 2px;
  background: #b5492e;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s ease;
}

/* Enlace de la sección activa: siempre subrayado */
nav.nav-right a[href^="#"].is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Al pasar el ratón (no se aplica en pantallas táctiles) */
@media (hover: hover) {
  nav.nav-right a[href^="#"]:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  /* Botón CV: borde y texto terracota al pasar el ratón */
  nav.nav-right a[data-cv-open]:hover {
    border-color: #b5492e;
    color: #b5492e;
  }
}

nav.nav-right a[href^="#"].is-active {
  color: #b5492e;
}

/* Numerito terracota delante del enlace */
.nav-num {
  font-size: 0.75rem;
  font-weight: 550;
  color: #b5492e;
}

/* El correo es un icono más (como GitHub y LinkedIn): hereda el estilo de los enlaces del menú */

/* Botón CV: cuadrado de esquinas redondeadas, solo con borde (sin fondo), con "CV" dentro.
   Mide lo mismo que la marca cuadrada del icono de LinkedIn (0.875 × el tamaño del icono). */
nav.nav-right a[data-cv-open] {
  justify-content: center;
  width: calc(var(--nav-icon) * 0.875);
  height: calc(var(--nav-icon) * 0.875);
  padding: 0;
  border: 2.5px solid var(--header-ink);
  border-radius: calc(var(--nav-icon) * 0.12);
  background: none;
  color: var(--header-ink);
  font-size: calc(var(--nav-icon) * 0.4);
  font-weight: 700;
  line-height: 1; /* sin altura de línea extra: el texto queda en el centro exacto */
  letter-spacing: 0; /* el espacio tras la última letra descentraba el texto */
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

/* =========================================
   BOTÓN DE IDIOMAS (ES | EN)
========================================= */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Cada idioma es un enlace con su propio hover */
nav.nav-right .lang-toggle .lang-option {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 550;
  transition: color 0.3s ease, transform 0.3s ease;
}

nav.nav-right .lang-toggle .lang-option:hover {
  transform: scale(1.05); /* solo el idioma sobre el que estás */
}

/* Idioma seleccionado: terracota */
nav.nav-right .lang-toggle .lang-active,
nav.nav-right .lang-toggle .lang-active:hover {
  color: #b5492e;
}

/* Idioma no seleccionado: gris apagado, se oscurece al pasar el ratón */
nav.nav-right .lang-toggle .lang-dim {
  color: #8a867c;
}

nav.nav-right .lang-toggle .lang-dim:hover {
  color: var(--header-ink);
}

.lang-sep {
  color: var(--header-ink);
  font-weight: 400;
}

/* =========================================
   VENTANA MODAL DEL CV (solo escritorio)
========================================= */
/* Fondo oscuro que cubre toda la pantalla (Oculto por defecto) */
.cv-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.85); /* Fondo oscuro semitransparente */
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

/* Se muestra cuando la isla CvModal le pone la clase is-open */
.cv-modal-overlay.is-open {
  display: flex;
}

/* Capa invisible para cerrar al hacer clic fuera del PDF */
.cv-modal-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* La ventana donde va el PDF */
.cv-modal-container {
  position: relative;
  width: 90%;
  max-width: 900px; /* Ancho máximo de la ventana */
  height: 85vh; /* Ocupa el 85% del alto de la pantalla */
  background-color: var(--bg-section);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 40px 20px 20px 20px; /* Espacio extra arriba para la X */
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
  z-index: 10000;
  animation: modal-aparece 0.3s ease-out;
}

/* El botón de la X para cerrar */
.cv-modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  color: var(--text-muted);
  font-size: 1.5rem;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.cv-modal-close:hover {
  color: #b5492e; /* Se pone terracota al pasar el ratón */
}

/* El visor del PDF */
.cv-modal-iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
  background-color: #fff; /* Fondo blanco por si el PDF tarda en cargar */
}

/* Animación de entrada suave */
@keyframes modal-aparece {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =========================================
   SECCIONES GLOBALES
========================================= */
section {
  width: 100%;
  padding: 80px 5%; /* mismo espacio arriba y abajo */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-content {
  width: 100%;
  max-width: 1100px;
}

/* El último elemento de cada sección no suma margen extra por abajo */
.section-content > :last-child {
  margin-bottom: 0;
}

/* Títulos: letra gruesa, rellena y algo ancha (Archivo en peso 900) */
section h2 {
  position: relative;
  display: inline-block; /* el subrayado mide lo mismo que el texto */
  font-family: var(--font-display);
  font-size: 2em;
  font-weight: 900;
  font-stretch: 112%;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 30px;
  padding-bottom: 10px;
}

/* Subrayado del título: se dibuja entero cuando su sección está activa (la marca el ScrollSpy) */
section h2:not(.pre-footer-title)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: #b5492e;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

section.is-active h2:not(.pre-footer-title)::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  section h2:not(.pre-footer-title)::after {
    transition: none;
    transform: scaleX(1);
  }
  nav.nav-right a[href^="#"]::after {
    transition: none;
  }
}

/* =========================================
   HERO
========================================= */
.hero {
  background-color: var(--header-bg);
  padding: 70px 5%; /* mismo espacio arriba y abajo */
}

/* Escritorio: nombre, frases y descripción a la izquierda; foto a la derecha ocupando las tres filas.
   Móvil (≤ 900px): nombre, foto, frases, y después la descripción. */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  grid-template-rows:
    auto auto 1fr; /* la última fila absorbe el sobrante: nada se separa */
  grid-template-areas:
    "title photo"
    "phrases photo"
    "body photo";
  column-gap: 60px;
  row-gap: 0;
  align-items: start;
}

.hero-title {
  grid-area: title;
  min-width: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.2vw, 4.5rem);
  font-weight: 900;
  font-stretch: 115%;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 20px 0;
  color: #171716;
}

/* Bloque de las frases cambiantes: sirve de referencia (cqw) para ajustar la letra */
.hero-phrases {
  grid-area: phrases;
  container-type: inline-size;
  min-width: 0;
}

/* Descripción + enlace */
.hero-body {
  grid-area: body;
  min-width: 0;
}

/* Línea que va cambiando (4 frases x 3 s = ciclo de 12 s) */
.hero-rotator {
  display: inline-grid; /* apila las frases en la misma celda */
  align-items: end;
  max-width: 100%;
  margin: 0 0 28px 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 108%;
  line-height: 1.2;
  text-transform: uppercase;
  color: #b5492e;
}

.hero-rotator span {
  position: relative;
  grid-area: 1 / 1;
  justify-self: start;
  padding-bottom: 6px;
  white-space: nowrap; /* siempre en una sola línea */
  font-size: 1.5rem; /* respaldo para navegadores sin cqw */
  font-size: min(2.6rem, 4.6cqw);
  opacity: 0;
  visibility: hidden; /* oculta no recibe el ratón ni se puede seleccionar */
  animation: rotar-frase 12s infinite;
}

/* Frase larga: lo más grande posible sin salirse de la columna */
.hero-rotator span:nth-child(2) {
  font-size: 1.1rem; /* respaldo */
  font-size: min(2.6rem, 3.5cqw);
  animation-delay: 3s;
}

.hero-rotator span:nth-child(3) {
  animation-delay: 6s;
}

.hero-rotator span:nth-child(4) {
  animation-delay: 9s;
}

/* Subrayado: del ancho de cada frase y siempre en el mismo sitio */
.hero-rotator span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: #171716;
  animation: fijar-linea 12s infinite;
}

.hero-rotator span:nth-child(2)::after {
  animation-delay: 3s;
}

.hero-rotator span:nth-child(3)::after {
  animation-delay: 6s;
}

.hero-rotator span:nth-child(4)::after {
  animation-delay: 9s;
}

@keyframes rotar-frase {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.7em);
  }
  4%,
  23% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  27%,
  100% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.7em);
  }
}

/* Contrarresta el movimiento de la frase para que la línea no se mueva */
@keyframes fijar-linea {
  0% {
    transform: translateY(-0.7em);
  }
  4%,
  23% {
    transform: translateY(0);
  }
  27%,
  100% {
    transform: translateY(0.7em);
  }
}

/* Sin animación si el usuario lo tiene desactivado */
@media (prefers-reduced-motion: reduce) {
  .hero-rotator span,
  .hero-rotator span::after {
    animation: none;
  }
  .hero-rotator span:first-child {
    opacity: 1;
    visibility: visible;
  }
  .hero-link::after {
    transition: none;
  }
}

.hero-desc {
  font-size: 1.2em;
  color: #4a4a47;
  max-width: 600px;
  margin: 0 0 40px 0;
  line-height: 1.8;
}

/* Enlace "MIS PROYECTOS": texto en negrita con subrayado como el del header */
.hero-link {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  color: #171716;
  transition: color 0.3s ease, transform 0.3s ease;
}

.hero-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 3px;
  border-radius: 2px;
  background: #b5492e;
  transform: scaleX(0);
  transform-origin: right; /* al salir, la línea se retira hacia la derecha */
  transition: transform 0.35s ease;
}

.hero-link:hover {
  color: #b5492e;
  transform: scale(1.05);
}

.hero-link:hover::after {
  transform: scaleX(1);
  transform-origin: left; /* al entrar, se dibuja de izquierda a derecha */
}

/* Foto a la derecha con sombra terracota desplazada */
.hero-photo {
  grid-area: photo;
  justify-self: center;
  width: 100%;
  max-width: 340px;
}

/* Solo en escritorio: alinea el borde de la foto con la parte superior de las letras */
@media (min-width: 901px) {
  .hero-photo {
    margin-top: 11px; /* ajusta este valor si ves la foto más alta o más baja */
  }
}

.hero-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 /
    5; /* prueba 1 / 1 si la foto original es más cuadrada u horizontal */
  object-fit: cover;
  object-position: center
    20%; /* 0% = recorta por abajo, 100% = recorta por arriba */
  border: 3px solid #171716;
  border-radius: 18px;
  box-shadow: 12px 12px 0 #b5492e;
}

/* Tablet y móvil: una sola columna con el orden nombre, foto, frases y descripción */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "title"
      "photo"
      "phrases"
      "body";
  }

  .hero-title {
    font-size: clamp(2.2rem, 9vw, 3.4rem);
  }

  .hero-photo {
    max-width: 260px;
    margin: 0 0 32px;
  }

  /* La frase larga puede partirse en dos líneas */
  .hero-rotator span,
  .hero-rotator span:nth-child(2) {
    white-space: normal;
    font-size: 1.5rem;
  }
}

/* =========================================
   SOBRE MÍ
========================================= */
.sobre-mi {
  background-color: #131312;
  border-top: 0.2px solid
    var(--header-bg); /* misma línea fina que el resto de secciones */
}

.sobre-mi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.sobre-mi-text p {
  font-size: 1.1rem;
  margin-bottom: 15px;
  color: rgba(242, 237, 225, 0.78); /* crema de las demás descripciones */
}

/* El último párrafo no suma margen por abajo */
.sobre-mi-text p:last-child {
  margin-bottom: 0;
}

.sobre-mi-img-container {
  position: relative;
  display: flex;
  justify-content: center;
}

.sobre-mi-img-container img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  object-position: top;
  border: 3px solid #f2ede1;
  border-radius: 18px;
  box-shadow: 12px 12px 0 #b5492e;
}

/* =========================================
   EXPERIENCIA (línea de tiempo)
========================================= */
#experiencia {
  background-color: #131312;
  border-top: 0.2px solid var(--header-bg);
}

.timeline {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  /* Duración de la llama subiendo por el hilo. La lee también la isla TimelineIntro */
  --mecha-t: 0.9s;
  /* La llama llega al punto al 92 % de su recorrido: ahí detona */
  --dot-delay: calc(var(--mecha-t) * 0.92);
}

.timeline-item {
  display: grid;
  grid-template-columns: 170px 1fr;
  column-gap: 40px;
}

/* Año a la izquierda, a la altura del centro del logo */
.timeline-date {
  padding-top: 18px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-align: right;
  color: #b5492e;
}

/* Línea vertical apagada (el hilo) */
.timeline-body {
  position: relative;
  padding: 0 0 52px 36px;
  border-left: 2px solid rgba(226, 216, 195, 0.25);
}

.timeline-item:last-child .timeline-body {
  padding-bottom: 0;
}

/* Punto de cada entrada (la "pólvora") */
.timeline-body::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: -8px; /* centrado sobre la línea */
  top: 25px; /* centro a 32px, a la altura del logo de 64px */
  width: 14px;
  height: 14px;
  z-index: 2;
  border: 2px solid #b5492e;
  border-radius: 50%;
  background: #131312;
  transition: background-color 0.15s ease, box-shadow 0.2s ease;
}

/* Entrada ya encendida: punto relleno con su halo */
.timeline-item.is-lit .timeline-body::before {
  background: #b5492e;
  box-shadow: 0 0 0 5px rgba(181, 73, 46, 0.25);
}

/* Hover: solo el efecto del punto (detona y se queda relleno) */
.timeline-item:not(.is-burning):hover .timeline-body::before {
  background: #b5492e;
  box-shadow: 0 0 0 5px rgba(181, 73, 46, 0.25);
  animation: detonar 1.5s ease-out;
}

/* Secuencia inicial: el punto detona cuando llega la llama y se enciende */
.timeline-item.is-burning .timeline-body::before {
  animation: detonar-encender 1.5s ease-out var(--dot-delay) both;
}

/* Detonación del hover (el punto ya está relleno o se rellena por la regla de hover) */
@keyframes detonar {
  0% {
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(255, 214, 150, 0.9),
      0 0 0 0 rgba(255, 122, 58, 0.6);
  }
  35% {
    transform: scale(1.8);
    box-shadow:
      0 0 0 6px rgba(255, 200, 130, 0.85),
      0 0 24px 10px rgba(255, 122, 58, 0.7);
  }
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 5px rgba(181, 73, 46, 0.25),
      0 0 0 0 rgba(255, 122, 58, 0);
  }
}

/* Detonación de la secuencia inicial: además, el punto pasa de hueco a relleno */
@keyframes detonar-encender {
  0% {
    background-color: #131312;
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(255, 214, 150, 0.9),
      0 0 0 0 rgba(255, 122, 58, 0.6);
  }
  35% {
    background-color: #b5492e;
    transform: scale(1.8);
    box-shadow:
      0 0 0 6px rgba(255, 200, 130, 0.85),
      0 0 24px 10px rgba(255, 122, 58, 0.7);
  }
  100% {
    background-color: #b5492e;
    transform: scale(1);
    box-shadow:
      0 0 0 5px rgba(181, 73, 46, 0.25),
      0 0 0 0 rgba(255, 122, 58, 0);
  }
}

/* Cabecera: logo + título (es el enlace) */
.timeline-head {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 64px;
  text-decoration: none;
  color: inherit;
}

/* Logo dentro de un marco con borde fino, sin relleno */
.timeline-logo {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 10px;
  border: 1px solid rgba(226, 216, 195, 0.35);
  border-radius: 14px;
  transition: border-color 0.3s ease;
}

.timeline-item:hover .timeline-logo {
  border-color: #b5492e;
}

.timeline-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.timeline-titles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Puesto en crema */
.timeline-role {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  font-stretch: 105%;
  line-height: 1.2;
  color: var(--header-bg); /* crema */
}

/* Empresa en terracota con el subrayado animado del header */
.timeline-org {
  position: relative;
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #b5492e;
}

.timeline-org::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: #b5492e;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s ease;
}

.timeline-item:hover .timeline-org::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Descripción en viñetas */
.timeline-points {
  max-width: 640px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(242, 237, 225, 0.78);
}

.timeline-points li {
  position: relative;
  padding-left: 22px;
}

.timeline-points li::before {
  content: "▹";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: #b5492e;
}

/* ---------- Efecto mecha (escritorio y móvil) ---------- */

/* --p: hasta dónde ha subido la chispa (0% abajo, 100% en el punto)
   --g: intensidad del brillo de la cabeza (1 ardiendo, 0 apagada) */
@property --p {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --g {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* Tramo de hilo entre el punto de esta entrada y el de la siguiente.
   En la última entrada llega hasta el final de la línea. */
.timeline-body::after {
  content: "";
  position: absolute;
  left: -13px; /* ancho de 24px centrado sobre la línea, para dejar sitio al brillo */
  width: 24px;
  top: 32px; /* centro del punto de esta entrada */
  bottom: -32px; /* centro del punto de la siguiente */
  z-index: 1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 2px 100%;
  background-position: 0 0, 0 0, 0 0, 0 0, 50% 0;
  background-image: /* chispas que saltan por detrás de la cabeza */
    radial-gradient(
      circle 1.5px at 18% calc(100% - var(--p) + 9px),
      rgba(255, 214, 150, var(--g)) 0,
      transparent 100%
    ),
    radial-gradient(
    circle 1.5px at 84% calc(100% - var(--p) + 16px),
    rgba(255, 190, 110, var(--g)) 0,
    transparent 100%
  ),
    radial-gradient(
    circle 1px at 30% calc(100% - var(--p) + 24px),
    rgba(255, 230, 170, var(--g)) 0,
    transparent 100%
  ),
     /* resplandor de la cabeza */radial-gradient(
    circle 13px at 50% calc(100% - var(--p)),
    rgba(255, 236, 190, calc(var(--g) * 0.9)) 0,
    rgba(255, 130, 50, calc(var(--g) * 0.5)) 45%,
    transparent 100%
  ),
    
    /* hilo encendido: terracota detrás, naranja y blanco cálido en la cabeza */linear-gradient(
    to top,
    #b5492e 0,
    #b5492e calc(var(--p) - 26px),
    color-mix(in srgb, #ff7a3a calc(var(--g) * 100%), #b5492e) calc(
      var(--p) - 8px
    ),
    color-mix(in srgb, #fff3d8 calc(var(--g) * 100%), #b5492e) var(--p),
    transparent var(--p)
  );
}

/* La última entrada no tiene punto debajo: la mecha arranca del final de su línea */
.timeline-item:last-child .timeline-body::after {
  bottom: 0;
}

/* Entrada ya encendida: el hilo queda terracota, sin brillo */
.timeline-item.is-lit .timeline-body::after {
  --p: 100%;
  --g: 0;
}

/* Secuencia inicial: la llama sube quemando el hilo y la cabeza parpadea
   (16 parpadeos repartidos en la duración de la llama) */
.timeline-item.is-burning .timeline-body::after {
  animation:
    quemar var(--mecha-t) linear forwards,
    chispeo calc(var(--mecha-t) / 16) steps(2, end) 16 alternate;
}

/* La cabeza sube de abajo arriba; al llegar, el brillo se apaga
   y el hilo se queda encendido en terracota */
@keyframes quemar {
  0% {
    --p: 0%;
    --g: 1;
  }
  92% {
    --p: 100%;
    --g: 1;
  }
  100% {
    --p: 100%;
    --g: 0;
  }
}

/* Parpadeo y calor de la llama */
@keyframes chispeo {
  from {
    filter: drop-shadow(0 0 3px rgba(255, 122, 58, 0.8)) brightness(1);
  }
  to {
    filter: drop-shadow(0 0 8px rgba(255, 160, 70, 1)) brightness(1.35);
  }
}

/* Sin animaciones si el usuario lo tiene desactivado
   (la isla deja las entradas ya marcadas) */
@media (prefers-reduced-motion: reduce) {
  .timeline-body::before,
  .timeline-logo,
  .timeline-org::after {
    transition: none;
  }

  .timeline-item:not(.is-burning):hover .timeline-body::before,
  .timeline-item.is-burning .timeline-body::before,
  .timeline-item.is-burning .timeline-body::after {
    animation: none;
  }
}

/* En móvil: el año va encima de cada experiencia y el hilo pasa a ser el borde
   de la entrada entera (así es continuo y la llama puede subir de una a otra) */
@media (max-width: 768px) {
  .timeline-item {
    display: block;
    position: relative;
    padding: 0 0 40px 24px;
    border-left: 2px solid rgba(226, 216, 195, 0.25);
  }

  .timeline-item:last-child {
    padding-bottom: 0;
  }

  /* Altura fija (38px): permite calcular dónde queda el punto */
  .timeline-date {
    height: 38px;
    padding: 0 0 10px;
    line-height: 28px;
    text-align: left;
  }

  /* El cuerpo deja de ser el que posiciona: punto y mecha se miden desde la entrada */
  .timeline-body {
    position: static;
    padding: 0;
    border-left: none;
  }

  .timeline-body::before {
    top: 63px; /* 38px del año + 32px (centro del logo) - 7px (radio del punto) */
  }

  .timeline-body::after {
    top: 70px; /* centro del punto de esta entrada */
    bottom: -70px; /* centro del punto de la siguiente */
  }

  .timeline-item:last-child .timeline-body::after {
    bottom: 0;
  }

  .timeline-role {
    font-size: 1.2rem;
  }
}

/* =========================================
   PRE-FOOTER
========================================= */
.pre-footer {
  background-color: #131312;
  padding: 60px 5%; /* mismo espacio arriba y abajo */
  margin-bottom: 0;
  border-top: 5px solid #b5492e; /* línea terracota */
}

.pre-footer-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--header-bg); /* crema */
  text-align: center;
  padding-bottom: 0;
  margin-bottom: 40px;
}

.sponsor-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 50px;
}

.sponsor-item img {
  height: 65px;
  width: auto;
  opacity: 0.5;
  filter: grayscale(100%);
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Logo de Repsol más pequeño */
.sponsor-item img[src="logo-repsol.svg"] {
  height: 45px;
}

.sponsor-item img:hover {
  opacity: 1;
  filter: grayscale(0%);
  transform: scale(1.1);
}

/* =========================================
   FOOTER
========================================= */
.site-footer {
  background-color: #131312;
  text-align: left;
  /* Mismo margen lateral que el header y las secciones */
  padding: 30px max(5%, calc((100% - 1100px) / 2));
  margin-top: 0;
  border-top: 0.2px solid
    var(--header-bg); /* misma línea fina que el resto de secciones */
}

.site-footer section {
  padding: 0;
  margin: 0;
}

.site-footer .copy {
  font-family: var(--font-display);
  color: var(--header-bg); /* crema */
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  margin: 0;
  opacity: 0.85;
}

/* Nombre resaltado en terracota */
.site-footer .copy-name {
  color: #b5492e;
  font-weight: 700;
}

/* =========================================
   TECNOLOGÍAS
========================================= */
#tecnologias {
  background-color: #131312;
  border-top: 0.2px solid
    var(--header-bg); /* misma línea fina que Experiencia */
}

/* Cuadrícula 2x2 con separación entre tarjetas */
.tech-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.tech-card {
  background-color: var(--header-bg); /* crema, igual que el hero */
  border: 3px solid
    var(--header-bg); /* invisible en reposo: mismo color que la tarjeta */
  border-radius: 18px;
  padding: 27px; /* 30px menos los 3px del borde, para mantener el tamaño */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.tech-card:hover {
  border-color: #b5492e; /* terracota */
  box-shadow: 0 0 0 4px rgba(181, 73, 46, 0.25); /* halo suave alrededor */
}

.tech-card h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 900;
  font-stretch: 110%;
  letter-spacing: -0.01em;
  color: #b5492e; /* terracota */
  margin: 0 0 20px 0;
}

.tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tech-list li {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 650;
  color: #171716; /* negro */
  padding: 8px 16px;
  border: 1.5px solid #171716;
  border-radius: 999px;
  cursor: default;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.tech-list li:hover {
  background-color: #171716;
  color: var(--header-bg);
}

/* En móvil: una tarjeta por fila */
@media (max-width: 768px) {
  .tech-container {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   TECNOLOGÍAS: TIRA DE LOGOS QUE PASAN
========================================= */
.tech-marquee {
  --tech-marquee-t: 35s; /* tiempo que tarda en pasar un grupo entero: súbelo para ir más lento */
  --tech-marquee-gap: 64px; /* separación entre logos */
  margin-top: 30px; /* misma separación que entre las tarjetas */
  padding: 22px 0;
  border-top: 0.2px solid var(--header-bg); /* líneas finas crema */
  border-bottom: 0.2px solid var(--header-bg);
}

/* Ventana por la que pasan los logos, con los bordes difuminados */
.tech-window {
  overflow: hidden;
  padding: 10px
    0; /* espacio para que el logo no se recorte al crecer en el hover */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 10%,
    #000 90%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 10%,
    #000 90%,
    transparent
  );
}

/* Pista con dos grupos iguales; se mueve de derecha a izquierda */
.tech-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: tech-pasar var(--tech-marquee-t) linear infinite;
}

/* Al pasar el ratón por la tira, se para */
.tech-marquee:hover .tech-track {
  animation-play-state: paused;
}

.tech-group {
  display: flex;
  align-items: center;
  gap: var(--tech-marquee-gap);
  padding-right: var(
    --tech-marquee-gap
  ); /* así los dos grupos quedan igual de separados */
  flex-shrink: 0;
}

/* De 0 a -50%: la pista avanza hacia la izquierda y el bucle no se nota.
   Para que vaya hacia la derecha, intercambia los valores de from y to. */
@keyframes tech-pasar {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Logos en su color original */
.tech-logo img {
  display: block;
  height: 44px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/* El logo oscuro (API REST) se invierte para verse sobre el fondo negro */
.tech-logo img.is-invert {
  filter: invert(1);
}

/* El logo sobre el que estás se agranda un poco */
.tech-logo img:hover {
  transform: scale(1.1);
}

/* Sin movimiento: logos quietos, centrados y sin duplicados */
@media (prefers-reduced-motion: reduce) {
  .tech-window {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .tech-track {
    animation: none;
    transform: none;
    width: 100%;
  }

  .tech-group {
    flex-wrap: wrap;
    justify-content: center;
    padding-right: 0;
    row-gap: 24px;
  }

  .tech-group[aria-hidden="true"] {
    display: none;
  }
}

/* En móvil: logos algo más pequeños y juntos */
@media (max-width: 768px) {
  .tech-marquee {
    --tech-marquee-gap: 44px;
  }

  .tech-logo img {
    height: 34px;
  }
}

/* =========================================
   PROYECTOS (cartelera)
========================================= */
#proyectos {
  background-color: #131312;
  border-top: 0.2px solid var(--header-bg);
}

/* Frase de apoyo debajo del título (por si más adelante añades una) */
.section-sub {
  max-width: 560px;
  margin: 0;
  font-size: 1.05rem;
  color: rgba(242, 237, 225, 0.7);
}

.projects-list {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  border-top: 1px solid rgba(226, 216, 195, 0.25);
}

/* Cada proyecto es una fila: tecnología | detalle */
.project {
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 40px;
  align-items: start;
  padding: 36px 28px;
  border-bottom: 1px solid rgba(226, 216, 195, 0.25);
  transition: background-color 0.3s ease;
}

/* Al pasar el ratón, la fila se ilumina en crema */
.project:hover {
  background-color: var(--header-bg);
}

.project-tech {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.project-tech img {
  height: 56px;
  width: auto;
  object-fit: contain;
}

.project-tech span {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--header-bg);
  transition: color 0.3s ease;
}

.project-details h3 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  font-stretch: 105%;
  line-height: 1.25;
  color: var(--header-bg);
  transition: color 0.3s ease;
}

.project-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-points li {
  position: relative;
  padding-left: 22px;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(242, 237, 225, 0.78);
  transition: color 0.3s ease;
}

.project-points li::before {
  content: "▹";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: #b5492e;
}

.project-points li strong {
  color: var(--header-bg);
  transition: color 0.3s ease;
}

.project-points li span {
  display: block;
  margin-top: 6px;
}

/* Etiquetas en pastilla, como en Skills */
.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.project-tags li {
  padding: 6px 14px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 1px;
  color: var(--header-bg);
  border: 1.5px solid rgba(226, 216, 195, 0.5);
  border-radius: 999px;
  transition: color 0.3s ease, border-color 0.3s ease;
}

/* Texto en negro cuando la fila está en crema */
.project:hover .project-tech span,
.project:hover .project-details h3,
.project:hover .project-points li strong {
  color: #171716;
}

.project:hover .project-points li {
  color: #4a4a47;
}

.project:hover .project-tags li {
  color: #171716;
  border-color: #171716;
}

@media (prefers-reduced-motion: reduce) {
  .project,
  .project-tech span,
  .project-details h3,
  .project-points li,
  .project-points li strong,
  .project-tags li {
    transition: none;
  }
}

/* En móvil: todo apilado */
@media (max-width: 768px) {
  .project {
    grid-template-columns: 1fr;
    row-gap: 18px;
    padding: 28px 16px;
  }
}

/* =========================================
   UTILIDADES
========================================= */
.invertirColor {
  filter: invert(1);
}

/* =========================================
   RESPONSIVE (siempre al final)
========================================= */
@media (max-width: 768px) {
  /* El header sigue fijo, en 2 filas: marca, Ver CV e idioma arriba; navegación y redes debajo.
     96px es un valor de respaldo: la isla HeaderOffset lo ajusta a la altura real. */
  :root {
    --header-h: 96px;
  }

  /* Primera línea: nombre e idioma. Segunda línea: enlaces de sección, CV y redes.
     El menú se "disuelve" (display: contents) para ordenarlo junto con el nombre. */
  header.navbar {
    height: auto; /* crece según las líneas que ocupe el menú */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between; /* en la segunda línea reparte el espacio por igual entre todos */
    gap: 0 10px;
    padding: 8px 5% 10px;
  }

  .nav-left {
    order: 1;
    width: auto;
    flex-shrink: 0;
    justify-content: flex-start;
    gap: 12px;
    margin: 4px 0;
  }

  .nav-name {
    font-size: 1.15rem;
    line-height: 1.2;
  }

  nav.nav-right {
    --nav-icon: 24px; /* tamaño común del botón CV y de los iconos en móvil */
    display: contents;
  }

  /* La separación vertical va en el margen de cada elemento */
  nav.nav-right > a,
  nav.nav-right > .lang-toggle {
    margin: 4px 0;
  }

  nav.nav-right a {
    font-size: 0.88rem;
    white-space: nowrap;
  }

  nav.nav-right .lang-toggle .lang-option {
    font-size: 0.85rem;
  }

  /* Primera línea: nombre (1) e idioma (2). Salto de línea (3).
     Segunda línea: enlaces de sección, CV y GitHub, LinkedIn y correo (4),
     con el mismo espacio entre todos (el CV y los iconos miden lo mismo: --nav-icon). */
  nav.nav-right .lang-toggle {
    order: 2;
  }

  nav.nav-right::after {
    content: "";
    order: 3;
    flex-basis: 100%;
    height: 0;
  }

  nav.nav-right > a {
    order: 4;
  }

  .hero {
    padding: 44px 5% 56px;
  }

  .sobre-mi-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .sobre-mi-img-container img {
    width: 200px;
    height: 200px;
  }

  .sponsor-grid {
    gap: 25px;
  }

  /* Logos de "He trabajado con": misma caja para todos (el de Repsol también,
     que en escritorio tiene una altura propia) */
  .sponsor-item img,
  .sponsor-item img[src="logo-repsol.svg"] {
    width: 130px;
    height: 40px;
    object-fit: contain;
  }
}