:root {
  --bg: #07111f;
  --surface: rgba(12, 25, 43, .88);
  --surface-solid: #0d1b2a;
  --line: rgba(148, 163, 184, .16);
  --line-strong: rgba(56, 189, 248, .30);
  --text: #e7eef7;
  --muted: #9aa9bd;
  --primary: #38bdf8;
  --primary-2: #2563eb;
  --accent: #22d3ee;
  --accent-soft: rgba(34, 211, 238, .10);
  --shadow: 0 24px 70px rgba(0, 0, 0, .32);
  --max: 1240px;
  --header-h: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 0 0, rgba(37, 99, 235, .20), transparent 34%),
    radial-gradient(circle at 100% 18%, rgba(34, 211, 238, .12), transparent 30%),
    linear-gradient(180deg, #07111f 0%, #091625 46%, #07111f 100%);
  line-height: 1.6;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; }

.page-shell {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.page-shell::before,
.page-shell::after {
  content: "";
  position: absolute;
  inset: 0;
}

.page-shell::before {
  background-image: url('../img/network-bg.svg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  opacity: .28;
  filter: saturate(0.9) blur(.15px);
}

.page-shell::after {
  background-image:
    linear-gradient(rgba(56,189,248,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,.03) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.18), transparent 72%);
  opacity: .55;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 12px 14px 0;
}
.header-inner {
  width: min(100%, var(--max));
  min-height: 62px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 9px 12px 9px 14px;
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 17px;
  background: rgba(8,18,32,.82);
  backdrop-filter: blur(20px);
  box-shadow: 0 16px 42px rgba(0,0,0,.26);
}
.brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  white-space: nowrap;
}
.brand-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: 0 10px 24px rgba(37,99,235,.28);
}
.brand-copy { display: grid; line-height: 1.15; }
.brand-copy strong { font-size: 13px; }
.brand-copy small { margin-top: 3px; color: var(--muted); font-size: 10px; }

.main-nav {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.main-nav a {
  flex: 0 0 auto;
  padding: 8px 8px;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 650;
  transition: background .18s ease, color .18s ease;
}
.main-nav a:hover,
.main-nav a.active {
  color: var(--primary);
  background: rgba(56,189,248,.10);
}
.header-actions { display: inline-flex; align-items: center; gap: 8px; }
.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  background: rgba(56,189,248,.08);
  cursor: pointer;
}
.menu-toggle span:not(.sr-only) {
  display: block;
  width: 22px;
  height: 2px;
  margin: 4px auto;
  border-radius: 999px;
  background: var(--text);
}

.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 17px;
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 12px 28px rgba(37,99,235,.28);
}
.btn-secondary {
  color: var(--primary);
  border-color: rgba(148,163,184,.20);
  background: rgba(15,29,48,.92);
}
.btn-small { min-height: 38px; padding: 0 14px; font-size: 12px; }

.page-main {
  width: min(calc(100% - 28px), var(--max));
  margin: 0 auto;
  padding: 34px 0 72px;
}
.page-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
  margin: 4px 0 22px;
}
.page-heading .eyebrow,
.eyebrow {
  margin: 0 0 11px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.page-heading h1,
.hero h1 {
  margin: 0;
  line-height: 1.05;
  letter-spacing: -.045em;
}
.page-heading h1 { font-size: clamp(28px, 3.8vw, 44px); }
.page-heading > div > p:last-child {
  max-width: 68ch;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 15px;
}
.page-index {
  color: rgba(56,189,248,.16);
  font-size: clamp(42px, 6.5vw, 78px);
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: 1;
}

.panel,
.hero-copy,
.hero-card,
.info-panel,
.timeline-card,
.skill-card,
.education-card,
.contact-panel,
.letter-card,
.letter-highlight,
.secondary-experience {
  border: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

body.home-page { overflow-x: hidden; }
.home-main {
  width: min(calc(100% - 28px), var(--max));
  min-height: calc(100vh - 84px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 12px 0 20px;
}
.hero { width: 100%; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .68fr);
  gap: 24px;
  align-items: stretch;
}
.hero-copy {
  min-height: 0;
  padding: clamp(24px, 3.2vw, 34px);
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero h1 {
  max-width: 12ch;
  font-size: clamp(32px, 4.4vw, 50px);
}
.hero h1 span { color: var(--primary); }
.hero-intro {
  max-width: 60ch;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: clamp(15px, 1.3vw, 17px);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hero-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 18px;
}
.hero-highlights article {
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(15,29,48,.78);
}
.hero-highlights strong { display: block; color: var(--primary); font-size: 18px; }
.hero-highlights span { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; line-height: 1.35; }

.hero-card {
  padding: 14px;
  border-radius: 28px;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 10px;
}
.profile-photo {
  width: 100%;
  height: clamp(260px, 35vh, 350px);
  object-fit: contain;
  object-position: center top;
  border-radius: 21px;
  border: 1px solid rgba(56,189,248,.16);
  background: linear-gradient(180deg, #142235 0%, #0c1928 100%);
}
.hero-card-copy { padding: 0 4px; }
.card-role { margin: 0; color: var(--primary); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; }
.hero-card-copy h2 { margin: 5px 0 0; font-size: 22px; line-height: 1.1; letter-spacing: -.03em; }
.card-location { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.contact-mini-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.contact-mini-list a,
.contact-mini-list div {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(15,29,48,.78);
  text-decoration: none;
}
.contact-mini-list .full { grid-column: 1 / -1; }
.contact-mini-list span,
.contact-link span { color: var(--muted); font-size: 9.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.contact-mini-list strong,
.contact-link strong { overflow-wrap: anywhere; font-size: 11px; font-weight: 700; }
.availability {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 0;
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: #67e8f9;
  font-size: 11px;
  font-weight: 750;
}
.availability-dot { width: 8px; height: 8px; border-radius: 50%; background: #22d3ee; }
.home-footer {
  width: min(calc(100% - 28px), var(--max));
  margin: -18px auto 18px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.about-grid { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: 20px; }
.about-copy {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(12,25,43,.72);
}
.about-copy .lead { margin-top: 0; color: var(--text); font-size: 18px; }
.about-copy p:last-child { margin-bottom: 0; color: var(--muted); }
.about-panels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.info-panel { padding: 22px; border-radius: 21px; }
.panel-number {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(56,189,248,.10);
  color: var(--primary);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
}
.info-panel h3 { margin: 14px 0 8px; font-size: 19px; letter-spacing: -.02em; }
.info-panel p { margin: 0; color: var(--muted); font-size: 13.5px; }

.letter-layout { display: grid; grid-template-columns: minmax(280px,.68fr) minmax(0,1.5fr); gap: 20px; align-items: start; }
.letter-highlight,
.letter-card { border-radius: 24px; }
.letter-highlight { position: sticky; top: 92px; padding: 28px; }
.letter-highlight-label { margin: 0 0 12px; color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.letter-highlight > strong { display: block; color: var(--primary); font-size: 40px; line-height: 1; letter-spacing: -.04em; }
.letter-highlight h3 { margin: 13px 0 11px; font-size: 19px; line-height: 1.3; }
.letter-highlight p { color: var(--muted); }
.letter-keywords { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.letter-keywords span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 999px; background: rgba(15,29,48,.88); color: #c6d3e1; font-size: 11px; font-weight: 650; }
.letter-card { padding: 28px; }
.letter-card-head { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.letter-name { margin: 0; color: var(--text)!important; font-size: 17px; font-weight: 800; }
.letter-card-head p:last-child { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.letter-chip { align-self: start; padding: 7px 10px; border-radius: 999px; background: rgba(56,189,248,.10); color: var(--primary); font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.letter-body { padding-top: 10px; }
.letter-body p { margin: 16px 0; color: #b7c4d4; font-size: 14px; }
.letter-body strong { color: var(--text); }
.letter-signature { margin-top: 28px!important; color: var(--text)!important; }

.timeline { position: relative; display: grid; gap: 15px; }
.timeline::before { content:""; position:absolute; left:193px; top:16px; bottom:16px; width:2px; background:linear-gradient(180deg,rgba(56,189,248,.30),rgba(56,189,248,.05)); }
.timeline-item { position: relative; display: grid; grid-template-columns: 168px minmax(0,1fr); gap: 43px; }
.timeline-item::before { content:""; position:absolute; left:186px; top:27px; width:15px; height:15px; border-radius:50%; background:#0d1b2a; border:4px solid var(--primary-2); box-shadow:0 0 0 7px rgba(56,189,248,.08); }
.timeline-item.current::before { border-color: var(--accent); box-shadow:0 0 0 7px rgba(34,211,238,.09); }
.timeline-date { padding-top:24px; color:var(--muted); font-size:11px; font-weight:800; line-height:1.45; letter-spacing:.1em; text-align:right; }
.timeline-card { padding:24px 26px; border-radius:22px; }
.timeline-top { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.timeline-top h3 { margin:0; font-size:19px; letter-spacing:-.025em; }
.company { margin:5px 0 0; color:var(--primary); font-weight:750; }
.timeline-card > p { margin:14px 0 0; color:var(--muted); font-size:14px; }
.badge { padding:7px 10px; border-radius:999px; background:var(--accent-soft); color:#67e8f9; font-size:10.5px; font-weight:800; white-space:nowrap; }
.tags,.skill-list { display:flex; flex-wrap:wrap; gap:8px; }
.tags { margin-top:16px; }
.tags span,.skill-list span { padding:7px 10px; border:1px solid var(--line); border-radius:999px; background:rgba(16,31,51,.90); color:#c6d3e1; font-size:11px; font-weight:650; }
.secondary-experience { margin:20px 0 0 211px; border-radius:21px; overflow:hidden; }
.secondary-experience summary { list-style:none; cursor:pointer; padding:17px 22px; color:var(--primary); font-weight:750; }
.secondary-experience summary::-webkit-details-marker { display:none; }
.secondary-experience > div { padding:0 22px 22px; }
.secondary-top { display:flex; justify-content:space-between; gap:14px; }
.secondary-top span { color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.08em; }
.secondary-experience p { margin:12px 0 0; color:var(--muted); }

.skills-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.skill-card { padding:25px; border-radius:22px; min-height:200px; }
.skill-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:rgba(56,189,248,.10); color:var(--primary); font-size:11px; font-weight:800; }
.skill-card h3 { margin:15px 0 12px; font-size:18px; letter-spacing:-.025em; }

.education-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.education-card { padding:28px; border-radius:23px; min-height:220px; }
.education-year { color:var(--primary); font-size:11px; font-weight:800; letter-spacing:.11em; }
.education-card h3 { margin:16px 0 10px; font-size:19px; line-height:1.3; letter-spacing:-.03em; }
.education-card p { margin:0; color:var(--muted); }

.contact-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(310px,.72fr); gap:28px; align-items:center; padding:36px; border-radius:27px; }
.contact-copy h2 { margin:0; font-size:clamp(30px,4vw,48px); line-height:1.08; letter-spacing:-.04em; }
.contact-copy p:last-child { max-width:55ch; margin:15px 0 0; color:var(--muted); }
.contact-actions { display:grid; gap:12px; }
.contact-link { display:grid; gap:4px; padding:17px 18px; border:1px solid var(--line); border-radius:17px; background:rgba(15,29,48,.82); text-decoration:none; }

.page-footer {
  display:flex;
  justify-content:space-between;
  gap:16px;
  width:min(calc(100% - 28px),var(--max));
  margin:0 auto;
  padding:0 0 24px;
  color:var(--muted);
  font-size:12px;
}
.page-footer a { color:var(--primary); font-weight:650; text-decoration:none; }

.reveal { opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.reveal.visible { opacity:1; transform:none; }

.main-nav a:hover,
.main-nav a.active {
  color: #7dd3fc;
  background: rgba(56,189,248,.10);
}
.btn-secondary:hover,
.contact-link:hover,
.contact-mini-list a:hover {
  border-color: rgba(56,189,248,.34);
  background: rgba(18,37,61,.95);
}
.hero-copy,
.hero-card,
.info-panel,
.timeline-card,
.skill-card,
.education-card,
.contact-panel,
.letter-card,
.letter-highlight,
.secondary-experience,
.contact-info-panel,
.contact-form-panel {
  box-shadow: 0 22px 60px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.025);
}
.tags span,
.skill-list span,
.letter-keywords span {
  border-color: rgba(148,163,184,.16);
  background: rgba(16,31,51,.90);
}
.form-field input,
.form-field textarea {
  background: rgba(8,18,32,.86);
}
.form-field input:focus,
.form-field textarea:focus {
  background: rgba(10,24,42,.96);
}

@media (max-width: 1160px) {
  .header-actions { display:none; }
  .header-inner { grid-template-columns:auto minmax(0,1fr); }
}

@media (max-width: 1040px) {
  .header-inner { grid-template-columns:1fr auto; }
  .menu-toggle { display:block; }
  .main-nav {
    position:absolute;
    top:calc(100% + 8px);
    left:14px;
    right:14px;
    display:none;
    padding:10px;
    border:1px solid var(--line);
    border-radius:16px;
    background:rgba(8,18,32,.98);
    box-shadow:var(--shadow);
  }
  .main-nav.open { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .main-nav a { padding:11px 12px; }
  .hero-grid,
  .about-grid,
  .letter-layout,
  .contact-panel { grid-template-columns:1fr; }
  .letter-highlight { position:static; }
  .skills-grid,
  .education-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-main { align-items:flex-start; padding-top:28px; }
  .profile-photo { height:340px; }
}

@media (max-width: 720px) {
  .site-header { padding:9px 9px 0; }
  .header-inner { padding:8px 10px; }
  .brand-copy small { display:none; }
  .brand-mark { width:38px; height:38px; }
  .brand-mark.brand-mark-code { width:44px; height:44px; border-radius:14px; }

.brand-mark.brand-mark-image {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(16,35,64,.95), rgba(8,23,43,.92));
  box-shadow: 0 10px 24px rgba(2,132,199,.20), inset 0 0 0 1px rgba(255,255,255,.06);
}
.brand-mark.brand-mark-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
  .brand-logo-word { font-size:12px; }
  .brand-logo-line-close { margin-left: 12px; }
  .brand-logo-bracket, .brand-logo-slash { font-size: 9px; }
  .main-nav { left:9px; right:9px; grid-template-columns:1fr!important; }
  .home-main,
  .page-main,
  .page-footer,
  .home-footer { width:min(calc(100% - 20px),var(--max)); }
  .home-main { min-height:auto; padding:18px 0 40px; }
  .hero-copy { padding:22px 20px; }
  .hero h1 { font-size:clamp(30px,10vw,42px); }
  .hero-highlights,
  .about-panels,
  .skills-grid,
  .education-grid { grid-template-columns:1fr; }
  .profile-photo { height:auto; aspect-ratio:4/5; }
  .page-heading { grid-template-columns:1fr; }
  .page-index { display:none; }
  .timeline::before { left:7px; }
  .timeline-item { grid-template-columns:1fr; gap:8px; padding-left:28px; }
  .timeline-item::before { left:0; top:12px; }
  .timeline-date { padding-top:0; text-align:left; }
  .timeline-top { display:block; }
  .badge { display:inline-block; margin-top:8px; }
  .secondary-experience { margin-left:28px; }
  .secondary-top { display:block; }
  .secondary-top span { display:block; margin-top:5px; }
  .letter-card-head { display:block; }
  .letter-chip { display:inline-flex; margin-top:10px; }
  .page-footer { flex-direction:column; }
}

@media (max-height: 760px) and (min-width: 1041px) {
  .home-main { padding-top:12px; padding-bottom:16px; }
  .hero-copy { padding:25px 32px; }
  .hero h1 { font-size:clamp(30px,4vw,44px); }
  .hero-intro { margin-top:12px; font-size:14px; }
  .hero-actions { margin-top:17px; }
  .hero-highlights { margin-top:18px; }
  .hero-highlights article { padding:10px 12px; }
  .profile-photo { height:235px; }
  .hero-card { gap:9px; }
  .contact-mini-list a,.contact-mini-list div { padding:8px 10px; }
  .availability { padding:7px 10px; }
  .home-footer { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; animation:none!important; }
  .reveal { opacity:1; transform:none; }
}

@media print {
  body { background:#fff; }
  .page-shell,.site-header,.page-footer,.home-footer,.hero-actions { display:none!important; }
  .page-main,.home-main { width:100%; min-height:auto; padding:0; }
  .panel,.hero-copy,.hero-card,.info-panel,.timeline-card,.skill-card,.education-card,.contact-panel,.letter-card,.letter-highlight,.secondary-experience { background:#fff; box-shadow:none; backdrop-filter:none; }
  .reveal { opacity:1!important; transform:none!important; }
}

.contact-page { padding-bottom: 54px; }
.contact-layout {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: 20px;
  align-items: start;
}
.contact-info-panel,
.contact-form-panel {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.contact-info-panel {
  padding: 28px;
  position: sticky;
  top: 90px;
}
.contact-info-panel h2,
.form-heading h2 {
  margin: 0;
  color: var(--text);
  letter-spacing: -.035em;
  line-height: 1.12;
}
.contact-info-panel h2 { font-size: clamp(24px, 2.6vw, 34px); }
.form-heading h2 { font-size: clamp(26px, 3vw, 38px); }
.contact-intro,
.form-heading > p:last-child {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.compact-contact-actions { margin-top: 24px; }
.contact-availability {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 14px 15px;
  border-radius: 16px;
  background: var(--accent-soft);
  color: #67e8f9;
}
.contact-availability div { display: grid; line-height: 1.25; }
.contact-availability strong { font-size: 13px; }
.contact-availability small { margin-top: 2px; font-size: 11px; color: #8acfd8; }

.contact-form-panel { padding: 30px; }
.form-heading { margin-bottom: 24px; }
.contact-form { display: grid; gap: 20px; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.form-field { display: grid; gap: 7px; min-width: 0; }
.form-field-full { grid-column: 1 / -1; }
.form-field label {
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 750;
}
.form-field label span { color: var(--primary-2); }
.form-field label small { color: var(--muted); font-size: 10px; font-weight: 600; }
.form-field input,
.form-field textarea {
  width: 100%;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 14px;
  outline: 0;
  background: rgba(15,29,48,.82);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.form-field input { height: 48px; padding: 0 14px; }
.form-field textarea { min-height: 132px; padding: 13px 14px; resize: vertical; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: #718096; }
.form-field input:focus,
.form-field textarea:focus {
  border-color: rgba(56,189,248,.62);
  background: #0d1b2a;
  box-shadow: 0 0 0 4px rgba(56,189,248,.10);
}
.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: #c2413b;
  box-shadow: 0 0 0 4px rgba(194,65,59,.07);
}
.form-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}
.privacy-note {
  margin: 0;
  max-width: 52ch;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.form-submit { flex: 0 0 auto; min-width: 150px; }
.submit-loading { display: none; }
.contact-form.is-sending .submit-label { display: none; }
.contact-form.is-sending .submit-loading { display: inline; }
.contact-form.is-sending .form-submit { opacity: .7; pointer-events: none; }
.form-status {
  display: none;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 12.5px;
  font-weight: 650;
}
.form-status.success {
  display: block;
  background: rgba(34,211,238,.10);
  border: 1px solid rgba(34,211,238,.18);
  color: #67e8f9;
}
.form-status.error {
  display: block;
  background: rgba(194,65,59,.08);
  border: 1px solid rgba(194,65,59,.16);
  color: #9f2f2a;
}
.form-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

@media (max-width: 1040px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-info-panel { position: static; }
}

@media (max-width: 720px) {
  .contact-info-panel,
  .contact-form-panel { padding: 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field-full { grid-column: auto; }
  .form-bottom { align-items: stretch; flex-direction: column; }
  .form-submit { width: 100%; }
}

@media (min-width: 1041px) and (min-height: 700px) {
  body.competencias-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.competencias-page .site-header {
    flex: 0 0 auto;
  }

  body.competencias-page .page-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: 18px;
    padding-bottom: 8px;
  }

  body.competencias-page .page-heading {
    flex: 0 0 auto;
    margin-bottom: 16px;
  }

  body.competencias-page .skills-grid {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
  }

  body.competencias-page .skill-card {
    min-height: 0;
    padding-top: 21px;
    padding-bottom: 21px;
    overflow: hidden;
  }

  body.competencias-page .page-footer {
    flex: 0 0 auto;
    padding-top: 5px;
    padding-bottom: 10px;
  }
}

body.experiencia-page .page-main {
  padding-top: 36px;
}

body.experiencia-page .exp-overview {
  display: grid;
  grid-template-columns: 1.2fr .9fr .9fr;
  gap: 16px;
  margin: 0 0 30px;
}

body.experiencia-page .exp-stat {
  position: relative;
  overflow: hidden;
  padding: 22px 22px 20px;
  border: 1px solid rgba(80, 129, 182, .18);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(13,27,46,.96), rgba(8,19,33,.92));
  box-shadow: 0 20px 40px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.02);
}
body.experiencia-page .exp-stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(34,211,238,.95), rgba(56,189,248,.35), transparent 72%);
}
body.experiencia-page .exp-stat::after {
  content: "";
  position: absolute;
  width: 150px; height: 150px;
  right: -60px; top: -60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,.12), transparent 70%);
  pointer-events: none;
}
body.experiencia-page .exp-stat-label {
  display: inline-flex;
  margin-bottom: 12px;
  color: #7dd3fc;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.experiencia-page .exp-stat strong {
  display: block;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -.03em;
  color: #f7fbff;
}
body.experiencia-page .exp-stat p {
  margin: 10px 0 0;
  color: #aab8c7;
  font-size: 14px;
  line-height: 1.55;
}
body.experiencia-page .exp-stat-main strong {
  font-size: 28px;
}

body.experiencia-page .timeline {
  --axis: 236px;
  gap: 18px;
}
body.experiencia-page .timeline::before {
  left: var(--axis);
  transform: translateX(-50%);
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: linear-gradient(180deg, rgba(34,211,238,.55), rgba(56,189,248,.18));
  box-shadow: 0 0 16px rgba(34,211,238,.12);
}
body.experiencia-page .timeline-item {
  grid-template-columns: 190px minmax(0,1fr);
  gap: 56px;
}
body.experiencia-page .timeline-item::before {
  left: var(--axis);
  top: 44px;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border: 4px solid var(--primary-2);
  background: #081321;
  box-shadow: 0 0 0 8px rgba(56,189,248,.08), 0 0 24px rgba(56,189,248,.14);
}
body.experiencia-page .timeline-item.current::before {
  border-color: var(--accent);
  box-shadow: 0 0 0 8px rgba(34,211,238,.1), 0 0 28px rgba(34,211,238,.18);
}
body.experiencia-page .timeline-date {
  justify-self: end;
  align-self: start;
  padding: 10px 14px;
  margin-top: 18px;
  border: 1px solid rgba(80, 129, 182, .18);
  border-radius: 16px;
  background: rgba(10,21,35,.86);
  color: #d8e5f0;
  text-align: right;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
body.experiencia-page .timeline-card {
  position: relative;
  overflow: hidden;
  padding: 28px 30px 24px 32px;
  border-radius: 26px;
  border: 1px solid rgba(80, 129, 182, .18);
  background: linear-gradient(180deg, rgba(11,24,40,.96), rgba(9,19,33,.92));
  box-shadow: 0 18px 36px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.02);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
body.experiencia-page .timeline-card::before {
  content: "";
  position: absolute;
  top: 18px; bottom: 18px; left: 0;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(34,211,238,.95), rgba(56,189,248,.2));
}
body.experiencia-page .timeline-card::after {
  content: "";
  position: absolute;
  right: -40px; top: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,.10), transparent 72%);
  pointer-events: none;
}
body.experiencia-page .timeline-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56,189,248,.34);
  box-shadow: 0 24px 44px rgba(0,0,0,.2);
}
body.experiencia-page .timeline-item.current .timeline-card {
  border-color: rgba(34,211,238,.28);
  background: linear-gradient(180deg, rgba(12,28,46,.98), rgba(8,20,34,.94));
}
body.experiencia-page .timeline-top h3 {
  font-size: 20px;
}
body.experiencia-page .company {
  margin-top: 7px;
  font-size: 16px;
  color: #38bdf8;
}
body.experiencia-page .timeline-card > p {
  margin-top: 18px;
  color: #aab8c7;
  line-height: 1.6;
}
body.experiencia-page .badge {
  padding: 9px 12px;
  background: rgba(34,211,238,.12);
  color: #67e8f9;
}
body.experiencia-page .tags {
  margin-top: 18px;
}
body.experiencia-page .tags span {
  background: rgba(16,31,51,.92);
  border-color: rgba(100, 142, 186, .18);
}
body.experiencia-page .secondary-experience {
  margin-left: 246px;
  border: 1px solid rgba(80, 129, 182, .18);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(11,24,40,.96), rgba(9,19,33,.92));
}
body.experiencia-page .secondary-experience summary {
  padding: 18px 22px;
}
body.experiencia-page .secondary-experience > div {
  padding: 0 22px 22px;
}

@media (max-width: 1100px) {
  body.experiencia-page .exp-overview {
    grid-template-columns: 1fr;
  }
  body.experiencia-page .timeline {
    --axis: 208px;
  }
  body.experiencia-page .timeline-item {
    grid-template-columns: 164px minmax(0,1fr);
    gap: 44px;
  }
  body.experiencia-page .secondary-experience {
    margin-left: 218px;
  }
}

@media (max-width: 720px) {
  body.experiencia-page .timeline {
    --axis: 8px;
  }
  body.experiencia-page .timeline::before {
    left: var(--axis);
  }
  body.experiencia-page .timeline-item {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-left: 30px;
  }
  body.experiencia-page .timeline-item::before {
    left: var(--axis);
    top: 16px;
  }
  body.experiencia-page .timeline-date {
    justify-self: start;
    text-align: left;
    margin-top: 0;
    padding: 8px 12px;
  }
  body.experiencia-page .timeline-card {
    padding: 24px 22px 20px 24px;
  }
  body.experiencia-page .secondary-experience {
    margin-left: 30px;
  }
}

body.experiencia-page .exp-overview {
  margin-bottom: 26px;
}
body.experiencia-page .exp-stat {
  padding: 19px 20px 18px;
}
body.experiencia-page .exp-stat strong {
  font-size: 22px;
}
body.experiencia-page .exp-stat-main strong {
  font-size: 25px;
}
body.experiencia-page .exp-stat p {
  font-size: 13.5px;
}

body.experiencia-page .timeline {
  --date-col: 190px;
  --rail-col: 54px;
  --node-size: 18px;
  position: relative;
  display: grid;
  gap: 18px;
}
body.experiencia-page .timeline::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: calc(var(--date-col) + (var(--rail-col) / 2));
  top: 24px;
  bottom: 24px;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(34,211,238,.72), rgba(56,189,248,.32) 55%, rgba(56,189,248,.08));
  box-shadow: 0 0 18px rgba(34,211,238,.10);
}
body.experiencia-page .timeline-item {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--date-col) var(--rail-col) minmax(0, 1fr);
  gap: 0;
  align-items: start;
  padding: 0;
}
body.experiencia-page .timeline-item::before {
  display: none !important;
}
body.experiencia-page .timeline-date {
  justify-self: stretch;
  align-self: start;
  margin: 18px 12px 0 0;
  padding: 10px 13px;
  border: 1px solid rgba(88, 132, 179, .18);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(10,22,37,.90), rgba(8,18,31,.90));
  color: #d8e5f0;
  text-align: right;
  font-size: 11px;
  line-height: 1.45;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
body.experiencia-page .timeline-rail {
  position: relative;
  min-height: 100%;
  height: 100%;
}
body.experiencia-page .timeline-node {
  position: absolute;
  z-index: 3;
  top: 27px;
  left: 50%;
  width: var(--node-size);
  height: var(--node-size);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #081321;
  border: 4px solid #38bdf8;
  box-shadow: 0 0 0 7px rgba(56,189,248,.08), 0 0 22px rgba(56,189,248,.17);
}
body.experiencia-page .timeline-item.current .timeline-node {
  border-color: #22d3ee;
  box-shadow: 0 0 0 7px rgba(34,211,238,.10), 0 0 26px rgba(34,211,238,.22);
}
body.experiencia-page .timeline-connector {
  position: absolute;
  z-index: 2;
  top: 26px;
  left: 50%;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(56,189,248,.58), rgba(56,189,248,.14));
  transform: translateY(-50%);
}
body.experiencia-page .timeline-card {
  position: relative;
  margin-left: 0;
  padding: 25px 28px 22px;
  border: 1px solid rgba(88, 132, 179, .20);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(17,37,59,.30), transparent 38%),
    linear-gradient(180deg, rgba(11,24,40,.98), rgba(8,18,31,.96));
  box-shadow: 0 18px 38px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.025);
  overflow: hidden;
}
body.experiencia-page .timeline-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(34,211,238,.76), rgba(56,189,248,.12));
}
body.experiencia-page .timeline-card::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -80px;
  top: -95px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,.11), transparent 68%);
  pointer-events: none;
}
body.experiencia-page .timeline-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56,189,248,.34);
  box-shadow: 0 24px 46px rgba(0,0,0,.21), inset 0 1px 0 rgba(255,255,255,.03);
}
body.experiencia-page .timeline-item.current .timeline-card {
  border-color: rgba(34,211,238,.32);
}
body.experiencia-page .timeline-top {
  align-items: center;
}
body.experiencia-page .timeline-top h3 {
  font-size: 20px;
}
body.experiencia-page .badge {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
}
body.experiencia-page .badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 12px rgba(34,211,238,.5);
}
body.experiencia-page .timeline-card > p {
  max-width: 94ch;
}
body.experiencia-page .secondary-experience {
  margin-left: calc(var(--date-col, 190px) + var(--rail-col, 54px));
}

