/* ------------------------------------------------------------------
   Estilos de página. El sistema de diseño vive en modernist.css;
   aquí sólo va el layout del CV y el tema oscuro.
   ------------------------------------------------------------------ */

html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: #f3f2f2;
  font-family: "Archivo", system-ui, sans-serif;
  transition: background .4s ease;
  overflow-x: clip; /* clip en vez de hidden para no romper la nav sticky */
}
body:has(.theme-dark) { background: #161826; }
a { color: inherit; }

/* --- Escalas fluidas ------------------------------------------------
   El contenido ocupa todo el ancho disponible: no hay tope de columna,
   sólo un margen lateral (--gutter) que crece con el viewport.
   -------------------------------------------------------------------- */
.page {
  --gutter: clamp(18px, 3.5vw, 72px);
  --edge: var(--gutter);
  --sec-y: clamp(40px, 5vw, 88px);
  --space-5: 20px; /* lo usa .cert-item y no existe en el sistema */
}

/* El texto fluye con la pantalla en vez de quedarse en tamaño folio */
.ds-modernist { font-size: clamp(15px, .25vw + 14px, 17px); }

/* Nada se desborda horizontalmente por una palabra o URL larga */
.ds-modernist p, .ds-modernist li, .ds-modernist h1, .ds-modernist h2 { overflow-wrap: break-word; }
.hero-inner > *, .about-grid > *, .split-2 > *, .contact-grid > *,
.exp-row > *, .skills-grid > *, .grid-2 > * { min-width: 0; }

.ds-modernist, .ds-modernist * {
  transition: background-color .32s ease, border-color .32s ease, color .32s ease;
}

/* --- Tema oscuro --------------------------------------------------- */
.ds-modernist.theme-dark {
  --color-bg: #161826; --color-surface: #232532; --color-text: #e9e9ed;
  --color-accent: #9184d9; --color-divider: color-mix(in srgb, #e9e9ed 24%, transparent);
  --color-neutral-100: #292b31; --color-neutral-200: #3f424d; --color-neutral-300: #595d6c;
  --color-neutral-400: #75798c; --color-neutral-500: #9397ab; --color-neutral-600: #b1b5c7;
  --color-neutral-700: #cfd3e5; --color-neutral-800: #e4e7f5; --color-neutral-900: #f3f5fe;
  --color-accent-100: #2b2741; --color-accent-200: #423a6a; --color-accent-300: #5d5294;
  --color-accent-400: #796cbf; --color-accent-500: #968ae0; --color-accent-600: #b5abfc;
  --color-accent-700: #d2cefd; --color-accent-800: #e7e5fe; --color-accent-900: #f5f4ff;
  --color-accent-2-100: #2b2741; --color-accent-2-200: #423a6a;
  --color-accent-2-700: #d2cefd; --color-accent-2-800: #e7e5fe;
}

/* --- Animaciones --------------------------------------------------- */
@keyframes omFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes omSlideL { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes omClip   { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes omGrid   { from { background-position: 0 0, 0 0; } to { background-position: 64px 64px, 64px 64px; } }
@keyframes omScan   { 0% { top: 0; } 100% { top: 100%; } }

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

/* --- Estructura ---------------------------------------------------- */
.page {
  width: 100%; min-height: 100vh; min-height: 100svh;
  position: relative; overflow-x: clip; /* clip, no hidden: no rompe position:sticky */
}
.nav {
  position: sticky; top: 0; z-index: 20; flex-wrap: wrap;
  padding-block: var(--space-3);
  padding-inline: var(--edge);
  background: color-mix(in srgb, var(--color-bg) 86%, transparent);
  backdrop-filter: blur(12px) saturate(1.4);
}
@supports not (backdrop-filter: blur(1px)) { .nav { background: var(--color-bg); } }
.nav-seg { margin-left: auto; }
.overline {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-neutral-700); margin-bottom: var(--space-2);
}
.push-right { margin-left: auto; }

/* --- Hero ---------------------------------------------------------- */
.hero {
  position: relative; min-height: min(560px, 82svh);
  display: grid; align-content: center;
  padding-block: clamp(40px, 6vw, 96px);
  padding-inline: var(--edge);
  border-bottom: 2px solid var(--color-divider);
}
.hero-bg {
  position: absolute; inset: 0; opacity: .22; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg,  transparent 0 63px, var(--color-divider) 63px 64px),
    repeating-linear-gradient(90deg, transparent 0 63px, var(--color-divider) 63px 64px);
  animation: omGrid 9s linear infinite;
}
.hero-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--color-accent); opacity: .45; pointer-events: none;
  animation: omScan 6s linear infinite;
}
.hero-inner {
  position: relative; z-index: 2; display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(200px, 22vw, 420px);
  gap: clamp(24px, 4vw, 48px); align-items: center;
  width: 100%;
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-accent-700); margin-bottom: var(--space-4);
  animation: omSlideL .6s .05s both;
}
.hero-kicker-bar { width: 20px; height: 2px; background: var(--color-accent); }
/* Ojo: estos selectores llevan el prefijo .ds-modernist a propósito.
   El sistema de diseño estiliza por etiqueta (`.ds-modernist h1`, `... p`),
   que tiene más especificidad que una clase suelta y ganaría pese a
   cargarse antes. Con el prefijo empatamos y manda el orden del archivo. */
