/* === BASE & DESIGN TOKENS === */
:root {
  --color-bg: #f4f7fa;
  --color-bg-alt: #ffffff;
  --color-bg-soft: #e9eef4;
  --color-text: #23272f;
  --color-text-soft: #4b5663;
  --color-primary: #1976d2;
  --color-primary-hover: #0a58ca;
  --color-accent: #fbc02d;
  --color-border: #d9e2ec;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 2px 6px rgba(25,118,210,0.06);
  --shadow: 0 4px 18px rgba(25,118,210,0.08);
  --shadow-hover: 0 8px 32px rgba(25,118,210,0.16);
  --focus-ring: 0 0 0 3px #ffffff, 0 0 0 5px var(--color-primary);
  --space-1: .35rem;
  --space-2: .6rem;
  --space-3: 1rem;
  --space-4: 1.6rem;
  --space-5: 2.4rem;
  --max-width: 1220px;
  font-family: 'Montserrat','Rubik',system-ui,sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.0001s !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  line-height:1.6;
  font-size: clamp(.94rem, .9rem + .2vw, 1rem);
  -webkit-font-smoothing: antialiased;
}

img, video, iframe, picture { max-width:100%; display:block; }
img { height:auto; }

a {
  color: var(--color-primary);
  text-decoration:none;
  transition: color .2s;
}
a:hover, a:focus-visible { color: var(--color-primary-hover); }

.skip-link {
  position:fixed; top:-40px; left:0;
  background: var(--color-primary);
  color:#fff;
  padding:.75rem 1rem;
  z-index:200;
  border-radius:0 0 var(--radius-sm) 0;
  transition: top .25s;
}
.skip-link:focus { top:0; }

.site-header {
  background: var(--color-bg-alt);
  position:sticky; top:0; z-index:100;
  box-shadow: var(--shadow-sm);
}
.header-inner {
  max-width: var(--max-width);
  margin:0 auto;
  padding:.85rem 1.2rem;
  display:flex;
  align-items:center;
  gap:var(--space-4);
}
.branding { flex:1; }
.site-title {
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
  font-weight:700;
  letter-spacing:1px;
}
.site-title .accent { color: var(--color-primary); }
.tagline {
  font-size:.9rem;
  color: var(--color-text-soft);
  margin-top:.15rem;
}

.header-actions {
  display:flex;
  align-items:center;
  gap:var(--space-2);
}

.theme-toggle {
  background: var(--color-bg-soft);
  border:1px solid var(--color-border);
  padding:.55rem .7rem;
  border-radius: var(--radius-sm);
  cursor:pointer;
  display:flex;
  gap:.4rem;
  font-size:1rem;
  position:relative;
  transition: background .25s;
}
.theme-toggle:focus-visible { box-shadow: var(--focus-ring); outline:none; }
.theme-toggle__icon { display:block; line-height:1; }
.theme-toggle .moon { display:none; }
:root.dark .theme-toggle .sun { display:none; }
:root.dark .theme-toggle .moon { display:block; }

.primary-nav { display:flex; }
.nav-list { list-style:none; display:flex; gap:1.2rem; }
.nav-list a {
  padding:.6rem .9rem;
  border-radius: var(--radius-sm);
  font-weight:600;
  font-size:.9rem;
  color: var(--color-text);
  position:relative;
}
.nav-list a[aria-current="true"] {
  background: var(--color-bg-soft);
  color: var(--color-primary);
}
.nav-list a:hover, .nav-list a:focus-visible {
  background: var(--color-bg-soft);
  outline:none;
}

.menu-toggle {
  background: var(--color-primary);
  color:#fff;
  padding:.55rem .75rem;
  border:0;
  border-radius: var(--radius-sm);
  display:none;
  cursor:pointer;
  font-weight:600;
  font-size:1rem;
}
.menu-toggle:focus-visible { box-shadow: var(--focus-ring); }