@media (max-width: 1100px) {
  body.experiencia-page .timeline {
    --date-col: 165px;
    --rail-col: 48px;
  }
  body.experiencia-page .secondary-experience {
    margin-left: calc(165px + 48px);
  }
}

@media (max-width: 720px) {
  body.experiencia-page .timeline {
    --date-col: 0px;
    --rail-col: 30px;
    gap: 14px;
  }
  body.experiencia-page .timeline::before {
    left: calc(var(--rail-col) / 2);
    top: 18px;
    bottom: 18px;
  }
  body.experiencia-page .timeline-item {
    grid-template-columns: var(--rail-col) minmax(0,1fr);
    grid-template-areas:
      "rail date"
      "rail card";
    column-gap: 0;
  }
  body.experiencia-page .timeline-date {
    grid-area: date;
    justify-self: start;
    width: fit-content;
    margin: 0 0 8px;
    padding: 8px 11px;
    text-align: left;
  }
  body.experiencia-page .timeline-rail {
    grid-area: rail;
    grid-row: 1 / span 2;
  }
  body.experiencia-page .timeline-node {
    top: 16px;
  }
  body.experiencia-page .timeline-connector {
    top: 15px;
  }
  body.experiencia-page .timeline-card {
    grid-area: card;
    padding: 22px 20px 19px 22px;
  }
  body.experiencia-page .secondary-experience {
    margin-left: var(--rail-col);
  }
}

.site-header {
  padding-top: 14px;
}

.header-inner::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.18), transparent);
  pointer-events: none;
}
.header-inner { position: relative; }

.hero-copy,
.hero-card,
.info-panel,
.about-copy,
.timeline-card,
.skill-card,
.education-card,
.contact-panel,
.letter-card,
.letter-highlight,
.secondary-experience,
.contact-link,
.contact-mini-list a,
.contact-mini-list div,
.about-copy,
.exp-stat,
.timeline-date {
  box-shadow: 0 18px 44px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.025), 0 0 0 1px rgba(34,211,238,.04);
}

.hero-copy,
.hero-card,
.info-panel,
.about-copy,
.timeline-card,
.skill-card,
.education-card,
.contact-panel,
.letter-card,
.letter-highlight,
.secondary-experience {
  position: relative;
}

.hero-copy::before,
.hero-card::before,
.info-panel::before,
.about-copy::before,
.timeline-card::before,
.skill-card::before,
.education-card::before,
.contact-panel::before,
.letter-card::before,
.letter-highlight::before,
.secondary-experience::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(90, 147, 190, .08);
}

.skill-card:hover,
.education-card:hover,
.info-panel:hover,
.contact-link:hover,
.contact-mini-list a:hover {
  border-color: rgba(34,211,238,.22);
  box-shadow: 0 20px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03), 0 0 26px rgba(34,211,238,.08);
}

.page-heading h1,
.hero h1,
.contact-copy h2 {
  text-shadow: 0 0 18px rgba(56,189,248,.05);
}

.tags span,
.skill-list span,
.letter-keywords span,
.contact-link,
.contact-mini-list a,
.contact-mini-list div {
  border-color: rgba(104, 144, 181, .18);
}

@media (max-width: 1040px) {
  .main-nav {
    padding: 10px;
    border-radius: 18px;
  }
}

.header-inner {
  min-height: 68px;
  padding: 10px 14px 10px 16px;
  border: 1px solid rgba(110, 157, 197, .20);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(8,18,32,.92), rgba(7,16,28,.88));
  box-shadow: 0 18px 44px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.025);
}

.main-nav {
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(82, 128, 169, .16);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(13,28,46,.90), rgba(9,20,34,.84));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02), 0 8px 22px rgba(0,0,0,.12);
}

.main-nav a {
  position: relative;
  padding: 10px 14px;
  color: #b9c7d7;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .01em;
  border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.main-nav a:hover {
  color: #e6fbff;
  border-color: rgba(52, 211, 153, .14);
  background: linear-gradient(180deg, rgba(21,60,78,.72), rgba(13,33,49,.82));
  box-shadow: 0 0 0 1px rgba(34,211,238,.05) inset, 0 8px 18px rgba(6,182,212,.08);
  transform: translateY(-1px);
}

.main-nav a.active {
  color: #f2feff;
  border-color: rgba(34,211,238,.24);
  background: linear-gradient(135deg, rgba(16,94,116,.95), rgba(20,59,95,.95));
  box-shadow: 0 10px 22px rgba(6,182,212,.16), inset 0 1px 0 rgba(255,255,255,.05);
}

.btn-secondary {
  color: #b9f4ff;
  border-color: rgba(34,211,238,.18);
  background: linear-gradient(180deg, rgba(16,34,53,.95), rgba(12,24,40,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 10px 22px rgba(0,0,0,.16);
}

.panel,
.hero-copy,
.hero-card,
.info-panel,
.timeline-card,
.skill-card,
.education-card,
.contact-panel,
.letter-card,
.letter-highlight,
.secondary-experience,
.contact-info-panel,
.contact-form-panel {
  border-color: rgba(104, 144, 181, .22);
  background: linear-gradient(180deg, rgba(12,25,43,.95), rgba(9,20,35,.90));
}

.contact-link,
.contact-mini-list a,
.contact-mini-list div,
.form-field input,
.form-field textarea,
.timeline-date,
.exp-stat {
  border-color: rgba(104, 144, 181, .20);
  background: linear-gradient(180deg, rgba(16,31,51,.92), rgba(11,22,38,.88));
}

@media (max-width: 1040px) {
  .main-nav {
    padding: 10px;
    border-radius: 18px;
  }
}

body.perfil-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.perfil-page .site-header,
body.perfil-page .page-footer {
  flex: 0 0 auto;
}

body.perfil-page .page-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: 24px;
  padding-bottom: 10px;
}

body.perfil-page .page-heading {
  flex: 0 0 auto;
  margin-top: 0;
  margin-bottom: 18px;
}

body.perfil-page .page-heading > div > p:last-child {
  margin-top: 10px;
}

body.perfil-page .about-grid {
  flex: 1 1 auto;
  min-height: 420px;
  height: clamp(420px, calc(100vh - 350px), 520px);
  max-height: 520px;
  display: grid;
  grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr);
  gap: 18px;
  align-items: stretch;
}

body.perfil-page .about-copy,
body.perfil-page .info-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(88,132,179,.20);
  background:
    linear-gradient(135deg, rgba(17,37,59,.28), transparent 40%),
    linear-gradient(180deg, rgba(11,24,40,.98), rgba(8,18,31,.96));
  box-shadow: 0 18px 38px rgba(0,0,0,.17), inset 0 1px 0 rgba(255,255,255,.025);
}

body.perfil-page .about-copy::before,
body.perfil-page .info-panel::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(34,211,238,.92), rgba(56,189,248,.34), transparent 72%);
  box-shadow: none;
  pointer-events: none;
}

body.perfil-page .about-copy::after,
body.perfil-page .info-panel::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 160px;
  height: 160px;
  right: -70px;
  top: -78px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,.10), transparent 69%);
  pointer-events: none;
}

body.perfil-page .about-copy > *,
body.perfil-page .info-panel > * {
  position: relative;
  z-index: 2;
}

body.perfil-page .about-copy {
  height: 100%;
  padding: 26px 30px;
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body.perfil-page .about-copy .lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
}

body.perfil-page .about-copy p:last-child {
  margin-top: 20px;
  margin-bottom: 0;
  font-size: 14.5px;
  line-height: 1.58;
}

body.perfil-page .about-panels {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  grid-template-rows: repeat(2,minmax(0,1fr));
  gap: 14px;
}

body.perfil-page .info-panel {
  min-height: 0;
  padding: 20px 22px 18px;
  border-radius: 23px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

body.perfil-page .info-panel:hover,
body.perfil-page .about-copy:hover {
  transform: translateY(-2px);
  border-color: rgba(56,189,248,.32);
  box-shadow: 0 24px 46px rgba(0,0,0,.21), inset 0 1px 0 rgba(255,255,255,.03), 0 0 24px rgba(34,211,238,.05);
}

body.perfil-page .panel-number {
  width: fit-content;
  padding: 6px 10px;
  background: rgba(34,211,238,.09);
  border: 1px solid rgba(34,211,238,.11);
  color: #7dd3fc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

body.perfil-page .info-panel h3 {
  margin: 13px 0 7px;
  font-size: 18px;
  line-height: 1.2;
}

body.perfil-page .info-panel p {
  font-size: 13px;
  line-height: 1.5;
}

body.perfil-page .page-footer {
  padding-top: 4px;
  padding-bottom: 12px;
}

@media (max-height: 820px) and (min-width: 1041px) {
  body.perfil-page .page-main {
    padding-top: 16px;
    padding-bottom: 6px;
  }
  body.perfil-page .page-heading {
    margin-bottom: 14px;
  }
  body.perfil-page .page-heading h1 {
    font-size: clamp(28px, 3vw, 38px);
  }
  body.perfil-page .page-heading > div > p:last-child {
    font-size: 14px;
    margin-top: 8px;
  }
  body.perfil-page .about-grid {
    min-height: 385px;
    height: calc(100vh - 318px);
    max-height: 455px;
  }
  body.perfil-page .about-copy {
    padding: 22px 26px;
  }
  body.perfil-page .about-copy .lead {
    font-size: 16px;
  }
  body.perfil-page .about-copy p:last-child {
    margin-top: 16px;
    font-size: 13.5px;
  }
  body.perfil-page .info-panel {
    padding: 17px 19px 16px;
  }
  body.perfil-page .info-panel h3 {
    margin-top: 10px;
    font-size: 17px;
  }
  body.perfil-page .info-panel p {
    font-size: 12.5px;
  }
}

@media (max-width: 1040px) {
  body.perfil-page {
    display: block;
  }
  body.perfil-page .page-main {
    display: block;
    padding-top: 28px;
    padding-bottom: 48px;
  }
  body.perfil-page .about-grid {
    height: auto;
    max-height: none;
    min-height: 0;
    grid-template-columns: 1fr;
  }
  body.perfil-page .about-copy,
  body.perfil-page .about-panels {
    height: auto;
  }
}

@media (max-width: 720px) {
  body.perfil-page .about-panels {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
}

.hero-copy,
.hero-card,
.letter-highlight,
.letter-card,
.skill-card,
.education-card,
.contact-info-panel,
.contact-form-panel,
.contact-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(88,132,179,.22);
  background:
    linear-gradient(135deg, rgba(17,37,59,.26), transparent 42%),
    linear-gradient(180deg, rgba(11,24,40,.985), rgba(8,18,31,.965));
  box-shadow:
    0 19px 42px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.028),
    0 0 0 1px rgba(34,211,238,.025);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.hero-copy::before,
.hero-card::before,
.letter-highlight::before,
.letter-card::before,
.skill-card::before,
.education-card::before,
.contact-info-panel::before,
.contact-form-panel::before,
.contact-panel::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 16px;
  right: 16px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(34,211,238,.96) 0%,
    rgba(56,189,248,.52) 36%,
    rgba(37,99,235,.17) 70%,
    transparent 100%
  );
  box-shadow: 0 0 16px rgba(34,211,238,.07);
  pointer-events: none;
}

.hero-copy::after,
.hero-card::after,
.letter-highlight::after,
.letter-card::after,
.skill-card::after,
.education-card::after,
.contact-info-panel::after,
.contact-form-panel::after,
.contact-panel::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 190px;
  height: 190px;
  right: -86px;
  top: -92px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,.105), rgba(56,189,248,.035) 42%, transparent 70%);
  pointer-events: none;
}

.hero-copy > *,
.hero-card > *,
.letter-highlight > *,
.letter-card > *,
.skill-card > *,
.education-card > *,
.contact-info-panel > *,
.contact-form-panel > *,
.contact-panel > * {
  position: relative;
  z-index: 2;
}

.hero-copy:hover,
.hero-card:hover,
.letter-highlight:hover,
.letter-card:hover,
.skill-card:hover,
.education-card:hover,
.contact-info-panel:hover,
.contact-form-panel:hover,
.contact-panel:hover {
  border-color: rgba(56,189,248,.34);
  box-shadow:
    0 23px 48px rgba(0,0,0,.235),
    inset 0 1px 0 rgba(255,255,255,.032),
    0 0 30px rgba(34,211,238,.045);
}

body.home-page .hero-copy {
  border-radius: 28px;
}
body.home-page .hero-card {
  border-radius: 28px;
}
body.home-page .hero-card::before {
  background: linear-gradient(90deg, rgba(34,211,238,.98), rgba(37,99,235,.42), transparent 76%);
}

body.home-page .hero-highlights article,
.contact-mini-list a,
.contact-mini-list div {
  border: 1px solid rgba(91,139,181,.21);
  background: linear-gradient(180deg, rgba(16,32,51,.91), rgba(10,22,37,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.022), 0 10px 24px rgba(0,0,0,.11);
}
body.home-page .hero-highlights article {
  position: relative;
  overflow: hidden;
}
body.home-page .hero-highlights article::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(34,211,238,.8), rgba(56,189,248,.15));
}

.letter-highlight,
.letter-card {
  border-radius: 25px;
}
.letter-highlight::before {
  background: linear-gradient(90deg, rgba(34,211,238,.98), rgba(20,184,166,.34), transparent 75%);
}
.letter-card::before {
  background: linear-gradient(90deg, rgba(56,189,248,.9), rgba(37,99,235,.31), transparent 75%);
}
.letter-chip,
.letter-keywords span {
  border-color: rgba(91,139,181,.20);
  background: rgba(14,29,47,.88);
}

.skill-card {
  border-radius: 23px;
}
.skill-card::before {
  height: 3px;
  background: linear-gradient(90deg, rgba(34,211,238,.94), rgba(56,189,248,.36), transparent 68%);
}
.skill-icon {
  border: 1px solid rgba(34,211,238,.12);
  background: linear-gradient(180deg, rgba(20,66,91,.72), rgba(13,43,66,.76));
  color: #67e8f9;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.skill-list span {
  border-color: rgba(91,139,181,.19);
  background: rgba(15,30,49,.90);
}

.education-card {
  border-radius: 24px;
}
.education-card::before {
  background: linear-gradient(90deg, rgba(34,211,238,.9), rgba(59,130,246,.34), transparent 70%);
}
.education-year {
  display: inline-flex;
  width: fit-content;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(34,211,238,.12);
  background: rgba(21,61,82,.36);
  color: #7dd3fc;
}

.contact-info-panel,
.contact-form-panel {
  border-radius: 25px;
}
.contact-info-panel::before {
  background: linear-gradient(90deg, rgba(34,211,238,.98), rgba(20,184,166,.36), transparent 76%);
}
.contact-form-panel::before {
  background: linear-gradient(90deg, rgba(56,189,248,.94), rgba(37,99,235,.34), transparent 76%);
}
.contact-link {
  border-color: rgba(91,139,181,.20);
  background: linear-gradient(180deg, rgba(16,31,50,.92), rgba(10,22,37,.89));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.022), 0 10px 24px rgba(0,0,0,.10);
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.contact-link:hover {
  transform: translateY(-1px);
  border-color: rgba(34,211,238,.26);
  background: linear-gradient(180deg, rgba(18,39,58,.95), rgba(12,27,43,.92));
  box-shadow: 0 12px 28px rgba(0,0,0,.15), 0 0 18px rgba(34,211,238,.035);
}
.form-field input,
.form-field textarea {
  border-color: rgba(91,139,181,.20);
  background: linear-gradient(180deg, rgba(13,27,45,.94), rgba(10,22,37,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

body.perfil-page .about-copy,
body.perfil-page .info-panel {
  border-color: rgba(88,132,179,.22);
}

@media (hover: none) {
  .hero-copy:hover,
  .hero-card:hover,
  .letter-highlight:hover,
  .letter-card:hover,
  .skill-card:hover,
  .education-card:hover,
  .contact-info-panel:hover,
  .contact-form-panel:hover,
  .contact-panel:hover {
    transform: none;
  }
}

body.carta-page,
body.contacto-page-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.carta-page .site-header,
body.carta-page .page-footer,
body.contacto-page-body .site-header,
body.contacto-page-body .page-footer {
  flex: 0 0 auto;
}

body.carta-page .page-main,
body.contacto-page-body .page-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: 24px;
  padding-bottom: 12px;
}

body.carta-page .page-heading,
body.contacto-page-body .page-heading {
  flex: 0 0 auto;
  margin-top: 0;
  margin-bottom: 18px;
}

body.carta-page .page-heading > div > p:last-child,
body.contacto-page-body .page-heading > div > p:last-child {
  margin-top: 10px;
}

body.carta-page .letter-layout {
  flex: 1 1 auto;
  min-height: 430px;
  height: clamp(430px, calc(100vh - 320px), 560px);
  max-height: 560px;
  grid-template-columns: minmax(270px,.64fr) minmax(0,1.36fr);
  gap: 18px;
  align-items: stretch;
}

body.carta-page .letter-highlight,
body.carta-page .letter-card {
  height: 100%;
}

body.carta-page .letter-highlight {
  position: relative;
  top: auto;
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body.carta-page .letter-highlight > strong {
  font-size: 36px;
}

body.carta-page .letter-highlight h3 {
  margin: 12px 0 10px;
  font-size: 18px;
}

body.carta-page .letter-highlight p {
  font-size: 13px;
  line-height: 1.55;
}

body.carta-page .letter-keywords {
  margin-top: 16px;
  gap: 7px;
}

body.carta-page .letter-keywords span {
  padding: 6px 8px;
  font-size: 10.5px;
}

body.carta-page .letter-card {
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
}

body.carta-page .letter-card-head {
  padding-bottom: 16px;
}

body.carta-page .letter-name {
  font-size: 16px;
}

body.carta-page .letter-card-head p:last-child {
  font-size: 11.5px;
}

body.carta-page .letter-body {
  padding-top: 8px;
}

body.carta-page .letter-body p {
  margin: 12px 0;
  font-size: 13px;
  line-height: 1.52;
}

body.carta-page .letter-signature {
  margin-top: 16px !important;
}

body.contacto-page-body .contact-page {
  padding-bottom: 8px;
}

body.contacto-page-body .contact-layout {
  flex: 1 1 auto;
  min-height: 430px;
  height: clamp(430px, calc(100vh - 330px), 590px);
  max-height: 590px;
  grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr);
  gap: 18px;
  align-items: stretch;
}

body.contacto-page-body .contact-info-panel,
body.contacto-page-body .contact-form-panel {
  height: 100%;
}

body.contacto-page-body .contact-info-panel {
  position: relative;
  top: auto;
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

body.contacto-page-body .contact-info-panel h2 {
  font-size: clamp(22px, 2.3vw, 31px);
}

body.contacto-page-body .contact-intro {
  margin-top: 10px;
  font-size: 13.5px;
}

body.contacto-page-body .compact-contact-actions {
  margin-top: 18px;
  gap: 10px;
}

body.contacto-page-body .contact-link {
  padding: 14px 16px;
}

body.contacto-page-body .contact-availability {
  margin-top: 16px;
  padding: 12px 14px;
}

body.contacto-page-body .contact-form-panel {
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
}

body.contacto-page-body .form-heading {
  margin-bottom: 16px;
}

body.contacto-page-body .form-heading h2 {
  font-size: clamp(24px, 3vw, 34px);
}

body.contacto-page-body .form-heading > p:last-child {
  margin-top: 10px;
  font-size: 13.5px;
}

body.contacto-page-body .contact-form {
  gap: 16px;
}

body.contacto-page-body .form-grid {
  gap: 14px;
}

body.contacto-page-body .form-field {
  gap: 6px;
}

body.contacto-page-body .form-field input {
  height: 46px;
}

body.contacto-page-body .form-field textarea {
  min-height: 116px;
}

body.contacto-page-body .form-bottom {
  gap: 16px;
}

body.contacto-page-body .privacy-note {
  font-size: 10.5px;
}

@media (max-height: 830px) and (min-width: 1041px) {
  body.carta-page .page-main,
  body.contacto-page-body .page-main {
    padding-top: 16px;
    padding-bottom: 8px;
  }

  body.carta-page .page-heading,
  body.contacto-page-body .page-heading {
    margin-bottom: 14px;
  }

  body.carta-page .page-heading h1,
  body.contacto-page-body .page-heading h1 {
    font-size: clamp(28px, 3vw, 40px);
  }

  body.carta-page .page-heading > div > p:last-child,
  body.contacto-page-body .page-heading > div > p:last-child {
    font-size: 14px;
    margin-top: 8px;
  }

  body.carta-page .letter-layout {
    min-height: 390px;
    height: calc(100vh - 304px);
    max-height: 490px;
  }

  body.carta-page .letter-highlight {
    padding: 20px 20px 18px;
  }

  body.carta-page .letter-card {
    padding: 20px 20px 18px;
  }

  body.carta-page .letter-body p {
    margin: 10px 0;
    font-size: 12.4px;
  }

  body.contacto-page-body .contact-layout {
    min-height: 395px;
    height: calc(100vh - 314px);
    max-height: 510px;
  }

  body.contacto-page-body .contact-info-panel,
  body.contacto-page-body .contact-form-panel {
    padding: 20px 20px 18px;
  }

  body.contacto-page-body .form-heading {
    margin-bottom: 14px;
  }

  body.contacto-page-body .contact-form {
    gap: 14px;
  }

  body.contacto-page-body .form-grid {
    gap: 12px;
  }

  body.contacto-page-body .form-field input {
    height: 42px;
  }

  body.contacto-page-body .form-field textarea {
    min-height: 100px;
  }
}

@media (max-width: 1040px) {
  body.carta-page,
  body.contacto-page-body {
    display: block;
  }

  body.carta-page .page-main,
  body.contacto-page-body .page-main {
    display: block;
    padding-top: 28px;
    padding-bottom: 48px;
  }

  body.carta-page .letter-layout,
  body.contacto-page-body .contact-layout {
    height: auto;
    max-height: none;
    min-height: 0;
    grid-template-columns: 1fr;
  }

  body.carta-page .letter-highlight,
  body.carta-page .letter-card,
  body.contacto-page-body .contact-info-panel,
  body.contacto-page-body .contact-form-panel {
    height: auto;
  }

  body.carta-page .letter-highlight,
  body.contacto-page-body .contact-info-panel {
    position: static;
  }
}

body.carta-page .letter-layout {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-items: stretch !important;
}

body.carta-page .letter-highlight,
body.carta-page .letter-card {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

body.carta-page .letter-highlight {
  align-self: stretch;
}

body.carta-page .letter-card {
  align-self: stretch;
}

body.carta-page .letter-body {
  overflow: visible !important;
}

body.carta-page .letter-body p {
  margin: 11px 0;
  font-size: 12.7px;
  line-height: 1.48;
}

body.carta-page .letter-signature {
  margin-top: 14px !important;
  margin-bottom: 0 !important;
}

body.contacto-page-body .contact-layout {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-items: stretch !important;
}

body.contacto-page-body .contact-info-panel,
body.contacto-page-body .contact-form-panel {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  align-self: stretch;
}

body.contacto-page-body .contact-form {
  overflow: visible !important;
}

body.contacto-page-body .contact-form-panel {
  padding: 22px 24px 20px;
}

body.contacto-page-body .contact-info-panel {
  padding: 22px 24px 20px;
}

body.contacto-page-body .form-heading {
  margin-bottom: 14px;
}

body.contacto-page-body .form-heading > p:last-child {
  margin-top: 8px;
}

body.contacto-page-body .contact-form {
  gap: 13px;
}

body.contacto-page-body .form-grid {
  gap: 11px 14px;
}

body.contacto-page-body .form-field {
  gap: 5px;
}

body.contacto-page-body .form-field label {
  font-size: 11.5px;
}

body.contacto-page-body .form-field input {
  height: 42px;
  padding: 0 13px;
  font-size: 13px;
}

body.contacto-page-body .form-field textarea {
  min-height: 94px;
  max-height: 120px;
  padding: 11px 13px;
  font-size: 13px;
}

body.contacto-page-body .form-bottom {
  gap: 14px;
}

body.contacto-page-body .privacy-note {
  font-size: 10px;
  line-height: 1.4;
}

body.contacto-page-body .form-submit {
  min-height: 42px;
}

@media (max-height: 830px) and (min-width: 1041px) {
  body.carta-page .letter-layout,
  body.contacto-page-body .contact-layout {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body.carta-page .letter-highlight,
  body.carta-page .letter-card,
  body.contacto-page-body .contact-info-panel,
  body.contacto-page-body .contact-form-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.carta-page .letter-body p {
    margin: 9px 0;
    font-size: 12.1px;
    line-height: 1.44;
  }

  body.contacto-page-body .form-field input {
    height: 40px;
  }

  body.contacto-page-body .form-field textarea {
    min-height: 82px;
    max-height: 105px;
  }
}

.hero-copy,
.hero-card,
.letter-highlight,
.letter-card,
.skill-card,
.education-card,
.contact-info-panel,
.contact-form-panel,
.contact-panel {
  isolation: isolate;
}

@media (max-width: 760px) {
  .hero-copy::before,
  .hero-card::before,
  .letter-highlight::before,
  .letter-card::before,
  .skill-card::before,
  .education-card::before,
  .contact-info-panel::before,
  .contact-form-panel::before,
  .contact-panel::before {
    top: 10px;
    left: 14px;
    right: 14px;
  }
}

.hero-copy,
.hero-card,
.letter-highlight,
.letter-card,
.skill-card,
.education-card,
.contact-info-panel,
.contact-form-panel,
.contact-panel,
body.home-page .hero-highlights article,
.contact-mini-list a,
.contact-mini-list div {
  position: relative;
  overflow: hidden;
}

.hero-copy::before,
.hero-card::before,
.letter-highlight::before,
.letter-card::before,
.skill-card::before,
.education-card::before,
.contact-info-panel::before,
.contact-form-panel::before,
.contact-panel::before,
body.home-page .hero-highlights article::before,
.contact-mini-list a::before,
.contact-mini-list div::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  width: auto;
  height: 3px;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(34,211,238,.95), rgba(56,189,248,.35), transparent 72%);
  box-shadow: none;
  pointer-events: none;
}

body.home-page .hero-card::before,
.letter-highlight::before,
.letter-card::before,
.skill-card::before,
.education-card::before,
.contact-info-panel::before,
.contact-form-panel::before {
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 0;
}

body.home-page .hero-highlights article::before {
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  width: auto;
  height: 3px;
  background: linear-gradient(90deg, rgba(34,211,238,.90), rgba(56,189,248,.30), transparent 72%);
}

body.home-page .availability {
  background: rgba(57,255,136,.09);
  color: #86ffb6;
  border: 1px solid rgba(57,255,136,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02), 0 0 18px rgba(57,255,136,.04);
}

body.home-page .availability-dot {
  background: #39ff88;
  box-shadow:
    0 0 0 4px rgba(57,255,136,.10),
    0 0 12px rgba(57,255,136,.80),
    0 0 22px rgba(57,255,136,.35);
}

.letter-highlight,
.letter-card,
.contact-info-panel,
.contact-form-panel,
.hero-copy,
.hero-card,
.skill-card,
.education-card,
.contact-panel {
  overflow: hidden !important;
  clip-path: inset(0 round 24px);
}

body.carta-page .letter-highlight,
body.carta-page .letter-card {
  overflow: hidden !important;
  clip-path: inset(0 round 25px);
}

body.contacto-page-body .contact-info-panel,
body.contacto-page-body .contact-form-panel {
  overflow: hidden !important;
  clip-path: inset(0 round 25px);
}

.letter-highlight::before,
.letter-card::before,
.contact-info-panel::before,
.contact-form-panel::before,
.hero-copy::before,
.hero-card::before,
.skill-card::before,
.education-card::before,
.contact-panel::before {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, rgba(34,211,238,.94), rgba(56,189,248,.35), transparent 72%) !important;
  box-shadow: none !important;
}

.site-header {
  padding: 12px 14px 0;
}

.header-inner {
  min-height: 74px;
  grid-template-columns: minmax(245px, auto) minmax(0, 1fr) auto;
  gap: 18px;
  padding: 10px 12px 10px 14px;
  border-radius: 22px;
  border: 1px solid rgba(86, 137, 180, .22);
  background:
    linear-gradient(180deg, rgba(8,19,33,.96), rgba(6,15,27,.93));
  box-shadow:
    0 18px 46px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.028),
    0 0 0 1px rgba(34,211,238,.018);
}

.header-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 52% 0%, rgba(34,211,238,.075), transparent 36%),
    linear-gradient(90deg, rgba(37,99,235,.06), transparent 22%, transparent 78%, rgba(34,211,238,.05));
}

