/* ========== SITE.CSS — componentes nuevos para andrego50.github.io ==========
   Se carga después de css/styles.css. Solo contiene clases que no existen en el fork de FastAnalytics. */

/* ---------- Retrato del hero ----------
   La foto es un recorte JPG sobre blanco: encima de la página blanca no tiene
   borde y queda flotando. Un disco de marca detrás le da asiento, y
   mix-blend-mode:multiply funde el blanco del recorte con ese disco sin
   tener que reeditar la imagen. */
.about-photo {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  isolation: isolate;
}

.about-photo::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 0;
  width: min(300px, 100%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #EAF4F4 0%, #DCEDED 55%, #CFE5E5 100%);
}

.founder-photo {
  mix-blend-mode: multiply;
  border-radius: 0;
  filter: saturate(1.04);
}

@media (max-width: 768px) {
  .about-photo::before {
    width: min(200px, 100%);
  }
}

/* ---------- Page header (páginas internas sin hero) ---------- */
.page-header {
  padding: calc(var(--nav-height) + 64px) 0 48px;
  text-align: center;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}

.page-header h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.page-header p {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto;
}

/* ---------- Starter note ---------- */
.starter-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--accent-light);
  border: 1px solid rgba(212, 136, 58, 0.35);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 32px auto 0;
  max-width: 640px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.starter-note svg {
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 2px;
}

/* ---------- Portfolio disclosure ---------- */
.portfolio-disclosure {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--primary-light);
  border-radius: var(--radius);
  padding: 14px 20px;
  margin: 32px auto 48px;
  max-width: 720px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-align: center;
  justify-content: center;
  flex-wrap: wrap;
}

.portfolio-disclosure a {
  font-weight: 600;
  color: var(--primary-dark);
}

/* ---------- One-of-my-projects card (index) ---------- */
.project-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  background: var(--bg-dark);
  color: white;
  border-radius: var(--radius-xl);
  padding: 32px 40px;
  margin-top: 32px;
}

.project-banner-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-banner p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 4px 0 0;
}

.project-banner h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: white;
}

.project-banner .btn {
  white-space: nowrap;
}

/* ---------- CV pending button ---------- */
.cv-pending {
  background: var(--bg-alt);
  color: var(--text-secondary);
  border: 1px dashed var(--border);
}

.cv-pending:hover {
  background: var(--border);
  color: var(--text);
}

/* ---------- Timeline (trayectoria.html) ---------- */
.timeline {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding-left: 32px;
  border-left: 2px solid var(--border);
}

.timeline-item {
  position: relative;
  padding-bottom: 40px;
}

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

.timeline-marker {
  position: absolute;
  left: -41px;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--primary);
}

.timeline-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
  color: var(--primary);
  background: var(--primary-light);
}

.timeline-tag-educacion { color: var(--primary-dark); background: var(--primary-light); }
.timeline-tag-experiencia { color: var(--accent); background: var(--accent-light); }
.timeline-tag-publicacion { color: #6D28D9; background: #EDE9FE; }
.timeline-tag-conferencia { color: #B45309; background: #FEF3C7; }

.timeline-date {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 4px;
}

.timeline-item h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 4px 0 6px;
}

.timeline-item p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ---------- Blog list ---------- */
.blog-list {
  display: grid;
  gap: 24px;
  max-width: 780px;
  margin: 0 auto;
}

.blog-card {
  display: block;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: all var(--transition);
}

.blog-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  border-color: var(--primary);
}

.blog-meta {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.blog-card h2 {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.blog-card p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 12px;
}

.blog-read-more {
  font-weight: 600;
  color: var(--primary);
}

/* ---------- Blog post article ---------- */
.blog-post {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}

.blog-post-byline {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 32px;
}

.blog-post h1 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.blog-post p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.blog-post-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--primary);
  margin-top: 24px;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .project-banner {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  .timeline {
    padding-left: 24px;
  }

  .timeline-marker {
    left: -33px;
  }
}

/* ========================================================================
   KIT DE SPEAKER (speaker.html)
   ======================================================================== */

.kit-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 28px;
}