.ds-modernist .hero-name {
  font-size: clamp(38px, 7.2vw, 132px); line-height: .96; letter-spacing: -.02em;
  margin: 0 0 var(--space-3); animation: omClip .8s .15s both;
}
.ds-modernist .hero-role {
  font-size: clamp(17px, 1.9vw, 24px); font-weight: 600; color: var(--color-accent);
  margin: 0 0 var(--space-2); animation: omSlideL .6s .3s both;
}
.ds-modernist .hero-tagline {
  font-size: clamp(15px, 1.3vw, 19px); max-width: 34ch; color: var(--color-neutral-800);
  margin: 0 0 var(--space-6); animation: omSlideL .6s .4s both;
}
.hero-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  animation: omFadeUp .6s .5s both;
}
.hero-links {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  margin-top: var(--space-6); animation: omFadeUp .6s .6s both;
}
.hero-side { animation: omFadeUp .7s .35s both; }
.photo-frame {
  width: 100%; max-width: 420px; aspect-ratio: 13 / 15; overflow: hidden;
  border: 2px solid var(--color-divider); background: var(--color-neutral-200);
}
.photo-frame picture { display: block; width: 100%; height: 100%; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-ph {
  display: grid; place-items: center; height: 100%; padding: var(--space-4);
  text-align: center; font-size: 13px; color: var(--color-neutral-600);
}
.status {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--space-3); font-size: 12px; color: var(--color-neutral-800);
}
.status-dot { width: 8px; height: 8px; background: var(--color-accent); }

/* --- Banda de métricas --------------------------------------------- */
.statband {
  background: var(--color-accent); color: var(--color-bg);
  padding-block: clamp(28px, 3.5vw, 56px);
  padding-inline: var(--edge);
}
.stats {
  display: grid; gap: var(--space-4) 0;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}
.stat {
  all: unset; cursor: pointer; min-width: 0;
  padding-left: var(--space-4); padding-right: var(--space-6);
  border-left: 2px solid rgba(255, 255, 255, .35);
}
.stat:hover { background: rgba(255, 255, 255, .1); }
.stat:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.stat-value {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(34px, 4vw, 58px); line-height: 1; letter-spacing: -.02em;
}
.stat-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; margin-top: 8px; opacity: .92; letter-spacing: .02em;
}