.brand {
  position: relative;
  z-index: 2;
  gap: 12px;
  padding: 2px 8px 2px 2px;
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: linear-gradient(145deg, #39c6ff, #2563eb 78%);
  box-shadow: 0 10px 24px rgba(37,99,235,.30), inset 0 1px 0 rgba(255,255,255,.14);
}

.brand-mark.brand-mark-code {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
}
.brand-mark.brand-mark-image {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
}
.brand-logo-code {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: .82;
  transform: translateY(1px);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  text-shadow: 0 1px 0 rgba(255,255,255,.08);
}
.brand-logo-line {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}
.brand-logo-line-close {
  margin-left: 14px;
  margin-top: 2px;
}
.brand-logo-word {
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .02em;
}
.brand-logo-bracket, .brand-logo-slash {
  color: rgba(255,255,255,.85);
  font-size: 10px;
  font-weight: 800;
}
.brand-logo-slash { color: #dbeafe; }

.brand-copy strong {
  font-size: 14px;
  letter-spacing: -.01em;
}

.brand-copy small {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  color: #8798ac;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .11em;
}

.brand-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #39ff88;
  box-shadow: 0 0 8px rgba(57,255,136,.75);
}

.tech-command-nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 6px;
  border: 1px solid rgba(85, 129, 169, .18);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(13,28,46,.88), rgba(8,19,33,.90));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018), 0 10px 24px rgba(0,0,0,.13);
}

.tech-command-nav a {
  position: relative;
  min-width: 0;
  height: 46px;
  display: grid;
  grid-template-columns: 18px auto;
  align-items: center;
  column-gap: 8px;
  padding: 0 12px;
  border-radius: 13px;
  border: 1px solid transparent;
  color: #aebdcd;
  background: transparent;
  text-decoration: none;
  transition: transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.tech-command-nav .nav-icon {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  color: #758aa1;
  transition: color .18s ease, filter .18s ease;
}

.tech-command-nav .nav-icon svg,
.pdf-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tech-command-nav .nav-label {
  align-self: center;
  font-size: 11.5px;
  font-weight: 720;
  white-space: nowrap;
}

.tech-command-nav a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #22d3ee, #39ff88);
  opacity: 0;
  transform: scaleX(.35);
  transition: opacity .18s ease, transform .18s ease;
}

.tech-command-nav a:hover {
  color: #e7f7ff;
  border-color: rgba(34,211,238,.12);
  background: rgba(19,49,68,.46);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.tech-command-nav a:hover .nav-icon {
  color: #67e8f9;
  filter: drop-shadow(0 0 5px rgba(34,211,238,.30));
}

.tech-command-nav a.active {
  color: #f2fcff;
  border-color: rgba(34,211,238,.26);
  background:
    linear-gradient(135deg, rgba(15,89,111,.92), rgba(19,55,91,.94));
  box-shadow:
    0 10px 24px rgba(6,182,212,.13),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(57,255,136,.025);
}

.tech-command-nav a.active .nav-icon {
  color: #8ef5ff;
  filter: drop-shadow(0 0 6px rgba(34,211,238,.28));
}

.tech-command-nav a.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.header-actions {
  position: relative;
  z-index: 2;
}

.pdf-action {
  min-height: 52px;
  gap: 8px;
  padding: 0 14px;
  border-radius: 15px;
  color: #c9f8ff;
  border-color: rgba(34,211,238,.20);
  background: linear-gradient(180deg, rgba(16,39,59,.95), rgba(9,23,38,.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 10px 24px rgba(0,0,0,.18);
}

.pdf-action:hover {
  border-color: rgba(57,255,136,.23);
  color: #e8fff2;
  box-shadow: 0 12px 26px rgba(0,0,0,.20), 0 0 18px rgba(57,255,136,.05);
}

.pdf-icon {
  width: 17px;
  height: 17px;
  color: #67e8f9;
}

body.home-page .availability {
  background: rgba(57,255,136,.09);
  color: #86ffb6;
  border: 1px solid rgba(57,255,136,.16);
}
body.home-page .availability-dot {
  background: #39ff88;
  box-shadow: 0 0 0 4px rgba(57,255,136,.10), 0 0 13px rgba(57,255,136,.85), 0 0 24px rgba(57,255,136,.35);
}

@media (max-width: 1180px) {
  .tech-command-nav a {
    grid-template-columns: 16px auto;
    column-gap: 6px;
    padding-left: 9px;
    padding-right: 9px;
  }
  .tech-command-nav .nav-icon { width: 15px; height: 15px; }
  .tech-command-nav .nav-label { font-size: 10.5px; }
}

@media (max-width: 1040px) {
  .header-inner { grid-template-columns: 1fr auto; }
  .tech-command-nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 14px;
    right: 14px;
    display: none;
    grid-template-columns: repeat(2,minmax(0,1fr));
    padding: 10px;
    border-radius: 18px;
    background: rgba(7,17,31,.97);
    box-shadow: 0 22px 50px rgba(0,0,0,.34);
  }
  .tech-command-nav.open { display: grid; }
  .tech-command-nav a {
    height: 46px;
    grid-template-columns: 18px auto;
    padding: 0 12px;
  }
}

@media (max-width: 560px) {
  .tech-command-nav.open { grid-template-columns: 1fr; }
}

body.home-page .profile-photo-home {
  object-fit: contain;
  object-position: center 18%;
  background: #0c1928;
}

@media (max-width: 720px) {
  body.home-page .profile-photo-home {
    object-fit: contain;
    object-position: center 16%;
  }
}

body.home-page .profile-photo-home {
  object-fit: contain !important;
  object-position: center center !important;
  height: clamp(300px, 38vh, 390px);
  background: #f7f9fc;
}

@media (max-height: 760px) and (min-width: 1041px) {
  body.home-page .profile-photo-home {
    height: 300px;
  }
}

@media (max-width: 720px) {
  body.home-page .profile-photo-home {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: contain !important;
    object-position: center center !important;
    background: #f7f9fc;
  }
}

.tech-command-nav a {
  grid-template-columns: 18px auto;
}

body.home-page .hero h1 {
  line-height: 1.13;
  letter-spacing: -.038em;
  font-size: clamp(32px, 4.15vw, 48px);
}

body.home-page .profile-photo-frame {
  position: relative;
  width: 100%;
  height: clamp(300px, 38vh, 390px);
  overflow: hidden;
  border-radius: 21px;
  border: 1px solid rgba(56,189,248,.16);
  background: #0b1827;
  isolation: isolate;
}

body.home-page .profile-photo-frame::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: 0;
  background:
    linear-gradient(rgba(5,16,29,.34), rgba(5,16,29,.34)),
    url('../img/perfil-inicio.webp') center 24% / cover no-repeat;
  filter: blur(18px) saturate(.82) brightness(.62);
  transform: scale(1.08);
}

body.home-page .profile-photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7,17,31,.62) 0%, transparent 20%, transparent 80%, rgba(7,17,31,.62) 100%),
    linear-gradient(180deg, transparent 68%, rgba(7,17,31,.16) 100%);
}

body.home-page .profile-photo-home {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  border: 0;
  border-radius: 0;
  background: transparent !important;
}

@media (max-height: 760px) and (min-width: 1041px) {
  body.home-page .profile-photo-frame {
    height: 300px;
  }
}

@media (max-width: 720px) {
  body.home-page .hero h1 {
    line-height: 1.12;
    font-size: clamp(30px, 9.4vw, 40px);
  }
  body.home-page .profile-photo-frame {
    height: auto;
    aspect-ratio: 4 / 5;
  }
  body.home-page .profile-photo-home {
    width: 100%;
    height: 100% !important;
  }
}

body.carta-page .letter-highlight {
  justify-content: flex-start !important;
  padding: 24px 28px 26px !important;
}

body.carta-page .letter-highlight-label {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

body.carta-page .letter-highlight > strong {
  margin-top: 0 !important;
}

body.carta-page .letter-highlight h3 {
  margin-top: 16px !important;
}

body.carta-page .letter-highlight > p:not(.letter-highlight-label) {
  margin-top: 18px !important;
  margin-bottom: 0 !important;
}

body.carta-page .letter-keywords {
  margin-top: 24px !important;
  gap: 12px !important;
}

body.carta-page .letter-keywords span {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px !important;
  border: 1px solid rgba(64, 211, 255, .52) !important;
  border-radius: 999px;
  color: #f4fcff !important;
  font-size: 12.5px !important;
  font-weight: 750 !important;
  letter-spacing: .01em;
  background:
    linear-gradient(180deg, rgba(43, 190, 255, .34) 0%, rgba(17, 124, 207, .30) 45%, rgba(10, 78, 145, .34) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -2px 5px rgba(0,39,85,.38),
    0 7px 15px rgba(0, 139, 255, .16),
    0 0 16px rgba(46, 198, 255, .16) !important;
  text-shadow: 0 1px 2px rgba(0, 24, 55, .55);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.carta-page .letter-keywords span::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 4px;
  height: 35%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  pointer-events: none;
}

body.carta-page .letter-keywords span:hover {
  transform: translateY(-2px);
  border-color: rgba(99, 230, 255, .72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -2px 5px rgba(0,39,85,.40),
    0 10px 20px rgba(0, 139, 255, .22),
    0 0 24px rgba(46, 198, 255, .24) !important;
}

@media (max-width: 720px) {
  body.carta-page .letter-highlight {
    padding: 22px 22px 24px !important;
  }
  body.carta-page .letter-keywords span {
    min-height: 40px;
    padding: 9px 14px !important;
    font-size: 12px !important;
  }
}

body.perfil-page .about-copy {
  justify-content: flex-start;
  padding-top: 38px;
}

body.perfil-page .info-panel {
  justify-content: flex-start;
  padding-top: 28px;
}

body.perfil-page .panel-number {
  flex: 0 0 auto;
}

body.perfil-page .info-panel h3 {
  margin-top: 14px;
}

body.perfil-page .about-panels > .info-panel:nth-child(3),
body.perfil-page .about-panels > .info-panel:nth-child(4) {
  align-self: stretch;
}

body.experiencia-page .tags span,
.skill-list span {
  position: relative;
  overflow: hidden;
  padding: 8px 12px;
  border: 1px solid rgba(103, 232, 249, .35);
  border-radius: 999px;
  color: #eafcff;
  background:
    linear-gradient(180deg, rgba(49, 185, 255, .34) 0%, rgba(19, 116, 184, .34) 48%, rgba(9, 48, 87, .48) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -2px 4px rgba(3, 30, 60, .32),
    0 3px 0 rgba(4, 39, 72, .48),
    0 7px 14px rgba(0, 145, 255, .11),
    0 0 14px rgba(34, 211, 238, .08);
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

body.experiencia-page .tags span::before,
.skill-list span::before {
  content: "";
  position: absolute;
  inset: 1px 8px auto;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), transparent);
  pointer-events: none;
}

body.experiencia-page .tags span:hover,
.skill-list span:hover {
  transform: translateY(-2px);
  border-color: rgba(103, 232, 249, .62);
  background:
    linear-gradient(180deg, rgba(52, 211, 255, .44) 0%, rgba(20, 142, 211, .42) 48%, rgba(8, 61, 108, .54) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -2px 4px rgba(3, 30, 60, .30),
    0 4px 0 rgba(4, 39, 72, .52),
    0 10px 20px rgba(0, 157, 255, .16),
    0 0 22px rgba(34, 211, 238, .13);
}

.skill-list {
  gap: 10px;
}

.skill-list span {
  font-weight: 700;
}

@media (max-height: 820px) and (min-width: 1041px) {
  body.perfil-page .about-copy {
    padding-top: 30px;
  }

  body.perfil-page .info-panel {
    padding-top: 22px;
  }
}

@media (max-width: 1040px) {
  body.perfil-page .about-copy,
  body.perfil-page .info-panel {
    justify-content: flex-start;
  }
}

@media (min-width: 1041px) {
  body.perfil-page .about-grid {
    flex: 1 1 auto;
    min-height: 500px;
    height: clamp(500px, calc(100vh - 320px), 610px);
    max-height: 610px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(200px, .88fr) minmax(0, 1.12fr);
    gap: 16px;
    align-items: stretch;
  }

  body.perfil-page .about-copy {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    gap: 26px;
    align-content: start;
    justify-content: stretch;
    padding: 34px 34px 28px;
    border-radius: 26px;
  }

  body.perfil-page .about-copy .lead,
  body.perfil-page .about-copy p:last-child {
    margin: 0;
  }

  body.perfil-page .about-copy .lead {
    font-size: 17.5px;
    line-height: 1.62;
  }

  body.perfil-page .about-copy p:last-child {
    font-size: 14.5px;
    line-height: 1.62;
    color: var(--muted);
    padding-top: 2px;
  }

  body.perfil-page .about-panels {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  body.perfil-page .info-panel {
    min-height: 0;
    padding: 24px 24px 20px;
    justify-content: flex-start;
    border-radius: 23px;
  }

  body.perfil-page .panel-number {
    margin-bottom: 12px;
  }

  body.perfil-page .info-panel h3 {
    margin: 0 0 10px;
    font-size: 18px;
  }

  body.perfil-page .info-panel p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.56;
    max-width: 32ch;
  }
}

@media (max-height: 820px) and (min-width: 1041px) {
  body.perfil-page .about-grid {
    min-height: 450px;
    height: calc(100vh - 296px);
    max-height: 535px;
    gap: 14px;
  }

  body.perfil-page .about-copy {
    padding: 28px 30px 24px;
    gap: 22px;
  }

  body.perfil-page .about-copy .lead {
    font-size: 16px;
  }

  body.perfil-page .about-copy p:last-child {
    font-size: 13.5px;
  }

  body.perfil-page .info-panel {
    padding: 20px 20px 18px;
  }

  body.perfil-page .panel-number {
    margin-bottom: 10px;
  }

  body.perfil-page .info-panel h3 {
    font-size: 17px;
    margin-bottom: 8px;
  }

  body.perfil-page .info-panel p {
    font-size: 12.8px;
  }
}

@media (max-width: 1040px) {
  body.perfil-page .about-copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

@media (min-width: 1181px) {
  body.perfil-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  body.perfil-page .page-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: 18px;
    padding-bottom: 10px;
  }

  body.perfil-page .page-heading {
    margin: 0 0 16px;
  }

  body.perfil-page .page-heading > div > p:last-child {
    margin-top: 8px;
  }

  body.perfil-page .about-grid {
    flex: 0 0 auto;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
    align-items: stretch;
  }

  body.perfil-page .about-copy {
    height: auto !important;
    min-height: 190px;
    max-height: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 34px;
    align-items: start;
    padding: 30px 34px 28px;
    border-radius: 25px;
    justify-content: stretch;
  }

  body.perfil-page .about-copy .lead,
  body.perfil-page .about-copy p:last-child {
    margin: 0;
  }

  body.perfil-page .about-copy .lead {
    font-size: 17px;
    line-height: 1.58;
  }

  body.perfil-page .about-copy p:last-child {
    padding-top: 1px;
    font-size: 14px;
    line-height: 1.58;
  }

  body.perfil-page .about-panels {
    height: auto !important;
    min-height: 0 !important;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 1fr;
    gap: 14px;
  }

  body.perfil-page .info-panel {
    height: auto !important;
    min-height: 168px;
    padding: 22px 22px 20px;
    justify-content: flex-start;
    align-self: stretch;
    border-radius: 22px;
    overflow: hidden;
  }

  body.perfil-page .panel-number {
    margin: 0 0 11px;
  }

  body.perfil-page .info-panel h3 {
    margin: 0 0 8px;
    font-size: 17px;
    line-height: 1.2;
  }

  body.perfil-page .info-panel p {
    margin: 0;
    max-width: none;
    font-size: 12.6px;
    line-height: 1.48;
  }

  body.perfil-page .page-footer {
    margin-top: auto;
    padding-top: 8px;
    padding-bottom: 10px;
  }
}

@media (min-width: 1041px) and (max-width: 1180px) {
  body.perfil-page .about-grid {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  body.perfil-page .about-copy {
    height: auto !important;
    min-height: 200px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 28px 30px;
  }

  body.perfil-page .about-copy .lead,
  body.perfil-page .about-copy p:last-child {
    margin: 0;
  }

  body.perfil-page .about-panels {
    height: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    gap: 14px;
  }

  body.perfil-page .info-panel {
    min-height: 150px;
    height: auto !important;
    padding: 20px 22px;
  }
}

@media (min-width: 1181px) and (max-height: 820px) {
  body.perfil-page .page-main {
    padding-top: 12px;
    padding-bottom: 6px;
  }

  body.perfil-page .page-heading {
    margin-bottom: 12px;
  }

  body.perfil-page .page-heading h1 {
    font-size: clamp(28px, 3vw, 38px);
  }

  body.perfil-page .page-heading > div > p:last-child {
    font-size: 13.5px;
    margin-top: 6px;
  }

  body.perfil-page .about-copy {
    min-height: 166px;
    padding: 24px 30px 22px;
    gap: 30px;
  }

  body.perfil-page .about-copy .lead {
    font-size: 15.5px;
    line-height: 1.5;
  }

  body.perfil-page .about-copy p:last-child {
    font-size: 12.8px;
    line-height: 1.5;
  }

  body.perfil-page .info-panel {
    min-height: 144px;
    padding: 18px 19px 16px;
  }

  body.perfil-page .panel-number {
    margin-bottom: 8px;
  }

  body.perfil-page .info-panel h3 {
    font-size: 16px;
    margin-bottom: 6px;
  }

  body.perfil-page .info-panel p {
    font-size: 11.8px;
    line-height: 1.42;
  }
}

@media (max-width: 1040px) {
  body.perfil-page .about-grid,
  body.perfil-page .about-copy,
  body.perfil-page .about-panels,
  body.perfil-page .info-panel {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  body.perfil-page .about-copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

@media (min-width: 1041px) {
  body.perfil-page .profile-premium-grid {
    min-height: 0;
    height: auto;
    max-height: none;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 18px;
  }

  body.perfil-page .profile-summary-card {
    min-height: 248px;
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: 34px;
    align-items: start;
    padding: 30px 34px 28px;
    border-radius: 26px;
  }

  body.perfil-page .profile-summary-card::before {
    background: linear-gradient(90deg, rgba(34,211,238,.98), rgba(56,189,248,.48), rgba(37,99,235,.17), transparent 78%);
  }

  .profile-summary-main,
  .profile-summary-side {
    min-width: 0;
  }

  .profile-summary-side {
    padding-left: 30px;
    border-left: 1px solid rgba(104,144,181,.16);
  }
}

.profile-summary-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: #7dd3fc;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.summary-icon,
.profile-panel-icon {
  display: inline-grid;
  place-items: center;
  color: #67e8f9;
  border: 1px solid rgba(103,232,249,.20);
  background: linear-gradient(180deg, rgba(20,77,102,.52), rgba(10,40,67,.66));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 14px rgba(0,145,255,.08);
}

.summary-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
}

.summary-icon svg,
.profile-panel-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.perfil-page .profile-summary-card .lead {
  margin: 0;
  font-size: 18px;
  line-height: 1.58;
}

.profile-tech-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.profile-tech-chips span {
  position: relative;
  overflow: hidden;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(103,232,249,.27);
  color: #eafcff;
  font-size: 11.5px;
  font-weight: 750;
  background: linear-gradient(180deg, rgba(48,177,242,.30), rgba(15,88,145,.38) 52%, rgba(7,41,75,.52));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 3px rgba(4,30,58,.25), 0 3px 0 rgba(4,35,65,.36), 0 7px 14px rgba(0,145,255,.08);
}

.profile-tech-chips span::before {
  content: "";
  position: absolute;
  inset: 1px 8px auto;
  height: 40%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.13), transparent);
}

body.perfil-page .profile-summary-side > p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.62;
}

.profile-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.profile-mini-stats > div {
  min-width: 0;
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid rgba(91,139,181,.18);
  background: linear-gradient(180deg, rgba(17,34,54,.88), rgba(9,22,38,.86));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 9px 20px rgba(0,0,0,.10);
}

.profile-mini-stats strong {
  display: block;
  color: #eefcff;
  font-size: 16px;
  line-height: 1.15;
}

.profile-mini-stats span {
  display: block;
  margin-top: 5px;
  color: #8fa2b7;
  font-size: 10px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .06em;
}

@media (min-width: 1240px) {
  body.perfil-page .profile-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    grid-template-rows: 1fr;
    gap: 16px;
    height: auto;
  }
}

body.perfil-page .profile-feature-grid .info-panel {
  min-height: 182px;
  height: auto;
  padding: 22px 22px 20px;
  justify-content: flex-start;
}

.info-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

body.perfil-page .profile-feature-grid .panel-number {
  margin: 0;
}

.profile-panel-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

body.perfil-page .profile-feature-grid .info-panel h3 {
  margin: 0 0 9px;
  font-size: 18px;
}

body.perfil-page .profile-feature-grid .info-panel p {
  margin: 0;
  max-width: none;
  font-size: 13px;
  line-height: 1.52;
}

@media (max-width: 1239px) and (min-width: 1041px) {
  body.perfil-page .profile-feature-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-template-rows: repeat(2, auto);
    height: auto;
  }
}

@media (max-height: 820px) and (min-width: 1041px) {
  body.perfil-page .profile-summary-card {
    min-height: 220px;
    padding: 25px 30px 24px;
    gap: 28px;
  }

  body.perfil-page .profile-summary-card .lead {
    font-size: 16.5px;
  }

  body.perfil-page .profile-summary-side > p {
    font-size: 13px;
  }

  .profile-summary-kicker {
    margin-bottom: 14px;
  }

  .profile-tech-chips,
  .profile-mini-stats {
    margin-top: 16px;
  }

  body.perfil-page .profile-feature-grid .info-panel {
    min-height: 158px;
    padding: 18px 19px 17px;
  }
}

@media (max-width: 1040px) {
  body.perfil-page .profile-summary-card {
    display: block;
  }

  body.perfil-page .profile-summary-side {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(104,144,181,.16);
  }

  .profile-mini-stats {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

@media (max-width: 620px) {
  .profile-mini-stats {
    grid-template-columns: 1fr;
  }
}

body[data-page="inicio"] {
  --primary: #c94666;
  --primary-2: #a4375b;
  --accent: #f07b99;
  --accent-soft: rgba(201, 70, 102, .12);
  --line-strong: rgba(201, 70, 102, .34);
}

body[data-page="perfil"] {
  --primary: #d24726;
  --primary-2: #a63a1f;
  --accent: #f08a67;
  --accent-soft: rgba(210, 71, 38, .12);
  --line-strong: rgba(210, 71, 38, .34);
}

body[data-page="carta"] {
  --primary: #f2c811;
  --primary-2: #b68d00;
  --accent: #ffe063;
  --accent-soft: rgba(242, 200, 17, .12);
  --line-strong: rgba(242, 200, 17, .34);
}

body[data-page="experiencia"] {
  --primary: #107c41;
  --primary-2: #0b5c2f;
  --accent: #43b36e;
  --accent-soft: rgba(16, 124, 65, .12);
  --line-strong: rgba(16, 124, 65, .34);
}

body[data-page="competencias"] {
  --primary: #0078d4;
  --primary-2: #005a9e;
  --accent: #49a3ff;
  --accent-soft: rgba(0, 120, 212, .12);
  --line-strong: rgba(0, 120, 212, .34);
}

body[data-page="formacion"] {
  --primary: #7719aa;
  --primary-2: #5c1285;
  --accent: #b065d5;
  --accent-soft: rgba(119, 25, 170, .12);
  --line-strong: rgba(119, 25, 170, .34);
}

body[data-page="contacto"] {
  --primary: #f06aa9;
  --primary-2: #c94d89;
  --accent: #ff9fca;
  --accent-soft: rgba(240, 106, 169, .13);
  --line-strong: rgba(240, 106, 169, .36);
}

body[data-page] .page-shell::after {
  opacity: .48;
}

body[data-page] .page-number {
  color: color-mix(in srgb, var(--primary) 52%, transparent);
  text-shadow: 0 0 28px color-mix(in srgb, var(--primary) 16%, transparent);
}

body[data-page] .page-heading .eyebrow,
body[data-page] .eyebrow,
body[data-page] .page-footer a,
body[data-page] .card-role,
body[data-page] .company,
body[data-page] .education-year,
body[data-page] .letter-highlight-label,
body[data-page] .secondary-experience summary,
body[data-page] .hero h1 span,
body[data-page] .hero-highlights strong,
body[data-page] .contact-link {
  color: var(--primary);
}

body[data-page] .main-nav a:hover,
body[data-page] .main-nav a.active {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 32%, transparent),
              0 0 0 1px rgba(255,255,255,.02);
}

body[data-page] .brand-mark,
body[data-page] .btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
}

body[data-page] .brand-mark.brand-mark-image {
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.07), transparent 28%),
    linear-gradient(145deg, #081423 0%, #0D2238 58%, #123A52 100%);
  border: 1px solid color-mix(in srgb, var(--primary) 16%, rgba(255,255,255,.08));
  box-shadow:
    0 10px 26px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -12px 22px rgba(0,0,0,.18),
    0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent),
    0 0 20px color-mix(in srgb, var(--primary) 18%, transparent),
    0 0 34px color-mix(in srgb, var(--primary) 10%, transparent);
}

body[data-page] .brand-mark.brand-mark-image img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  padding: 3px;
  filter: drop-shadow(0 0 6px rgba(34,211,238,.10));
}

body[data-page] .btn-primary {
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary-2) 34%, transparent);
}

body[data-page] .btn-secondary {
  color: var(--primary);
}

body[data-page] .hero-card,
body[data-page] .hero-copy,
body[data-page] .letter-highlight,
body[data-page] .letter-card,
body[data-page] .skill-card,
body[data-page] .education-card,
body[data-page] .contact-info-panel,
body[data-page] .contact-form-panel,
body[data-page] .contact-panel,
body[data-page] .info-panel,
body[data-page] .about-copy,
body[data-page] .experience-summary-card,
body[data-page] .experience-card,
body[data-page] .timeline-card {
  box-shadow:
    0 19px 42px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.028),
    0 0 0 1px color-mix(in srgb, var(--primary) 7%, transparent);
}

