/* Fuentes autoalojadas — sustituyen a Google Fonts (fonts.googleapis.com / fonts.gstatic.com) */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/dm-sans-latin-300-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-sans-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/dm-sans-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/dm-sans-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/dm-sans-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-serif-display-latin-400-normal.woff2') format('woff2');
}

:root {
  /* azul tinta periodística y cobalto */
  --accent: #1e40af;
  --accent-hover: #1e3a8a;
  --accent-light: #eff6ff;
  --dark: #0f172a;
  --mid: #475569;
  --light-bg: #f8fafc;
  --card-bg: #ffffff;
  --border: #e2e8f0;
  --radius-card: 14px;
  --shadow-sm: 0 4px 16px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 12px 32px -4px rgba(15, 23, 42, 0.08);
}

* { box-sizing: border-box; }
body { font-family: 'DM Sans', sans-serif; color: var(--dark); background: #ffffff; margin: 0; line-height: 1.6; }

/* botón accesible skip to content */
.btn-skip {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1100;
  background: var(--accent);
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}

/* bloqueo de scroll cuando el visor está abierto */
body.modal-open { overflow: hidden !important; }

/* barra superior delgada de progreso de lectura */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--accent);
  width: 0%;
  z-index: 1050;
  transition: width 0.1s ease-out;
}

/* navbar con efecto cristal */
.navbar { 
  background: rgba(255, 255, 255, 0.92) !important; 
  backdrop-filter: blur(12px); 
  -webkit-backdrop-filter: blur(12px); 
  border-bottom: 1px solid var(--border); 
  padding: 0.85rem 0; 
  position: sticky; 
  top: 0; 
  z-index: 100; 
}
.navbar-brand { font-family: 'DM Serif Display', serif; font-size: 1.3rem; color: var(--dark) !important; text-decoration: none; }
.nav-link { font-size: 0.88rem; color: var(--mid) !important; font-weight: 500; padding: 0.4rem 0.85rem !important; transition: color 0.2s ease; }
.nav-link:hover, .nav-link.active-nav { color: var(--accent) !important; font-weight: 600; }

.btn-share-nav {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--mid);
  padding: 4px 10px;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.btn-share-nav:hover {
  background: var(--accent-light);
  color: var(--accent);
  border-color: var(--accent);
}

.lang-btn { font-size: 0.75rem; font-weight: 600; border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; color: var(--mid); background: #fff; cursor: pointer; transition: all 0.2s ease; }
.lang-btn.active, .lang-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* hero con iluminación ambiental sutil */
.hero { 
  padding: 6rem 0 5rem; 
  border-bottom: 1px solid var(--border); 
  background: radial-gradient(circle at 85% 30%, rgba(219, 234, 254, 0.65) 0%, rgba(248, 250, 252, 0.3) 60%), linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
  position: relative;
  overflow: hidden;
}

.hero h1 { 
  font-family: 'DM Serif Display', serif; 
  font-size: clamp(2.8rem, 5.4vw, 4.2rem); 
  line-height: 1.08; 
  margin-bottom: 1.25rem; 
  color: var(--dark); 
  letter-spacing: -0.02em;
}

.hero-eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid rgba(34, 197, 94, 0.35);
  padding: 5px 14px;
  border-radius: 100px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #15803d;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.06);
  margin-bottom: 1.2rem;
}

.status-dot {
  width: 7px;
  height: 7px;
  background-color: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: pulse-green 2s infinite;
  display: inline-block;
}

@keyframes pulse-green {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.hero p.lead { 
  font-size: 1.08rem; 
  color: var(--mid); 
  max-width: 580px; 
  line-height: 1.75; 
}

.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.5rem; }
.hero-tag { 
  font-size: 0.78rem; 
  padding: 6px 14px; 
  border-radius: 100px; 
  background: #ffffff; 
  color: var(--dark); 
  font-weight: 600; 
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
  transition: all 0.2s ease;
}
.hero-tag:hover { 
  border-color: var(--accent); 
  color: var(--accent); 
  transform: translateY(-1px);
}

