/* ==========================================================================
   Maitret.dev — CV Ejecutivo Premium
   Diseño serio, luminoso y confiable. Mobile-first, limpio y mantenible.
   Secciones: Nav, Hero, Trust, Perfil, Valores, Timeline, Skills, Productos,
   Formación, Contacto, Footer + Responsive + Print.
   ========================================================================== */

/* ---------- Variables ---------- */
:root{
  --ink: #0a2540;           /* navy profundo — confianza */
  --ink-2: #1a324f;
  --accent: #0e7490;        /* teal profesional */
  --accent-dark: #0a4a5c;
  --accent-light: #e6f4f8;
  --success: #0f766e;
  --warning: #b45309;
  --bg: #ffffff;
  --bg-alt: #f8fafc;
  --bg-card: #ffffff;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --text: #0f172a;
  --muted: #64748b;
  --muted-2: #94a3b8;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 8px 30px rgba(10,37,64,0.08);
  --shadow-soft: 0 4px 16px rgba(10,37,64,0.06);
  --max: 1180px;
}

/* ---------- Reset & base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{max-width:100%}
a{color: var(--accent); text-decoration: none}
a:hover{color: var(--accent-dark)}
::selection{background: var(--accent-light)}
:focus-visible{outline: 2px solid var(--accent); outline-offset: 2px}

/* ---------- Util ---------- */
.container{max-width: var(--max); margin: 0 auto; padding: 0 24px}
.section{padding: 72px 0}
.section-alt{background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line)}
.section-header{max-width: 760px; margin: 0 auto 36px; text-align: center}
.section-header h2{
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 10px;
}
.eyebrow{
  display: inline-flex; align-items:center; gap:.5rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.lead{color: var(--muted); font-size: 1.06rem; line-height: 1.75}
.lead strong{color: var(--text)}
.muted{color: var(--muted)}
.small{font-size: .86rem; line-height: 1.6}
.badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:600; padding:.38rem .7rem;
  border-radius: 999px; background:#f1f5f9; color: var(--ink);
  border:1px solid var(--line);
}
.badge-success{background:#ecfdf5; color:#065f46; border-color:#a7f3d0}

/* Botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1.25rem; border-radius: 10px; font-weight:700; font-size:.95rem;
  border:1.5px solid transparent; cursor:pointer; transition: .2s ease;
  line-height:1; white-space:nowrap; font-family: inherit;
}
.btn-primary{background: var(--ink); color:#fff; border-color: var(--ink); box-shadow: var(--shadow-soft)}
.btn-primary:hover{background: var(--ink-2); transform: translateY(-1px); color:#fff}
.btn-secondary{background:#fff; color: var(--ink); border-color: var(--line-strong)}
.btn-secondary:hover{border-color: var(--ink); background:#f8fafc}
.btn-ghost{background: transparent; color: var(--muted); border-color: transparent}
.btn-ghost:hover{color: var(--ink); background: var(--bg-alt)}
.btn-sm{padding:.62rem .95rem; font-size:.88rem}
.btn-block{width:100%}

/* ---------- Navegación ---------- */
#navbar{
  position: sticky; top:0; z-index:50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s;
}
#navbar.scrolled{box-shadow: 0 8px 24px rgba(10,37,64,.06)}
.nav-container{
  max-width: var(--max); margin:0 auto; padding: 14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo{display:flex; align-items:center; gap:.6rem; font-weight:800; color: var(--ink); letter-spacing:-.02em}
.logo-mark{
  width:34px; height:34px; display:grid; place-items:center;
  background: var(--ink); color:#fff; border-radius:9px;
  font-family: 'Fraunces', serif; font-weight:800; font-size:.95rem;
}
.logo-text{font-size:1.06rem}
.logo-dot{color: var(--accent)}
.nav-links{list-style:none; display:flex; align-items:center; gap:.15rem}
.nav-links a{color: var(--muted); font-weight:600; font-size:.90rem; padding:.5rem .75rem; border-radius:8px}
.nav-links a:hover{color: var(--ink); background: var(--bg-alt)}
.nav-cta{
  background: var(--ink) !important; color:#fff !important; padding:.6rem 1rem !important; border-radius:10px !important;
}
.nav-cta:hover{opacity:.92}
.nav-actions{display:flex; align-items:center; gap:.5rem}
.mobile-menu-btn{display:none; background:#fff; border:1px solid var(--line); border-radius:10px; padding:.55rem .65rem; color: var(--ink)}
.hide-mobile{display:inline-flex}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(900px 400px at 12% -10%, #e6f4f8 0%, transparent 55%),
    linear-gradient(to bottom, #ffffff, #fcfdff);
  border-bottom: 1px solid var(--line);
  padding: 36px 0 28px;
}
.hero-inner{
  max-width: var(--max); margin:0 auto; padding: 0 24px;
  display:grid; grid-template-columns: 1.35fr .85fr; gap: 28px; align-items:start;
}
.hero-kicker{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.82rem; font-weight:700; color: var(--success);
  background:#ecfdf5; border:1px solid #a7f3d0; padding:.45rem .8rem; border-radius:999px;
  margin-bottom: 16px;
}
.kicker-dot{width:8px; height:8px; background:#10b981; border-radius:50%; box-shadow:0 0 0 6px rgba(16,185,129,.15)}
.hero-title{margin-bottom: 14px}
.hero-name{
  display:block; font-family:'Fraunces', serif; font-weight:800;
  font-size: clamp(2.1rem, 4vw, 3.1rem); letter-spacing:-.04em; line-height:.95; color: var(--ink);
}
.hero-name em{font-style:normal; color: var(--accent)}
.hero-role{display:block; margin-top:8px; font-size:1.15rem; font-weight:700; color: var(--accent-dark)}
.hero-subtitle{display:block; font-size:.92rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--muted); margin-top:6px}
.hero-desc{color: #334155; font-size:1.02rem; line-height:1.8; max-width: 640px; margin-bottom: 14px}
.hero-desc strong{color: var(--ink)}
.hero-meta{display:flex; flex-wrap:wrap; gap:10px 18px; color: var(--muted); font-weight:600; font-size:.88rem; margin-bottom: 18px}
.hero-meta span{display:inline-flex; align-items:center; gap:.45rem}
.hero-actions{display:flex; flex-wrap:wrap; gap:10px}

/* Lado derecho */
.hero-side{display:flex; flex-direction:column; gap:16px; position:sticky; top:92px}
.contact-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow: var(--shadow);
  overflow:hidden;
}
.contact-card-head{
  display:flex; gap:12px; align-items:center; padding:18px 18px 14px;
  border-bottom:1px solid var(--line); background: linear-gradient(to bottom, #f8fafc, #fff);
}
.avatar{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background: var(--ink); color:#fff; font-family:'Fraunces', serif; font-weight:800;
  flex-shrink:0;
}
.contact-card-name{font-weight:800; color: var(--ink); line-height:1.1}
.contact-card-role{font-size:.82rem; color: var(--muted); font-weight:600}
.contact-card-body{padding:14px 18px; display:flex; flex-direction:column; gap:10px}
.contact-line{display:flex; align-items:center; gap:.6rem; font-weight:600; font-size:.92rem; color: var(--ink)}
.contact-line.muted{color: var(--muted); font-weight:500}
.contact-card-foot{padding:12px 18px; background:#f8fafc; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px}
.metrics-grid{display:grid; grid-template-columns: repeat(2,1fr); gap:12px}
.metric{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; text-align:center; box-shadow: var(--shadow-soft);
}
.metric-value{font-family:'Fraunces', serif; font-weight:800; font-size:1.6rem; color: var(--ink); line-height:1}
.metric-label{font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--muted); margin-top:6px}
.hero-note{display:flex; gap:.5rem; align-items:flex-start; color: var(--muted); font-size:.84rem; background:#fff; border:1px dashed var(--line); border-radius:12px; padding:10px 12px}

/* Trust bar */
.trust-bar{background: var(--ink); color:#cbd5e1; padding:10px 0; font-size:.88rem}
.trust-inner{max-width:var(--max); margin:0 auto; padding:0 24px; display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.trust-label{font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#fff; font-size:.75rem; background: rgba(255,255,255,.12); padding:.35rem .6rem; border-radius:999px}
.trust-items{opacity:.9}

/* ---------- Perfil ---------- */
.profile-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:22px; align-items:start}
.profile-text p{color:#334155; margin-bottom:12px; line-height:1.85}
.check-list{list-style:none; display:flex; flex-direction:column; gap:8px; margin-top:10px}
.check-list li{display:flex; gap:.6rem; align-items:flex-start; color:#334155; font-weight:500}
.check-list i{color: var(--success); margin-top:2px; flex-shrink:0}
.profile-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow: var(--shadow);
  position: sticky; top:92px;
}
.profile-card h3{font-family:'Fraunces', serif; font-size:1.15rem; color: var(--ink); margin-bottom:10px}
.steps{list-style:none; counter-reset: step; display:flex; flex-direction:column; gap:10px; margin-bottom:16px}
.steps li{position:relative; padding-left:32px; color:#334155; font-size:.94rem; line-height:1.65}
.steps li::before{
  counter-increment: step; content: counter(step);
  position:absolute; left:0; top:0; width:22px; height:22px; border-radius:50%;
  background: var(--accent-light); color: var(--accent-dark); border:1px solid #b9e3ee;
  display:grid; place-items:center; font-weight:800; font-size:.78rem;
}
.steps li strong{color: var(--ink)}

/* ---------- Valores ---------- */
.values-grid{display:grid; grid-template-columns: repeat(4,1fr); gap:16px}
.value-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow: var(--shadow-soft);
  display:flex; flex-direction:column; gap:10px;
}
.value-card-wide{grid-column: span 4; flex-direction:row; align-items:center; gap:18px}
.value-icon{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background: var(--accent-light); color: var(--accent-dark); border:1px solid #cfeaf2; flex-shrink:0;
}
.value-card h3{font-size:1.02rem; color: var(--ink)}
.value-card p{color: var(--muted); font-size:.94rem; line-height:1.7}
.value-card ul{list-style:none; display:flex; flex-direction:column; gap:6px; margin-top:4px}
.value-card ul li{color:#334155; font-size:.88rem; display:flex; gap:.45rem}
.value-card ul li::before{content:"·"; color: var(--accent); font-weight:800}
.value-card-wide p{max-width:780px}

/* ---------- Timeline ---------- */
.timeline{position:relative; max-width: 880px; margin:0 auto}
.timeline::before{
  content:""; position:absolute; left:11px; top:8px; bottom:8px; width:2px; background: var(--line);
}
.t-item{position:relative; padding-left:36px; padding-bottom:18px}
.t-item:last-child{padding-bottom:0}
.t-dot{
  position:absolute; left:4px; top:6px; width:16px; height:16px; border-radius:50%;
  background:#fff; border:3px solid var(--accent); box-shadow: 0 0 0 6px var(--accent-light);
}
.t-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow: var(--shadow-soft);
}
.t-head{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap; margin-bottom:8px}
.t-company{font-weight:800; color: var(--accent-dark); font-size:.88rem; letter-spacing:.02em}
.t-role{font-family:'Fraunces', serif; font-size:1.12rem; color: var(--ink); line-height:1.3}
.t-date{
  font-weight:700; font-size:.80rem; color: var(--ink); background:#f1f5f9; border:1px solid var(--line);
  padding:.35rem .6rem; border-radius:999px; white-space:nowrap; height: fit-content;
}
.t-desc{color:#334155; font-size:.95rem; line-height:1.75; margin-bottom:10px}
.t-bullets{margin:0 0 12px 18px; color:#334155; font-size:.92rem}
.t-bullets li{margin-bottom:4px}
.tags{display:flex; flex-wrap:wrap; gap:6px}
.tag{
  font-size:.75rem; font-weight:700; padding:.32rem .62rem; border-radius:999px;
  background:#f1f5f9; border:1px solid var(--line); color: var(--ink);
}
.tag-accent{background: var(--accent-light); color: var(--accent-dark); border-color:#b9e3ee}

/* ---------- Skills ---------- */
.skills-grid{display:grid; grid-template-columns: repeat(4,1fr); gap:16px}
.skill-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow: var(--shadow-soft);
}
.skill-card.skill-soft{grid-column: span 1}
.skill-head{display:flex; align-items:center; gap:.6rem; margin-bottom:8px; color: var(--ink)}
.skill-head h3{font-size:1.02rem}
.skill-desc{color: var(--muted); font-size:.92rem; line-height:1.6; margin-bottom:10px}
.skill-tags{display:flex; flex-wrap:wrap; gap:6px}
.skill-tags span{
  font-size:.78rem; font-weight:600; padding:.36rem .6rem; border-radius:999px;
  background:#f8fafc; border:1px solid var(--line); color:#334155;
}
.skill-levels{margin-top:14px; display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--line); padding-top:12px}
.lvl{display:flex; justify-content:space-between; align-items:center; font-size:.88rem; font-weight:600; color:#334155}
.d{width:7px; height:7px; border-radius:50%; background:#e2e8f0; display:inline-block; margin-left:3px}
.d.on{background: var(--accent); box-shadow: 0 0 8px rgba(14,116,144,.35)}
.soft-list{list-style:none; display:flex; flex-direction:column; gap:8px}
.soft-list li{display:flex; gap:.6rem; align-items:flex-start; color:#334155; font-size:.92rem; line-height:1.6}
.soft-list i{color: var(--success); margin-top:2px; flex-shrink:0}

/* ---------- Productos ---------- */
.products-grid{display:grid; grid-template-columns: repeat(3,1fr); gap:16px}
.product-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px;
  box-shadow: var(--shadow-soft); display:flex; flex-direction:column; gap:10px;
}
.product-card.featured{grid-column: span 2; border-color:#a7f3d0; box-shadow: 0 12px 30px rgba(15,118,110,.10)}
.product-top{display:flex; justify-content:space-between; align-items:center; gap:10px}
.product-badge{font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.32rem .6rem; border-radius:999px; border:1px solid var(--line)}
.product-badge.green{background:#ecfdf5; color:#065f46; border-color:#a7f3d0}
.product-badge.blue{background:#eff6ff; color:#1e40af; border-color:#bfdbfe}
.product-badge.violet{background:#f5f3ff; color:#6d28d9; border-color:#ddd6fe}
.product-badge.amber{background:#fffbeb; color:#92400e; border-color:#fde68a}
.product-badge.rose{background:#fff1f2; color:#9f1239; border-color:#fecdd3}
.product-icon{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  color:#fff; font-weight:800; font-family:'Fraunces', serif; font-size:.95rem; flex-shrink:0;
}
.product-icon.green{background: linear-gradient(135deg, #0f766e, #10b981)}
.product-icon.blue{background: linear-gradient(135deg, #0e7490, #0a2540)}
.product-icon.violet{background: linear-gradient(135deg, #6d28d9, #7c3aed)}
.product-icon.amber{background: linear-gradient(135deg, #d97706, #f59e0b)}
.product-icon.rose{background: linear-gradient(135deg, #e11d48, #fb7185)}
.product-card h3{font-family:'Fraunces', serif; font-size:1.22rem; color: var(--ink)}
.product-role{font-size:.86rem; font-weight:700; color: var(--muted); margin-top:-6px}
.product-card p{color:#334155; font-size:.94rem; line-height:1.7}
.product-features{list-style:none; display:flex; flex-direction:column; gap:6px}
.product-features li{display:flex; gap:.5rem; align-items:center; color:#334155; font-size:.88rem}
.product-features i{color: var(--success)}
.product-stats{display:flex; gap:12px; border-top:1px solid var(--line); padding-top:10px; font-size:.88rem; color:#334155}
.product-stats strong{color: var(--ink)}
.product-link{display:inline-flex; align-items:center; gap:.4rem; font-weight:700; color: var(--ink)}
.product-link:hover{color: var(--accent)}
.product-cta{background: linear-gradient(to bottom, #f8fafc, #ffffff); border-style: dashed}
.product-cta h3{font-size:1.12rem}

/* ---------- Formación ---------- */
.edu-grid{display:grid; grid-template-columns: repeat(3,1fr); gap:16px}
.edu-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow: var(--shadow-soft);
}
.edu-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
  background: var(--accent-light); color: var(--accent-dark); border:1px solid #cfeaf2; margin-bottom:10px;
}
.edu-card h4{font-size:1rem; color: var(--ink); margin-bottom:6px}
.edu-card p{color: var(--muted); font-size:.92rem; line-height:1.6}
.edu-highlight{background: var(--ink); color:#e2e8f0; border-color: var(--ink)}
.edu-highlight h4{color:#fff}
.edu-highlight p{color:#cbd5e1}

/* ---------- Contacto ---------- */
.contact-section{background: #fff}
.contact-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:22px; align-items:start}
.contact-section h2{font-family:'Fraunces', serif; font-size: clamp(1.9rem, 3vw, 2.5rem); color: var(--ink); margin-bottom:10px}
.contact-actions{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0}
.contact-meta{display:flex; flex-wrap:wrap; gap:12px 18px; color: var(--muted); font-weight:600; font-size:.9rem}
.contact-meta span{display:inline-flex; align-items:center; gap:.45rem}
/* Formulario — corregido: padding, respiración, foco visible y proporción */
.form-card{
  position:sticky; top:92px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow: var(--shadow);
  padding:22px 22px 18px;
  display:flex; flex-direction:column; gap:14px;
  overflow:visible;
}
.form-card h3{
  font-family:'Fraunces', Georgia, serif;
  font-size:1.18rem; font-weight:800; letter-spacing:-.02em;
  color: var(--ink); line-height:1.2; margin:0;
}
.form-card > p.small.muted{margin:0; color: var(--muted); font-size:.86rem; line-height:1.55}
.form-card form{display:flex; flex-direction:column; gap:12px; margin-top:2px}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:0}
.field span{font-size:.82rem; font-weight:700; letter-spacing:.01em; color:#1e293b; line-height:1.3}
.field input, .field textarea{
  width:100%; padding:.78rem .9rem; border-radius:11px; border:1.5px solid var(--line);
  font-family: inherit; font-size:.92rem; line-height:1.45; color: var(--text); background:#fff;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  -webkit-appearance:none; appearance:none;
}
.field input::placeholder, .field textarea::placeholder{color: var(--muted-2)}
.field input:hover, .field textarea:hover{border-color: var(--line-strong)}
.field input:focus, .field textarea:focus{outline:none; border-color: var(--accent); background:#fff; box-shadow:0 0 0 3px rgba(14,116,144,.13)}
.field textarea{resize: vertical; min-height:110px; line-height:1.6}
.form-card .btn-block{margin-top:4px; padding:.92rem 1.25rem; font-size:.94rem; border-radius:11px}
.form-card .btn-block i{flex-shrink:0}
.form-card form > p.small.muted{
  margin:0; padding-top:12px; border-top:1px solid var(--line);
  text-align:center; font-size:.84rem;
}

/* ---------- Footer ---------- */
.footer{background: var(--ink); color:#cbd5e1; padding: 36px 0 18px; margin-top: 40px}
.footer-grid{display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:22px}
.footer-brand p{color:#94a3b8; font-size:.94rem; line-height:1.7; margin-top:10px; max-width: 420px}
.footer-brand .logo{color:#fff}
.footer-brand .logo-mark{background:#fff; color: var(--ink)}
.footer-badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.footer-badges .badge{background: rgba(255,255,255,.08); color:#e2e8f0; border-color: rgba(255,255,255,.14)}
.footer h4{color:#fff; font-size:.88rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:12px}
.footer ul{list-style:none; display:flex; flex-direction:column; gap:8px}
.footer a{color:#cbd5e1; font-weight:500}
.footer a:hover{color:#fff}
.footer-bottom{
  margin-top:22px; padding-top:16px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:#94a3b8; font-size:.88rem;
}

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform: translateY(14px); transition: .6s ease}
.reveal.in{opacity:1; transform:none}

/* ---------- Responsive ---------- */
@media (max-width: 1080px){
  .hero-inner, .profile-grid, .contact-grid{grid-template-columns:1fr}
  .hero-side, .profile-card, .form-card{position: static}
  .values-grid{grid-template-columns: repeat(2,1fr)}
  .value-card-wide{grid-column: span 2; flex-direction:column; align-items:flex-start}
  .skills-grid{grid-template-columns: repeat(2,1fr)}
  .products-grid{grid-template-columns: repeat(2,1fr)}
  .product-card.featured{grid-column: span 2}
  .edu-grid{grid-template-columns: repeat(2,1fr)}
  .footer-grid{grid-template-columns: 1fr 1fr}
}
@media (max-width: 760px){
  .section{padding: 56px 0}
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; padding:12px 16px; gap:4px;
    box-shadow: 0 20px 40px rgba(10,37,64,.08);
  }
  .nav-links.active{display:flex}
  .nav-links a{padding:.85rem 1rem}
  .mobile-menu-btn{display:inline-flex}
  .hide-mobile{display:none}
  .hero{padding-top:22px}
  .hero-desc{font-size:.98rem}
  .metrics-grid{grid-template-columns: repeat(2,1fr)}
  .values-grid, .skills-grid, .products-grid, .edu-grid{grid-template-columns:1fr}
  .value-card-wide{grid-column: span 1}
  .product-card.featured{grid-column: span 1}
  .timeline::before{left:7px}
  .t-item{padding-left:28px}
  .t-dot{left:0}
  .trust-inner{flex-direction:column; align-items:flex-start}
  .footer-grid{grid-template-columns:1fr}
  .container, .nav-container, .hero-inner, .trust-inner{padding-left:16px; padding-right:16px}
}
@media (max-width: 480px){
  .metric-value{font-size:1.35rem}
  .hero-name{font-size:2rem}
  .btn{width:100%}
  .hero-actions .btn{flex: 1 1 100%}
}

/* ---------- Print ---------- */
@media print{
  #navbar, .trust-bar, .hero-actions, .contact-actions, .form-card, .footer{display:none !important}
  body{background:#fff; color:#000}
  .section, .section-alt{background:#fff; border:none; padding:28px 0}
  .hero{background:#fff; border:none; padding:18px 0}
  .hero-inner{grid-template-columns:1fr; gap:12px}
  .hero-side{position:static}
  .contact-card, .metric, .value-card, .t-card, .skill-card, .product-card, .edu-card{box-shadow:none; border:1px solid #d1d5db; break-inside: avoid}
  a{color:#000; text-decoration:none}
  .hero-name, .section-header h2, .t-role, .product-card h3{color:#000}
}