body[data-page] .hero-card::before,
body[data-page] .hero-copy::before,
body[data-page] .letter-highlight::before,
body[data-page] .letter-card::before,
body[data-page] .skill-card::before,
body[data-page] .education-card::before,
body[data-page] .contact-info-panel::before,
body[data-page] .contact-form-panel::before,
body[data-page] .contact-panel::before,
body[data-page] .info-panel::before,
body[data-page] .about-copy::before,
body[data-page] .experience-summary-card::before,
body[data-page] .experience-card::before,
body[data-page] .timeline-card::before {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--primary) 96%, white 4%) 0%,
    color-mix(in srgb, var(--accent) 58%, transparent) 38%,
    color-mix(in srgb, var(--primary-2) 16%, transparent) 74%,
    transparent 100%
  );
  box-shadow: 0 0 16px color-mix(in srgb, var(--primary) 8%, transparent);
}

body[data-page] .badge,
body[data-page] .letter-chip,
body[data-page] .summary-tag,
body[data-page] .chip,
body[data-page] .hero-badge,
body[data-page] .pill,
body[data-page] .tag {
  background: color-mix(in srgb, var(--primary) 14%, #081422 86%);
  color: color-mix(in srgb, var(--primary) 78%, white 22%);
  border-color: color-mix(in srgb, var(--primary) 28%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -8px 18px rgba(0,0,0,.16),
    0 8px 18px color-mix(in srgb, var(--primary-2) 10%, transparent),
    0 0 14px color-mix(in srgb, var(--primary) 10%, transparent);
}

body[data-page] .timeline-item::before {
  border-color: var(--primary-2);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--primary) 12%, transparent);
}

body[data-page] .skill-icon,
body[data-page] .panel-icon,
body[data-page] .feature-icon,
body[data-page] .section-icon {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent);
}

body[data-page] .contact-dot,
body[data-page] .availability-dot,
body[data-page] .status-dot {
  background: var(--primary);
  box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 60%, transparent);
}

body[data-page="inicio"] .availability-dot,
body[data-page="inicio"] .contact-dot,
body[data-page="inicio"] .status-dot,
body[data-page="inicio"] .brand-status-dot {
  background: #32d74b;
  box-shadow: 0 0 14px rgba(50, 215, 75, .58);
}

body.perfil-page .profile-summary-card::before,
body.perfil-page .profile-feature-grid .info-panel::before {
  background: linear-gradient(
    90deg,
    rgba(34, 211, 238, .98) 0%,
    rgba(56, 189, 248, .48) 40%,
    rgba(37, 99, 235, .18) 74%,
    transparent 100%
  ) !important;
  box-shadow: 0 0 16px rgba(34, 211, 238, .08) !important;
}

body.perfil-page .profile-summary-card,
body.perfil-page .profile-feature-grid .info-panel {
  border-color: rgba(88, 132, 179, .22);
}

body.perfil-page .profile-summary-card:hover,
body.perfil-page .profile-feature-grid .info-panel:hover {
  border-color: rgba(56, 189, 248, .34);
  box-shadow:
    0 23px 48px rgba(0,0,0,.235),
    inset 0 1px 0 rgba(255,255,255,.032),
    0 0 28px rgba(34,211,238,.045);
}

body.perfil-page .profile-summary-kicker {
  color: #ff8a5c;
}

body.perfil-page .summary-icon,
body.perfil-page .profile-panel-icon {
  color: #ff9a73;
  border-color: rgba(255, 138, 92, .28);
  background: linear-gradient(180deg, rgba(210,71,38,.34), rgba(108,43,31,.54));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -2px 5px rgba(80,20,12,.30),
    0 6px 16px rgba(210,71,38,.12),
    0 0 16px rgba(240,138,103,.08);
}

body.perfil-page .panel-number {
  color: #ffd4c6;
  border-color: rgba(255, 138, 92, .38);
  background: linear-gradient(180deg, rgba(227,83,47,.50), rgba(135,46,29,.62));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -2px 4px rgba(79,22,12,.35),
    0 3px 0 rgba(92,30,18,.40),
    0 7px 15px rgba(210,71,38,.12),
    0 0 14px rgba(240,138,103,.08);
}

body.perfil-page .profile-tech-chips span {
  color: #fff7f3;
  border-color: rgba(255, 138, 92, .40);
  background: linear-gradient(180deg, rgba(242,112,75,.50) 0%, rgba(190,68,37,.52) 52%, rgba(94,37,25,.68) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -2px 4px rgba(82,25,15,.32),
    0 3px 0 rgba(90,30,18,.46),
    0 7px 15px rgba(210,71,38,.12),
    0 0 16px rgba(240,138,103,.09);
}

body.perfil-page .profile-tech-chips span::before {
  background: linear-gradient(180deg, rgba(255,255,255,.18), transparent);
}

body.perfil-page .profile-tech-chips span:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 170, 132, .64);
  background: linear-gradient(180deg, rgba(255,130,90,.62) 0%, rgba(209,77,42,.58) 52%, rgba(111,41,25,.72) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 4px rgba(82,25,15,.28),
    0 4px 0 rgba(90,30,18,.48),
    0 10px 20px rgba(210,71,38,.17),
    0 0 22px rgba(240,138,103,.12);
}

body.perfil-page .profile-mini-stats > div {
  border-color: rgba(210,71,38,.20);
}

body.perfil-page .profile-mini-stats strong {
  color: #fff4ef;
}

@media (min-width: 1100px) {
  body.perfil-page .page-heading > div > p:last-child {
    max-width: none;
    width: max-content;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.45;
  }
}

body.perfil-page .profile-tech-chips span,
body.perfil-page .panel-number {
  color: #fff8f3 !important;
  border-color: rgba(255, 190, 154, .58) !important;
  background: linear-gradient(
    180deg,
    rgba(255, 184, 140, .78) 0%,
    rgba(235, 133, 91, .72) 52%,
    rgba(173, 82, 55, .78) 100%
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -2px 5px rgba(103,44,26,.24),
    0 3px 0 rgba(101,45,29,.36),
    0 8px 18px rgba(235,133,91,.14),
    0 0 16px rgba(255,174,128,.10) !important;
  text-shadow: 0 1px 2px rgba(72,31,20,.36);
}

body.perfil-page .profile-tech-chips span:hover {
  border-color: rgba(255, 211, 184, .78) !important;
  background: linear-gradient(
    180deg,
    rgba(255, 198, 158, .88) 0%,
    rgba(244, 147, 103, .82) 52%,
    rgba(188, 91, 61, .84) 100%
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -2px 5px rgba(103,44,26,.22),
    0 4px 0 rgba(101,45,29,.38),
    0 10px 22px rgba(235,133,91,.20),
    0 0 22px rgba(255,174,128,.14) !important;
}

body.carta-page .letter-keywords span {
  color: #fffdf0 !important;
  border-color: rgba(255, 231, 137, .62) !important;
  background: linear-gradient(
    180deg,
    rgba(255, 226, 124, .80) 0%,
    rgba(232, 190, 65, .72) 50%,
    rgba(171, 132, 30, .76) 100%
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -2px 5px rgba(104,77,15,.24),
    0 3px 0 rgba(96,72,18,.34),
    0 8px 18px rgba(242,200,17,.14),
    0 0 16px rgba(255,224,99,.11) !important;
  text-shadow: 0 1px 2px rgba(75,56,12,.34);
}

body.carta-page .letter-keywords span:hover {
  border-color: rgba(255, 240, 174, .82) !important;
  background: linear-gradient(
    180deg,
    rgba(255, 235, 151, .90) 0%,
    rgba(241, 205, 85, .82) 50%,
    rgba(187, 146, 38, .82) 100%
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -2px 5px rgba(104,77,15,.22),
    0 4px 0 rgba(96,72,18,.36),
    0 10px 22px rgba(242,200,17,.20),
    0 0 22px rgba(255,224,99,.15) !important;
}

body.experiencia-page .tags span {
  color: #f6fff8 !important;
  border-color: rgba(159, 224, 170, .56) !important;
  background: linear-gradient(
    180deg,
    rgba(133, 210, 147, .78) 0%,
    rgba(76, 164, 99, .70) 50%,
    rgba(37, 103, 60, .78) 100%
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -2px 5px rgba(18,64,34,.25),
    0 3px 0 rgba(21,73,39,.36),
    0 8px 18px rgba(67,179,110,.13),
    0 0 16px rgba(123,203,137,.10) !important;
  text-shadow: 0 1px 2px rgba(14,55,29,.36);
}

body.experiencia-page .tags span:hover {
  border-color: rgba(190, 239, 198, .78) !important;
  background: linear-gradient(
    180deg,
    rgba(157, 225, 169, .88) 0%,
    rgba(88, 181, 111, .80) 50%,
    rgba(43, 116, 68, .84) 100%
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -2px 5px rgba(18,64,34,.22),
    0 4px 0 rgba(21,73,39,.38),
    0 10px 22px rgba(67,179,110,.18),
    0 0 22px rgba(123,203,137,.14) !important;
}

body[data-page="formacion"] .education-year {
  color: var(--text) !important;
  border-color: rgba(205, 181, 244, .52) !important;
  background: linear-gradient(
    180deg,
    rgba(181, 154, 242, .72) 0%,
    rgba(132, 99, 202, .68) 52%,
    rgba(80, 57, 142, .76) 100%
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 5px rgba(47,32,91,.24),
    0 3px 0 rgba(55,38,101,.34),
    0 7px 16px rgba(119,25,170,.12),
    0 0 15px rgba(181,154,242,.10);
  text-shadow: 0 1px 2px rgba(35,25,67,.32);
}

body[data-page="formacion"] .education-card h3,
body[data-page="formacion"] .education-card p {
  color: var(--text);
}
body[data-page="formacion"] .education-card p {
  color: var(--muted);
}

body.formacion-page .page-main {
  padding-top: 34px;
}

body.formacion-page .timeline {
  --date-col: 226px;
  --rail-col: 54px;
  --node-size: 18px;
  position: relative;
  display: grid;
  gap: 18px;
}

body.formacion-page .timeline::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: calc(var(--date-col) + (var(--rail-col) / 2));
  top: 24px;
  bottom: 24px;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(174,126,238,.76), rgba(128,57,123,.36) 55%, rgba(128,57,123,.08));
  box-shadow: 0 0 18px rgba(174,126,238,.10);
}

body.formacion-page .timeline-item {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--date-col) var(--rail-col) minmax(0, 1fr);
  gap: 0;
  align-items: start;
  padding: 0;
}

body.formacion-page .timeline-item::before {
  display: none !important;
}

body.formacion-page .timeline-date {
  justify-self: stretch;
  align-self: start;
  margin: 18px 12px 0 0;
  padding: 10px 13px;
  border: 1px solid rgba(88,132,179,.18);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(10,22,37,.90), rgba(8,18,31,.90));
  color: #d8e5f0;
  text-align: right;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: .035em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

body.formacion-page .timeline-rail {
  position: relative;
  min-height: 100%;
  height: 100%;
}

body.formacion-page .timeline-node {
  position: absolute;
  z-index: 3;
  top: 27px;
  left: 50%;
  width: var(--node-size);
  height: var(--node-size);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #081321;
  border: 4px solid #a67be0;
  box-shadow: 0 0 0 7px rgba(166,123,224,.09), 0 0 22px rgba(166,123,224,.18);
}

body.formacion-page .timeline-item.current .timeline-node {
  border-color: #c4a1f0;
  box-shadow: 0 0 0 7px rgba(196,161,240,.11), 0 0 26px rgba(196,161,240,.22);
}

body.formacion-page .timeline-connector {
  position: absolute;
  z-index: 2;
  top: 26px;
  left: 50%;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(166,123,224,.62), rgba(128,57,123,.14));
  transform: translateY(-50%);
}

body.formacion-page .timeline-card {
  position: relative;
  margin-left: 0;
  padding: 25px 28px 22px;
  border: 1px solid rgba(88,132,179,.20);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(17,37,59,.30), transparent 38%),
    linear-gradient(180deg, rgba(11,24,40,.98), rgba(8,18,31,.96));
  box-shadow: 0 18px 38px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.025);
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

body.formacion-page .timeline-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(166,123,224,.82), rgba(128,57,123,.12));
}

body.formacion-page .timeline-card::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -80px;
  top: -95px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(166,123,224,.10), transparent 68%);
  pointer-events: none;
}

body.formacion-page .timeline-card:hover {
  transform: translateY(-2px);
  border-color: rgba(166,123,224,.32);
  box-shadow: 0 24px 46px rgba(0,0,0,.21), inset 0 1px 0 rgba(255,255,255,.03);
}

body.formacion-page .timeline-item.current .timeline-card {
  border-color: rgba(166,123,224,.30);
}

body.formacion-page .timeline-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

body.formacion-page .timeline-top h3 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -.025em;
}

body.formacion-page .company {
  margin: 7px 0 0;
  color: #b99ae8;
  font-weight: 750;
}

body.formacion-page .timeline-card > p {
  max-width: 94ch;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

body.formacion-page .badge {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  color: var(--text) !important;
  border: 1px solid rgba(205,181,244,.52) !important;
  background: linear-gradient(180deg, rgba(181,154,242,.72), rgba(132,99,202,.68) 52%, rgba(80,57,142,.76)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 5px rgba(47,32,91,.24), 0 3px 0 rgba(55,38,101,.34), 0 7px 16px rgba(119,25,170,.12) !important;
}

body.formacion-page .badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d5b8ff;
  box-shadow: 0 0 12px rgba(213,184,255,.42);
}

body.formacion-page .formation-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

body.formacion-page .formation-tags span {
  position: relative;
  overflow: hidden;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--text) !important;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(205,181,244,.52) !important;
  background: linear-gradient(180deg, rgba(181,154,242,.72) 0%, rgba(132,99,202,.68) 52%, rgba(80,57,142,.76) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 5px rgba(47,32,91,.24),
    0 3px 0 rgba(55,38,101,.34),
    0 7px 16px rgba(119,25,170,.12),
    0 0 15px rgba(181,154,242,.10) !important;
  text-shadow: 0 1px 2px rgba(35,25,67,.32);
}

body.formacion-page .formation-tags span::before {
  content: "";
  position: absolute;
  inset: 1px 8px auto;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), transparent);
  pointer-events: none;
}

@media (max-width: 1100px) {
  body.formacion-page .timeline {
    --date-col: 165px;
    --rail-col: 48px;
  }
}

@media (max-width: 720px) {
  body.formacion-page .timeline {
    --date-col: 0px;
    --rail-col: 30px;
    gap: 14px;
  }

  body.formacion-page .timeline::before {
    left: calc(var(--rail-col) / 2);
    top: 18px;
    bottom: 18px;
  }

  body.formacion-page .timeline-item {
    grid-template-columns: var(--rail-col) minmax(0,1fr);
    grid-template-areas:
      "rail date"
      "rail card";
    column-gap: 0;
  }

  body.formacion-page .timeline-date {
    grid-area: date;
    justify-self: start;
    width: fit-content;
    margin: 0 0 8px;
    padding: 8px 11px;
    text-align: left;
    font-size: 12.5px;
    white-space: normal;
  }

  body.formacion-page .timeline-rail {
    grid-area: rail;
    grid-row: 1 / span 2;
  }

  body.formacion-page .timeline-node {
    top: 16px;
  }

  body.formacion-page .timeline-connector {
    top: 15px;
  }

  body.formacion-page .timeline-card {
    grid-area: card;
    padding: 22px 20px 19px 22px;
  }

  body.formacion-page .timeline-top {
    display: block;
  }

  body.formacion-page .badge {
    margin-top: 10px;
  }
}

body.perfil-page .profile-summary-card {
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
  align-items: stretch;
}

body.perfil-page .profile-summary-main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

body.perfil-page .profile-summary-support {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.72;
  max-width: 68ch;
}

body.perfil-page .profile-summary-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

body.perfil-page .profile-summary-side > p {
  display: none;
}

body.perfil-page .profile-summary-side .profile-tech-chips {
  margin-top: 0;
  justify-content: flex-start;
}

body.perfil-page .profile-summary-side .profile-tech-chips span {
  min-width: 126px;
  justify-content: center;
  text-align: center;
}

body.perfil-page .profile-mini-stats {
  margin-top: 0;
}

@media (max-width: 1180px) {
  body.perfil-page .profile-summary-card {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  body.perfil-page .profile-summary-side {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(104,144,181,.16);
    padding-top: 22px;
  }

  body.perfil-page .profile-summary-side .profile-tech-chips {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  body.perfil-page .profile-summary-side .profile-tech-chips span {
    min-width: 0;
    flex: 1 1 calc(50% - 10px);
  }

  body.perfil-page .profile-mini-stats {
    grid-template-columns: 1fr;
  }
}

body.perfil-page .profile-summary-card .lead,
body.perfil-page .profile-summary-support {
  color: var(--text);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
}

body.perfil-page .profile-summary-support {
  margin-top: 16px;
  max-width: 68ch;
}

@media (max-height: 820px) and (min-width: 1041px) {
  body.perfil-page .profile-summary-card .lead,
  body.perfil-page .profile-summary-support {
    font-size: 15.5px;
    line-height: 1.58;
  }
}

body.experiencia-page .timeline::before {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 82%, transparent) 0%,
    color-mix(in srgb, var(--primary) 58%, transparent) 55%,
    color-mix(in srgb, var(--primary-2) 20%, transparent) 100%
  ) !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--primary) 18%, transparent) !important;
}

body.experiencia-page .timeline-node {
  border-color: var(--primary) !important;
  box-shadow:
    0 0 0 7px color-mix(in srgb, var(--primary) 12%, transparent),
    0 0 22px color-mix(in srgb, var(--primary) 28%, transparent) !important;
}

body.experiencia-page .timeline-item.current .timeline-node {
  border-color: var(--accent) !important;
  box-shadow:
    0 0 0 7px color-mix(in srgb, var(--accent) 14%, transparent),
    0 0 28px color-mix(in srgb, var(--accent) 34%, transparent) !important;
}

body.experiencia-page .timeline-connector {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--primary) 72%, transparent),
    color-mix(in srgb, var(--primary) 18%, transparent)
  ) !important;
}

body.experiencia-page .badge::before {
  background: var(--accent) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 58%, transparent) !important;
}

body.experiencia-page .timeline-date {
  white-space: nowrap;
  min-width: 190px;
}

@media (max-width: 720px) {
  body.experiencia-page .timeline-date {
    min-width: 0;
    white-space: normal;
  }
}

body.competencias-page {
  overflow-x: hidden;
}

body.competencias-page .page-main {
  padding-top: 24px;
  padding-bottom: 22px;
}

body.competencias-page .page-heading {
  margin-bottom: 14px;
}

.skills-focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 14px 18px;
  margin-bottom: 16px;
  border: 1px solid rgba(71,137,191,.22);
  border-radius: 20px;
  background:
    radial-gradient(circle at 16% 0%, rgba(0,120,212,.10), transparent 34%),
    linear-gradient(180deg, rgba(12,28,47,.92), rgba(9,21,36,.90));
  box-shadow: 0 15px 34px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.025);
}

.skills-focus-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 245px;
}

.skills-focus-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 12px;
  color: #69b8ff;
  border: 1px solid rgba(73,163,255,.24);
  background: linear-gradient(180deg, rgba(0,120,212,.20), rgba(0,66,120,.22));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.skills-focus-icon svg,
.skill-icon-svg svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skills-focus-title span:not(.skills-focus-icon) {
  display: block;
  color: #eaf3fc;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.skills-focus-title small {
  display: block;
  margin-top: 2px;
  color: #8fa0b5;
  font-size: 10.5px;
}

.skills-focus-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.skills-focus-list span {
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(73,163,255,.27);
  color: #dceeff;
  background: rgba(0,88,155,.14);
  font-size: 10.5px;
  font-weight: 750;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

body.competencias-page .skills-grid-refined {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  grid-template-rows: none;
  align-items: stretch;
  gap: 14px;
  flex: 0 0 auto;
  min-height: auto;
}

body.competencias-page .skill-card-refined {
  min-height: 0;
  height: auto;
  padding: 19px 20px 18px;
  overflow: hidden;
  border-radius: 21px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

body.competencias-page .skill-card-refined::before {
  height: 3px;
  background: linear-gradient(90deg, rgba(34,211,238,.94), rgba(56,189,248,.38), transparent 72%) !important;
}

.skill-card-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
}

body.competencias-page .skill-icon-svg {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  margin: 0;
  border-radius: 13px;
  color: #60b7ff;
  border: 1px solid rgba(73,163,255,.24);
  background: linear-gradient(180deg, rgba(0,120,212,.18), rgba(0,67,119,.25));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 7px 16px rgba(0,90,170,.08);
}

body.competencias-page .skill-card-refined h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -.02em;
}

body.competencias-page .skill-card-head p {
  margin: 4px 0 0;
  color: #8294aa;
  font-size: 10.5px;
  line-height: 1.35;
}

body.competencias-page .skill-list {
  gap: 7px;
  align-content: flex-start;
}

body.competencias-page .skill-list span {
  padding: 6px 9px;
  border-radius: 999px;
  border-color: rgba(73,163,255,.24);
  color: #cfe4f7;
  font-size: 10px;
  font-weight: 700;
  background: linear-gradient(180deg, rgba(24,73,108,.58), rgba(11,42,70,.68));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 2px rgba(0,0,0,.24),
    0 2px 0 rgba(2,31,56,.36),
    0 5px 11px rgba(0,102,181,.06);
  text-shadow: none;
}

body.competencias-page .skill-list span::before {
  height: 34%;
  opacity: .50;
}

body.competencias-page .skill-list span:hover {
  transform: translateY(-1px);
  border-color: rgba(73,163,255,.44);
  background: linear-gradient(180deg, rgba(29,91,133,.68), rgba(13,52,85,.74));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    0 3px 0 rgba(2,31,56,.38),
    0 8px 16px rgba(0,102,181,.08);
}

@media (min-width: 1041px) and (min-height: 700px) {
  body.competencias-page {
    overflow-y: auto;
  }
  body.competencias-page .page-main {
    display: block;
    padding-top: 20px;
    padding-bottom: 14px;
  }
  body.competencias-page .skills-grid-refined {
    grid-template-rows: none;
  }
  body.competencias-page .skill-card-refined {
    min-height: 0;
    padding-top: 19px;
    padding-bottom: 18px;
  }
}

@media (max-width: 1040px) {
  body.competencias-page .skills-grid-refined {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .skills-focus {
    align-items: flex-start;
    flex-direction: column;
  }
  .skills-focus-list {
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  body.competencias-page .skills-grid-refined {
    grid-template-columns: 1fr;
  }
  .skills-focus-title {
    min-width: 0;
  }
}

body:not(.home-page) .page-main {
  padding-top: 30px;
}

body:not(.home-page) .page-heading {
  position: relative;
  align-items: end;
  margin: 2px 0 24px;
  padding-bottom: 2px;
}

body:not(.home-page) .page-heading > div {
  max-width: 980px;
}

body:not(.home-page) .page-heading h1 {
  font-size: clamp(30px, 3.45vw, 44px);
  line-height: 1.06;
  letter-spacing: -.042em;
}

body:not(.home-page) .page-heading > div > p:last-child {
  max-width: 72ch;
  margin-top: 11px;
  font-size: 14.5px;
  line-height: 1.55;
}

body[data-page] .page-index {
  align-self: center;
  font-size: clamp(38px, 4.7vw, 62px);
  opacity: .52;
  transform: translateY(2px);
  filter: saturate(.85);
}

body[data-page] .pdf-action {
  min-height: 52px;
  gap: 8px;
  padding: 0 16px;
  border-radius: 15px;
  color: #fff8fa !important;
  border: 1px solid rgba(255, 112, 148, .34) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,0) 35%),
    linear-gradient(135deg, #cf244d 0%, #aa173b 47%, #7f1028 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 14px 28px rgba(127,16,40,.27),
    0 0 0 1px rgba(255,255,255,.018) !important;
}

body[data-page] .pdf-action .pdf-icon {
  color: #ffe8ee !important;
}

body[data-page] .pdf-action:hover {
  color: #fff !important;
  border-color: rgba(255, 154, 179, .50) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,0) 35%),
    linear-gradient(135deg, #df315c 0%, #ba1b43 47%, #8a122e 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 16px 34px rgba(139,17,45,.34),
    0 0 22px rgba(207,36,77,.18) !important;
}

body.home-page .hero-grid {
  grid-template-columns: minmax(0, 1.22fr) minmax(350px, .68fr);
  gap: 22px;
}

body.home-page .hero-copy {
  padding: clamp(28px, 3vw, 38px);
}

body.home-page .hero h1 {
  max-width: 11.6ch;
  line-height: 1.12;
}

body.home-page .hero-intro {
  max-width: 61ch;
  line-height: 1.62;
}

body.home-page .profile-photo-frame {
  border-color: rgba(91,139,181,.22);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    inset 0 -26px 56px rgba(5,14,25,.16),
    0 16px 36px rgba(0,0,0,.16);
}

body.home-page .profile-photo-frame::after {
  background:
    linear-gradient(90deg, rgba(7,17,31,.72) 0%, rgba(7,17,31,.18) 13%, transparent 28%, transparent 72%, rgba(7,17,31,.18) 87%, rgba(7,17,31,.72) 100%),
    linear-gradient(180deg, transparent 70%, rgba(7,17,31,.18) 100%);
}

body.home-page .profile-photo-home {
  transform: scale(1.025);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

body.home-page .hero-highlights {
  gap: 12px;
  margin-top: 20px;
}

body.home-page .hero-highlights article {
  min-height: 86px;
  padding: 14px 15px 13px;
  border-radius: 17px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

body.home-page .hero-highlights strong {
  font-size: 20px;
  line-height: 1.05;
  letter-spacing: -.02em;
}

body.home-page .hero-highlights span {
  margin-top: 6px;
  font-size: 11.2px;
  line-height: 1.35;
}

body.home-page .hero-highlights article:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 14px 28px rgba(0,0,0,.16),
    0 0 18px color-mix(in srgb, var(--primary) 7%, transparent);
}

body.home-page .contact-mini-list a,
body.home-page .contact-mini-list div {
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

body.home-page .contact-mini-list a:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 26%, transparent);
  background: linear-gradient(180deg, rgba(19,37,58,.95), rgba(11,24,40,.92));
}

body.perfil-page .profile-summary-card {
  column-gap: 42px;
  padding: 30px 34px;
}

body.perfil-page .profile-summary-main {
  justify-content: flex-start;
}

body.perfil-page .profile-summary-main .lead,
body.perfil-page .profile-summary-main .profile-summary-support {
  margin-left: 0;
  margin-right: 0;
  color: #d8e2ed;
  font-size: 15.5px;
  line-height: 1.72;
}

body.perfil-page .profile-summary-main .lead {
  margin-top: 17px;
  margin-bottom: 0;
}

body.perfil-page .profile-summary-main .profile-summary-support {
  margin-top: 12px;
  margin-bottom: 0;
}

body.perfil-page .profile-summary-main strong {
  color: #f1f5f9;
}

body.perfil-page .profile-summary-side {
  gap: 22px;
}

body.perfil-page .profile-feature-grid {
  gap: 18px;
}

body.perfil-page .info-panel {
  min-height: 178px;
  padding: 24px;
}

body.perfil-page .info-panel h3 {
  margin-top: 17px;
}

body.perfil-page .info-panel p {
  line-height: 1.58;
}

body.carta-page .letter-layout {
  grid-template-columns: minmax(300px, .70fr) minmax(0, 1.7fr);
  gap: 22px;
}

body.carta-page .letter-highlight {
  padding: 30px;
}

body.carta-page .letter-highlight p {
  line-height: 1.68;
}

body.carta-page .letter-card {
  padding: 30px 32px;
}

body.carta-page .letter-card-head {
  padding-bottom: 18px;
}