.hero-links { display: flex; gap: 12px; margin-top: 2.2rem; flex-wrap: wrap; }
.btn-primary-custom { background: var(--accent); color: #fff; border: none; padding: 11px 24px; border-radius: 10px; font-size: 0.88rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s ease; }
.btn-primary-custom:hover { background: var(--accent-hover); color: #fff; transform: translateY(-1px); }
.btn-outline-custom { background: #fff; color: var(--dark); border: 1px solid var(--border); padding: 11px 24px; border-radius: 10px; font-size: 0.88rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s ease; box-shadow: var(--shadow-sm); }
.btn-outline-custom:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); transform: translateY(-1px); }

/* avatar con doble anillo concéntrico y sombra de elevación */
.avatar-circle { 
  width: 240px; 
  height: 240px; 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.16), 0 0 0 8px rgba(239, 246, 255, 0.9); 
  border: 4px solid #ffffff; 
  overflow: hidden; 
  background-color: var(--accent-light); 
  margin-left: auto; 
  margin-right: 0; 
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.avatar-circle:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -10px rgba(30, 64, 175, 0.22), 0 0 0 8px rgba(219, 234, 254, 0.95);
}

.avatar-circle img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* secciones generales */
section { padding: 4.5rem 0; border-bottom: 1px solid var(--border); }
.section-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; }
.section-title { font-family: 'DM Serif Display', serif; font-size: 2rem; margin-bottom: 2.5rem; color: var(--dark); }

/* sección about con jerarquía visual */
.about-text .about-lead {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--accent);
  line-height: 1.4;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
  font-style: italic;
}

.about-text .about-body {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--mid);
}

/* efecto de entrada suave al hacer scroll */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* tarjetas de experiencia y educación */
.exp-card { padding: 1.6rem; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius-card); margin-bottom: 1.25rem; background: #fff; box-shadow: var(--shadow-sm); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.exp-card:hover { transform: translateY(-3px); border-left-color: var(--accent-hover); border-color: rgba(30, 64, 175, 0.4); box-shadow: var(--shadow-md); }
.exp-title { font-weight: 600; font-size: 1rem; color: var(--dark); margin-bottom: 3px; }
.exp-org { font-size: 0.84rem; color: var(--accent); margin-bottom: 6px; font-weight: 600; }
.exp-date { font-size: 0.78rem; color: var(--mid); }
.exp-desc { font-size: 0.88rem; color: var(--mid); line-height: 1.65; margin-top: 8px; }
.exp-badge { font-size: 0.72rem; padding: 3px 10px; background: var(--accent-light); color: var(--accent); border-radius: 100px; font-weight: 600; display: inline-block; }
.exp-badge-gold { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }

/* portfolio cards */
.portfolio-card { border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; height: 100%; }
.portfolio-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(30, 64, 175, 0.35); }
.portfolio-img { width: 100%; height: 195px; object-fit: cover; display: block; transition: transform 0.35s ease; background-color: #f1f5f9; }
.portfolio-card:hover .portfolio-img { transform: scale(1.04); }

.portfolio-body { padding: 1.25rem 1.4rem; }
.portfolio-tag { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 8px; }
.portfolio-title { font-weight: 600; font-size: 0.94rem; margin-bottom: 8px; line-height: 1.45; color: var(--dark); }
.portfolio-desc { font-size: 0.85rem; color: var(--mid); line-height: 1.6; }
.portfolio-link { font-size: 0.84rem; font-weight: 600; color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease; }
.portfolio-link:hover { gap: 9px; color: var(--accent-hover); }

/* vídeos tv & vertical */
.video-thumbnail-wrapper { position: relative; background: #000; }
.play-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; background: rgba(30, 64, 175, 0.9); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: transform 0.2s ease, background-color 0.2s ease; }
.portfolio-card:hover .play-badge { transform: translate(-50%, -50%) scale(1.1); background: var(--accent); }
.ratio-9x16 { --bs-aspect-ratio: 177.77%; }

/* botón desplegable ver más artículos */
.btn-more-articles {
  background: #ffffff;
  color: var(--accent);
  border: 1px solid var(--border);
  padding: 10px 24px;
  border-radius: 100px;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  transition: all 0.25s ease;
}

.btn-more-articles:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent-hover);
  transform: translateY(-1px);
}