.scroll-progress {
  width:100%;
  height:4px;
  appearance:none;
  border:0;
  position:absolute;
  left:0;
  bottom:0;
  background:transparent;
}
.scroll-progress::-webkit-progress-bar { background:transparent; }
.scroll-progress::-webkit-progress-value {
  background: linear-gradient(90deg,var(--color-primary),#63aaf1);
  border-radius:2px;
}

.hero {
  background: linear-gradient(105deg, var(--color-primary) 0%, #4497e7 80%);
  color:#fff;
  padding: clamp(2.5rem,6vw,4.5rem) 1.2rem clamp(3rem,7vw,5rem);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero__bg {
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.12), transparent 65%);
  opacity:.9;
  pointer-events:none;
}
.hero__title {
  font-size: clamp(1.7rem, 3.2vw, 2.55rem);
  font-weight:700;
  line-height:1.25;
  max-width:900px;
  margin:0 auto;
}
.hero__subtitle {
  margin-top:1rem;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  opacity:.95;
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
}
.hero__cta {
  margin-top:2rem;
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}

.section {
  max-width: var(--max-width);
  margin:0 auto;
  padding: clamp(2.2rem,5vw,3.8rem) 1.2rem;
}
.section__title {
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  display:inline-block;
  background: linear-gradient(90deg, var(--color-primary) 0%, #4fa2f0 100%);
  -webkit-background-clip:text;
  color:transparent;
  font-weight:700;
  letter-spacing:.5px;
  margin-bottom:1.4rem;
  position:relative;
}
.section__title:after {
  content:"";
  height:3px; width:64%; max-width:240px;
  background: var(--color-primary);
  display:block;
  margin-top:.45rem;
  border-radius:2px;
  opacity:.3;
}
.section__lead { color: var(--color-text-soft); margin-bottom: var(--space-3); }

.grid-2 {
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap:var(--space-4);
}

.card {
  background: var(--color-bg-alt);
  border:1px solid var(--color-border);
  border-radius: var(--radius);
  padding:1.2rem 1.4rem;
  box-shadow: var(--shadow-sm);
  position:relative;
}
.card.highlight { border-left:5px solid var(--color-primary); }

.tag-list {
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:.8rem;
}
.tag-list li {
  background: var(--color-bg-soft);
  padding:.4rem .7rem;
  border-radius:999px;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.5px;
}

.check-list { list-style:none; margin-top:.6rem; display:grid; gap:.5rem; }
.check-list li { position:relative; padding-left:1.4rem; font-size:.9rem; }
.check-list li:before {
  content:"✔";
  position:absolute;
  left:0; top:0;
  color: var(--color-primary);
  font-size:.85rem;
  transform:translateY(3px);
}

.card-grid {
  list-style:none;
  display:grid;
  gap:1.2rem;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  margin-top:.8rem;
}

.achievement-card {
  background: linear-gradient(100deg,#f9fafc 60%, #e3eaf5 100%);
  padding:1rem .9rem 1.2rem;
  border-radius: var(--radius);
  border:1px solid var(--color-border);
  display:flex;
  flex-direction:column;
  gap:.5rem;
  transition: box-shadow .2s, transform .2s;
  min-height:180px;
}
.achievement-card:hover {
  box-shadow: var(--shadow-hover);
  transform:translateY(-4px);
}
.achievement-card__icon { font-size:1.8rem; }
.achievement-card__title { font-size:1.05rem; font-weight:600; }
.achievement-card__desc { font-size:.85rem; color: var(--color-text-soft); }

.cert-grid {
  list-style:none;
  display:grid;
  gap:1.2rem;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  margin-top:.4rem;
}
.cert-card {
  background: var(--color-bg-alt);
  border:1px solid var(--color-border);
  border-left:6px solid var(--color-primary);
  border-radius: var(--radius);
  padding:.9rem 1rem;
  display:flex;
  gap:1rem;
  align-items:center;
  transition: transform .18s, box-shadow .18s;
}
.cert-card:hover { transform:translateY(-4px); box-shadow: var(--shadow); }
.cert-card__icon {
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  background: var(--color-bg-soft);
  border-radius:50%;
  font-size:1.4rem; color:#fff;
  background: var(--bg,#1976d2);
}
.cert-card__name { font-size:.9rem; font-weight:500; line-height:1.4; }
.year-badge {
  background: var(--color-accent);
  color:#222;
  padding:.15rem .55rem;
  font-size:.6rem;
  border-radius:6px;
  margin-left:.4rem;
  font-weight:600;
  letter-spacing:.5px;
}

.filters {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  align-items:center;
  margin-bottom: var(--space-3);
}
.filter-buttons {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.filter-btn {
  background: var(--color-bg-alt);
  border:1px solid var(--color-border);
  padding:.45rem .9rem;
  font-size:.7rem;
  font-weight:600;
  border-radius: var(--radius-sm);
  cursor:pointer;
  letter-spacing:.5px;
  transition: background .2s, color .2s, border-color .2s;
}
.filter-btn.active {
  background: var(--color-primary);
  color:#fff;
  border-color: var(--color-primary);
}
.filter-btn:focus-visible { outline:none; box-shadow: var(--focus-ring); }

.filter-search input {
  padding:.55rem .75rem;
  border:1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  font-size:.85rem;
  min-width:180px;
  transition: border-color .2s;
}
.filter-search input:focus { outline:none; border-color: var(--color-primary); box-shadow: var(--focus-ring); }

.project-grid {
  list-style:none;
  display:grid;
  gap:1.2rem;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
}
.project-card {
  background: var(--color-bg-alt);
  border:1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:1.1rem 1.1rem 1.3rem;
  display:flex;
  flex-direction:column;
  gap:.7rem;
  position:relative;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .22s, transform .22s, border-color .22s;
  overflow:hidden;
}
.project-card:hover {
  box-shadow: var(--shadow-hover);
  transform:translateY(-6px);
}
.project-card__title {
  font-size:1rem;
  font-weight:700;
  color: var(--color-primary);
  letter-spacing:.3px;
}
.project-card__desc {
  font-size:.75rem;
  color: var(--color-text-soft);
  line-height:1.5;
}

.project-card__media {
  border-radius: var(--radius);
  overflow:hidden;
  aspect-ratio:16/9;
  background: var(--color-bg-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.project-card__media img {
  width:100%; height:100%; object-fit:cover;
  transition: transform .5s;
  filter: contrast(1.02);
}
.project-card:hover .project-card__media img {
  transform:scale(1.05);
}

.shimmer {
  position:relative;
  background: linear-gradient(110deg,#eceff3 8%,#f2f5f8 18%,#eceff3 33%);
  background-size:200% 100%;
  animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer {
  0% { background-position:200% 0; }
  100% { background-position:-200% 0; }
}
.shimmer img { opacity:0; transition: opacity .6s; }
.shimmer img.loaded { opacity:1; }

.ratio-16x9 { aspect-ratio:16/9; overflow:hidden; border-radius: var(--radius); }

.iframe-wrapper {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #111;
  color:#fff;
  border:1px solid var(--color-border);
}
.iframe-load-btn {
  background: rgba(255,255,255,.1);
  color:#fff;
  border:1px solid rgba(255,255,255,.4);
  padding:.6rem 1.2rem;
  border-radius: var(--radius-sm);
  cursor:pointer;
  font-weight:600;
  backdrop-filter: blur(3px);
  transition: background .25s;
}
.iframe-load-btn:hover, .iframe-load-btn:focus-visible {
  background: rgba(255,255,255,.25);
  outline:none;
}

.media-carousel {
  position:relative;
  border:1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-soft);
  overflow:hidden;
  --carousel-height: 200px;
}
.carousel__viewport {
  display:flex;
  transition: transform .55s cubic-bezier(.65,.1,.35,1);
  width:100%;
  touch-action: pan-y;
}
.carousel__slide {
  flex:0 0 100%;
  height:var(--carousel-height);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}
.carousel__slide img {
  width:100%; height:100%; object-fit:cover;
}
.carousel__controls {
  position:absolute; inset:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:.3rem;
  pointer-events:none;
}
.carousel__btn {
  pointer-events:auto;
  background: rgba(0,0,0,.4);
  color:#fff;
  border:0;
  width:36px; height:36px;
  border-radius:50%;
  font-size:1.2rem;
  cursor:pointer;
  display:grid; place-items:center;
  transition: background .25s;
}
.carousel__btn:hover, .carousel__btn:focus-visible {
  background: rgba(0,0,0,.6);
  outline:none;
}
.carousel__dots {
  position:absolute;
  bottom:.4rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:.4rem;
}
.carousel__dots button {
  width:10px; height:10px;
  border-radius:50%;
  border:0;
  background: rgba(255,255,255,.6);
  cursor:pointer;
  transition: transform .25s, background .25s;
}
.carousel__dots button[aria-selected="true"] {
  background: var(--color-primary);
  transform: scale(1.4);
}

.project-card__actions {
  margin-top:auto;
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}

.btn {
  --btn-bg: var(--color-primary);
  --btn-color:#fff;
  background: var(--btn-bg);
  color: var(--btn-color);
  border:1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding:.55rem .95rem;
  font-weight:600;
  font-size:.7rem;
  letter-spacing:.5px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  text-decoration:none;
  transition: background .25s, color .25s;
}
.btn--outline {
  --btn-bg: var(--color-bg-alt);
  --btn-color: var(--color-primary);
}
.btn:hover, .btn:focus-visible {
  background: var(--color-primary-hover);
  color:#fff;
  outline:none;
}
.btn--outline:hover, .btn--outline:focus-visible {
  background: var(--color-primary);
  color:#fff;
}

.contact-card { max-width:520px; }
.contact-list { list-style:none; display:grid; gap:.6rem; }
.contact-list a { word-break:break-word; }

.site-footer {
  background: var(--color-bg-alt);
  padding:2rem 1.2rem;
  text-align:center;
  font-size:.7rem;
  color: var(--color-text-soft);
  border-top:1px solid var(--color-border);
  margin-top:2rem;
}
.tiny { font-size:.6rem; letter-spacing:.5px; }

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

:focus-visible {
  outline:none;
  box-shadow: var(--focus-ring);
  border-radius:4px;
}

@media (max-width: 900px) {
  .menu-toggle { display:block; }
  .primary-nav {
    position:absolute;
    top:100%;
    right:0;
    background: var(--color-bg-alt);
    width:min(330px,88%);
    border:1px solid var(--color-border);
    border-radius: var(--radius);
    padding:1rem;
    box-shadow: var(--shadow);
    display:none;
    flex-direction:column;
    animation: fadeIn .3s ease;
  }
  .primary-nav.open { display:flex; }
  .nav-list { flex-direction:column; gap:.4rem; }
  .nav-list a { width:100%; }
  .header-inner { flex-wrap:wrap; }
}

@keyframes fadeIn {
  from { opacity:0; transform:translateY(-6px); }
  to { opacity:1; transform:translateY(0); }
}
/* === Certificaciones (Variante 3 con LOGOS) === */

.cert-cards-compact {
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  max-width:1100px;
}

.ccard {
  --cc-border: var(--color-border, #d9e2ec);
  position:relative;
  background: var(--color-bg-alt, #fff);
  border:1px solid var(--cc-border);
  border-radius:16px;
  padding:.85rem .9rem 1rem;
  font-size:.78rem;
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,.05));
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:.55rem;
  transition: transform .25s, box-shadow .25s, border-color .25s, background .25s;
  isolation:isolate;
}

.ccard:before {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 85% 18%, rgba(255,255,255,.25), transparent 60%),
    linear-gradient(130deg, rgba(255,255,255,.08), transparent);
  opacity:.55;
  pointer-events:none;
  mix-blend-mode:overlay;
}

.ccard:hover {
  transform:translateY(-6px);
  box-shadow: var(--shadow-hover, 0 8px 26px rgba(0,0,0,.12));
  border-color: var(--color-primary, #1976d2);
  background: linear-gradient(135deg, var(--color-bg-alt,#fff) 0%, var(--color-bg-soft,#f0f4f9) 90%);
}

.ccard__logo {
  width:50px;
  height:50px;
  border-radius:14px;
  background: var(--color-bg-soft,#e9eef4);
  border:1px solid var(--color-border,#d9e2ec);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  overflow:hidden;
  flex-shrink:0;
  position:relative;
}

.ccard__logo img {
  width:70%;
  height:70%;
  object-fit:contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
  transition: transform .35s;
}

.ccard:hover .ccard__logo img {
  transform: scale(1.12) rotate(-4deg);
}

.ccard__head {
  display:flex;
  flex-direction:column;
  gap:.15rem;
}

.ccard__title {
  font-size:.82rem;
  margin:0;
  font-weight:600;
  line-height:1.2;
  color: var(--color-primary, #1976d2);
  letter-spacing:.2px;
}

.ccard .issuer {
  font-size:.6rem;
  letter-spacing:.6px;
  text-transform:uppercase;
  color: var(--color-text-soft,#4b5663);
  font-weight:600;
}

.skills {
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  margin:.2rem 0 0;
  padding:0;
  opacity:0;
  transform:translateY(4px);
  transition: opacity .25s, transform .25s;
}

.ccard:hover .skills {
  opacity:1;
  transform:translateY(0);
}

.skills li {
  background: var(--color-bg-soft,#e9eef4);
  padding:.28rem .55rem;
  font-size:.52rem;
  border-radius:999px;
  font-weight:600;
  letter-spacing:.4px;
  white-space:nowrap;
  line-height:1;
}

/* Opcional: modo sin hover en pantallas táctiles */
@media (hover:none) {
  .skills { opacity:1; transform:none; }
  .ccard:hover { transform:none; }
}

/* Dark mode overrides (si usas :root.dark) */
:root.dark .ccard {
  background:#1f262f;
  --cc-border:#2f3a45;
}
:root.dark .ccard:hover {
  background: linear-gradient(140deg,#222d37 0%, #1b2229 90%);
}
:root.dark .ccard__logo {
  background:#2a343e;
  border-color:#33414d;
}
:root.dark .skills li {
  background:#2d3944;
}