body.carta-page .letter-body {
  max-width: 94ch;
  padding-top: 8px;
}

body.carta-page .letter-body p {
  margin: 13px 0;
  font-size: 13.7px;
  line-height: 1.72;
}

body.carta-page .letter-signature {
  margin-top: 22px !important;
}

body.contacto-page-body .contact-link,
body.contacto-page-body .form-field input,
body.contacto-page-body .form-field textarea {
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}

body.contacto-page-body .form-field input:focus,
body.contacto-page-body .form-field textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 58%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 0 0 3px color-mix(in srgb, var(--primary) 9%, transparent),
    0 0 18px color-mix(in srgb, var(--primary) 6%, transparent);
}

body[data-page] .info-panel,
body[data-page] .timeline-card,
body[data-page] .skill-card,
body[data-page] .education-card,
body[data-page] .letter-highlight,
body[data-page] .letter-card,
body[data-page] .contact-info-panel,
body[data-page] .contact-form-panel,
body[data-page] .about-copy {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

body[data-page] .info-panel:hover,
body[data-page] .timeline-card:hover,
body[data-page] .skill-card:hover,
body[data-page] .education-card:hover,
body[data-page] .contact-info-panel:hover,
body[data-page] .contact-form-panel:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 30%, rgba(88,132,179,.20));
  box-shadow:
    0 24px 46px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.03),
    0 0 24px color-mix(in srgb, var(--primary) 5%, transparent);
}

body[data-page] .tags span,
body[data-page] .skill-list span,
body[data-page] .formation-tags span,
body[data-page] .letter-keywords span,
body[data-page] .profile-tech-chips span {
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

body[data-page] .tags span:hover,
body[data-page] .skill-list span:hover,
body[data-page] .formation-tags span:hover,
body[data-page] .letter-keywords span:hover,
body[data-page] .profile-tech-chips span:hover {
  transform: translateY(-1px);
}

body[data-page] .hero-highlights .reveal:nth-child(2),
body[data-page] .skills-grid .reveal:nth-child(2),
body[data-page] .profile-feature-grid .reveal:nth-child(2) { transition-delay: .04s; }
body[data-page] .skills-grid .reveal:nth-child(3),
body[data-page] .profile-feature-grid .reveal:nth-child(3) { transition-delay: .08s; }
body[data-page] .skills-grid .reveal:nth-child(4),
body[data-page] .profile-feature-grid .reveal:nth-child(4) { transition-delay: .12s; }
body[data-page] .skills-grid .reveal:nth-child(5) { transition-delay: .16s; }
body[data-page] .skills-grid .reveal:nth-child(6) { transition-delay: .20s; }

@media (max-width: 1180px) {
  body.home-page .hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(330px, .72fr);
  }
  body.carta-page .letter-layout {
    grid-template-columns: minmax(280px, .76fr) minmax(0, 1.45fr);
  }
}

@media (max-width: 1040px) {
  body.home-page .hero-grid,
  body.carta-page .letter-layout {
    grid-template-columns: 1fr;
  }
  body.home-page .profile-photo-home {
    -webkit-mask-image: none;
    mask-image: none;
    transform: none;
  }
  body.carta-page .letter-body {
    max-width: none;
  }
}

@media (max-width: 720px) {
  body:not(.home-page) .page-main {
    padding-top: 22px;
  }
  body:not(.home-page) .page-heading {
    margin-bottom: 18px;
  }
  body.perfil-page .profile-summary-card,
  body.carta-page .letter-highlight,
  body.carta-page .letter-card {
    padding: 22px 20px;
  }
  body.perfil-page .profile-summary-main .lead,
  body.perfil-page .profile-summary-main .profile-summary-support {
    font-size: 14.5px;
    line-height: 1.68;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

body.perfil-page .profile-summary-side {
  min-width: 0;
  padding-right: 4px;
}

body.perfil-page .profile-summary-side .profile-tech-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin: 0;
}

body.perfil-page .profile-summary-side .profile-tech-chips span {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  text-align: center;
}

body.perfil-page .profile-mini-stats.profile-operational-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin: 0;
}

body.perfil-page .profile-operational-card {
  position: relative;
  min-width: 0;
  min-height: 112px;
  padding: 17px 14px 15px;
  border-radius: 17px;
  border: 1px solid rgba(88,132,179,.22);
  background:
    radial-gradient(circle at 90% 5%, rgba(210,71,38,.07), transparent 34%),
    linear-gradient(180deg, rgba(16,33,53,.92), rgba(9,22,38,.90));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 10px 22px rgba(0,0,0,.12);
  overflow: hidden;
}

body.perfil-page .profile-operational-card::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,138,103,.34), transparent);
}

body.perfil-page .profile-operational-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #ff9a73;
  border: 1px solid rgba(240,138,103,.26);
  background: linear-gradient(180deg, rgba(210,71,38,.18), rgba(94,37,25,.26));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 5px 12px rgba(210,71,38,.08);
}

body.perfil-page .profile-operational-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.perfil-page .profile-mini-stats.profile-operational-grid strong {
  max-width: calc(100% - 32px);
  color: #f4f7fb;
  font-size: 14.5px;
  line-height: 1.15;
  letter-spacing: -.01em;
}

body.perfil-page .profile-mini-stats.profile-operational-grid > div > span:last-child {
  margin-top: 10px;
  color: #8fa2b7;
  font-size: 9.3px;
  line-height: 1.45;
  letter-spacing: .045em;
  text-transform: uppercase;
}