/* --- Secciones ----------------------------------------------------- */
.section {
  padding-block: var(--sec-y);
  padding-inline: var(--edge);
  border-bottom: 2px solid var(--color-divider);
  scroll-margin-top: 76px; /* la nav es sticky */
}
.section--last { border-bottom: 0; }
.section-k { color: var(--color-accent); }
.ds-modernist .section-t { font-size: clamp(28px, 3.6vw, 60px); margin: 0 0 var(--space-6); }
.ds-modernist .section-t-sm { font-size: clamp(24px, 2.6vw, 42px); margin: 0 0 var(--space-4); }
.split-2 {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

/* Perfil */
.about-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(20px, 4vw, 56px); align-items: start; margin-top: var(--space-2);
}
.ds-modernist .about-t { margin: 0; }
.ds-modernist .about-body {
  font-size: clamp(15px, 1.2vw, 20px); line-height: 1.65; margin: 0;
  color: var(--color-neutral-900);
}

/* Experiencia */
.exp-row {
  display: grid; grid-template-columns: clamp(140px, 15vw, 210px) minmax(0, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
  padding: var(--space-4) 0; border-top: 2px solid var(--color-divider);
}
.exp-period { font-family: var(--font-heading); font-weight: 800; font-size: 13px; letter-spacing: .04em; }
.exp-tag { margin-top: 8px; }
.exp-role { font-family: var(--font-heading); font-weight: 800; font-size: 21px; }
.exp-org { font-size: 15px; color: var(--color-accent-700); margin-bottom: var(--space-2); }
.exp-bullets {
  margin: 0; padding-left: 18px; font-size: 14px;
  color: var(--color-neutral-900); line-height: 1.5;
}
.exp-bullets li { margin-bottom: 4px; }
.other-exp {
  border-top: 2px solid var(--color-divider);
  padding-top: var(--space-4); margin-top: var(--space-2);
}
.other-row { display: flex; justify-content: space-between; gap: var(--space-4); font-size: 14px; padding: 5px 0; }
.other-row b { font-weight: 600; }
.other-row span:last-child { color: var(--color-neutral-700); white-space: nowrap; }

/* Rejillas con separadores de 2px (proyectos y certificaciones) */
.bordered-grid { gap: 2px; background: var(--color-divider); border: 2px solid var(--color-divider); }
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
}
.proj-card {
  background: var(--color-bg); padding: clamp(18px, 2.2vw, 32px);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.proj-title {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(19px, 1.7vw, 25px); line-height: 1.1;
}
.ds-modernist .proj-body { font-size: clamp(14px, 1vw, 16px); color: var(--color-neutral-900); margin: 0; flex: 1; line-height: 1.55; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-6); }
.proj-card .tag-row { margin-top: var(--space-2); margin-bottom: 0; }
.proj-link { margin-top: 6px; align-self: flex-start; }
.view-all { margin-top: var(--space-4); border-width: 2px; font-size: 15px; }

/* Skills */
.skills-grid {
  display: grid; gap: var(--space-6) clamp(24px, 3.5vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.skill-group { border-top: 2px solid var(--color-divider); padding-top: var(--space-3); }
.skill-name {
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: var(--space-3); color: var(--color-neutral-900);
}
.skill-items { display: flex; flex-wrap: wrap; gap: 6px; }

/* Logros */
.ach-row {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--space-3);
  align-items: baseline; padding: var(--space-2) 0;
  border-top: 2px solid var(--color-divider);
}
.ach-place { font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: var(--color-accent); }
.ach-text { font-size: 15px; }

/* Educación */
.edu-block { border-top: 2px solid var(--color-divider); padding-top: var(--space-3); margin-bottom: var(--space-6); }
.edu-degree { font-family: var(--font-heading); font-weight: 800; font-size: 18px; }
.edu-school { font-size: 14px; color: var(--color-accent-700); }
.edu-meta { font-size: 13px; color: var(--color-neutral-700); margin-top: 4px; }
.lang-row {
  display: flex; justify-content: space-between; font-size: 14px;
  padding: 5px 0; border-top: 1px solid var(--color-divider);
}
.lang-row span:first-child { font-weight: 600; }
.lang-row span:last-child { color: var(--color-accent-700); }

/* Certificaciones */
.cert-item {
  background: var(--color-bg); padding: var(--space-4) var(--space-5);
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3);
}
.cert-name { font-family: var(--font-heading); font-weight: 800; font-size: 17px; line-height: 1.15; }
.cert-issuer { font-size: 13px; color: var(--color-neutral-700); margin-top: 3px; }
.cert-cat { white-space: nowrap; }

