/* Tema: LinkedIn Classic Pastel (full light)
   — Fondo gris claro tipo LinkedIn, superficies blancas y acento azul #0A66C2
   — Sin navy oscuro ni blobs marcados
   — Conserva tus animaciones y estructura
*/

:root{
  /* Base clara pastel */
  --bg-900:#f3f2ef;     /* fondo general LinkedIn-like */
  --bg-800:#ffffff;     /* superficies (cards, header, slider) */
  --text-100:#1f2937;   /* texto principal */
  --text-300:#4b5563;   /* texto secundario */

  /* Acentos LinkedIn */
  --pri:#0A66C2;        /* azul LinkedIn */
  --sec:#004182;        /* azul profundo p/gradientes y hover */
  --acc:#70B5F9;        /* azul claro de apoyo */

  /* Bordes/sombra suaves estilo “enterprise” */
  --glass:rgba(10,102,194,.06);
  --border:#e6e9ef;     /* gris clarito */
  --shadow:0 8px 28px rgba(31,41,55,.08);
}

/* ===== Fondo global pastel (sin navy) ===== */
body{
  background:
    linear-gradient(180deg, rgba(10,102,194,.03), rgba(112,181,249,.02) 30%, transparent 60%),
    var(--bg-900);
  color:var(--text-100);
}

/* ===== Header claro con blur sutil ===== */
.header{
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85));
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--border);
}
.logo span{ color:var(--pri) }

/* ===== Navegación ===== */
.nav__link{ color:var(--text-300) }
.nav__link:hover{ color:var(--text-100) }
.nav__link::after{ background:linear-gradient(90deg,var(--pri),var(--sec)) }

/* ===== Botones ===== */
.btn{ color:#ffffff; box-shadow:0 6px 16px rgba(10,102,194,.18) }
.btn--primary{ --bg:var(--pri) }
.btn--primary:hover{ filter:saturate(108%); box-shadow:0 10px 26px rgba(10,102,194,.28) }
.btn--ghost{
  color:var(--pri);
  background:transparent;
  border:1.5px solid color-mix(in oklab, var(--pri) 85%, #ffffff 15%);
  box-shadow:none;
}
.btn--outline{
  color:var(--pri);
  background:transparent;
  border:1.5px solid var(--pri);
  box-shadow:none;
}
.btn--glow::before{
  background:
    radial-gradient(120px 40px at 20% 0%, color-mix(in oklab, var(--pri) 55%, transparent), transparent 55%),
    radial-gradient(120px 40px at 80% 100%, color-mix(in oklab, var(--acc) 60%, transparent), transparent 55%);
  filter:blur(16px);
  opacity:.55;
}

/* ===== Hero en claro pastel ===== */
.hero{ padding-top:clamp(3rem,6vw,5rem) }
.hero__title span{
  background:linear-gradient(90deg,var(--pri),var(--acc));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__subtitle{ color:var(--text-300) }

/* Tarjeta mock clara y pastel */
.mock-card{
  background:linear-gradient(180deg, #ffffff, #fbfbfd);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.mock-media{
  background:linear-gradient(135deg,
    color-mix(in oklab, var(--pri) 18%, #e9f2ff),
    color-mix(in oklab, var(--acc) 18%, #f2f8ff)
  );
}
.mock-lines span{ background:linear-gradient(90deg, #e8eef8, #dde7f5) }
.pill{
  color:var(--text-100);
  background:rgba(10,102,194,.06);
  border:1px solid var(--border);
}
.pill--solid{
  color:#0b142b;
  background:color-mix(in oklab, var(--acc) 60%, #fff 40%);
  border-color:transparent;
}

/* ===== Quitar blobs o dejarlos MUY sutiles ===== */
.blob{ display:none !important } /* ← LinkedIn clásico no usa blobs notables */
/* Si deseas apenas un toque:
.blob{ filter:blur(32px); opacity:.18 }
.blob--1{ background:radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--acc) 80%, #fff 20%), transparent 60%) }
.blob--2{ background:radial-gradient(circle at 70% 70%, color-mix(in oklab, var(--pri) 75%, #fff 25%), transparent 60%) }
*/

/* ===== Secciones y tipografía ===== */
.section{
  background:transparent;
  border-top:1px solid var(--border);
}
.section__lead{ color:var(--text-300) }

/* Chips & Cards en blanco limpio */
.chip{
  color:var(--text-100);
  background:#ffffff;
  border:1px solid var(--border);
}
.card{
  background:linear-gradient(180deg, #ffffff, #fbfbfd);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.card:hover{
  transform:translateY(-4px);
  border-color: color-mix(in oklab, var(--pri) 28%, var(--border));
}

/* ===== Timeline clara con acento azul ===== */
.timeline::before{ background:linear-gradient(var(--pri), var(--sec)) }
.t-dot{
  background:var(--pri);
  box-shadow:0 0 0 4px rgba(10,102,194,.16);
}
.t-content{
  background:#ffffff;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.t-date{ color:var(--text-300) }
.t-tags li{
  background:#ffffff;
  border:1px solid var(--border);
  color:var(--text-100);
}

/* ===== Slider de proyectos pastel ===== */
.slider__track{
  border:1px solid var(--border);
  background:linear-gradient(180deg, #ffffff, #fafbff);
}
.p-card{
  background:linear-gradient(180deg, #ffffff, #fbfbfd);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.p-card:hover{
  border-color: color-mix(in oklab, var(--pri) 28%, var(--border));
}
.p-card__media{
  background:linear-gradient(135deg,
    color-mix(in oklab, var(--pri) 18%, #e9f2ff),
    color-mix(in oklab, var(--acc) 18%, #f2f8ff)
  );
}

/* ===== Formulario & Footer ===== */
.form input, .form textarea{
  background:#ffffff;
  color:var(--text-100);
  border:1px solid var(--border);
}
.form input:focus, .form textarea:focus{
  border-color: color-mix(in oklab, var(--pri) 45%, var(--border));
  box-shadow:0 0 0 3px rgba(10,102,194,.12);
}
.footer{
  background:#ffffff;
  border-top:1px solid var(--border);
}
.f-col a{ color:#374151 }
.f-col a:hover{ color:var(--pri) }
.footer__copy{ color:#6b7280 }

/* ===== Micro-interacciones conservadas ===== */
.reveal{ transition:opacity .7s ease, transform .7s ease }
.p-card:hover, .card:hover{ transform:translateY(-3px) }