body.perfil-page .profile-operational-card:hover {
  transform: translateY(-2px);
  border-color: rgba(240,138,103,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 14px 28px rgba(0,0,0,.16),
    0 0 18px rgba(210,71,38,.045);
}

@media (max-width: 1180px) {
  body.perfil-page .profile-summary-side {
    padding-right: 0;
  }

  body.perfil-page .profile-mini-stats.profile-operational-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.perfil-page .profile-summary-side .profile-tech-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.perfil-page .profile-mini-stats.profile-operational-grid {
    grid-template-columns: 1fr;
  }

  body.perfil-page .profile-operational-card {
    min-height: 92px;
  }
}

body.perfil-page .profile-summary-card {
  grid-template-columns: minmax(0, 1.08fr) minmax(500px, .92fr);
  column-gap: 34px;
}

body.perfil-page .profile-summary-main .lead,
body.perfil-page .profile-summary-main .profile-summary-support {
  color: #cdd8e5;
  font-size: 15.8px;
  line-height: 1.68;
  font-weight: 400;
  letter-spacing: 0;
}

body.perfil-page .profile-summary-main .lead strong,
body.perfil-page .profile-summary-main .profile-summary-support strong {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

body.perfil-page .profile-summary-main .lead {
  margin-top: 18px;
  margin-bottom: 0;
}

body.perfil-page .profile-summary-main .profile-summary-support {
  margin-top: 8px;
  margin-bottom: 0;
  max-width: none;
}

body.perfil-page .profile-summary-side {
  gap: 18px;
  padding-right: 0;
  justify-content: center;
}

body.perfil-page .profile-summary-side .profile-tech-chips {
  gap: 11px 12px;
}

body.perfil-page .profile-summary-side .profile-tech-chips span {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 12.5px;
  line-height: 1;
}

body.perfil-page .profile-mini-stats.profile-operational-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

body.perfil-page .profile-operational-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 10px;
  align-content: start;
  min-height: 118px;
  padding: 15px 14px 14px;
  overflow: hidden;
}

body.perfil-page .profile-mini-stats.profile-operational-grid strong {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  max-width: none;
  margin: 0;
  color: #f4f7fb;
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: -.01em;
  white-space: nowrap;
}

body.perfil-page .profile-operational-icon {
  position: static;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

body.perfil-page .profile-operational-icon svg {
  width: 15px;
  height: 15px;
}

body.perfil-page .profile-mini-stats.profile-operational-grid > div > span:last-child {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  color: #92a5ba;
  font-size: 9.2px;
  line-height: 1.48;
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (max-width: 1240px) and (min-width: 1041px) {
  body.perfil-page .profile-summary-card {
    grid-template-columns: minmax(0, 1fr) minmax(455px, .92fr);
    column-gap: 28px;
  }

  body.perfil-page .profile-summary-main .lead,
  body.perfil-page .profile-summary-main .profile-summary-support {
    font-size: 15px;
  }

  body.perfil-page .profile-mini-stats.profile-operational-grid strong {
    font-size: 13.3px;
  }

  body.perfil-page .profile-mini-stats.profile-operational-grid > div > span:last-child {
    font-size: 8.8px;
  }
}

@media (max-width: 1040px) {
  body.perfil-page .profile-summary-card {
    grid-template-columns: 1fr;
  }

  body.perfil-page .profile-summary-side {
    padding-top: 22px;
  }

  body.perfil-page .profile-mini-stats.profile-operational-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.perfil-page .profile-summary-main .lead,
  body.perfil-page .profile-summary-main .profile-summary-support {
    font-size: 14.5px;
    line-height: 1.65;
  }

  body.perfil-page .profile-mini-stats.profile-operational-grid {
    grid-template-columns: 1fr;
  }

  body.perfil-page .profile-operational-card {
    min-height: 92px;
  }
}

body.perfil-page .profile-summary-main .profile-summary-text {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0 !important;
  color: #cdd8e5 !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 15.8px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.68 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.perfil-page .profile-summary-main .profile-summary-text + .profile-summary-text {
  margin-top: 10px !important;
}

body.perfil-page .profile-summary-main .profile-summary-text strong,
body.perfil-page .profile-summary-main .profile-summary-text b,
body.perfil-page .profile-summary-main .profile-summary-text span {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
}

@media (max-width: 1240px) and (min-width: 1041px) {
  body.perfil-page .profile-summary-main .profile-summary-text {
    font-size: 15px !important;
  }
}

@media (max-width: 720px) {
  body.perfil-page .profile-summary-main .profile-summary-text {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
  }
}

body.carta-page .letter-card-head--minimal {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 0 !important;
  padding-bottom: 6px !important;
  border-bottom: none !important;
}
body.carta-page .letter-body--direct {
  padding-top: 2px !important;
}
body.carta-page .letter-body--direct p:first-child {
  margin-top: 0 !important;
}
@media (max-width: 900px) {
  body.carta-page .letter-card-head--minimal {
    justify-content: flex-start !important;
  }
}

body.perfil-page .profile-summary-main .profile-summary-text {
  font-size: 14.7px !important;
  line-height: 1.64 !important;
}

@media (max-width: 1240px) and (min-width: 1041px) {
  body.perfil-page .profile-summary-main .profile-summary-text {
    font-size: 14.2px !important;
    line-height: 1.62 !important;
  }
}

@media (max-width: 720px) {
  body.perfil-page .profile-summary-main .profile-summary-text {
    font-size: 13.8px !important;
    line-height: 1.60 !important;
  }
}

body.carta-page .letter-card {
  padding: 26px 28px 24px !important;
}

body.carta-page .letter-card-head--minimal {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 0 !important;
  padding-bottom: 14px !important;
  margin-bottom: 2px !important;
  border-bottom: none !important;
}

body.carta-page .letter-chip {
  margin-left: 0 !important;
  align-self: flex-start !important;
}

body.carta-page .letter-body--direct {
  padding-top: 6px !important;
}

body.carta-page .letter-body--direct p {
  max-width: 95ch;
}

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

body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img, svg, video, canvas {
  max-width: 100%;
}

.nav-mobile-pdf { display: none !important; }

@media (max-width: 1160px) and (min-width: 1041px) {
  .header-actions { display: inline-flex !important; }
  .header-inner { grid-template-columns: auto minmax(0, 1fr) auto !important; gap: 10px; }
  .pdf-action { width: 48px; min-width: 48px; padding: 0 !important; }
  .pdf-action > span:last-child { display: none; }
  .tech-command-nav a { padding-left: 7px; padding-right: 7px; }
  .tech-command-nav .nav-label { font-size: 10px; }
}

@media (max-width: 1040px) {
  :root { --header-h: 72px; }

  .site-header {
    padding: 8px 10px 0 !important;
  }

  .header-inner {
    position: relative;
    width: 100%;
    min-height: 64px;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 7px 9px 7px 10px !important;
    border-radius: 18px;
  }

  .brand {
    min-width: 0;
    gap: 9px;
  }

  .brand-mark.brand-mark-image {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px;
    border-radius: 14px !important;
  }

  .brand-copy { min-width: 0; }
  .brand-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13.5px;
  }
  .brand-copy small { font-size: 8.8px; }

  .menu-toggle {
    display: grid !important;
    place-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border: 1px solid rgba(91,139,181,.20);
    background: linear-gradient(180deg, rgba(16,38,58,.96), rgba(9,23,39,.96));
  }

  .menu-toggle span:not(.sr-only) {
    width: 20px;
    margin: 2.5px auto;
    transition: transform .18s ease, opacity .18s ease;
  }

  .main-nav.tech-command-nav {
    position: absolute !important;
    z-index: 80;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    max-height: calc(100vh - 92px);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: none !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 7px !important;
    padding: 10px !important;
    border: 1px solid rgba(91,139,181,.24);
    border-radius: 17px;
    background: rgba(6,16,29,.985);
    backdrop-filter: blur(22px);
    box-shadow: 0 24px 58px rgba(0,0,0,.46);
  }

  .main-nav.tech-command-nav.open { display: grid !important; }

  .tech-command-nav a {
    width: 100%;
    height: 48px;
    grid-template-columns: 20px minmax(0,1fr) !important;
    padding: 0 12px !important;
    border-radius: 13px;
  }

  .tech-command-nav .nav-icon {
    width: 18px !important;
    height: 18px !important;
  }

  .tech-command-nav .nav-label {
    font-size: 12px !important;
  }

  .nav-mobile-pdf {
    display: grid !important;
    color: #fff4f7 !important;
    border-color: rgba(255,112,148,.30) !important;
    background: linear-gradient(135deg, rgba(201,31,72,.92), rgba(127,16,40,.94)) !important;
  }
  .nav-mobile-pdf .nav-icon { color: #ffe7ee !important; }
  .nav-mobile-pdf::after { display: none !important; }

  .header-actions { display: none !important; }

  body.nav-open { overflow: hidden; }

  .page-main,
  .home-main,
  .page-footer,
  .home-footer {
    width: min(calc(100% - 24px), var(--max)) !important;
  }

  .page-main {
    padding-top: 24px !important;
    padding-bottom: 48px !important;
  }

  body:not(.home-page) .page-heading {
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 14px;
    margin-bottom: 20px !important;
  }

  body:not(.home-page) .page-heading h1 {
    font-size: clamp(28px, 5.4vw, 38px) !important;
    line-height: 1.08 !important;
  }

  body:not(.home-page) .page-heading > div > p:last-child {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  body[data-page] .page-index {
    font-size: clamp(38px, 8vw, 56px) !important;
  }

  body.home-page .home-main {
    min-height: auto !important;
    padding: 22px 0 42px !important;
    align-items: flex-start !important;
  }

  body.home-page .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  body.home-page .hero-copy,
  body.home-page .hero-card {
    width: 100%;
  }

  body.home-page .hero-copy {
    padding: 28px !important;
  }

  body.home-page .hero h1 {
    max-width: 13ch !important;
    font-size: clamp(36px, 7vw, 50px) !important;
  }

  body.home-page .hero-intro {
    max-width: 70ch;
  }

  body.home-page .hero-card {
    max-width: 720px;
    margin-inline: auto;
  }

  body.home-page .profile-photo-frame {
    max-height: 460px;
  }

  body.home-page .profile-photo-home {
    max-height: 460px;
  }

  body.perfil-page .profile-summary-card {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 26px !important;
  }

  body.perfil-page .profile-summary-side {
    padding-top: 20px !important;
  }

  body.perfil-page .profile-feature-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  body.carta-page .letter-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
    max-height: none !important;
    gap: 18px !important;
  }

  body.carta-page .letter-highlight,
  body.carta-page .letter-card {
    height: auto !important;
    min-height: 0 !important;
  }

  body.carta-page .letter-highlight {
    position: static !important;
    top: auto !important;
  }

  body.carta-page .letter-body {
    max-width: none !important;
  }

  body.experiencia-page .exp-overview {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 12px !important;
  }

  body.experiencia-page .exp-stat {
    min-width: 0;
    padding: 20px !important;
  }

  body.experiencia-page .exp-stat strong {
    overflow-wrap: anywhere;
  }

  body.experiencia-page .timeline-card {
    min-width: 0;
  }

  body.competencias-page .skills-focus {
    gap: 14px !important;
  }

  body.competencias-page .skills-focus-list {
    width: 100%;
  }

  body.competencias-page .skills-grid-refined {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  body.formacion-page .timeline-card { min-width: 0; }

  body.contacto-page-body .contact-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
    max-height: none !important;
    gap: 18px !important;
  }

  body.contacto-page-body .contact-info-panel,
  body.contacto-page-body .contact-form-panel {
    height: auto !important;
  }

  body.contacto-page-body .contact-info-panel {
    position: static !important;
    top: auto !important;
  }
}

@media (max-width: 720px) {
  :root { --header-h: 66px; }

  .site-header { padding: 7px 7px 0 !important; }
  .header-inner {
    min-height: 58px;
    padding: 6px 7px 6px 8px !important;
    border-radius: 15px;
  }

  .brand-mark.brand-mark-image {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px;
    border-radius: 13px !important;
  }

  .brand-copy strong { font-size: 12.5px; }
  .brand-copy small { display: block !important; font-size: 7.8px; letter-spacing: .06em; }

  .menu-toggle {
    width: 43px;
    height: 43px;
  }

  .main-nav.tech-command-nav {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    padding: 8px !important;
  }

  .tech-command-nav a {
    height: 46px;
  }

  .page-main,
  .home-main,
  .page-footer,
  .home-footer {
    width: min(calc(100% - 16px), var(--max)) !important;
  }

  .page-main {
    padding-top: 20px !important;
    padding-bottom: 36px !important;
  }

  body:not(.home-page) .page-heading {
    grid-template-columns: 1fr !important;
    margin-bottom: 18px !important;
  }

  body:not(.home-page) .page-heading .eyebrow {
    margin-bottom: 7px;
    font-size: 10px;
  }

  body:not(.home-page) .page-heading h1 {
    font-size: clamp(27px, 8.8vw, 36px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }

  body:not(.home-page) .page-heading > div > p:last-child {
    max-width: none !important;
    margin-top: 9px !important;
    font-size: 13.4px !important;
    line-height: 1.55 !important;
  }

  body[data-page] .page-index { display: none !important; }

  .page-footer {
    flex-direction: column !important;
    align-items: flex-start;
    gap: 7px !important;
    padding-bottom: 18px !important;
    font-size: 11px !important;
  }

  body.home-page .home-main { padding-top: 14px !important; }
  body.home-page .hero-grid { gap: 14px !important; }
  body.home-page .hero-copy { padding: 22px 18px !important; border-radius: 22px; }
  body.home-page .hero h1 {
    max-width: none !important;
    font-size: clamp(32px, 10.5vw, 44px) !important;
    line-height: 1.08 !important;
  }
  body.home-page .hero-intro { font-size: 14px !important; line-height: 1.55; }
  body.home-page .hero-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  body.home-page .hero-actions .btn { width: 100%; padding-inline: 10px; }
  body.home-page .hero-highlights { grid-template-columns: 1fr !important; gap: 8px !important; }
  body.home-page .hero-highlights article { min-height: 0 !important; padding: 12px 13px !important; }
  body.home-page .hero-card { padding: 10px !important; border-radius: 22px; }
  body.home-page .profile-photo-frame { max-height: none; border-radius: 18px; }
  body.home-page .profile-photo-home {
    width: 100%;
    height: auto !important;
    max-height: 420px;
    aspect-ratio: 4 / 5;
    object-fit: contain !important;
  }
  body.home-page .contact-mini-list { grid-template-columns: 1fr !important; }
  body.home-page .contact-mini-list .full { grid-column: auto !important; }

  body.perfil-page .profile-summary-card { padding: 20px !important; gap: 18px !important; }
  body.perfil-page .profile-summary-main .profile-summary-text {
    font-size: 13.8px !important;
    line-height: 1.62 !important;
  }
  body.perfil-page .profile-summary-side { padding-top: 16px !important; }
  body.perfil-page .profile-summary-side .profile-tech-chips {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }
  body.perfil-page .profile-summary-side .profile-tech-chips span {
    min-height: 36px !important;
    padding: 7px 8px !important;
    font-size: 11.2px !important;
  }
  body.perfil-page .profile-mini-stats.profile-operational-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  body.perfil-page .profile-operational-card { min-height: 88px !important; }
  body.perfil-page .profile-feature-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  body.perfil-page .info-panel { min-height: 0 !important; padding: 19px !important; }

  body.carta-page .letter-layout { gap: 12px !important; }
  body.carta-page .letter-highlight,
  body.carta-page .letter-card { padding: 20px !important; border-radius: 20px; }
  body.carta-page .letter-highlight { order: 2; }
  body.carta-page .letter-card { order: 1; }
  body.carta-page .letter-card-head--minimal { padding-bottom: 10px !important; }
  body.carta-page .letter-body p { font-size: 13.2px !important; line-height: 1.62 !important; }
  body.carta-page .letter-highlight > strong { font-size: 34px !important; }
  body.carta-page .letter-highlight h3 { font-size: 17px !important; }
  body.carta-page .letter-keywords span { padding: 7px 9px !important; font-size: 10.5px !important; }

  body.experiencia-page .exp-overview { grid-template-columns: 1fr !important; gap: 9px !important; }
  body.experiencia-page .exp-stat { padding: 18px !important; }

  body.experiencia-page .timeline,
  body.formacion-page .timeline {
    margin-top: 18px !important;
  }

  body.experiencia-page .timeline::before,
  body.formacion-page .timeline::before {
    left: 10px !important;
  }

  body.experiencia-page .timeline-item,
  body.formacion-page .timeline-item {
    display: grid !important;
    grid-template-columns: 22px minmax(0,1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 10px !important;
    row-gap: 7px !important;
    padding-left: 0 !important;
    margin-bottom: 14px !important;
  }

  body.experiencia-page .timeline-date,
  body.formacion-page .timeline-date {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: 100%;
    padding: 6px 9px !important;
    text-align: left !important;
    white-space: normal !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }

  body.experiencia-page .timeline-rail,
  body.formacion-page .timeline-rail {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    position: relative !important;
    width: 22px !important;
    min-height: 100% !important;
  }

  body.experiencia-page .timeline-node,
  body.formacion-page .timeline-node {
    position: absolute !important;
    top: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  body.experiencia-page .timeline-connector,
  body.formacion-page .timeline-connector {
    position: absolute !important;
    top: 18px !important;
    bottom: -20px !important;
    left: 50% !important;
    width: 2px !important;
    height: auto !important;
    transform: translateX(-50%) !important;
  }

  body.experiencia-page .timeline-card,
  body.formacion-page .timeline-card {
    grid-column: 2 !important;
    grid-row: 2 !important;
    padding: 18px !important;
    border-radius: 18px !important;
  }

  body.experiencia-page .timeline-top,
  body.formacion-page .timeline-top {
    display: block !important;
  }

  body.experiencia-page .timeline-top h3,
  body.formacion-page .timeline-top h3 {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }

  body.experiencia-page .badge,
  body.formacion-page .badge {
    display: inline-flex !important;
    margin-top: 8px !important;
  }

  body.experiencia-page .timeline-card > p,
  body.formacion-page .timeline-card > p {
    font-size: 13px !important;
    line-height: 1.58 !important;
  }

  body.experiencia-page .tags,
  body.formacion-page .tags { gap: 6px !important; }
  body.experiencia-page .tags span,
  body.formacion-page .tags span { padding: 6px 8px !important; font-size: 10px !important; }
  body.experiencia-page .secondary-experience { margin-left: 32px !important; }

  body.competencias-page .skills-focus { padding: 17px !important; border-radius: 18px; }
  body.competencias-page .skills-focus-title { width: 100%; }
  body.competencias-page .skills-focus-list { gap: 6px !important; }
  body.competencias-page .skills-focus-list span { font-size: 10px !important; padding: 6px 8px !important; }
  body.competencias-page .skills-grid-refined { grid-template-columns: 1fr !important; gap: 10px !important; }
  body.competencias-page .skill-card-refined { min-height: 0 !important; padding: 18px !important; }
  body.competencias-page .skill-list { gap: 6px !important; }

  body.contacto-page-body .contact-layout { gap: 12px !important; }
  body.contacto-page-body .contact-info-panel,
  body.contacto-page-body .contact-form-panel {
    padding: 20px !important;
    border-radius: 20px !important;
  }
  body.contacto-page-body .form-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  body.contacto-page-body .form-field-full { grid-column: auto !important; }
  body.contacto-page-body .form-field input,
  body.contacto-page-body .form-field textarea { font-size: 16px !important; }
  body.contacto-page-body .form-field input { height: 48px !important; }
  body.contacto-page-body .form-field textarea { min-height: 120px !important; }
  body.contacto-page-body .form-bottom { display: grid !important; gap: 12px !important; }
  body.contacto-page-body .form-submit { width: 100%; min-height: 48px; }
  body.contacto-page-body .privacy-note { max-width: none !important; }
}

@media (max-width: 430px) {
  .brand-copy strong { font-size: 11.8px; }
  .brand-copy small { font-size: 7.2px; }

  body.home-page .hero-actions { grid-template-columns: 1fr !important; }
  body.home-page .hero h1 { font-size: clamp(30px, 10vw, 40px) !important; }

  body.perfil-page .profile-summary-side .profile-tech-chips {
    grid-template-columns: 1fr 1fr !important;
  }
}

body.contacto-page-body .form-field-files {
  gap: 9px;
}

body.contacto-page-body .file-upload-box {
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 74px;
  padding: 12px 14px;
  border: 1px dashed rgba(148,163,184,.28);
  border-radius: 15px;
  background: rgba(15,29,48,.62);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

body.contacto-page-body .file-upload-box:focus-within {
  border-color: rgba(240,106,169,.65);
  background: rgba(15,29,48,.9);
  box-shadow: 0 0 0 4px rgba(240,106,169,.08);
}

body.contacto-page-body .file-upload-box input[type="file"] {
  width: 100%;
  height: auto;
  min-height: 42px;
  padding: 7px;
  border: 0;
  border-radius: 11px;
  background: rgba(255,255,255,.035);
  color: #d7e2ee;
  font-size: 12px;
  cursor: pointer;
}

body.contacto-page-body .file-upload-box input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(240,106,169,.34);
  border-radius: 10px;
  background: rgba(240,106,169,.10);
  color: #f5d9e6;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

body.contacto-page-body .file-upload-copy {
  display: grid;
  gap: 4px;
}

body.contacto-page-body .file-upload-copy strong {
  color: #dfe8f2;
  font-size: 12px;
}

body.contacto-page-body .file-upload-copy span {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.45;
}

body.contacto-page-body .attachment-status {
  margin: 0;
  color: #8393a6;
  font-size: 10.5px;
  line-height: 1.45;
}

body.contacto-page-body .attachment-status.ok {
  color: #79d7c8;
}

body.contacto-page-body .attachment-status.error {
  color: #ff8a86;
}

body.contacto-page-body #attachments[aria-invalid="true"] {
  box-shadow: 0 0 0 2px rgba(194,65,59,.42);
}

@media (max-width: 720px) {
  body.contacto-page-body .file-upload-box {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 11px;
  }

  body.contacto-page-body .file-upload-box input[type="file"] {
    font-size: 14px !important;
  }
}

@media (max-width: 720px) {
  body.home-page .profile-photo-frame {
    height: min(68vh, 640px) !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    padding: 3px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  body.home-page .profile-photo-home {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

body.contacto-page-body .field-error,
body.contacto-page-body .field-help {
  margin: 6px 2px 0;
  font-size: 10.8px;
  line-height: 1.4;
}

body.contacto-page-body .field-help {
  color: #7f91a6;
}

body.contacto-page-body .field-error {
  min-height: 0;
  color: #ff7d78;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .16s ease, transform .16s ease;
}

body.contacto-page-body .field-error:empty {
  display: none;
}

body.contacto-page-body .field-error.visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

body.contacto-page-body .form-field.has-error input,
body.contacto-page-body .form-field.has-error textarea {
  border-color: rgba(255, 96, 91, .72) !important;
  box-shadow: 0 0 0 3px rgba(255, 96, 91, .07) !important;
}

body.contacto-page-body .form-field.is-valid input:not([type="file"]),
body.contacto-page-body .form-field.is-valid textarea {
  border-color: rgba(65, 200, 163, .36);
}

@media (max-width: 720px) {
  body.contacto-page-body .field-error,
  body.contacto-page-body .field-help {
    font-size: 11.5px;
  }
}

@media (min-width: 981px) {
  body.contacto-page-body .contact-layout {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-items: start !important;
  }

  body.contacto-page-body .contact-info-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: start !important;
    justify-content: flex-start !important;
  }

  body.contacto-page-body .contact-availability {
    margin-top: 22px !important;
  }

  body.contacto-page-body .contact-form-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: start !important;
  }
}

html {
  min-height: 100%;
  background-color: #07111f;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
}

.page-shell {
  z-index: 0 !important;
}

.home-main,
.page-main,
.home-footer,
.page-footer {
  position: relative;
  z-index: 1;
}

.site-header {
  z-index: 50;
}

@media (max-width: 720px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
  }

  body {
    min-height: 100dvh !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overscroll-behavior-y: none;
  }

  .page-footer,
  .home-footer {
    margin-bottom: 0 !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
  }
}

.site-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000 !important;
  padding-top: max(12px, env(safe-area-inset-top)) !important;
  pointer-events: none;
}

.site-header .header-inner {
  pointer-events: auto;
}

.home-main,
.page-main {
  margin-top: 96px;
  scroll-margin-top: 108px;
}

.header-inner {
  border: 1px solid rgba(151, 187, 218, .20) !important;
  background:
    linear-gradient(180deg, rgba(9, 20, 35, .84), rgba(5, 13, 24, .78)) !important;
  -webkit-backdrop-filter: blur(28px) saturate(135%);
  backdrop-filter: blur(28px) saturate(135%);
  box-shadow:
    0 18px 52px rgba(0, 0, 0, .34),
    0 1px 0 rgba(255,255,255,.035) inset,
    0 -1px 0 rgba(15, 32, 49, .55) inset,
    0 0 0 1px rgba(36, 132, 176, .018) !important;
}

.header-inner::before {
  background:
    radial-gradient(circle at 50% -12%, rgba(118, 208, 235, .09), transparent 34%),
    linear-gradient(90deg,
      rgba(58, 118, 172, .035),
      transparent 24%,
      transparent 76%,
      rgba(76, 186, 211, .035)
    ) !important;
}

.header-inner::after {
  left: 26px !important;
  right: 26px !important;
  bottom: -1px !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(110, 205, 231, .16) 28%,
    rgba(255,255,255,.10) 50%,
    rgba(110, 205, 231, .16) 72%,
    transparent
  ) !important;
}

.tech-command-nav {
  border-color: rgba(128, 166, 198, .14) !important;
  background:
    linear-gradient(180deg, rgba(14, 28, 44, .58), rgba(8, 18, 31, .54)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    0 8px 22px rgba(0,0,0,.10) !important;
}

.tech-command-nav a {
  color: #a9b8c8;
  transition:
    transform .18s ease,
    color .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    opacity .18s ease !important;
}

.tech-command-nav a:hover {
  transform: translateY(-1px);
  border-color: rgba(135, 203, 224, .13) !important;
  background: rgba(24, 49, 68, .34) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.tech-command-nav a.active {
  border-color: rgba(123, 197, 220, .22) !important;
  background:
    linear-gradient(135deg, rgba(22, 73, 92, .70), rgba(19, 48, 77, .72)) !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
}

.tech-command-nav a.active::after {
  opacity: .78 !important;
}

body[data-page] .brand-mark.brand-mark-image {
  box-shadow:
    0 12px 28px rgba(0,0,0,.24),
    0 0 0 1px color-mix(in srgb, var(--primary) 34%, transparent),
    0 0 16px color-mix(in srgb, var(--primary) 15%, transparent) !important;
}

body[data-page] .pdf-action {
  box-shadow:
    0 8px 20px rgba(72, 8, 23, .22),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

@media (max-width: 1040px) {
  .site-header {
    padding: max(8px, env(safe-area-inset-top)) 10px 0 !important;
  }

  .home-main,
  .page-main {
    margin-top: 80px !important;
    scroll-margin-top: 92px;
  }

  .header-inner {
    background:
      linear-gradient(180deg, rgba(8, 19, 33, .88), rgba(5, 13, 24, .84)) !important;
    -webkit-backdrop-filter: blur(24px) saturate(130%);
    backdrop-filter: blur(24px) saturate(130%);
    box-shadow:
      0 14px 38px rgba(0,0,0,.32),
      inset 0 1px 0 rgba(255,255,255,.03) !important;
  }

  .main-nav.tech-command-nav {
    background: rgba(5, 14, 26, .94) !important;
    -webkit-backdrop-filter: blur(26px) saturate(130%);
    backdrop-filter: blur(26px) saturate(130%);
    box-shadow:
      0 24px 58px rgba(0,0,0,.46),
      inset 0 1px 0 rgba(255,255,255,.025) !important;
  }
}

@media (max-width: 720px) {
  .home-main,
  .page-main {
    margin-top: 76px !important;
  }
}

@media print {
  .home-main,
  .page-main {
    margin-top: 0 !important;
  }
}

.professional-social-actions,
.contact-social-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.professional-social-actions {
  margin-top: 12px;
}

.contact-social-actions {
  margin-top: 14px;
}

.social-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid rgba(147, 177, 205, .18);
  border-radius: 11px;
  background: rgba(9, 22, 37, .58);
  color: #b9c8d7;
  font-size: 11.5px;
  font-weight: 720;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

.social-action:hover {
  transform: translateY(-1px);
  color: #edf5fb;
  border-color: rgba(142, 198, 220, .30);
  background: rgba(16, 38, 57, .74);
}

.social-action-icon {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 6px;
  background: rgba(74, 143, 193, .16);
  color: #9fd2ec;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: -.03em;
}

.social-action-icon--wa {
  background: rgba(72, 171, 128, .13);
  color: #8ad8b3;
  font-size: 12px;
}

body.contacto-page-body .form-status.success {
  position: relative;
  padding: 13px 15px !important;
  border: 1px solid rgba(69, 190, 145, .28) !important;
  border-radius: 13px !important;
  background:
    linear-gradient(135deg, rgba(29, 94, 72, .22), rgba(13, 44, 38, .30)) !important;
  color: #bcebd8 !important;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.timeline.timeline-progressive::before {
  transform-origin: top center;
  transform: scaleY(.04);
  opacity: .28;
  transition:
    transform 1.05s cubic-bezier(.22,.72,.28,1),
    opacity .55s ease;
}

.timeline.timeline-progressive.timeline-visible::before {
  transform: scaleY(1);
  opacity: 1;
}

.not-found-page .page-main {
  display: grid;
  min-height: calc(100dvh - 190px);
  place-items: center;
}

.not-found-card {
  width: min(760px, 100%);
  padding: clamp(30px, 5vw, 54px);
  border: 1px solid rgba(129, 176, 205, .18);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(10, 25, 42, .82), rgba(6, 16, 29, .82));
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow:
    0 28px 70px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.025);
  text-align: center;
}

.not-found-code {
  margin: 0;
  color: var(--primary);
  font-size: clamp(72px, 14vw, 132px);
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.07em;
  opacity: .92;
}

.not-found-card h1 {
  margin: 20px 0 10px;
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.05;
}

.not-found-card > p:not(.not-found-code) {
  width: min(590px, 100%);
  margin: 0 auto;
  color: var(--muted);
  line-height: 1.7;
}

.not-found-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

@media (max-width: 720px) {
  .professional-social-actions,
  .contact-social-actions {
    gap: 8px;
  }

  .social-action {
    min-height: 38px;
  }

  .not-found-page .page-main {
    min-height: calc(100dvh - 125px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.visible {
    opacity: 1 !important;
    transform: none !important;
  }

  .timeline.timeline-progressive::before,
  .timeline.timeline-progressive.timeline-visible::before {
    transform: none !important;
    opacity: 1 !important;
  }

  .social-action:hover {
    transform: none !important;
  }
}

body.experiencia-page .timeline-disclosure {
  padding: 0 !important;
  overflow: hidden;
}

body.experiencia-page .timeline-summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 22px;
  user-select: none;
  appearance: none;
  -webkit-appearance: none;
}

body.experiencia-page .timeline-summary::-webkit-details-marker {
  display: none !important;
}

body.experiencia-page .timeline-summary::marker {
  display: none !important;
  content: "";
  font-size: 0;
}

body.experiencia-page details > summary {
  list-style: none;
}

body.experiencia-page details > summary::-webkit-details-marker {
  display: none !important;
}

body.experiencia-page .timeline-summary .timeline-top {
  align-items: center;
  gap: 18px;
}

body.experiencia-page .timeline-summary h3 {
  margin-bottom: 4px;
}

body.experiencia-page .timeline-summary .company {
  margin: 0;
}

body.experiencia-page .timeline-summary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

body.experiencia-page .timeline-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 7px 14px 7px 10px;
  border: 1px solid rgba(118, 171, 212, .20);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(12, 28, 47, .92), rgba(10, 23, 39, .88));
  color: #d9eaf7;
  font-size: 10.8px;
  font-weight: 780;
  letter-spacing: .03em;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 24px rgba(0,0,0,.16);
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease;
}

body.experiencia-page .timeline-more::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(56, 189, 248, .12);
  border: 1px solid rgba(56, 189, 248, .18);
  color: #86d8ff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

body.experiencia-page details[open] .timeline-more::before {
  content: "−";
  color: #cce6ff;
}

body.experiencia-page .timeline-summary:hover .timeline-more,
body.experiencia-page .timeline-summary:focus-visible .timeline-more {
  transform: translateY(-1px);
  border-color: rgba(93, 178, 235, .32);
  background: linear-gradient(180deg, rgba(14, 34, 57, .96), rgba(10, 24, 42, .92));
  color: #eef7ff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 30px rgba(0,0,0,.20);
}

body.experiencia-page .timeline-chevron {
  display: none !important;
}

body.experiencia-page .timeline-more-label--open {
  display: none;
}

body.experiencia-page details[open] .timeline-more-label--closed {
  display: none;
}

body.experiencia-page details[open] .timeline-more-label--open {
  display: inline;
}

body.experiencia-page .timeline-details {
  padding: 0 22px 22px;
  border-top: 1px solid rgba(116, 151, 176, .10);
}

body.experiencia-page .timeline-details-title {
  margin: 18px 0 10px;
  color: #d7e3ee;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

body.experiencia-page .timeline-task-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.experiencia-page .timeline-task-list li {
  position: relative;
  padding-left: 17px;
  color: #aebdcb;
  font-size: 13px;
  line-height: 1.58;
}

body.experiencia-page .timeline-task-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(78, 205, 137, .72);
  box-shadow: 0 0 8px rgba(78, 205, 137, .15);
}

body.experiencia-page .timeline-details .tags {
  margin-top: 17px;
}

body.experiencia-page details[open].timeline-disclosure {
  border-color: rgba(51, 178, 108, .24) !important;
}

@media (max-width: 820px) {
  body.experiencia-page .timeline-summary {
    padding: 18px 17px;
  }

  body.experiencia-page .timeline-summary .timeline-top {
    align-items: flex-start;
  }

  body.experiencia-page .timeline-summary-actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
  }

  body.experiencia-page .timeline-more {
    min-height: 36px;
    padding: 6px 12px 6px 9px;
  }

  body.experiencia-page .timeline-more::before {
    width: 18px;
    height: 18px;
    font-size: 13px;
  }

  body.experiencia-page .timeline-details {
    padding: 0 17px 18px;
  }
}

@media (max-width: 560px) {
  body.experiencia-page .timeline-summary .timeline-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.experiencia-page .timeline-summary-actions {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  body.experiencia-page .timeline-more {
    margin-left: auto;
  }

  body.experiencia-page .timeline-task-list li {
    font-size: 12.7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.experiencia-page .timeline-chevron,
  body.experiencia-page .timeline-more {
    transition: none !important;
  }
}

.floating-contact-dock {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 920;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  pointer-events: none;
}

.floating-contact {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(171, 196, 216, .22);
  border-radius: 50%;
  background: rgba(7, 18, 31, .44);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow:
    0 10px 28px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.035);
  text-decoration: none;
  pointer-events: auto;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.floating-contact svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.floating-contact--linkedin {
  color: #78bce8;
  border-color: rgba(71, 151, 202, .28);
}

.floating-contact--whatsapp {
  color: #82d8ae;
  border-color: rgba(64, 181, 125, .28);
}

.floating-contact:hover,
.floating-contact:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.floating-contact--linkedin:hover,
.floating-contact--linkedin:focus-visible {
  background: rgba(25, 91, 133, .34);
  border-color: rgba(92, 181, 231, .52);
  box-shadow:
    0 12px 30px rgba(0,0,0,.28),
    0 0 18px rgba(62,151,205,.11),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.floating-contact--whatsapp:hover,
.floating-contact--whatsapp:focus-visible {
  background: rgba(25, 105, 70, .31);
  border-color: rgba(87, 207, 145, .50);
  box-shadow:
    0 12px 30px rgba(0,0,0,.28),
    0 0 18px rgba(64,192,125,.10),
    inset 0 1px 0 rgba(255,255,255,.05);
}

@media (max-width: 720px) {
  .floating-contact-dock {
    right: max(13px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    gap: 9px;
  }

  .floating-contact {
    width: 46px;
    height: 46px;
    background: rgba(7, 18, 31, .52);
  }

  .floating-contact svg {
    width: 20px;
    height: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-contact {
    transition: none !important;
  }

  .floating-contact:hover,
  .floating-contact:focus-visible {
    transform: none !important;
  }
}

@media print {
  .floating-contact-dock {
    display: none !important;
  }
}


/* =========================================================
   V84 · Proyectos + idioma + accesibilidad + utilidades
   ========================================================= */
body[data-page="proyectos"] {
  --primary: #0f9fa5;
  --primary-2: #08747a;
  --accent: #63d5d7;
  --accent-soft: rgba(15,159,165,.12);
  --line-strong: rgba(15,159,165,.34);
}

/* Skip link accesible */
.skip-link {
  position: fixed;
  left: 16px;
  top: 10px;
  z-index: 2000;
  padding: 9px 13px;
  border-radius: 10px;
  background: #e8f3fb;
  color: #07111f;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .16s ease;
}
.skip-link:focus { transform: translateY(0); }

/* Focus visible consistente */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 72%, #fff);
  outline-offset: 3px;
}

/* Selector ES / EN */
.language-switcher {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 9px;
  border: 1px solid rgba(151,187,218,.18);
  border-radius: 11px;
  background: rgba(12,27,44,.58);
  color: #c6d6e4;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .08em;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.language-switcher:hover { background: rgba(22,46,67,.75); border-color: rgba(116,190,219,.30); color:#fff; }
.nav-mobile-language { display:none; }
.language-icon { display:grid !important; place-items:center; font-size:8px !important; font-weight:900; letter-spacing:.03em; }

/* 8 apartados: menú hamburguesa algo antes para evitar compresión */
@media (max-width: 1220px) {
  .header-actions { display:none !important; }
  .header-inner { grid-template-columns:1fr auto !important; }
  .menu-toggle { display:block !important; }
  .main-nav.tech-command-nav {
    position:absolute !important;
    top:calc(100% + 8px) !important;
    left:14px !important;
    right:14px !important;
    display:none !important;
    padding:10px !important;
    border:1px solid var(--line) !important;
    border-radius:16px !important;
  }
  .main-nav.tech-command-nav.open { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .nav-mobile-language { display:flex !important; }
}
@media (max-width:720px) {
  .main-nav.tech-command-nav.open { grid-template-columns:1fr !important; }
}

/* Proyectos */
.project-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.project-card {
  position:relative;
  overflow:hidden;
  padding:25px;
  border:1px solid rgba(83,139,173,.18);
  border-radius:24px;
  background:linear-gradient(150deg,rgba(11,27,45,.93),rgba(7,18,31,.90));
  box-shadow:0 18px 42px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.025);
}
.project-card::before { content:""; position:absolute; inset:0 auto 0 0; width:2px; background:linear-gradient(180deg,var(--primary),transparent 86%); }
.project-card--featured { border-color:color-mix(in srgb,var(--primary) 30%,transparent); }
.project-card-top { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.project-number { color:var(--primary); font-size:12px; font-weight:850; letter-spacing:.10em; }
.project-status { padding:6px 9px; border:1px solid color-mix(in srgb,var(--primary) 22%,transparent); border-radius:999px; background:color-mix(in srgb,var(--primary) 9%,transparent); color:color-mix(in srgb,var(--primary) 72%,#fff); font-size:9.5px; font-weight:800; }
.project-context { margin:18px 0 5px; color:var(--primary); font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.project-card h2 { margin:0 0 10px; font-size:22px; line-height:1.18; letter-spacing:-.025em; }
.project-card > p:not(.project-context) { margin:0; color:#aab9c8; font-size:13.5px; line-height:1.65; }
.project-section { margin-top:18px; padding-top:16px; border-top:1px solid rgba(132,164,188,.10); }
.project-section strong { display:block; margin-bottom:9px; color:#dce8f2; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; }
.project-section ul { display:grid; gap:7px; margin:0; padding:0; list-style:none; }
.project-section li { position:relative; padding-left:16px; color:#a9b8c6; font-size:12.5px; line-height:1.52; }
.project-section li::before { content:""; position:absolute; left:0; top:.67em; width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.72; }
.project-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:17px; }
.project-tags span { padding:6px 8px; border:1px solid rgba(135,167,190,.14); border-radius:999px; background:rgba(15,31,50,.72); color:#afc0cf; font-size:9.8px; font-weight:680; }
.projects-cta { display:flex; justify-content:space-between; align-items:center; gap:22px; margin-top:20px; padding:24px 26px; border:1px solid rgba(92,142,175,.16); border-radius:22px; background:rgba(9,23,39,.72); }
.projects-cta h2 { margin:4px 0 5px; font-size:20px; }
.projects-cta p:last-child { margin:0; color:var(--muted); font-size:12.5px; }
.projects-cta-actions { display:flex; gap:9px; flex:0 0 auto; }
@media(max-width:820px){ .project-grid{grid-template-columns:1fr;} .projects-cta{display:grid;} .projects-cta-actions{flex-wrap:wrap;} }

/* Contacto: vCard + copiar enlace */
.contact-utility-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px; }
.contact-utility {
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid rgba(148,176,199,.16);
  border-radius:12px;
  background:rgba(12,27,44,.58);
  color:#c2d0dc;
  font-size:10.8px;
  font-weight:750;
  text-decoration:none;
  cursor:pointer;
}
button.contact-utility { font-family:inherit; }
.contact-utility:hover { border-color:color-mix(in srgb,var(--primary) 32%,transparent); background:rgba(18,39,58,.74); color:#fff; }
.contact-utility-icon { display:grid; place-items:center; width:20px; height:20px; border-radius:7px; background:color-mix(in srgb,var(--primary) 10%,transparent); color:var(--primary); font-size:12px; font-weight:850; }
.contact-utility.is-copied { border-color:rgba(69,190,145,.32); color:#bcebd8; }

/* Bug móvil: al cerrar +Info la tarjeta debe recuperar inmediatamente su altura natural */
@media(max-width:820px){
  body.experiencia-page details.timeline-disclosure { align-self:start !important; height:auto !important; min-height:0 !important; max-height:none !important; }
  body.experiencia-page details.timeline-disclosure:not([open]) { height:auto !important; min-height:0 !important; max-height:none !important; }
  body.experiencia-page details.timeline-disclosure:not([open]) > .timeline-details { display:none !important; }
  body.experiencia-page details.timeline-disclosure:not([open]) > .timeline-summary { margin:0 !important; }
}

@media(prefers-reduced-motion:reduce){ .skip-link,.language-switcher,.contact-utility{transition:none !important;} }


/* =========================================================
   V85 · Experiencia móvil: cierre real de +Info en WebKit
   ========================================================= */
@media (max-width: 820px) {
  body.experiencia-page .timeline-item {
    align-items: start !important;
    grid-auto-rows: max-content !important;
  }

  body.experiencia-page details.timeline-disclosure {
    display: block !important;
    align-self: start !important;
    block-size: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body.experiencia-page details.timeline-disclosure:not([open]) {
    block-size: fit-content !important;
    height: fit-content !important;
    min-height: 0 !important;
    max-height: fit-content !important;
    overflow: hidden !important;
  }

  body.experiencia-page details.timeline-disclosure:not([open]) > .timeline-details {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  body.experiencia-page details.timeline-disclosure:not([open]) > .timeline-summary {
    margin: 0 !important;
  }
}


/* =========================================================
   V86 · Menú limpio + interruptor ES/EN + contacto premium
   ========================================================= */

.language-switcher,
.nav-mobile-language {
  display: none !important;
}

/* Idioma fuera del menú: interruptor flotante fijo. */
.floating-language-control {
  position: fixed;
  top: max(132px, calc(env(safe-area-inset-top) + 116px));
  right: max(18px, env(safe-area-inset-right));
  z-index: 940;
  pointer-events: none;
}

.language-toggle-pill {
  display: block;
  width: 82px;
  height: 38px;
  padding: 3px;
  border: 1px solid rgba(143, 177, 202, .20);
  border-radius: 999px;
  background: rgba(7, 18, 31, .56);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
  box-shadow:
    0 12px 30px rgba(0,0,0,.23),
    inset 0 1px 0 rgba(255,255,255,.035);
  text-decoration: none;
  pointer-events: auto;
  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.language-toggle-track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-items: center;
}

.language-toggle-knob {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 30px;
  border: 1px solid rgba(112, 201, 226, .24);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(24, 77, 101, .92), rgba(15, 50, 72, .92));
  box-shadow:
    0 6px 14px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .22s cubic-bezier(.22,.72,.28,1);
}

.language-toggle-pill.is-en .language-toggle-knob {
  transform: translateX(38px);
}

.language-toggle-option {
  position: relative;
  z-index: 1;
  color: rgba(175, 193, 207, .58);
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: .06em;
  transition: color .18s ease;
}

.language-toggle-pill.is-es .language-toggle-option--es,
.language-toggle-pill.is-en .language-toggle-option--en {
  color: #e5f5fb;
}

.language-toggle-pill:hover,
.language-toggle-pill:focus-visible {
  border-color: rgba(109, 193, 219, .34);
  background: rgba(9, 24, 40, .72);
  outline: none;
  box-shadow:
    0 14px 34px rgba(0,0,0,.27),
    0 0 18px rgba(69, 166, 201, .08),
    inset 0 1px 0 rgba(255,255,255,.04);
}

/* Contacto: herramientas compactas, con jerarquía de interfaz profesional. */
.contact-professional-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 15px;
  margin-bottom: 18px;
}

.contact-tool {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  min-height: 46px;
  padding: 7px 13px 7px 8px;
  border: 1px solid rgba(135, 168, 192, .16);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(12, 28, 46, .70), rgba(8, 20, 35, .66));
  color: #c9d6e1;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 8px 20px rgba(0,0,0,.10);
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.contact-tool-icon {
  display: grid;
  place-items: center;
  flex: 0 0 31px;
  width: 31px;
  height: 31px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 8%, rgba(8,20,34,.80));
  color: color-mix(in srgb, var(--primary) 72%, #fff);
}

.contact-tool-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-tool-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.contact-tool-copy strong {
  color: #dbe6ee;
  font-size: 10.7px;
  font-weight: 780;
  white-space: nowrap;
}

.contact-tool-copy small {
  color: #75889a;
  font-size: 8.9px;
  font-weight: 650;
  letter-spacing: .02em;
}

.contact-tool:hover,
.contact-tool:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 29%, transparent);
  background: linear-gradient(180deg, rgba(16, 37, 58, .82), rgba(10, 25, 42, .76));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 11px 26px rgba(0,0,0,.15);
  outline: none;
}

.contact-tool.is-copied {
  border-color: rgba(72, 192, 146, .30);
}

.contact-tool.is-copied .contact-tool-icon {
  border-color: rgba(72, 192, 146, .26);
  background: rgba(41, 129, 95, .14);
  color: #8ce0bd;
}

.contact-tool.is-copied .contact-tool-copy strong {
  color: #bcebd8;
}

/* Neutraliza el formato anterior, ya no utilizado. */
.contact-utility-actions {
  display: none !important;
}

@media (max-width: 1220px) {
  .floating-language-control {
    top: max(94px, calc(env(safe-area-inset-top) + 78px));
    right: max(14px, env(safe-area-inset-right));
  }
}

@media (max-width: 720px) {
  .floating-language-control {
    top: max(82px, calc(env(safe-area-inset-top) + 70px));
    right: max(12px, env(safe-area-inset-right));
  }

  .language-toggle-pill {
    width: 76px;
    height: 36px;
  }

  .language-toggle-knob {
    width: 33px;
    height: 28px;
  }

  .language-toggle-pill.is-en .language-toggle-knob {
    transform: translateX(35px);
  }

  .contact-professional-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 13px;
    margin-bottom: 16px;
  }

  .contact-tool {
    width: 100%;
    padding-right: 9px;
  }

  .contact-tool-copy strong {
    font-size: 10.2px;
  }

  .contact-tool-copy small {
    font-size: 8.5px;
  }
}

@media (max-width: 430px) {
  .contact-professional-tools {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .language-toggle-knob,
  .language-toggle-pill,
  .contact-tool {
    transition: none !important;
  }

  .contact-tool:hover,
  .contact-tool:focus-visible {
    transform: none !important;
  }
}

@media print {
  .floating-language-control,
  .contact-professional-tools {
    display: none !important;
  }
}


/* =========================================================
   V87 · Experiencia móvil estable · sin bug de <details>
   ========================================================= */

/* El summary ahora es un botón real y accesible. */
body.experiencia-page .timeline-summary {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  appearance: none;
  -webkit-appearance: none;
}

body.experiencia-page .timeline-details[hidden] {
  display: none !important;
}

/* Estados del botón +Info / −Cerrar */
body.experiencia-page .timeline-disclosure.is-open .timeline-more::before {
  content: "−";
  color: #cce6ff;
}

body.experiencia-page .timeline-disclosure.is-open .timeline-more-label--closed {
  display: none !important;
}

body.experiencia-page .timeline-disclosure.is-open .timeline-more-label--open {
  display: inline !important;
}

body.experiencia-page .timeline-disclosure:not(.is-open) .timeline-more-label--open {
  display: none !important;
}

body.experiencia-page .timeline-disclosure:not(.is-open) .timeline-more-label--closed {
  display: inline !important;
}

/* En móvil el rail NO participa en el cálculo de altura.
   El height:100% anterior provocaba el tamaño residual en WebKit/iPhone. */
@media (max-width: 820px) {
  body.experiencia-page .timeline-item {
    align-items: start !important;
    grid-template-rows: max-content max-content !important;
    grid-auto-rows: max-content !important;
    min-height: 0 !important;
    height: auto !important;
  }

  body.experiencia-page .timeline-rail {
    align-self: start !important;
    min-height: 0 !important;
    height: 34px !important;
    max-height: 34px !important;
  }

  body.experiencia-page .timeline-disclosure {
    display: block !important;
    align-self: start !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  body.experiencia-page .timeline-disclosure:not(.is-open) {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  body.experiencia-page .timeline-disclosure:not(.is-open) .timeline-details {
    display: none !important;
  }
}


/* =========================================================
   V88 · Selector ES/EN arriba a la derecha
   ========================================================= */

/* Escritorio: alineado con la cabecera, fuera del menú */
@media (min-width: 1221px) {
  .floating-language-control {
    top: 18px !important;
    right: max(18px, env(safe-area-inset-right)) !important;
    z-index: 1100 !important;
  }
}

/* Tablet/móvil: permanece arriba a la derecha sin tapar el botón hamburguesa */
@media (max-width: 1220px) {
  .floating-language-control {
    top: max(88px, calc(env(safe-area-inset-top) + 76px)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    z-index: 1100 !important;
  }
}

@media (max-width: 720px) {
  .floating-language-control {
    top: max(80px, calc(env(safe-area-inset-top) + 70px)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
  }
}


/* =========================================================
   V89 FINAL · UI polish, recruiter mode, project evidence
   ========================================================= */

/* Garantía adicional. La regla inline de cada HTML prevalece ante caché antigua. */
@media (min-width: 1221px) {
  html body .floating-language-control {
    top: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 2000 !important;
  }
}

/* ---------------------------------------------------------
   Microinteracciones muy sutiles
   --------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .project-card,
  .skill-card,
  .education-card,
  .profile-operational-card,
  .profile-summary-card,
  .letter-card,
  .info-panel,
  .hero-card,
  .contact-info-panel,
  .contact-form-panel,
  .timeline-card {
    transition:
      transform .18s ease,
      border-color .18s ease,
      background .18s ease,
      box-shadow .18s ease;
  }

  .project-card:hover,
  .skill-card:hover,
  .education-card:hover,
  .profile-operational-card:hover,
  .letter-card:hover,
  .info-panel:hover,
  .hero-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary) 24%, rgba(134,166,191,.14));
    box-shadow:
      0 18px 42px rgba(0,0,0,.16),
      inset 0 1px 0 rgba(255,255,255,.025);
  }

  body.experiencia-page .timeline-card:hover {
    transform: translateY(-1px);
  }

  .floating-contact:hover,
  .language-toggle-pill:hover,
  .recruiter-trigger:hover {
    will-change: transform;
  }
}

/* ---------------------------------------------------------
   Recruiter mode
   --------------------------------------------------------- */
.recruiter-trigger {
  position: fixed;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 930;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 7px 13px 7px 8px;
  border: 1px solid rgba(126, 165, 192, .22);
  border-radius: 999px;
  background: rgba(7, 18, 31, .58);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
  color: #cfdae5;
  font: inherit;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow:
    0 12px 28px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.035);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.recruiter-trigger-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 10%, rgba(8,22,37,.82));
  color: color-mix(in srgb, var(--primary) 70%, white);
}

.recruiter-trigger-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.recruiter-trigger:hover,
.recruiter-trigger:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 34%, transparent);
  background: rgba(10, 28, 46, .76);
  outline: none;
}

.recruiter-dialog {
  width: min(760px, calc(100vw - 28px));
  max-height: min(86dvh, 760px);
  padding: 0;
  border: 1px solid rgba(127, 173, 203, .22);
  border-radius: 26px;
  background: rgba(6, 16, 29, .96);
  color: #dce7ef;
  box-shadow: 0 36px 110px rgba(0,0,0,.52);
  overflow: auto;
}

.recruiter-dialog::backdrop {
  background: rgba(1, 8, 16, .66);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.recruiter-dialog-shell {
  position: relative;
  padding: clamp(24px, 4vw, 38px);
  background:
    radial-gradient(circle at 86% 0%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 31%),
    linear-gradient(145deg, rgba(11,28,47,.93), rgba(6,16,29,.96));
}

.recruiter-close {
  position: absolute;
  top: 15px;
  right: 15px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(152,177,196,.17);
  border-radius: 50%;
  background: rgba(7,18,30,.66);
  color: #9fb0c0;
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}

.recruiter-close:hover,
.recruiter-close:focus-visible {
  color: #eef7fb;
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
  outline: none;
}

.recruiter-kicker {
  margin: 0 0 10px;
  color: var(--primary);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.recruiter-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  padding-right: 34px;
}

.recruiter-head h2 {
  margin: 0;
  font-size: clamp(25px, 4vw, 37px);
  letter-spacing: -.04em;
}

.recruiter-head p {
  margin: 7px 0 0;
  color: #97a9ba;
  font-size: 13px;
}

.recruiter-availability {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #8fd7b2;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.recruiter-availability i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #43cf8a;
  box-shadow: 0 0 10px rgba(67,207,138,.28);
}

.recruiter-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 23px;
}

.recruiter-facts article {
  padding: 14px;
  border: 1px solid rgba(126,161,187,.13);
  border-radius: 16px;
  background: rgba(8,21,36,.62);
}

.recruiter-facts strong,
.recruiter-facts span {
  display: block;
}

.recruiter-facts strong {
  color: #e6f0f7;
  font-size: 14px;
}

.recruiter-facts span {
  margin-top: 4px;
  color: #8295a7;
  font-size: 9.5px;
  line-height: 1.45;
}

.recruiter-section {
  margin-top: 22px;
}

.recruiter-section h3 {
  margin: 0 0 9px;
  color: #b9c9d6;
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.recruiter-section p {
  margin: 0;
  color: #98aaba;
  font-size: 11.5px;
  line-height: 1.65;
}

.recruiter-section a {
  color: #bfe7f6;
}

.recruiter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.recruiter-chips span {
  padding: 6px 8px;
  border: 1px solid rgba(113,158,187,.12);
  border-radius: 999px;
  background: rgba(13,31,49,.60);
  color: #9fb3c3;
  font-size: 9.3px;
  font-weight: 720;
}

.recruiter-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.recruiter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 23px;
  padding-top: 18px;
  border-top: 1px solid rgba(127,163,189,.11);
}

body.recruiter-open {
  overflow: hidden;
}

/* ---------------------------------------------------------
   Project evidence
   --------------------------------------------------------- */
.project-evidence-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 8px 11px 8px 8px;
  border: 1px solid rgba(121,164,194,.16);
  border-radius: 999px;
  background: rgba(8,22,38,.60);
  color: #a9bdcb;
  font: inherit;
  font-size: 9.8px;
  font-weight: 780;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

.project-evidence-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 10%, rgba(8,20,34,.8));
  color: color-mix(in srgb, var(--primary) 74%, white);
  font-size: 13px;
  font-weight: 900;
}

.project-evidence-toggle:hover,
.project-evidence-toggle:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  background: rgba(12,31,50,.75);
  color: #d5e5ee;
  outline: none;
}

.project-evidence-label--open {
  display: none;
}

.project-evidence-toggle.is-open .project-evidence-label--closed {
  display: none;
}

.project-evidence-toggle.is-open .project-evidence-label--open {
  display: inline;
}

.project-evidence {
  margin-top: 14px;
  padding: 15px;
  border: 1px solid rgba(116,158,185,.12);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(7,20,35,.76), rgba(6,17,30,.58));
}

.project-evidence[hidden] {
  display: none !important;
}

.project-evidence-title {
  margin: 0 0 11px !important;
  color: #c5d4df !important;
  font-size: 9.6px !important;
  font-weight: 850 !important;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.project-flow {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  padding: 2px 1px 7px;
  scrollbar-width: thin;
}

.project-flow-node {
  flex: 0 0 auto;
  padding: 7px 9px;
  border: 1px solid rgba(91,157,192,.16);
  border-radius: 10px;
  background: rgba(11,29,47,.75);
  color: #a8bdcb;
  font-size: 9.1px;
  font-weight: 730;
  white-space: nowrap;
}

.project-flow-arrow {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--primary) 58%, #6f8495);
  font-size: 13px;
}

.project-evidence-note {
  margin: 8px 0 0 !important;
  color: #8296a8 !important;
  font-size: 10.5px !important;
  line-height: 1.55 !important;
}

.project-architecture-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
}

.project-architecture-stack span {
  padding: 5px 7px;
  border-radius: 8px;
  background: rgba(52,134,164,.08);
  color: #7eb5c8;
  font-size: 8.8px;
  font-weight: 750;
}

/* ---------------------------------------------------------
   Responsive refinements
   --------------------------------------------------------- */
@media (max-width: 720px) {
  .recruiter-trigger {
    left: max(12px, env(safe-area-inset-left));
    bottom: max(14px, env(safe-area-inset-bottom));
    min-height: 42px;
    padding-right: 11px;
  }

  .recruiter-dialog {
    width: calc(100vw - 20px);
    max-height: 88dvh;
    border-radius: 21px;
  }

  .recruiter-head {
    display: grid;
    gap: 11px;
  }

  .recruiter-facts {
    grid-template-columns: 1fr;
  }

  .recruiter-two-col {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .project-evidence {
    padding: 13px;
  }
}

@media (max-width: 420px) {
  .recruiter-trigger > span:last-child {
    display: none;
  }

  .recruiter-trigger {
    width: 46px;
    height: 46px;
    padding: 0;
    justify-content: center;
  }

  .recruiter-trigger-icon {
    width: 30px;
    height: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .recruiter-trigger,
  .project-evidence-toggle,
  .project-card,
  .skill-card,
  .education-card,
  .profile-operational-card,
  .profile-summary-card,
  .letter-card,
  .info-panel,
  .hero-card,
  .timeline-card {
    transition: none !important;
    transform: none !important;
  }
}

@media print {
  .recruiter-trigger,
  .recruiter-dialog {
    display: none !important;
  }
}


/* =========================================================
   V90 · Cabecera final: alineación y comportamiento estable
   ========================================================= */

/* Escritorio ancho: más espacio real para 8 apartados + CV PDF. */
@media (min-width: 1381px) {
  .site-header {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .header-inner {
    width: min(100%, 1540px) !important;
    grid-template-columns: minmax(230px, 255px) minmax(0, 1fr) auto !important;
    gap: 12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .tech-command-nav {
    width: 100% !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 5px !important;
  }

  .tech-command-nav a {
    height: 44px !important;
    grid-template-columns: 17px auto !important;
    column-gap: 6px !important;
    padding-left: clamp(7px, .52vw, 10px) !important;
    padding-right: clamp(7px, .52vw, 10px) !important;
  }

  .tech-command-nav .nav-label {
    font-size: 10.8px !important;
  }

  .pdf-action {
    min-height: 48px !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
  }
}

/* Portátiles / escritorio estrecho:
   evita comprimir o sacar elementos fuera de la cabecera. */
@media (min-width: 1041px) and (max-width: 1380px) {
  .header-actions {
    display: none !important;
  }

  .header-inner {
    width: min(calc(100% - 12px), 1240px) !important;
    grid-template-columns: 1fr auto !important;
    gap: 10px !important;
  }

  .menu-toggle {
    display: block !important;
    position: relative;
    z-index: 4;
  }

  .main-nav.tech-command-nav {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 14px !important;
    right: 14px !important;
    display: none !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    padding: 10px !important;
    border-radius: 18px !important;
    background: rgba(5,14,26,.96) !important;
    -webkit-backdrop-filter: blur(26px) saturate(130%) !important;
    backdrop-filter: blur(26px) saturate(130%) !important;
    box-shadow: 0 24px 58px rgba(0,0,0,.46) !important;
  }

  .main-nav.tech-command-nav.open {
    display: grid !important;
  }

  .main-nav.tech-command-nav a {
    height: 46px !important;
    grid-template-columns: 18px auto !important;
    justify-content: start !important;
  }
}

/* El botón CV sigue accesible desde móvil/portátil mediante el menú:
   se añade por CSS un tratamiento compacto al enlace que se inserta en HTML. */
.nav-cv-mobile {
  display: none;
}

@media (max-width: 1380px) {
  .nav-cv-mobile {
    display: flex !important;
  }
}


/* =========================================================
   V90 · Privacidad
   ========================================================= */
.privacy-main {
  width: min(calc(100% - 28px), var(--max));
  margin-left: auto;
  margin-right: auto;
}

.privacy-card {
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(125,165,193,.16);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(10,26,44,.84), rgba(6,17,30,.80));
  box-shadow: 0 24px 64px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.025);
}

.privacy-card h1 {
  margin: 6px 0 10px;
  font-size: clamp(28px, 5vw, 46px);
  letter-spacing: -.045em;
}

.privacy-lead {
  max-width: 820px;
  color: #9eb0bf;
  line-height: 1.72;
}

.privacy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 26px;
}

.privacy-grid article {
  padding: 18px;
  border: 1px solid rgba(127,163,188,.12);
  border-radius: 17px;
  background: rgba(7,20,34,.52);
}

.privacy-grid h2 {
  margin: 0 0 8px;
  color: #d7e4ed;
  font-size: 13px;
}

.privacy-grid p,
.privacy-note {
  margin: 0;
  color: #899dae;
  font-size: 11.5px;
  line-height: 1.65;
}

.privacy-grid a {
  color: #b9e8f6;
}

.privacy-note {
  margin-top: 20px;
}

.footer-privacy {
  color: #7f93a5;
  font-size: 10px;
  text-decoration: none;
}

.footer-privacy:hover {
  color: #c5d8e5;
}

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

  .privacy-main {
    width: min(calc(100% - 20px), var(--max));
  }
}


/* =========================================================
   V91 FINAL · Cabecera más compacta + idioma en carril propio
   ========================================================= */

/* El duplicado gris no existe ya en HTML; garantía defensiva. */
.nav-cv-mobile {
  display: none !important;
}

/* Escritorio: menos "burbuja vacía", navegación más compacta. */
@media (min-width: 1241px) {
  .site-header .header-inner {
    box-shadow:
      0 14px 38px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.028) !important;
  }

  .site-header .brand {
    gap: 9px !important;
  }

  .site-header .brand-mark.brand-mark-image {
    width: 52px !important;
    height: 52px !important;
    flex-basis: 52px !important;
    border-radius: 15px !important;
  }

  .site-header .brand-copy strong {
    font-size: 12.5px !important;
  }

  .site-header .brand-copy small {
    font-size: 8.4px !important;
  }

  .site-header .tech-command-nav {
    width: auto !important;
    min-width: 0 !important;
    justify-content: center !important;
    gap: 1px !important;
    padding: 4px !important;
    border-radius: 17px !important;
  }

  .site-header .tech-command-nav a {
    height: 40px !important;
    min-height: 40px !important;
    grid-template-columns: 16px auto !important;
    column-gap: 5px !important;
    padding: 0 clamp(6px, .48vw, 9px) !important;
    border-radius: 12px !important;
  }

  .site-header .tech-command-nav .nav-icon {
    width: 15px !important;
    height: 15px !important;
  }

  .site-header .tech-command-nav .nav-label {
    font-size: 10.2px !important;
  }

  body[data-page] .site-header .pdf-action {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 12px !important;
    border-radius: 15px !important;
  }

  body[data-page] .site-header .pdf-action .pdf-icon {
    width: 15px !important;
    height: 15px !important;
  }

  /* Switch más pequeño para acompañar a la cabecera, sin competir con ella. */
  .language-toggle-pill {
    width: 76px !important;
    height: 36px !important;
  }

  .language-toggle-knob {
    width: 33px !important;
    height: 28px !important;
  }

  .language-toggle-pill.is-en .language-toggle-knob {
    transform: translateX(35px) !important;
  }
}

/* Portátil: menú plegable antes de que se comprima. */
@media (min-width: 1041px) and (max-width: 1240px) {
  .main-nav.tech-command-nav {
    padding: 9px !important;
    gap: 7px !important;
    border-radius: 17px !important;
    background: rgba(6,16,29,.98) !important;
    box-shadow: 0 24px 58px rgba(0,0,0,.46) !important;
  }

  .main-nav.tech-command-nav a {
    height: 46px !important;
    justify-content: start !important;
  }

  .nav-mobile-pdf {
    display: grid !important;
  }
}


/* =========================================================
   V92 FINAL · Cabecera perfectamente centrada
   ========================================================= */
@media (min-width: 1481px) {
  .site-header .header-inner {
    grid-template-columns: 235px minmax(0, 1fr) 235px !important;
  }

  .site-header .brand {
    justify-self: start !important;
  }

  .site-header .tech-command-nav {
    justify-self: stretch !important;
  }

  .site-header .header-actions {
    justify-self: stretch !important;
    justify-content: flex-end !important;
  }
}


/* =========================================================
   V93 FINAL · Ajustes de experiencia + cabecera equilibrada
   ========================================================= */
body.experiencia-page .timeline-summary h3 {
  margin: 0 0 6px !important;
  color: #f3f8fe !important;
  letter-spacing: -0.02em;
}

body.experiencia-page .timeline-summary .company.role-text {
  margin: 0 !important;
  color: rgba(211, 227, 241, 0.76) !important;
  font-weight: 600 !important;
  font-size: 0.98rem !important;
}

body.experiencia-page .timeline-summary .timeline-top > div {
  min-width: 0;
}

/* Mismos ajustes en versión EN */
body[data-page="experience"] .timeline-summary h3,
body[data-page="experiencia-en"] .timeline-summary h3 {
  margin: 0 0 6px !important;
  color: #f3f8fe !important;
  letter-spacing: -0.02em;
}

body[data-page="experience"] .timeline-summary .company.role-text,
body[data-page="experiencia-en"] .timeline-summary .company.role-text {
  margin: 0 !important;
  color: rgba(211, 227, 241, 0.76) !important;
  font-weight: 600 !important;
  font-size: 0.98rem !important;
}

@media (min-width: 1281px) {
  .site-header {
    width: 100%;
  }

  .site-header .header-inner {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* =========================================================
   V94 · Pulido visual final
   ========================================================= */

:root {
  --ui-radius-lg: 22px;
  --ui-radius-md: 16px;
  --ui-border: rgba(137, 169, 194, .15);
  --ui-border-hover: rgba(111, 181, 211, .24);
  --ui-shadow: 0 16px 42px rgba(0,0,0,.17);
  --ui-shadow-hover: 0 20px 48px rgba(0,0,0,.21);
}

/* Header: más ligero y proporcionado */
@media (min-width: 1321px) {
  .site-header .header-inner {
    min-height: 62px !important;
    border-radius: 20px !important;
    border-color: rgba(137,169,194,.16) !important;
    background: linear-gradient(180deg, rgba(8,20,35,.87), rgba(6,16,29,.82)) !important;
    box-shadow: 0 14px 38px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.025) !important;
  }
  .site-header .brand { gap: 9px !important; }
  .site-header .brand-mark.brand-mark-image { width:50px !important; height:50px !important; flex-basis:50px !important; border-radius:14px !important; }
  .site-header .brand-copy strong { font-size:12.6px !important; letter-spacing:-.015em; }
  .site-header .brand-copy small { font-size:8.25px !important; letter-spacing:.08em; }
  .site-header .tech-command-nav { padding:4px !important; gap:1px !important; border-radius:16px !important; background:rgba(8,21,35,.50) !important; }
  .site-header .tech-command-nav a { height:40px !important; min-height:40px !important; padding:0 clamp(6px,.46vw,9px) !important; border-radius:11px !important; }
  .site-header .tech-command-nav .nav-label { font-size:10.15px !important; }
  body[data-page] .site-header .pdf-action { min-height:44px !important; height:44px !important; border-radius:14px !important; padding:0 13px !important; }
}

/* Switch idioma: más discreto */
.language-toggle-pill {
  width:70px !important;
  height:33px !important;
  padding:3px !important;
  border-color:rgba(132,168,192,.18) !important;
  background:rgba(7,18,31,.62) !important;
  box-shadow:0 9px 24px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.language-toggle-knob { width:30px !important; height:25px !important; }
.language-toggle-pill.is-en .language-toggle-knob { transform:translateX(34px) !important; }
.language-toggle-option { font-size:8.8px !important; }

/* Ritmo tipográfico */
.page-heading { margin-bottom:24px !important; }
.page-heading h1 { letter-spacing:-.045em !important; line-height:1.03 !important; }
.page-heading > div > p:last-child { color:#8fa2b3 !important; line-height:1.62 !important; }
.eyebrow, .page-heading .eyebrow { letter-spacing:.13em !important; }

/* Sistema de tarjetas coherente */
.hero-copy, .hero-card, .info-panel, .timeline-card, .skill-card, .education-card,
.letter-card, .letter-highlight, .contact-info-panel, .contact-form-panel,
.exp-stat, .project-card, .profile-summary-card, .profile-operational-card,
.privacy-card, .not-found-card {
  border-radius:var(--ui-radius-lg) !important;
  border-color:var(--ui-border) !important;
  box-shadow:var(--ui-shadow), inset 0 1px 0 rgba(255,255,255,.018) !important;
}

/* Menos brillo y más profundidad, conservando el color de cada sección */
.skill-list span, .tags span, .profile-tech-chips span, .recruiter-chips span, .project-architecture-stack span {
  box-shadow:none !important;
}

@media (hover:hover) and (pointer:fine) {
  .hero-copy:hover, .hero-card:hover, .info-panel:hover, .timeline-card:hover, .skill-card:hover,
  .education-card:hover, .letter-card:hover, .letter-highlight:hover, .project-card:hover,
  .profile-operational-card:hover, .privacy-grid article:hover {
    transform:translateY(-1px) !important;
    border-color:var(--ui-border-hover) !important;
    box-shadow:var(--ui-shadow-hover), inset 0 1px 0 rgba(255,255,255,.025) !important;
  }
}

/* Experiencia */
body.experiencia-page .timeline-summary { padding:19px 21px !important; }
body.experiencia-page .timeline-summary h3 { font-size:18.5px !important; line-height:1.25 !important; }
body.experiencia-page .timeline-summary .company.role-text { margin-top:1px !important; font-size:12.8px !important; color:rgba(200,217,230,.70) !important; }
body.experiencia-page .timeline-more { min-height:34px !important; padding:6px 11px 6px 8px !important; background:rgba(9,25,42,.66) !important; border-color:rgba(107,166,201,.18) !important; box-shadow:none !important; }
body.experiencia-page .timeline-more::before { width:18px !important; height:18px !important; font-size:12px !important; }

/* Botones y utilidades */
.btn, .contact-tool, .project-evidence-toggle, .recruiter-trigger, .floating-contact {
  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease !important;
}
.contact-tool { border-radius:13px !important; }
.project-evidence-toggle { box-shadow:none !important; }

/* Elementos flotantes más discretos */
.floating-contact { width:47px !important; height:47px !important; background:rgba(7,18,31,.48) !important; box-shadow:0 9px 24px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.025) !important; }
.floating-contact svg { width:20px !important; height:20px !important; }
.recruiter-trigger { min-height:42px !important; padding-top:6px !important; padding-bottom:6px !important; background:rgba(7,18,31,.50) !important; box-shadow:0 9px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.025) !important; }

/* Footer más limpio */
.page-footer, .home-footer { color:#718698 !important; }
.page-footer a, .home-footer a { transition:color .16s ease !important; }

/* Focus coherente */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline:2px solid color-mix(in srgb, var(--primary) 72%, white) !important;
  outline-offset:3px !important;
}

/* Mobile: misma estética, menos densidad */
@media (max-width:720px) {
  .site-header { padding:8px 9px 0 !important; }
  .header-inner { min-height:62px !important; padding:7px 8px 7px 9px !important; border-radius:17px !important; }
  .brand-mark.brand-mark-image { width:46px !important; height:46px !important; flex-basis:46px !important; }
  .brand-copy strong { font-size:13px !important; }
  .menu-toggle { width:44px !important; height:44px !important; border-radius:12px !important; }
  .floating-language-control { top:max(78px, calc(env(safe-area-inset-top) + 68px)) !important; right:max(10px,env(safe-area-inset-right)) !important; }
  .language-toggle-pill { width:68px !important; height:32px !important; }
  .language-toggle-knob { width:29px !important; height:24px !important; }
  .language-toggle-pill.is-en .language-toggle-knob { transform:translateX(33px) !important; }
  .page-main, .home-main, .page-footer, .home-footer { width:min(calc(100% - 20px), var(--max)) !important; }
  .page-main { padding-top:22px !important; }
  .hero-copy, .info-panel, .skill-card, .education-card, .letter-card, .letter-highlight,
  .contact-info-panel, .contact-form-panel, .exp-stat, .project-card, .profile-summary-card, .privacy-card {
    border-radius:19px !important;
  }
  body.experiencia-page .timeline-summary { padding:17px 16px !important; }
  body.experiencia-page .timeline-summary h3 { font-size:17px !important; }
  body.experiencia-page .timeline-summary .company.role-text { font-size:12.2px !important; }
  .floating-contact { width:44px !important; height:44px !important; }
  .floating-contact svg { width:19px !important; height:19px !important; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; }
}


/* =========================================================
   V95 · Proyectos independientes + Formación desplegable
   ========================================================= */

/* Un proyecto abierto no modifica la altura visual del proyecto vecino. */
.project-grid {
  align-items: start !important;
  grid-auto-rows: max-content !important;
}

.project-card {
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
}

/* FP: resumen compacto + módulos desplegables */
body.formacion-page .formation-disclosure {
  padding: 0 !important;
}

body.formacion-page .formation-disclosure > .timeline-top {
  padding: 22px 24px;
}

body.formacion-page .formation-more {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 12px 7px 8px;
  border: 1px solid rgba(183,150,231,.22);
  border-radius: 999px;
  background: rgba(52,35,84,.20);
  color: #d9c5f2;
  font: inherit;
  font-size: 10.6px;
  font-weight: 780;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 8px 20px rgba(0,0,0,.10);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

body.formacion-page .formation-more-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(196,161,240,.20);
  border-radius: 50%;
  background: rgba(166,123,224,.10);
  color: #d4b9f3;
  font-size: 13px;
  font-weight: 900;
}

body.formacion-page .formation-more:hover,
body.formacion-page .formation-more:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(196,161,240,.38);
  background: rgba(73,48,115,.28);
  color: #f0e4ff;
  outline: none;
}

body.formacion-page .formation-more-label--open {
  display: none;
}

body.formacion-page .formation-disclosure.is-open .formation-more-label--closed {
  display: none;
}

body.formacion-page .formation-disclosure.is-open .formation-more-label--open {
  display: inline;
}

body.formacion-page .formation-details {
  padding: 0 24px 24px;
  border-top: 1px solid rgba(166,123,224,.11);
}

body.formacion-page .formation-details[hidden] {
  display: none !important;
}

body.formacion-page .formation-details-intro {
  margin: 17px 0 13px !important;
  color: #899bae !important;
  font-size: 11.4px !important;
  line-height: 1.55 !important;
}

body.formacion-page .formation-module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

body.formacion-page .formation-module-year {
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(164,132,212,.13);
  border-radius: 16px;
  background: rgba(18,22,38,.48);
}

body.formacion-page .formation-module-year h4 {
  margin: 0 0 11px;
  color: #d8c3f3;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

body.formacion-page .formation-module-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.formacion-page .formation-module-list li {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 8px;
  align-items: start;
  padding: 7px 0;
  border-bottom: 1px solid rgba(125,143,166,.08);
}

body.formacion-page .formation-module-list li:last-child {
  border-bottom: 0;
}

body.formacion-page .formation-module-code {
  color: #a786d2;
  font-size: 8.8px;
  font-weight: 850;
  letter-spacing: .04em;
}

body.formacion-page .formation-module-name {
  color: #aab8c7;
  font-size: 10.8px;
  line-height: 1.45;
}

@media (max-width:720px) {
  body.formacion-page .formation-disclosure > .timeline-top {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 13px !important;
    padding: 20px 18px !important;
  }

  body.formacion-page .formation-more {
    justify-self: end;
  }

  body.formacion-page .formation-details {
    padding: 0 18px 19px;
  }

  body.formacion-page .formation-module-grid {
    grid-template-columns: 1fr;
  }

  body.formacion-page .formation-module-year {
    padding: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.formacion-page .formation-more {
    transition: none !important;
    transform: none !important;
  }
}


/* =========================================================
   V96 · Formación refinada
   ========================================================= */

/* Universidad: badge + botón Info en el mismo bloque derecho. */
body.formacion-page .formation-summary-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex: 0 0 auto;
}

body.formacion-page .formation-details--university {
  padding-top: 18px;
}

body.formacion-page .formation-university-copy {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

body.formacion-page .formation-details--university .formation-tags {
  margin-top: 16px;
}

/* Listas técnicas: puntos limpios, sin códigos de referencia. */
body.formacion-page .formation-module-list--clean li {
  position: relative;
  display: block !important;
  padding: 7px 0 7px 16px !important;
  border-bottom: 1px solid rgba(125,143,166,.08);
}

body.formacion-page .formation-module-list--clean li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(184, 139, 235, .78);
  box-shadow: 0 0 8px rgba(184,139,235,.12);
}

body.formacion-page .formation-module-list--clean .formation-module-name {
  display: block;
}

body.formacion-page .formation-module-code {
  display: none !important;
}

@media (max-width: 720px) {
  body.formacion-page .formation-summary-actions {
    width: 100%;
    justify-content: space-between;
  }
}


/* =========================================================
   V99 · EXECUTIVE TECH
   Sobriedad corporativa + identidad tecnológica
   ========================================================= */

/* Paleta: mismos colores por sección, pero menos saturados y luminosos. */
body[data-page="inicio"] {
  --primary: #b94f68;
  --primary-2: #8e3e55;
  --accent: #d97990;
  --accent-soft: rgba(185,79,104,.09);
  --line-strong: rgba(185,79,104,.22);
}

body[data-page="perfil"] {
  --primary: #b86048;
  --primary-2: #8d4737;
  --accent: #cf806a;
  --accent-soft: rgba(184,96,72,.09);
  --line-strong: rgba(184,96,72,.22);
}

body[data-page="carta"] {
  --primary: #c2a442;
  --primary-2: #8f792f;
  --accent: #d3bd70;
  --accent-soft: rgba(194,164,66,.09);
  --line-strong: rgba(194,164,66,.22);
}

body[data-page="experiencia"] {
  --primary: #34865e;
  --primary-2: #296b4b;
  --accent: #69aa87;
  --accent-soft: rgba(52,134,94,.09);
  --line-strong: rgba(52,134,94,.22);
}

body[data-page="competencias"] {
  --primary: #377db2;
  --primary-2: #2b628c;
  --accent: #6ba4cb;
  --accent-soft: rgba(55,125,178,.09);
  --line-strong: rgba(55,125,178,.22);
}

body[data-page="proyectos"] {
  --primary: #378e92;
  --primary-2: #2b6d71;
  --accent: #6bafb1;
  --accent-soft: rgba(55,142,146,.09);
  --line-strong: rgba(55,142,146,.22);
}

body[data-page="formacion"] {
  --primary: #76579a;
  --primary-2: #5d4679;
  --accent: #9b82b8;
  --accent-soft: rgba(118,87,154,.09);
  --line-strong: rgba(118,87,154,.22);
}

body[data-page="contacto"] {
  --primary: #b45f84;
  --primary-2: #8c4967;
  --accent: #cf89a7;
  --accent-soft: rgba(180,95,132,.09);
  --line-strong: rgba(180,95,132,.22);
}

/* Fondo más discreto: sigue siendo tech, pero deja de competir con el contenido. */
body {
  background:
    radial-gradient(circle at 0 0, rgba(37,99,235,.10), transparent 34%),
    radial-gradient(circle at 100% 18%, rgba(34,211,238,.055), transparent 30%),
    linear-gradient(180deg, #07111f 0%, #091421 48%, #07111f 100%) !important;
}

.page-shell::before {
  opacity: .15 !important;
  filter: saturate(.72) blur(.1px) !important;
}

.page-shell::after {
  opacity: .22 !important;
  background-size: 42px 42px !important;
}

/* -----------------------------------------------------------------
   Header: más institucional y corrección Chrome / Edge
   ----------------------------------------------------------------- */
.header-inner {
  border: 1px solid rgba(137,158,177,.17) !important;
  background: rgba(7,17,30,.91) !important;
  -webkit-backdrop-filter: blur(22px) saturate(110%) !important;
  backdrop-filter: blur(22px) saturate(110%) !important;
  box-shadow:
    0 14px 38px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.022) !important;
}

/* Se eliminan las líneas pseudo-elemento del header.
   Chromium podía rasterizarlas como una línea horizontal fuera de la cápsula. */
.header-inner::after {
  content: none !important;
  display: none !important;
}

.header-inner::before {
  background:
    linear-gradient(90deg,
      rgba(79,112,140,.025),
      transparent 24%,
      transparent 76%,
      rgba(79,112,140,.025)
    ) !important;
}

/* Se elimina también el pseudo-elemento de subrayado de navegación.
   El estado activo pasa a un inset-shadow nativo, estable en Chromium/Firefox. */
.tech-command-nav a::after {
  content: none !important;
  display: none !important;
}

.tech-command-nav {
  border-color: rgba(131,154,175,.12) !important;
  background: rgba(8,19,32,.54) !important;
  box-shadow: none !important;
}

body[data-page] .main-nav a {
  color: #95a5b4 !important;
  font-weight: 690 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body[data-page] .main-nav a:hover {
  color: #dce6ee !important;
  background: rgba(122,151,174,.075) !important;
  border-color: rgba(132,159,180,.09) !important;
  transform: none !important;
  box-shadow: none !important;
}

body[data-page] .main-nav a.active {
  color: #f0f5f8 !important;
  background: color-mix(in srgb, var(--primary) 14%, rgba(12,27,43,.86)) !important;
  border-color: color-mix(in srgb, var(--primary) 25%, rgba(131,154,175,.10)) !important;
  box-shadow:
    inset 0 -2px 0 color-mix(in srgb, var(--primary) 75%, #c8d9e4 25%),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}

body[data-page] .main-nav a .nav-icon {
  filter: none !important;
  color: #7890a3 !important;
}

body[data-page] .main-nav a.active .nav-icon {
  color: color-mix(in srgb, var(--primary) 70%, #d9e8ef 30%) !important;
  filter: none !important;
}

/* Marca más sobria: el logo sigue siendo tecnológico, sin halo fuerte. */
body[data-page] .brand-mark.brand-mark-image {
  border-color: rgba(131,157,178,.17) !important;
  box-shadow:
    0 8px 22px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body[data-page] .brand-mark.brand-mark-image img {
  filter: none !important;
}

.brand-copy strong {
  color: #e4edf4 !important;
  font-weight: 720 !important;
}

.brand-copy small {
  color: #8294a5 !important;
  font-weight: 680 !important;
}

/* PDF sigue siendo el CTA destacado, pero menos brillante. */
body[data-page] .pdf-action {
  background: linear-gradient(180deg, #b92143, #971a38) !important;
  border-color: rgba(235,102,132,.30) !important;
  box-shadow:
    0 8px 22px rgba(81,9,29,.24),
    inset 0 1px 0 rgba(255,255,255,.075) !important;
}

/* Selector de idioma más institucional. */
.language-toggle-pill {
  border-color: rgba(130,153,172,.18) !important;
  background: rgba(7,17,29,.76) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.18) !important;
}

.language-toggle-knob {
  border-color: rgba(105,149,177,.20) !important;
  background: linear-gradient(180deg, #18384d, #112a3b) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.language-toggle-option {
  color: #708290 !important;
}

.language-toggle-pill.is-es .language-toggle-option--es,
.language-toggle-pill.is-en .language-toggle-option--en {
  color: #dce9ef !important;
}

/* -----------------------------------------------------------------
   Jerarquía editorial
   ----------------------------------------------------------------- */
.hero h1,
.page-heading h1 {
  font-weight: 700 !important;
  letter-spacing: -.045em !important;
}

.page-heading h1 {
  color: #e7eef4 !important;
}

.page-heading > div > p:not(.eyebrow),
.hero-copy > p,
.about-copy > p,
.letter-card p,
.contact-intro {
  color: #94a4b3 !important;
}

.eyebrow,
.page-heading .eyebrow {
  letter-spacing: .105em !important;
  font-weight: 780 !important;
}

/* -----------------------------------------------------------------
   Superficies: menos glass/neón, más panel corporativo
   ----------------------------------------------------------------- */
.hero-copy,
.hero-card,
.info-panel,
.about-copy,
.profile-summary-card,
.profile-operational-card,
.letter-highlight,
.letter-card,
.exp-stat,
.timeline-card,
.skill-card,
.education-card,
.project-card,
.contact-info-panel,
.contact-form-panel,
.contact-panel,
.privacy-card,
.not-found-card,
.recruiter-dialog-shell {
  background:
    linear-gradient(180deg, rgba(10,24,40,.91), rgba(8,20,34,.91)) !important;
  border-color: rgba(128,151,170,.14) !important;
  box-shadow:
    0 16px 42px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.018) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}

/* Líneas superiores de sección: finas y sin glow. */
body[data-page] .hero-card::before,
body[data-page] .hero-copy::before,
body[data-page] .letter-highlight::before,
body[data-page] .letter-card::before,
body[data-page] .skill-card::before,
body[data-page] .education-card::before,
body[data-page] .contact-info-panel::before,
body[data-page] .contact-form-panel::before,
body[data-page] .contact-panel::before,
body[data-page] .info-panel::before,
body[data-page] .about-copy::before,
body[data-page] .experience-summary-card::before,
body[data-page] .experience-card::before,
body[data-page] .timeline-card::before {
  height: 2px !important;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--primary) 70%, #8799a7 30%),
    color-mix(in srgb, var(--primary) 25%, transparent) 58%,
    transparent
  ) !important;
  box-shadow: none !important;
}

/* Las tarjetas ya no "suben" de forma evidente. */
@media (hover:hover) and (pointer:fine) {
  .project-card:hover,
  .skill-card:hover,
  .education-card:hover,
  .profile-operational-card:hover,
  .letter-card:hover,
  .info-panel:hover,
  .hero-card:hover,
  body.experiencia-page .timeline-card:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(148,170,188,.20) !important;
    box-shadow:
      0 18px 44px rgba(0,0,0,.21),
      inset 0 1px 0 rgba(255,255,255,.022) !important;
  }
}

/* Chips: más planos y documentales. */
body[data-page] .badge,
body[data-page] .letter-chip,
body[data-page] .summary-tag,
body[data-page] .chip,
body[data-page] .hero-badge,
body[data-page] .pill,
body[data-page] .tag,
.tags span,
.skill-list span,
.formation-tags span,
.project-tags span,
.project-architecture-stack span {
  background: rgba(15,30,45,.80) !important;
  color: color-mix(in srgb, var(--primary) 58%, #bac8d2 42%) !important;
  border-color: color-mix(in srgb, var(--primary) 18%, rgba(133,154,171,.14)) !important;
  box-shadow: none !important;
}

/* Cronologías: nodos más pequeños y sin halo. */
body[data-page] .timeline-item::before {
  border-color: color-mix(in srgb, var(--primary) 74%, #8195a5 26%) !important;
  box-shadow: 0 0 0 4px rgba(106,129,147,.075) !important;
}

.timeline::before {
  opacity: .58 !important;
}

/* Botones +Info / formación / evidencia: estilo de interfaz empresarial. */
body.experiencia-page .timeline-more,
body.formacion-page .formation-more,
.project-evidence-toggle,
.contact-tool {
  border-color: rgba(125,151,170,.16) !important;
  background: rgba(9,23,38,.82) !important;
  color: #a9b8c4 !important;
  box-shadow: none !important;
}

body.experiencia-page .timeline-more::before,
body.formacion-page .formation-more-icon,
.project-evidence-icon {
  background: rgba(89,124,151,.11) !important;
  border-color: rgba(111,145,169,.16) !important;
  color: #9eb7c8 !important;
  box-shadow: none !important;
}

body.experiencia-page .timeline-summary:hover .timeline-more,
body.formacion-page .formation-more:hover,
.project-evidence-toggle:hover,
.contact-tool:hover {
  border-color: color-mix(in srgb, var(--primary) 28%, rgba(138,158,174,.14)) !important;
  background: rgba(13,30,47,.92) !important;
  color: #dbe5eb !important;
}

/* Formación: módulos como documentación técnica, no tarjetas brillantes. */
body.formacion-page .formation-module-year,
.project-evidence {
  background: rgba(7,19,32,.56) !important;
  border-color: rgba(127,149,167,.11) !important;
}

body.formacion-page .formation-module-list--clean li::before {
  background: color-mix(in srgb, var(--primary) 62%, #a6b5c0 38%) !important;
  box-shadow: none !important;
}

/* Iconos decorativos con menos protagonismo. */
body[data-page] .skill-icon,
body[data-page] .panel-icon,
body[data-page] .feature-icon,
body[data-page] .section-icon {
  background: rgba(103,130,151,.085) !important;
  color: color-mix(in srgb, var(--primary) 56%, #9eb0bd 44%) !important;
  box-shadow: inset 0 0 0 1px rgba(132,153,169,.11) !important;
}

/* Foto: marco neutro y sobrio. */
.hero-photo-shell,
.profile-photo-frame,
.photo-shell {
  box-shadow: 0 18px 50px rgba(0,0,0,.24) !important;
  border-color: rgba(132,153,170,.16) !important;
}

/* Flotantes: visibles, pero secundarios. */
.floating-contact,
.recruiter-trigger {
  background: rgba(6,16,28,.72) !important;
  border-color: rgba(128,150,168,.16) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.20) !important;
}

.floating-contact--linkedin {
  color: #86aabe !important;
}

.floating-contact--whatsapp {
  color: #83aa98 !important;
}

/* Footer y elementos secundarios. */
.page-footer,
.home-footer {
  color: #667988 !important;
  border-color: rgba(117,140,158,.10) !important;
}

/* Formularios: inputs más formales. */
.contact-form input,
.contact-form textarea,
.contact-form select {
  background: rgba(6,18,31,.72) !important;
  border-color: rgba(125,149,167,.15) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.012) !important;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: color-mix(in srgb, var(--primary) 42%, #8498a8 58%) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 8%, transparent) !important;
}

/* Mantener accesibilidad sin halo excesivo. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 48%, #c8d5de 52%) !important;
  outline-offset: 3px !important;
}

/* -----------------------------------------------------------------
   Mobile: mismo lenguaje visual
   ----------------------------------------------------------------- */
@media (max-width:720px) {
  .header-inner {
    background: rgba(7,17,29,.94) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.24) !important;
  }

  .main-nav.tech-command-nav {
    background: rgba(6,16,28,.98) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.34) !important;
  }

  .hero-copy,
  .info-panel,
  .skill-card,
  .education-card,
  .letter-card,
  .letter-highlight,
  .contact-info-panel,
  .contact-form-panel,
  .exp-stat,
  .project-card,
  .profile-summary-card,
  .privacy-card,
  .timeline-card {
    border-radius: 17px !important;
  }

  .floating-contact {
    width: 43px !important;
    height: 43px !important;
  }

  .recruiter-trigger {
    background: rgba(6,16,28,.78) !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .project-card,
  .skill-card,
  .education-card,
  .timeline-card,
  .letter-card,
  .info-panel,
  .hero-card {
    transform: none !important;
  }
}


/* =========================================================
   V100 · MASTER NAVIGATION
   Componente nuevo: no reutiliza .site-header/.header-inner/.main-nav.
   ========================================================= */

.master-header,
.master-header *,
.master-header *::before,
.master-header *::after {
  box-sizing: border-box;
}

.master-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3000;
  padding:
    max(12px, env(safe-area-inset-top))
    108px
    0
    108px;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
  isolation: isolate;
}

.master-header-frame {
  position: relative;
  width: 100%;
  max-width: 1700px;
  min-height: 72px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(238px, 265px) minmax(0, 1fr) minmax(112px, 140px);
  align-items: center;
  gap: 18px;
  padding: 8px 10px 8px 12px;
  border: 1px solid rgba(133, 158, 178, .16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% -60%, rgba(75, 134, 168, .10), transparent 37%),
    linear-gradient(180deg, rgba(7, 18, 31, .965), rgba(6, 16, 28, .945));
  -webkit-backdrop-filter: blur(24px) saturate(112%);
  backdrop-filter: blur(24px) saturate(112%);
  box-shadow:
    0 18px 54px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.025);
  pointer-events: auto;
  transition:
    min-height .24s cubic-bezier(.2,.75,.25,1),
    padding .24s cubic-bezier(.2,.75,.25,1),
    border-color .24s ease,
    box-shadow .24s ease;
}

.master-header.is-compact .master-header-frame {
  min-height: 62px;
  padding-top: 6px;
  padding-bottom: 6px;
  border-color: rgba(133,158,178,.13);
  box-shadow:
    0 14px 42px rgba(0,0,0,.31),
    inset 0 1px 0 rgba(255,255,255,.018);
}

/* Brand */
.master-brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 2px 4px 2px 1px;
  text-decoration: none;
  white-space: nowrap;
}

.master-brand-emblem {
  position: relative;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(132,156,176,.18);
  border-radius: 15px;
  background: #091827;
  box-shadow:
    0 8px 22px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.035);
  transition:
    width .24s cubic-bezier(.2,.75,.25,1),
    height .24s cubic-bezier(.2,.75,.25,1),
    flex-basis .24s cubic-bezier(.2,.75,.25,1);
}

.master-brand-emblem img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.master-header.is-compact .master-brand-emblem {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
}

.master-brand-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
  line-height: 1.05;
}

.master-brand-copy strong {
  overflow: hidden;
  color: #e4edf4;
  font-size: 12.8px;
  font-weight: 740;
  letter-spacing: -.018em;
  text-overflow: ellipsis;
}

.master-brand-copy small {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #788b9b;
  font-size: 8.3px;
  font-weight: 720;
  letter-spacing: .095em;
}

.master-status-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #47c983;
  box-shadow: 0 0 0 3px rgba(71,201,131,.07);
}

/* Navigation precision rail */
.master-nav {
  --pointer-x: 50%;
  --pointer-y: 50%;
  position: relative;
  min-width: 0;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 5px;
  overflow: hidden;
  border: 1px solid rgba(130,154,174,.12);
  border-radius: 16px;
  background:
    radial-gradient(
      180px circle at var(--pointer-x) var(--pointer-y),
      rgba(115, 169, 195, .055),
      transparent 70%
    ),
    rgba(6, 17, 29, .54);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.012);
  isolation: isolate;
}

/* Esta capa queda DENTRO de la cápsula: nunca genera líneas fuera del menú. */
.master-nav-ambient {
  position: absolute;
  inset: 5px;
  z-index: 0;
  border-radius: 11px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(122,159,180,.018), transparent);
}

/* Hover follower real */
.master-nav-hover {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  z-index: 1;
  width: 0;
  border: 1px solid rgba(136,164,183,.08);
  border-radius: 11px;
  background: rgba(126,151,169,.047);
  opacity: 0;
  pointer-events: none;
  transition:
    width .20s cubic-bezier(.2,.75,.25,1),
    transform .20s cubic-bezier(.2,.75,.25,1),
    opacity .14s ease;
}

/* Indicador activo físico. No pseudo-elementos. */
.master-nav-indicator {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  z-index: 2;
  width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, rgba(139,160,177,.12));
  border-radius: 11px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--primary) 11%, rgba(15,31,46,.96)),
      rgba(10,24,38,.95)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 8px 18px rgba(0,0,0,.12);
  opacity: 0;
  pointer-events: none;
  transition:
    width .28s cubic-bezier(.18,.82,.24,1),
    transform .28s cubic-bezier(.18,.82,.24,1),
    opacity .16s ease;
}

.master-nav-indicator-sheen {
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -50%;
  width: 45%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.045),
    transparent
  );
  transform: skewX(-18deg);
  animation: masterNavSheen 8s ease-in-out infinite;
}