/* Contacto */
.contact-grid {
  display: grid; gap: clamp(28px, 4vw, 56px); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.ds-modernist .contact-t { margin: 0 0 var(--space-3); }
.ds-modernist .contact-text { font-size: clamp(15px, 1.1vw, 18px); color: var(--color-neutral-900); max-width: 38ch; margin: 0 0 var(--space-6); }
.contact-link { display: flex; gap: 10px; font-size: clamp(14px, 1vw, 17px); justify-content: flex-start; overflow-wrap: anywhere; }
.contact-form {
  border: 2px solid var(--color-divider); padding: clamp(18px, 2.4vw, 32px);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.ds-modernist .form-note { font-size: 13px; color: var(--color-neutral-700); margin: 0; }

.footer {
  padding-block: var(--space-6); padding-inline: var(--edge);
  border-top: 2px solid var(--color-divider);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4);
  font-size: 12px; color: var(--color-neutral-700);
}

/* --- Modal --------------------------------------------------------- */
.dialog-backdrop[hidden] { display: none; }
.dialog-backdrop { z-index: 60; }
.dialog { width: min(600px, 92vw); max-height: min(82vh, 82dvh); overflow: auto; }
.dialog--wide { width: min(760px, 92vw); gap: var(--space-4); }
.dialog-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4);
  border-bottom: 2px solid var(--color-divider); padding-bottom: var(--space-3);
}
.ds-modernist .dialog-title { font-size: clamp(20px, 2vw, 26px); }
.ds-modernist .dialog--wide .dialog-title { font-size: clamp(22px, 2.2vw, 28px); }
.dialog-sub { font-size: 13px; color: var(--color-neutral-700); margin-top: 4px; }
.modal-close { border-width: 2px; flex: none; }
.modal-row {
  display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3);
  align-items: baseline; padding: var(--space-2) 0;
  border-top: 2px solid var(--color-divider); font-size: 15px;
}
.modal-bullet { width: 8px; height: 8px; background: var(--color-accent); margin-top: 6px; }
.modal-link { margin-top: var(--space-2); }
.modal-proj {
  display: grid; gap: 6px; padding: var(--space-3) 0;
  border-top: 2px solid var(--color-divider);
}
.modal-proj-title { font-family: var(--font-heading); font-weight: 800; font-size: 19px; }
.ds-modernist .modal-proj-body { font-size: 14px; color: var(--color-neutral-900); margin: 0; line-height: 1.5; }
.modal-proj .tag-row { margin: 4px 0 0; }

/* --- Responsive -----------------------------------------------------
   La mayor parte del ajuste la hacen clamp() y auto-fit; aquí sólo
   quedan los cambios de estructura que una escala fluida no cubre.
   -------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero-inner { grid-template-columns: 1fr; align-items: start; }
  .hero-side { display: flex; align-items: center; gap: var(--space-4); }
  .photo-frame { max-width: 180px; }
  .about-grid { grid-template-columns: 1fr; }
  .exp-row { grid-template-columns: 1fr; gap: var(--space-3); }
}
@media (max-width: 640px) {
  .page { --sec-y: clamp(32px, 8vw, 48px); }
  .nav { gap: var(--space-3); }
  .nav-seg { margin-left: 0; }
  .section { scroll-margin-top: 120px; }
  .stat { padding-right: var(--space-3); }
  .cert-item { flex-direction: column; }
}