.kit-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Datos rápidos ---------- */
/* 3 columnas fijas: son 6 datos, así llenan dos filas exactas y no quedan
   celdas vacías mostrando el color de fondo que hace de línea divisoria. */
.factsheet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (max-width: 900px) {
  .factsheet { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .factsheet { grid-template-columns: 1fr; }
}

.fact {
  background: var(--bg);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fact-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.fact-value {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
}

.fact-value a {
  color: var(--primary);
  text-decoration: none;
}

.fact-value a:hover { text-decoration: underline; }

/* ---------- Selector de idioma de las bios ---------- */
.bio-lang-tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  margin: 0 auto 32px;
  width: fit-content;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.bio-lang {
  padding: 8px 20px;
  border: none;
  background: transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.bio-lang:hover { color: var(--primary); }

.bio-lang.active {
  background: var(--primary);
  color: #fff;
}

/* ---------- Tarjetas de biografía ---------- */
.bio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.bio-card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}

.bio-card-wide { grid-column: 1 / -1; }

.bio-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.bio-head h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
}

.bio-count {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

/* pre-line conserva los saltos de párrafo de la bio larga sin tener que
   partirla en varios <p> por idioma */
.bio-text {
  white-space: pre-line;
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 20px;
  flex-grow: 1;
}

.btn-copy {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: var(--transition);
}

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

.btn-copy.copied {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ---------- Foto oficial ---------- */
.photo-kit {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
}

.photo-kit-preview {
  position: relative;
  display: flex;
  justify-content: center;
  isolation: isolate;
}

.photo-kit-preview::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #EAF4F4 0%, #DCEDED 55%, #CFE5E5 100%);
}

.photo-kit-info p { color: var(--text-secondary); }

.photo-credit {
  margin-top: 12px;
  font-size: 0.9rem;
}

.photo-kit .kit-actions { justify-content: flex-start; }

/* ---------- Temas de charla ---------- */
.topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.topic-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px 28px;
  transition: var(--transition);
}

.topic-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.topic-num {
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: 12px;
}

.topic-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 10px;
}

.topic-card p {
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

/* ---------- Ponencias ---------- */
.talks-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 860px;
  margin: 0 auto;
}

.talk-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.talk-year {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.02em;
}

.talk-badge {
  display: inline-block;
  padding: 3px 10px;
  margin-bottom: 8px;
  background: var(--accent-light);
  color: #8A5620;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.talk-body h3 {
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 6px;
}

.talk-venue {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 8px;
}

.talk-body p:last-child {
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

.talks-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 860px;
  margin: 24px auto 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.talks-note svg { flex-shrink: 0; margin-top: 2px; }

@media (max-width: 860px) {
  .bio-grid { grid-template-columns: 1fr; }

  .photo-kit {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px;
  }

  .photo-kit .kit-actions { justify-content: center; }

  .talk-item {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ========================================================================
   PUBLICACIONES (publicaciones.html)
   ======================================================================== */

.cite-list {
  list-style: none;
  max-width: 860px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cite-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: var(--transition);
}

.cite-item:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
}

.cite-year {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.02em;
}

.cite-kind {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* La referencia va con sangría francesa, como en una bibliografía impresa */
.cite-ref {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  padding-left: 1.6em;
  text-indent: -1.6em;
  margin-bottom: 10px;
}

.cite-note {
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.cite-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

.cite-link:hover { text-decoration: underline; }

/* ---------- Bloque "en preparación" ---------- */
.pending-block {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  max-width: 860px;
  margin: 0 auto;
  background: var(--bg-alt);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.pending-block svg {
  flex-shrink: 0;
  color: var(--text-muted);
  margin-top: 2px;
}

.pending-block h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.pending-block p {
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

/* ---------- Perfiles de investigación ---------- */
.profiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  max-width: 860px;
  margin: 0 auto;
}

.profile-card {
  display: block;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  text-decoration: none;
  transition: var(--transition);
}

.profile-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.profile-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
}

.profile-card p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

@media (max-width: 640px) {
  .cite-item {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .pending-block {
    flex-direction: column;
    gap: 12px;
    padding: 24px;
  }
}