.master-nav-indicator-line {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 72%, #9cc1d0 28%);
  opacity: .78;
}

@keyframes masterNavSheen {
  0%, 72% { transform: translateX(0) skewX(-18deg); opacity: 0; }
  76% { opacity: .55; }
  92% { transform: translateX(430%) skewX(-18deg); opacity: .25; }
  100% { transform: translateX(430%) skewX(-18deg); opacity: 0; }
}

.master-nav-item {
  position: relative;
  z-index: 3;
  min-width: 0;
  height: 40px;
  display: inline-grid;
  grid-template-columns: 15px auto;
  align-items: center;
  gap: 6px;
  padding: 0 clamp(7px, .48vw, 10px);
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #8d9eac;
  text-decoration: none;
  white-space: nowrap;
  outline: none;
  transition: color .16s ease, opacity .16s ease;
}

.master-nav-item:hover,
.master-nav-item:focus-visible {
  color: #dbe5eb;
}

.master-nav-item.active {
  color: #f1f5f7;
}

.master-nav-icon {
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  color: #708696;
  transition: color .16s ease, transform .16s ease;
}

.master-nav-icon svg,
.master-pdf-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.master-nav-item:hover .master-nav-icon,
.master-nav-item:focus-visible .master-nav-icon {
  color: #9ab1bf;
  transform: translateY(-1px);
}