.btn-more-articles .icon-arrow {
  transition: transform 0.3s ease;
}

.btn-more-articles[aria-expanded="true"] .icon-arrow {
  transform: rotate(180deg);
}

/* galería fotográfica */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  aspect-ratio: 3 / 2;
  background: #f1f5f9;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}

.gallery-item:hover img {
  transform: scale(1.06);
}

.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 14px;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.85), transparent);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.gallery-item:hover .gallery-caption {
  opacity: 1;
}

/* botones de navegación del lightbox y contador dinámico */
.lightbox-counter {
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  z-index: 10;
}

.lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
}

.lightbox-nav-btn:hover {
  background: rgba(30, 64, 175, 0.9);
  color: #fff;
  transform: translateY(-50%) scale(1.1);
}

.lightbox-nav-btn.prev-btn { left: 16px; }
.lightbox-nav-btn.next-btn { right: 16px; }

/* habilidades e idiomas */
.skill-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 0.84rem; font-weight: 500; padding: 8px 16px; border-radius: 100px; background: #fff; border: 1px solid var(--border); margin: 4px; color: var(--dark); box-shadow: var(--shadow-sm); transition: all 0.2s ease; }
.skill-pill:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.lang-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); }
.lang-row:last-child { border-bottom: none; }
.lang-name { font-weight: 600; font-size: 0.92rem; }
.lang-level { font-size: 0.82rem; color: var(--mid); }
.lang-native { font-size: 0.72rem; background: var(--accent-light); color: var(--accent); border-radius: 100px; padding: 3px 10px; font-weight: 700; }

/* europa y erasmus */
.eu-card { padding: 1.4rem 1.6rem; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 0 var(--radius-card) var(--radius-card) 0; background: #fff; margin-bottom: 1rem; box-shadow: var(--shadow-sm); }
.eu-prog { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.eu-title { font-weight: 600; font-size: 0.94rem; margin-bottom: 4px; color: var(--dark); }
.eu-org { font-size: 0.84rem; color: var(--mid); line-height: 1.5; }

/* contacto y botón copiar email */
.contact-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; font-weight: 500; text-decoration: none; color: var(--dark); transition: color 0.2s ease; }
.contact-item:hover { color: var(--accent); }
.contact-item:last-child { border-bottom: none; }
.contact-icon { width: 40px; height: 40px; background: var(--accent-light); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 1.15rem; flex-shrink: 0; }

.btn-copy-email {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mid);
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

.btn-copy-email:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}

.copy-tooltip {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--dark);
  color: #fff;
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.copy-tooltip.show {
  opacity: 1;
}

/* botón flotante volver arriba */
.btn-scroll-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.2s ease;
}

.btn-scroll-top.show {
  opacity: 1;
  pointer-events: auto;
}

.btn-scroll-top:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
}

/* ============================================================
   BANNER DE CONSENTIMIENTO DE COOKIES (RGPD / LSSI)
   ------------------------------------------------------------
   FIX (ago-2026): antes existían DOS reglas para #cookieBanner:
   ".cookie-banner" (aquí abajo, con el diseño centrado y
   responsive) y una regla posterior "#cookieBanner { ... }"
   añadida para evitar el salto de layout (CLS). Al ser un
   selector de ID, esa segunda regla ganaba en especificidad y
   pisaba "left: 50%" y "width: calc(100% - 32px)" con
   "left: 0" y "width: 100%", pero NO pisaba el
   "transform: translateX(-50%)" (esa propiedad no estaba
   redefinida). Resultado: el banner se posicionaba en left:0
   y ADEMÁS se desplazaba un 50% de su propio ancho hacia la
   izquierda, quedando medio banner fuera de la pantalla
   (por eso se veía cortado, pegado a la esquina).
   Ahora solo hay una fuente de verdad para el layout del
   banner (esta clase); la regla del ID, más abajo, se limita
   a controlar el display:none inicial.
   ============================================================ */
.cookie-banner {
  position: fixed;
  bottom: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 780px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem 1.4rem;
  box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.18);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transition: bottom 0.4s ease-out;
}

.cookie-banner.show {
  bottom: 24px;
}