.master-nav-item.active .master-nav-icon {
  color: color-mix(in srgb, var(--primary) 66%, #b8cad5 34%);
}

.master-nav-label {
  overflow: hidden;
  font-size: 10.45px;
  font-weight: 690;
  letter-spacing: -.005em;
  text-overflow: ellipsis;
}

/* Actions */
.master-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.master-pdf-action {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid rgba(232,91,120,.25);
  border-radius: 14px;
  color: #fff2f5;
  background: linear-gradient(180deg, #b72042, #941936);
  box-shadow:
    0 9px 24px rgba(74,7,25,.21),
    inset 0 1px 0 rgba(255,255,255,.065);
  text-decoration: none;
  font-size: 10.8px;
  font-weight: 800;
  white-space: nowrap;
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    filter .16s ease;
}

.master-pdf-action:hover,
.master-pdf-action:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(244,127,151,.36);
  box-shadow:
    0 12px 28px rgba(74,7,25,.26),
    inset 0 1px 0 rgba(255,255,255,.075);
  filter: brightness(1.025);
  outline: none;
}

.master-pdf-icon {
  width: 15px;
  height: 15px;
}

/* Hamburger */
.master-menu-toggle {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(132,155,174,.15);
  border-radius: 13px;
  background: rgba(9,23,38,.76);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

.master-menu-toggle span:not(.sr-only) {
  position: absolute;
  left: 12px;
  width: 20px;
  height: 2px;
  margin: 0;
  border-radius: 999px;
  background: #b4c3ce;
  transition: transform .18s ease, opacity .18s ease, top .18s ease;
}

.master-menu-toggle span:nth-child(1) { top: 15px; }
.master-menu-toggle span:nth-child(2) { top: 22px; }
.master-menu-toggle span:nth-child(3) { top: 29px; }

.master-menu-toggle.is-open span:nth-child(1) {
  top: 22px;
  transform: rotate(45deg);
}
.master-menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.master-menu-toggle.is-open span:nth-child(3) {
  top: 22px;
  transform: rotate(-45deg);
}

/* PDF dentro del menú responsive */
.master-mobile-pdf {
  display: none;
}

/* Idioma: independiente del shell, en su propio carril derecho. */
.floating-language-control {
  position: fixed !important;
  top: max(21px, calc(env(safe-area-inset-top) + 13px)) !important;
  right: max(18px, env(safe-area-inset-right)) !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 3100 !important;
  margin: 0 !important;
  transform: none !important;
}

.language-toggle-pill {
  width: 76px !important;
  height: 36px !important;
  border-color: rgba(129,153,171,.16) !important;
  background: rgba(6,17,29,.88) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.18) !important;
}

.language-toggle-knob {
  width: 33px !important;
  height: 28px !important;
  background: linear-gradient(180deg, #17364a, #10293a) !important;
  border-color: rgba(111,153,179,.20) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.language-toggle-pill.is-en .language-toggle-knob {
  transform: translateX(35px) !important;
}

/* El contenido respeta el nuevo header fijo. */
.home-main,
.page-main {
  margin-top: 94px !important;
  scroll-margin-top: 106px !important;
}

/* -------------------------- Desktop -------------------------- */
@media (min-width: 1450px) {
  .master-header {
    padding-left: 104px;
    padding-right: 104px;
  }

  .master-menu-toggle {
    display: none !important;
  }

  .master-nav {
    display: flex !important;
  }

  .master-actions {
    display: flex !important;
  }
}

/* ---------------------- Portátil / tablet --------------------- */
@media (max-width: 1449px) {
  .master-header {
    padding:
      max(10px, env(safe-area-inset-top))
      100px
      0
      14px;
  }

  .master-header-frame {
    min-height: 64px;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 12px;
    padding: 7px 8px 7px 10px;
    border-radius: 18px;
  }

  .master-brand {
    justify-self: start;
  }

  .master-brand-emblem {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 14px;
  }

  .master-actions {
    display: none !important;
  }

  .master-menu-toggle {
    display: block;
  }

  .master-nav {
    position: absolute;
    top: calc(100% + 9px);
    left: 0;
    right: 0;
    height: auto;
    display: none;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 6px;
    padding: 10px;
    overflow: visible;
    border-radius: 18px;
    background:
      radial-gradient(circle at 90% 0%, rgba(72,133,164,.08), transparent 30%),
      rgba(5,15,26,.985);
    -webkit-backdrop-filter: blur(24px) saturate(108%);
    backdrop-filter: blur(24px) saturate(108%);
    box-shadow:
      0 24px 58px rgba(0,0,0,.42),
      inset 0 1px 0 rgba(255,255,255,.018);
  }

  .master-nav.open {
    display: grid;
  }

  .master-nav-ambient,
  .master-nav-hover,
  .master-nav-indicator {
    display: none !important;
  }

  .master-nav-item {
    width: 100%;
    height: 47px;
    grid-template-columns: 18px minmax(0,1fr);
    justify-content: start;
    gap: 9px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: #96a7b5;
  }

  .master-nav-item:hover,
  .master-nav-item:focus-visible {
    border-color: rgba(132,158,177,.10);
    background: rgba(122,151,171,.055);
  }

  .master-nav-item.active {
    border-color: color-mix(in srgb, var(--primary) 24%, rgba(132,158,177,.10));
    background: color-mix(in srgb, var(--primary) 9%, rgba(10,25,40,.94));
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--primary) 68%, #a4bbc8 32%);
  }

  .master-nav-label {
    font-size: 10.8px;
  }

  .master-mobile-pdf {
    display: inline-grid !important;
    color: #f4c5d0 !important;
    border-color: rgba(215,71,103,.13) !important;
    background: rgba(111,18,42,.13) !important;
  }

  .floating-language-control {
    top: max(19px, calc(env(safe-area-inset-top) + 11px)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
  }

  .home-main,
  .page-main {
    margin-top: 82px !important;
    scroll-margin-top: 94px !important;
  }
}

/* --------------------------- Mobile --------------------------- */
@media (max-width: 720px) {
  .master-header {
    padding:
      max(8px, env(safe-area-inset-top))
      10px
      0;
  }

  .master-header-frame {
    min-height: 62px;
    padding: 7px 8px 7px 9px;
    border-radius: 17px;
  }

  .master-brand {
    gap: 9px;
  }

  .master-brand-emblem {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .master-brand-copy strong {
    max-width: 185px;
    font-size: 12px;
  }

  .master-brand-copy small {
    font-size: 7.8px;
  }

  .master-menu-toggle {
    width: 44px;
    height: 44px;
  }

  .master-nav {
    grid-template-columns: 1fr;
    left: 0;
    right: 0;
    max-height: calc(100dvh - 92px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .floating-language-control {
    top: max(78px, calc(env(safe-area-inset-top) + 68px)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
  }

  .language-toggle-pill {
    width: 72px !important;
    height: 34px !important;
  }

  .language-toggle-knob {
    width: 31px !important;
    height: 26px !important;
  }

  .language-toggle-pill.is-en .language-toggle-knob {
    transform: translateX(33px) !important;
  }

  .home-main,
  .page-main {
    margin-top: 78px !important;
  }
}

@media (max-width: 430px) {
  .master-brand-copy strong {
    max-width: 155px;
  }
}

/* Focus consistente */
.master-brand:focus-visible,
.master-nav-item:focus-visible,
.master-pdf-action:focus-visible,
.master-menu-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 45%, #b9cad5 55%);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .master-header-frame,
  .master-brand-emblem,
  .master-nav-hover,
  .master-nav-indicator,
  .master-nav-item,
  .master-nav-icon,
  .master-pdf-action,
  .master-menu-toggle span:not(.sr-only) {
    transition: none !important;
    animation: none !important;
  }

  .master-nav-indicator-sheen {
    display: none !important;
  }
}

@media print {
  .master-header {
    display: none !important;
  }
}