.cookie-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cookie-icon {
  font-size: 1.5rem;
  color: var(--accent);
  flex-shrink: 0;
}

.cookie-text p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.45;
}

.cookie-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.btn-cookie-accept {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-cookie-accept:hover {
  background: var(--accent-hover);
}

.btn-cookie-decline {
  background: #fff;
  color: var(--mid);
  border: 1px solid var(--border);
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-cookie-decline:hover {
  background: var(--light-bg);
  color: var(--dark);
}

footer { padding: 2.5rem 0; text-align: center; font-size: 0.82rem; color: var(--mid); border-top: 1px solid var(--border); background: #fff; }

/* responsive media queries y menú móvil */
@media (max-width: 991px) {
  .hero { text-align: center; }
  .hero-eyebrow-badge { margin: 0 auto 1.2rem auto; }
  .hero p.lead { margin: 0 auto; }
  .hero-tags { justify-content: center; }
  .hero-links { justify-content: center; }
  .avatar-circle { margin: 2rem auto 0 auto; }

  /* diseño tarjeta flotante para menú hamburguesa */
  .navbar-collapse {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 12px;
    padding: 1.25rem 1rem;
    margin-top: 0.75rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border);
  }

  .navbar-nav .nav-link {
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0.65rem 0.5rem !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .navbar-nav .nav-item:last-child .nav-link {
    border-bottom: none;
  }

  .navbar-collapse .d-flex.align-items-center {
    margin-top: 1rem !important;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    justify-content: flex-start;
  }

  .lang-btn {
    padding: 6px 14px;
    font-size: 0.8rem;
  }

  .cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 1.1rem;
    width: calc(100% - 24px);
  }

  .cookie-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {
  .hero { padding: 3.5rem 0 2.5rem; }
  section { padding: 3rem 0; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .lightbox-nav-btn { width: 38px; height: 38px; font-size: 1.1rem; }
  .lightbox-nav-btn.prev-btn { left: 8px; }
  .lightbox-nav-btn.next-btn { right: 8px; }

  .cookie-banner {
    bottom: -220px; /* más margen de partida en móvil, el banner en columna es más alto */
    width: calc(100% - 20px);
    padding: 1rem;
  }
  .cookie-banner.show {
    bottom: 12px;
  }
  .cookie-text p {
    font-size: 0.8rem;
  }
}

/* estilos limpios para impresión / guardar en pdf */
@media print {
  .navbar, .scroll-progress-bar, .btn-scroll-top, .cookie-banner, .hero-links, .btn-more-articles, .lightbox-nav-btn, .btn-copy-email, .btn-skip, .btn-share-nav, .lightbox-counter {
    display: none !important;
  }
  body {
    color: #000 !important;
    background: #fff !important;
    font-size: 11pt;
  }
  section {
    padding: 1.5rem 0 !important;
    border-bottom: 1px solid #ddd !important;
  }
  .exp-card, .eu-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    break-inside: avoid;
  }
}

/* variables para modo oscuro */
[data-theme="dark"] {
  --accent: #3b82f6;
  --accent-hover: #60a5fa;
  --accent-light: rgba(59, 130, 246, 0.15);
  --dark: #f8fafc;
  --mid: #94a3b8;
  --light-bg: #090d16;
  --card-bg: #111827;
  --border: #1f2937;
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 12px 32px -4px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] body {
  background-color: #030712;
  color: var(--dark);
}

[data-theme="dark"] .navbar {
  background: #030712 !important;
  border-bottom-color: #1f2937 !important;
}

[data-theme="dark"] .navbar-collapse {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

[data-theme="dark"] .navbar-nav .nav-link {
  color: #cbd5e1 !important;
  font-weight: 500;
}

[data-theme="dark"] .navbar-nav .nav-link:hover, 
[data-theme="dark"] .navbar-nav .nav-link.active-nav {
  color: #60a5fa !important;
}

[data-theme="dark"] .hero {
  background: radial-gradient(circle at 85% 30%, rgba(30, 58, 138, 0.3) 0%, rgba(3, 7, 18, 0.3) 60%), linear-gradient(180deg, #030712 0%, var(--light-bg) 100%);
}

[data-theme="dark"] .portfolio-card,
[data-theme="dark"] .exp-card,
[data-theme="dark"] .eu-card,
[data-theme="dark"] .gallery-item,
[data-theme="dark"] .lang-btn,
[data-theme="dark"] .btn-share-nav,
[data-theme="dark"] .hero-tag,
[data-theme="dark"] .hero-eyebrow-badge,
[data-theme="dark"] .btn-more-articles,
[data-theme="dark"] .btn-outline-custom,
[data-theme="dark"] footer,
[data-theme="dark"] .cookie-banner,
[data-theme="dark"] .skill-pill,
[data-theme="dark"] #skills .col-lg-5 > div,
[data-theme="dark"] #contact .container > div > div > div {
  background-color: var(--card-bg) !important;
  color: var(--dark) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .portfolio-title,
[data-theme="dark"] .exp-title,
[data-theme="dark"] .eu-title,
[data-theme="dark"] .lang-name,
[data-theme="dark"] .skill-pill,
[data-theme="dark"] .lang-level,
[data-theme="dark"] .form-label,
[data-theme="dark"] .about-text .about-body {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .about-text .about-lead {
  color: #60a5fa !important;
}

[data-theme="dark"] .lang-row,
[data-theme="dark"] .contact-item {
  border-bottom-color: var(--border) !important;
}

/* Corrección para que los textos de contacto se vean en blanco brillante */
[data-theme="dark"] .contact-item,
[data-theme="dark"] .contact-item span,
[data-theme="dark"] .contact-item a {
  color: #ffffff !important;
}

[data-theme="dark"] .contact-item:hover,
[data-theme="dark"] .contact-item a:hover {
  color: var(--accent) !important;
}

[data-theme="dark"] .form-control {
  background-color: #030712 !important;
  color: #f1f5f9 !important;
  border-color: var(--border) !important;
}

/* Corrección para el menú desplegable móvil en modo oscuro */
@media (max-width: 991px) {
  [data-theme="dark"] .navbar-collapse {
    background: #111827 !important;
    border: 1px solid #1f2937 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4) !important;
    padding: 1.25rem 1rem !important;
  }

  [data-theme="dark"] .navbar-nav .nav-link {
    border-bottom-color: rgba(31, 41, 55, 0.8) !important;
    color: #cbd5e1 !important;
  }

  [data-theme="dark"] .navbar-collapse .d-flex.align-items-center {
    border-top-color: #1f2937 !important;
  }
}

/* botón de cambio de tema en navbar */
.theme-toggle-btn {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--mid);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.theme-toggle-btn:hover {
  background: var(--accent-light);
  color: var(--accent);
  border-color: var(--accent);
}
[data-theme="dark"] .theme-toggle-btn {
  background: var(--card-bg);
  color: #fbbf24;
  border-color: var(--border);
}
/* Forzar que el icono del menú hamburguesa sea blanco en modo oscuro */
[data-theme="dark"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Ajuste para evitar que el menú se parta en dos líneas en pantallas anchas */
.navbar-nav {
  white-space: nowrap;
}

.nav-item {
  display: inline-block;
}

@media (min-width: 992px) {
  .nav-link {
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
  }
}

/* Destacado del TFM */
.tfm-highlight {
  font-weight: 700;
}
[data-theme="dark"] .tfm-highlight {
  color: #fbbf24 !important; /* Amarillo brillante para modo oscuro */
}

/* ============================================================
   FIX (ago-2026): esta regla por ID solo debe encargarse de
   ocultar el banner ANTES de que el JS decida si mostrarlo,
   para evitar el salto de layout (CLS) al cargar la página.
   Ya NO redefine position/bottom/left/width/z-index/background,
   porque esas propiedades las controla ".cookie-banner" de
   forma responsive (ver más arriba) y duplicarlas aquí, con
   mayor especificidad por ser un ID, era lo que rompía el
   centrado y el diseño en escritorio y en móvil.
   ============================================================ */
#cookieBanner {
    display: none; /* Se mostrará vía JS (checkCookieConsent) */
}

/* Mejora para el renderizado de iconos */
i.bi {
    display: inline-block;
    line-height: 1;
}