/* estilos.css */
:root {
  color-scheme: light;
  --paper: #fbfaf7;
  --ink: #20201e;
  --muted: #54534d;
  --rule: #deddd6;
  --blue: #3a48a8;
  --wash: #eeeffb;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
main:focus { outline: none; }
p, h1, h2, h3, figure { margin: 0; }
p { color: var(--muted); }
.shell { width: min(1200px, calc(100% - 96px)); margin-inline: auto; }
.skip { position: absolute; left: 1rem; top: -5rem; padding: .65rem; background: white; z-index: 4; }
.skip:focus { top: 1rem; }
.site-header { position: sticky; top: 0; z-index: 3; background: var(--paper); }
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 80px;
  border-bottom: 1px solid var(--rule);
}
.brand { font-size: calc(28px * var(--reading-scale, 1)); font-weight: 760; letter-spacing: -.09em; }
.brand span, .school-mark span { color: var(--blue); }
.nav { display: flex; align-items: center; gap: 18px; font-size: calc(15px * var(--reading-scale, 1)); font-weight: 560; }
.nav a:hover, .footer a:hover, .back:hover { color: var(--blue); text-decoration: underline; }
.nav a[aria-current] { background: #eeede8; border-radius: 4px; box-shadow: 0 0 0 5px #eeede8; }
.school-nav { color: var(--blue); }
.header-menu { display: contents; }
.menu-toggle.button { display: none; }
.icon { display: inline-block; flex: none; vertical-align: -.15em; }
.switch {
  display: flex;
  align-items: center;
  gap: 1px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 3px;
  font: 12px/1.4 var(--mono);
  white-space: nowrap;
}
.switch nav { display: flex; align-items: center; gap: 1px; }
.switch nav + nav { border-inline-start: 1px solid var(--rule); margin-inline-start: 3px; padding-inline-start: 4px; }
.switch a { padding: 5px 8px; border-radius: 999px; }
.switch a:hover { background: var(--wash); }
.switch a[aria-current] { color: white; background: var(--ink); }
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(245px, .8fr);
  align-items: start;
  gap: clamp(30px, 8vw, 120px);
  padding: clamp(65px, 9vw, 132px) 0 clamp(68px, 9vw, 125px);
}
.eyebrow, .case-meta {
  color: var(--blue);
  font: 11px/1.55 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}
h1, h2, h3 { text-wrap: balance; }
.hero h1 {
  font-size: calc(clamp(61px, 8.8vw, 128px) * var(--reading-scale, 1));
  font-weight: 680;
  line-height: .88;
  letter-spacing: -.088em;
  margin: 20px 0 27px;
}
.lede { max-width: 510px; font-size: calc(clamp(17px, 1.6vw, 21px) * var(--reading-scale, 1)); line-height: 1.48; }
.hero-now { margin-top: 12px; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 27px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: 600 13px/1.35 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.button[hidden] { display: none; }
.button:hover { border-color: var(--blue); color: var(--blue); }
.primary { color: white; background: var(--ink); border-color: var(--ink); }
.primary:hover { color: white; background: var(--blue); }
.portrait { position: relative; width: min(100%, 362px); justify-self: end; }
.portrait img { display: block; width: 100%; height: auto; border-radius: 7px; filter: grayscale(1); }
.section { padding: clamp(48px, 6vw, 85px) 0; border-top: 1px solid var(--rule); }
h2 { margin: 9px 0 29px; font-size: calc(clamp(35px, 5vw, 69px) * var(--reading-scale, 1)); font-weight: 650; letter-spacing: -.065em; line-height: .99; }
.case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 17px; }
.preview-intro { max-width: 60ch; margin-bottom: 22px; }
.carousel-track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(260px, 38%, 445px);
  gap: 10px 17px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 5px 5px 14px;
}
.carousel-track .case { scroll-snap-align: start; scroll-margin-inline-start: 5px; }
.carousel-controls { display: flex; gap: 8px; margin-top: 8px; }
.carousel-controls[hidden] { display: none; }
.carousel-controls .button { min-width: 42px; padding: 8px; }
.button:disabled { opacity: .45; cursor: default; }
.case-link { display: grid; gap: 10px; align-content: start; }
.case-link:hover :is(h2, h3) { text-decoration: underline; text-underline-offset: 3px; }
@supports (grid-template-rows: subgrid) {
  .carousel-track { grid-template-rows: repeat(4, auto); }
  .carousel-track .case, .carousel-track .case-link {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    align-items: start;
  }
  @media (min-width: 651px) {
    .case-grid .case, .case-grid .case-link {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      align-items: start;
    }
  }
}
.case-art {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 1.53;
  border-radius: 7px;
  isolation: isolate;
  transition: filter .18s;
}
.case-link:hover .case-art { filter: saturate(1.2) brightness(.97); }
.case-art small {
  position: absolute;
  z-index: 1;
  bottom: 8px;
  left: 11px;
  font: 9px/1.5 var(--mono);
  letter-spacing: .08em;
  color: #373633;
}
.my-sunrise { background: #f2e5df; }
.sunrise-rewards { background: #f1eaf6; }
.design-system-ia { background: #e4e9f9; }
.dashboard {
  display: flex;
  width: 66%;
  aspect-ratio: 1.65;
  border: 1px solid #d8bdb2;
  border-radius: 8px;
  background: #fffaf8;
  box-shadow: 0 14px 30px #5133231c;
  transform: rotate(-6deg);
}
.dashboard > i { width: 25%; background: #6f352c; border-radius: 7px 0 0 7px; }
.dashboard-content { flex: 1; padding: 9% 8%; display: grid; grid-template-columns: 1fr 1fr; gap: 11%; }
.dashboard-content b { grid-column: span 2; background: #d48e75; border-radius: 4px; }
.dashboard-content span { background: #eed8cf; border-radius: 3px; }
.reward-card {
  width: 32%; aspect-ratio: .74; padding: 10px; border-radius: 8px;
  background: #fffaff; color: #5a3a70;
  box-shadow: 0 14px 25px #30154020; transform: rotate(-13deg);
}
.reward-card + .reward-card { transform: rotate(12deg) translate(-10%, 8%); background: #684783; color: white; }
.reward-card b { font-size: calc(clamp(22px, 4vw, 48px) * var(--reading-scale, 1)); line-height: 1; }
.reward-card i { display: block; margin: 8% 0; height: 4%; width: 75%; border-radius: 4px; background: currentColor; opacity: .28; }
.reward-card i:last-child { width: 55%; }
.system-diagram { display: flex; align-items: center; gap: clamp(3px, 1vw, 11px); color: #303b8a; font: 10px var(--mono); }
.system-diagram span { padding: 9px 7px; background: #fafaff; border: 1px solid #adb5df; border-radius: 4px; }
.system-diagram i { font-style: normal; }
.round { display: inline-grid; flex: none; place-items: center; width: 31px; height: 31px; border: 1px solid var(--rule); border-radius: 50%; color: var(--ink); font: 16px/1 Arial, sans-serif; }
a:hover .round { background: var(--ink); color: white; border-color: var(--ink); }
h3 { font-size: calc(clamp(19px, 2.3vw, 30px) * var(--reading-scale, 1)); font-weight: 650; letter-spacing: -.04em; line-height: 1.1; }
.case p, .line p { font-size: calc(15px * var(--reading-scale, 1)); }
.line p { margin-top: 8px; }
.line {
  display: grid;
  grid-template-columns: minmax(100px, .32fr) 1fr auto;
  gap: 20px;
  align-items: baseline;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
}
.case h2, .case h3, .line h2, .line h3 { margin: 0; font-size: calc(clamp(19px, 2.3vw, 30px) * var(--reading-scale, 1)); letter-spacing: -.04em; line-height: 1.1; }
.collection { padding: clamp(43px, 8vw, 100px) 0 65px; }
.collection > header { margin-bottom: 35px; }
.school {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  align-items: center;
  gap: 35px;
  padding: clamp(30px, 6vw, 85px);
  margin: 5px 0 clamp(48px, 6vw, 85px);
  background: var(--wash);
  border-radius: 9px;
}
.school h2 { margin-bottom: 18px; }
.school p, .contact p { max-width: 520px; margin-bottom: 21px; }
.school-mark { display: grid; place-items: center; width: min(100%, 218px); aspect-ratio: 1; justify-self: end; border: 1px solid #c2c8eb; border-radius: 50%; color: #242651; font-size: calc(clamp(54px, 11vw, 158px) * var(--reading-scale, 1)); line-height: .95; letter-spacing: -.095em; }
.section-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.section-summary h2 { margin-bottom: 0; }
.section-summary p { margin: 10px 0 13px; font-size: calc(18px * var(--reading-scale, 1)); }
.footer { display: flex; justify-content: space-between; gap: 16px; padding: 23px 0; border-top: 1px solid var(--rule); color: var(--muted); font-size: calc(13px * var(--reading-scale, 1)); }
.detail { max-width: 780px; margin: auto; padding: clamp(43px, 8vw, 100px) 0 65px; }
.back { display: inline-block; color: var(--blue); margin-bottom: 38px; font-size: calc(14px * var(--reading-scale, 1)); }
.detail h1, .collection h1 { font-size: calc(clamp(45px, 7vw, 90px) * var(--reading-scale, 1)); font-weight: 680; line-height: .96; letter-spacing: -.075em; margin: 12px 0 19px; }
.detail section { margin-top: 35px; border-top: 1px solid var(--rule); padding-top: 20px; }
.detail section h2 { font-size: calc(clamp(24px, 4vw, 34px) * var(--reading-scale, 1)); margin: 0 0 12px; letter-spacing: -.04em; }
.detail section p { font-size: calc(18px * var(--reading-scale, 1)); }
.bio-header { display: grid; grid-template-columns: 1fr minmax(125px, 180px); gap: 24px; align-items: center; }
.bio-portrait { display: block; width: 100%; height: auto; border-radius: 7px; filter: grayscale(1); }
.bio-skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; list-style: none; }
.bio-skills li { padding: 15px; border: 1px solid var(--rule); border-radius: 7px; }
.bio-skills h3 { margin-bottom: 7px; font-size: calc(18px * var(--reading-scale, 1)); }
.bio-skills li p { font-size: calc(16px * var(--reading-scale, 1)); }
.agent pre { margin: 16px 0 0; border: 1px solid var(--rule); border-radius: 6px; padding: clamp(14px, 3vw, 32px); background: #f4f2ee; white-space: pre-wrap; overflow-wrap: anywhere; }
.agent code { font: 13px/1.65 var(--mono); }
#copy-status { margin-top: 9px; color: var(--blue); font-size: calc(13px * var(--reading-scale, 1)); }
.contact-form { display: grid; gap: 16px; max-width: 590px; margin: 30px 0 22px; }
.contact-form label { display: grid; gap: 5px; font-weight: 600; }
.contact-form input, .contact-form textarea { width: 100%; border: 1px solid var(--rule); border-radius: 5px; padding: 10px 12px; color: var(--ink); background: #fff; font: inherit; font-weight: 400; }
.contact-form :is(input, textarea):focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.contact-form textarea { resize: vertical; }
.contact-form > p { font-size: calc(14px * var(--reading-scale, 1)); }
.contact-form .button { justify-self: start; }
.form-feedback:has(p:not([hidden])) { padding: 12px 14px; border-left: 3px solid var(--blue); background: var(--wash); }
@media (max-width: 1120px) {
  html { scroll-padding-top: 112px; }
  .shell { width: calc(100% - 56px); }
  .header { flex-wrap: wrap; gap: 10px 14px; padding: 12px 0; }
  .nav { order: 3; width: 100%; flex-wrap: wrap; gap: 7px 16px; }
}
@media (max-width: 650px) {
  html { scroll-padding-top: 125px; }
  .shell { width: calc(100% - 32px); }
  .header { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .header-menu { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .header-menu .nav { order: 0; }
  .menu-enhanced .menu-toggle.button { display: inline-flex; grid-column: 2; grid-row: 1; }
  .menu-enhanced .header-menu {
    display: none;
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: stretch;
    max-height: calc(100dvh - 125px);
    overflow-y: auto;
    padding: 8px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 0 0 7px 7px;
    box-shadow: 0 12px 26px #20201e12;
  }
  .menu-enhanced .menu-toggle[aria-expanded="true"] + .header-menu { display: flex; }
  .menu-enhanced .header-menu .nav { flex-direction: column; align-items: stretch; gap: 0; }
  .menu-enhanced .header-menu .switch { align-self: flex-start; margin: 0 10px 8px; }
  .menu-enhanced .nav a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 10px; }
  .menu-enhanced .nav a[aria-current] { box-shadow: none; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 34px 0 54px; }
  .hero h1 { font-size: calc(clamp(49px, 12vw, 76px) * var(--reading-scale, 1)); }
  .portrait { grid-row: 1; justify-self: start; width: min(100%, 170px); }
  .carousel-track { grid-auto-columns: 85%; }
  .case-grid, .section-summary { grid-template-columns: 1fr; }
  .bio-header, .bio-skills { grid-template-columns: 1fr; }
  .bio-portrait { width: min(100%, 160px); }
  .case-grid { gap: 28px; }
  .line { grid-template-columns: 1fr auto; gap: 5px 10px; }
  .line .eyebrow { grid-column: span 2; }
  .school { grid-template-columns: 1fr; }
  .school-mark { display: none; }
}
@media (max-width: 370px) {
  html { scroll-padding-top: 140px; }
  .header { gap: 7px; }
  .brand { font-size: calc(23px * var(--reading-scale, 1)); }
  .switch a { padding-inline: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .case-art { transition: none; }
}


/* mejoras.css */
/* Mejoras noviembre 2026: cifras del hero, rejilla de proyectos, cierre de páginas interiores */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; margin: 0; padding: 22px 0 clamp(40px, 5vw, 64px); border-top: 1px solid var(--rule); }
.facts div { display: grid; gap: 4px; }
.facts dt { font-size: calc(clamp(26px, 3.4vw, 44px) * var(--reading-scale, 1)); font-weight: 650; letter-spacing: -.055em; line-height: 1; }
.facts dd { margin: 0; max-width: 26ch; color: var(--muted); font-size: calc(15px * var(--reading-scale, 1)); line-height: 1.4; }
.facts { padding-bottom: 22px; }
.track { margin: 0; padding: 18px 0 clamp(40px, 5vw, 64px); border-top: 1px solid var(--rule); color: var(--muted); font-size: calc(16px * var(--reading-scale, 1)); line-height: 1.6; }
.track .eyebrow { display: block; margin-bottom: 6px; }
.where { margin-top: 12px; color: var(--muted); font-size: calc(15px * var(--reading-scale, 1)); }
.hero { padding-bottom: clamp(40px, 5vw, 64px); }
.next-step { display: grid; gap: 0; margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--rule); }
.next-link { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.next-link .eyebrow { grid-column: 1 / -1; }
.next-link strong { font-size: calc(clamp(21px, 2.6vw, 30px) * var(--reading-scale, 1)); font-weight: 650; letter-spacing: -.04em; line-height: 1.1; }
.next-link:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.next-cta { padding: clamp(26px, 4vw, 44px); margin-top: 26px; border-radius: 7px; background: var(--wash); }
.next-cta h2 { margin: 0 0 10px; font-size: calc(clamp(26px, 3.4vw, 40px) * var(--reading-scale, 1)); }
.next-cta p { max-width: 46ch; margin: 0 0 20px; }
@media (max-width: 650px) {
  .facts { grid-template-columns: 1fr; gap: 16px; }
  .facts div { grid-template-columns: 96px 1fr; align-items: baseline; }
  .portrait { grid-row: 1; width: min(100%, 150px); }
}

/* Cabecera: tamaño de texto y redes */
.text-size { display: flex; align-items: center; gap: 1px; border-inline-start: 1px solid var(--rule); margin-inline-start: 3px; padding-inline-start: 4px; }
.text-size button { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 5px; border: 0; border-radius: 999px; background: none; color: inherit; font: 600 12px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; }
.text-size button:nth-child(2) { font-size: calc(14px * var(--reading-scale, 1)); }
.text-size button:nth-child(3) { font-size: calc(16px * var(--reading-scale, 1)); }
.text-size button:hover { background: var(--wash); }
.text-size button[aria-pressed="true"] { color: white; background: var(--ink); }
.social { display: flex; align-items: center; gap: 2px; }
.social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; }
.social a:hover { color: var(--blue); background: var(--wash); }
.header { gap: 14px; }
.nav { gap: 16px; }


/* Carrusel de empresas */
.logos { padding: 18px 0 clamp(40px, 5vw, 64px); border-top: 1px solid var(--rule); }
.logos-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.logos-toggle { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--rule); border-radius: 999px; background: none; color: var(--muted); cursor: pointer; }
.logos-toggle:hover { color: var(--ink); background: var(--wash); }
.logos-toggle .i-play, .logos-toggle[aria-pressed="true"] .i-pause { display: none; }
.logos-toggle[aria-pressed="true"] .i-play { display: block; }
.logos-view { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.logos-track { display: flex; flex: none; align-items: center; gap: clamp(34px, 5vw, 68px); margin: 0; padding: 0 clamp(17px, 2.5vw, 34px); list-style: none; animation: logos 38s linear infinite; }
.logos-track li { flex: none; color: var(--muted); font-size: calc(clamp(20px, 2.3vw, 29px) * var(--reading-scale, 1)); font-weight: 650; letter-spacing: -.045em; white-space: nowrap; }
.logos-track img { display: block; height: clamp(22px, 2.6vw, 32px); width: auto; filter: grayscale(1); opacity: .72; }
.logos-view:hover .logos-track, .logos.paused .logos-track { animation-play-state: paused; }
@keyframes logos { to { transform: translateX(-100%); } }
/* Habilidades en tarjetas */
.skills { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: clamp(14px, 2.4vw, 30px); }
.skill-card { display: grid; align-content: start; gap: 14px; padding: clamp(20px, 2.6vw, 32px); border: 1px solid var(--rule); border-radius: 9px; background: #fff; }
.skill-card h3 { margin: 0; font-size: calc(clamp(22px, 2.4vw, 30px) * var(--reading-scale, 1)); font-weight: 650; letter-spacing: -.045em; line-height: 1.1; }
.skill-card ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.skill-card li { padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: calc(14px * var(--reading-scale, 1)); font-weight: 560; line-height: 1.3; }
.skill-card:last-child { background: var(--wash); border-color: #c9cdee; }
.skill-card:last-child li { background: #fff; border-color: #c9cdee; font: 500 12.5px/1.3 var(--mono); }
@media (max-width: 650px) { .skills { grid-template-columns: 1fr; } }
.school h2 + p { color: var(--ink); font-size: calc(18px * var(--reading-scale, 1)); margin-bottom: 10px; }
@media (max-width: 1120px) { .header-menu .social { margin-inline-start: -4px; } }
@media (max-width: 650px) {
  .menu-enhanced .header-menu .social { margin: 0 6px 6px; }
  .social a { width: 44px; height: 44px; }
  .text-size button { min-width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .logos-view { -webkit-mask-image: none; mask-image: none; }
  .logos-track { animation: none; flex-wrap: wrap; flex: 1; row-gap: 12px; }
  .logos-track[aria-hidden], .logos-toggle { display: none; }
}

/* Página "Sobre mí" */
.bio { max-width: none; }
.bio > * { max-width: 780px; margin-inline: auto; }
.bio > .flow-section { max-width: none; }
.bio .facts { margin-top: 28px; }
.bio-skills li { background: #fff; }
.bio .bio-skills li { padding: 20px; border-radius: 9px; }
.bio .bio-skills h3 { font-size: calc(19px * var(--reading-scale, 1)); letter-spacing: -.03em; }
.bio .bio-skills li p { font-size: calc(15.5px * var(--reading-scale, 1)); }
.flow-head { max-width: 780px; margin-inline: auto; }
.flow-head .eyebrow { display: block; margin-bottom: 4px; }
.bio .flow-head h2 { margin-bottom: 12px; }
.bio .flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 14px; row-gap: 0; margin: 34px 0 0; padding: 0; list-style: none; }
.flow-step { position: relative; display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 10px; align-content: start; }
.flow-num { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper); font: 600 12px/1 var(--mono); }
.flow-step:not(:last-child)::before { content: ""; position: absolute; top: 15px; left: 40px; right: -6px; height: 1px; background: #b9b8b0; }
.flow-step:not(:last-child)::after { content: ""; position: absolute; top: 12px; right: -6px; width: 6px; height: 6px; border-top: 1px solid #8d8c85; border-right: 1px solid #8d8c85; transform: rotate(45deg); }
.bio .flow-step h3 { margin: 4px 0 0; font-size: calc(21px * var(--reading-scale, 1)); font-weight: 650; letter-spacing: -.045em; line-height: 1.1; }
.bio .flow-goal { margin: 0; font-size: calc(15px * var(--reading-scale, 1)); line-height: 1.4; color: var(--ink); font-weight: 560; }
.flow-lane { padding: 10px 11px; border: 1px solid var(--rule); border-radius: 7px; background: #fff; }
.flow-lane.ai { background: var(--wash); border-color: #c9cdee; }
.flow-tag { display: block; margin-bottom: 4px; color: var(--muted); font: 500 10px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.flow-lane.ai .flow-tag { color: var(--blue); }
.bio .flow-lane p, .bio .flow-out p { margin: 0; font-size: calc(13.5px * var(--reading-scale, 1)); line-height: 1.4; color: var(--ink); }
.flow-out { padding: 2px 2px 0; }
.bio .flow-out p { color: var(--muted); }
.bio .flow-loop { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; max-width: none; margin: 22px calc(100% / 12) 0; padding: 18px 24px 0; border: 1px dashed #b3b8dc; border-top: 0; border-radius: 0 0 14px 14px; color: var(--muted); font-size: calc(14px * var(--reading-scale, 1)); line-height: 1.4; text-align: center; }
.flow-loop::before { content: ""; position: absolute; left: -5px; top: -7px; border: 5px solid transparent; border-top: 0; border-bottom: 7px solid #b3b8dc; }
.flow-loop .icon { flex: none; color: var(--blue); }
.bio .flow-note { margin: 20px auto 0; max-width: 780px; font-size: calc(15px * var(--reading-scale, 1)); text-align: center; }
.bio .pieces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0; padding: 0; list-style: none; }
.bio .pieces li { padding: 18px; border: 1px solid var(--rule); border-radius: 9px; background: #fff; }
.bio .pieces h3 { margin: 0 0 8px; font-size: calc(18px * var(--reading-scale, 1)); letter-spacing: -.03em; line-height: 1.2; }
.bio .pieces p { margin: 0; font-size: calc(15px * var(--reading-scale, 1)); line-height: 1.45; }
.career { margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.career li { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 4px 18px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.career-years { color: var(--blue); font: 12px/1.4 var(--mono); letter-spacing: .04em; white-space: nowrap; }
.career strong { display: block; font-size: calc(19px * var(--reading-scale, 1)); font-weight: 650; letter-spacing: -.03em; line-height: 1.2; }
.career-role { display: block; margin-top: 2px; color: var(--muted); font-size: calc(15px * var(--reading-scale, 1)); line-height: 1.4; }
.career-place { color: var(--muted); font-size: calc(14px * var(--reading-scale, 1)); text-align: right; }
@media (max-width: 1120px) {
  .bio .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }
  .flow-step::before, .flow-step::after { display: none; }
  .bio .flow-loop { margin-inline: 0; border-top: 1px dashed #b3b8dc; border-radius: 9px; padding-top: 14px; padding-bottom: 14px; }
  .flow-loop::before { display: none; }
}
@media (max-width: 900px) { .bio .pieces { grid-template-columns: 1fr; } }
@media (max-width: 650px) {
  .bio .flow { grid-template-columns: 1fr; row-gap: 0; }
  .flow-step { grid-row: auto; grid-template-rows: none; padding: 0 0 28px 48px; }
  .flow-num { position: absolute; left: 0; top: 0; }
  .flow-step:not(:last-child)::before { display: block; top: 36px; bottom: 4px; left: 15px; right: auto; width: 1px; height: auto; }
  .bio-header .bio-portrait { order: -1; }
  .career li { grid-template-columns: 1fr; gap: 2px; }
  .career-place { text-align: left; }
}

/* Servicios en una sola página */
.services > header .eyebrow { display: block; }
.services > header .lede { max-width: 640px; }
.svc-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(28px, 4vw, 48px); }
.svc-index a { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-content: start; padding: 20px; border: 1px solid var(--rule); border-radius: 9px; background: #fff; }
.svc-index a:hover { border-color: var(--ink); }
.svc-index .svc-n { grid-column: 1 / -1; color: var(--blue); font: 12px/1.4 var(--mono); letter-spacing: .08em; }
.svc-index strong { font-size: calc(clamp(19px, 1.9vw, 23px) * var(--reading-scale, 1)); font-weight: 650; letter-spacing: -.04em; line-height: 1.15; }
.svc-index .icon { align-self: center; color: var(--muted); }
.svc-index a > span:not(.svc-n) { grid-column: 1 / -1; color: var(--muted); font-size: calc(15px * var(--reading-scale, 1)); line-height: 1.4; }
.svc { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 6vw, 96px); padding: clamp(44px, 6vw, 84px) 0; border-top: 1px solid var(--rule); scroll-margin-top: calc(24px - clamp(44px, 6vw, 84px)); }
.svc:first-of-type { margin-top: clamp(44px, 6vw, 84px); }
.svc-head { align-self: start; position: sticky; top: 112px; }
.svc-head h2 { margin: 10px 0 16px; font-size: calc(clamp(32px, 4.2vw, 56px) * var(--reading-scale, 1)); }
.svc-promise { max-width: 22ch; color: var(--ink); font-size: calc(clamp(20px, 2.1vw, 26px) * var(--reading-scale, 1)); font-weight: 560; letter-spacing: -.03em; line-height: 1.25; }
.svc-proof { margin: 26px 0 24px; padding-top: 14px; border-top: 1px solid var(--rule); }
.svc-proof ul { display: grid; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.svc-proof a { color: var(--blue); font-size: calc(15px * var(--reading-scale, 1)); font-weight: 560; }
.svc-proof a:hover { text-decoration: underline; text-underline-offset: 3px; }
.svc-body { display: grid; gap: 14px; }
.svc-block { padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--rule); border-radius: 9px; background: #fff; }
.svc-block h3 { margin: 0 0 14px; color: var(--muted); font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.svc-block :is(ul, ol) { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.svc-block li { position: relative; font-size: calc(17px * var(--reading-scale, 1)); line-height: 1.42; }
.svc-fits li { padding-left: 24px; }
.svc-fits li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 1px; background: var(--ink); }
.svc-steps { counter-reset: paso; }
.svc-steps li { display: grid; gap: 2px; padding-left: 42px; counter-increment: paso; }
.svc-steps li::before { content: counter(paso, decimal-leading-zero); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--ink); border-radius: 50%; font: 600 11px/1 var(--mono); }
.svc-steps strong { font-weight: 650; letter-spacing: -.02em; }
.svc-steps span { color: var(--muted); font-size: calc(15.5px * var(--reading-scale, 1)); }
.svc-block:last-child { background: var(--wash); border-color: #c9cdee; }
.svc-block:last-child h3 { color: var(--blue); }
.svc-gets li { padding-left: 28px; }
.svc-gets li::before { content: ""; position: absolute; left: 3px; top: .34em; width: 11px; height: 6px; border-left: 1.5px solid var(--blue); border-bottom: 1.5px solid var(--blue); transform: rotate(-45deg); }
.svc-formats, .svc-faq { padding: clamp(44px, 6vw, 84px) 0 0; border-top: 1px solid var(--rule); }
.svc-formats { padding-bottom: clamp(44px, 6vw, 84px); }
.svc-formats h2, .svc-faq h2 { font-size: calc(clamp(30px, 4vw, 52px) * var(--reading-scale, 1)); margin-bottom: 14px; }
.svc-formats ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.svc-formats li { display: grid; align-content: start; gap: 8px; padding: 20px; border: 1px solid var(--rule); border-radius: 9px; background: #fff; }
.svc-formats h3 { margin: 0; font-size: calc(21px * var(--reading-scale, 1)); font-weight: 650; letter-spacing: -.04em; }
.svc-formats li p { font-size: calc(15px * var(--reading-scale, 1)); line-height: 1.45; }
.svc-formats .where { margin-top: 20px; }
.svc-faq { max-width: 860px; }
.svc-faq details { border-bottom: 1px solid var(--rule); }
.svc-faq details:first-of-type { border-top: 1px solid var(--rule); margin-top: 22px; }
.svc-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: calc(clamp(18px, 1.8vw, 21px) * var(--reading-scale, 1)); font-weight: 600; letter-spacing: -.03em; cursor: pointer; list-style: none; }
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--rule); border-radius: 50%; font: 400 18px/1 Arial, sans-serif; }
.svc-faq details[open] summary::after { content: "–"; }
.svc-faq summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.svc-faq details p { max-width: 62ch; padding: 0 0 20px; font-size: calc(17px * var(--reading-scale, 1)); }
.services .next-step { border-top: 0; }
@media (max-width: 1120px) { .svc-formats ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .svc { grid-template-columns: 1fr; gap: 26px; }
  .svc-head { position: static; }
  .svc-promise { max-width: none; }
  .svc-index { grid-template-columns: 1fr; }
}
@media (max-width: 650px) { .svc-formats ul { grid-template-columns: 1fr; } .svc-block li { font-size: calc(16px * var(--reading-scale, 1)); } }

/* Selector de idioma y modo: posición fija a la derecha, sin depender del largo del menú */
@media (min-width: 1121px) { .nav { flex: 1 1 auto; justify-content: center; } }
.switch nav:nth-of-type(2) a:first-child { min-width: 62px; text-align: center; }

/* Layout unificado: todas las páginas usan el ancho completo y el mismo borde izquierdo */
.detail, .bio { max-width: none; margin: 0; }
.bio > * { max-width: none; margin-inline: 0; }
.detail > header .lede, .detail > .lede { max-width: 640px; }
.detail > section:not(.flow-section) { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: clamp(28px, 6vw, 96px); row-gap: 14px; margin-top: 0; padding: clamp(30px, 4vw, 52px) 0; }
.detail > header + section, .detail > .facts + section { margin-top: clamp(30px, 4vw, 52px); }
.detail > section:not(.flow-section) > h2 { grid-column: 1; grid-row: 1; align-self: start; margin: 0; font-size: calc(clamp(26px, 3.2vw, 42px) * var(--reading-scale, 1)); letter-spacing: -.05em; line-height: 1.05; }
.detail > section:not(.flow-section) > :not(h2) { grid-column: 2; margin-top: 0; margin-bottom: 0; }
.bio-header { grid-template-columns: minmax(0, 1fr) minmax(160px, 300px); gap: clamp(28px, 6vw, 96px); align-items: start; }
.bio .facts { margin-top: clamp(30px, 4vw, 52px); padding-bottom: 0; }
.flow-section { margin-top: 0; padding: clamp(30px, 4vw, 52px) 0; border-top: 1px solid var(--rule); }
.flow-head { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: clamp(28px, 6vw, 96px); max-width: none; margin: 0; }
.flow-head .eyebrow, .flow-head h2 { grid-column: 1; }
.bio .flow-head h2 { margin: 0; font-size: calc(clamp(26px, 3.2vw, 42px) * var(--reading-scale, 1)); letter-spacing: -.05em; line-height: 1.05; }
.flow-head p { grid-column: 2; grid-row: 1 / span 2; font-size: calc(18px * var(--reading-scale, 1)); }
.bio .flow-note { max-width: none; }
.detail > .actions { margin-top: clamp(24px, 3vw, 40px); }
.detail > .next-step { margin-top: clamp(30px, 4vw, 52px); }
.detail > .next-step .next-link { padding-inline: 0; }
.detail > .contact-form { max-width: 640px; }
.detail.agent pre { max-width: none; }
.detail > .back { margin-bottom: 30px; }
@media (max-width: 900px) {
  .detail > section:not(.flow-section), .flow-head { grid-template-columns: 1fr; }
  .detail > section:not(.flow-section) > h2, .detail > section:not(.flow-section) > :not(h2), .flow-head .eyebrow, .flow-head h2, .flow-head p { grid-column: 1; grid-row: auto; }
  .flow-head p { margin-top: 12px; }
}
@media (max-width: 650px) { .bio-header { grid-template-columns: 1fr; } }

/* Cabecera de página común: etiqueta, titular y entradilla en la misma posición en todas las páginas */
.detail > .back { float: left; display: inline-flex; align-items: center; gap: 6px; margin: 0 10px 0 0; color: var(--blue); font: 11px/1.55 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.detail > .back::after { content: "/"; margin-left: 4px; color: var(--muted); }
.detail > .back .icon { width: 13px; height: 13px; vertical-align: 0; }
:is(.detail, .collection) > header > .eyebrow, .detail > .eyebrow, .bio-header .eyebrow { display: block; }
.collection > header { margin-bottom: clamp(30px, 4vw, 52px); }
.collection > header .lede { max-width: 640px; }
.detail > header { padding-bottom: clamp(30px, 4vw, 52px); }
.detail > header + section, .detail > .facts + section { margin-top: 0; }

/* Artículos largos: ilustraciones, citas y descarga */
.art-meta { margin-top: 16px; color: var(--muted); font: 12px/1.5 var(--mono); letter-spacing: .06em; }
.article > section > p, .article .art-list li { font-size: calc(18px * var(--reading-scale, 1)); line-height: 1.6; }
.article > section > p + p { margin-top: 2px; }
.article > section > h3 { margin: 14px 0 -4px; font-size: calc(22px * var(--reading-scale, 1)); font-weight: 650; letter-spacing: -.04em; }
.art-list { display: grid; gap: 10px; margin: 0; padding-left: 22px; color: var(--muted); }
.art-list strong, .article > section > p strong { color: var(--ink); font-weight: 650; }
.art-fig { margin: 12px 0; padding: clamp(16px, 2.4vw, 28px); border: 1px solid var(--rule); border-radius: 9px; background: var(--surface, #fff); }
.art-fig figcaption { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--muted); font-size: calc(14px * var(--reading-scale, 1)); }
.fig-compare { display: grid; grid-template-columns: 1fr 1.25fr; gap: 12px; }
.fig-panel { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 16px; border: 1px dashed var(--rule); border-radius: 7px; }
.fig-panel.on { border-style: solid; border-color: var(--blue); background: var(--wash); }
.fig-panel > p { font-size: calc(14px * var(--reading-scale, 1)); line-height: 1.35; color: var(--ink); font-weight: 560; }
.fig-pair { display: grid; align-content: center; justify-items: center; gap: 0; }
.fig-pair b, .fig-hub > b, .fig-hub li { display: block; padding: 9px 12px; border: 1px solid var(--ink); border-radius: 6px; background: var(--paper); color: var(--ink); font-size: calc(14px * var(--reading-scale, 1)); font-weight: 650; text-align: center; }
.fig-pair b { width: min(100%, 150px); }
.fig-pair i { position: relative; padding: 16px 0 16px 16px; color: var(--muted); font: normal 10px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.fig-pair i::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; border-left: 1px dashed var(--muted); }
.fig-hub { display: grid; align-content: center; gap: 22px; }
.fig-hub > b { position: relative; justify-self: center; min-width: 62%; border-color: var(--blue); }
.fig-hub > b::after { content: ""; position: absolute; left: 50%; bottom: -22px; height: 22px; border-left: 1px solid var(--blue); }
.fig-hub small { display: block; margin-top: 3px; color: var(--muted); font: 400 10px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.fig-hub ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--blue); list-style: none; }
.fig-hub li { padding: 8px 6px; border-color: var(--rule); font-size: calc(13px * var(--reading-scale, 1)); font-weight: 560; }
.fig-file { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border: 1px solid var(--rule); border-bottom: 0; border-radius: 7px 7px 0 0; background: var(--paper); }
.fig-file span { width: 8px; height: 8px; border-radius: 50%; background: var(--rule); }
.fig-file b { margin-left: 8px; font: 500 12px/1.3 var(--mono); color: var(--ink); }
.fig-contract dl { margin: 0; border: 1px solid var(--rule); border-radius: 0 0 7px 7px; }
.fig-contract dl div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--rule); }
.fig-contract dl div:first-child { border-top: 0; }
.fig-contract dt { color: var(--blue); font: 12px/1.5 var(--mono); letter-spacing: .04em; }
.fig-contract dd { margin: 0; color: var(--ink); font-size: calc(14.5px * var(--reading-scale, 1)); line-height: 1.4; }
.fig-pipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.fig-pipe li { position: relative; display: grid; align-content: start; gap: 6px; }
.fig-pipe li:not(:last-child)::before { content: ""; position: absolute; top: 15px; left: 38px; right: -6px; height: 1px; background: var(--muted); opacity: .6; }
.fig-pipe b { margin-top: 4px; color: var(--ink); font-size: calc(16px * var(--reading-scale, 1)); font-weight: 650; letter-spacing: -.03em; }
.fig-pipe li > span:last-child { color: var(--muted); font-size: calc(13.5px * var(--reading-scale, 1)); line-height: 1.4; }
.fig-note { margin-top: 16px; padding: 10px 12px; border-radius: 6px; background: var(--wash); color: var(--ink); font-size: calc(14px * var(--reading-scale, 1)); }
.art-quote { margin: 8px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--blue); }
.art-quote p { color: var(--ink); font-size: calc(clamp(21px, 2.3vw, 27px) * var(--reading-scale, 1)); font-weight: 560; letter-spacing: -.03em; line-height: 1.3; }
.art-download { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; margin-top: 10px; padding: clamp(18px, 2.4vw, 28px); border-radius: 9px; background: var(--wash); }
.art-download h3 { margin: 4px 0 6px; font-size: calc(21px * var(--reading-scale, 1)); font-weight: 650; letter-spacing: -.04em; }
.art-download p { font-size: calc(15px * var(--reading-scale, 1)); line-height: 1.45; }
@media (max-width: 650px) {
  .fig-compare, .art-download { grid-template-columns: 1fr; }
  .fig-pipe { grid-template-columns: 1fr; gap: 16px; }
  .fig-pipe li { grid-template-columns: 30px 1fr; column-gap: 12px; }
  .fig-pipe li::before { display: none; }
  .fig-pipe .flow-num { grid-row: span 2; }
  .fig-pipe b { margin-top: 0; }
  .fig-contract dl div { grid-template-columns: 1fr; gap: 2px; }
  .article > section > p, .article .art-list li { font-size: calc(17px * var(--reading-scale, 1)); }
}

/* Ancho del área de contenido: 80 % en escritorio, 90 % en tablet, completo en móvil.
   La cabecera y el pie mantienen el ancho completo. */
main.shell > * { width: 80%; max-width: none; margin-inline: auto; }
.hero h1 { font-size: calc(clamp(49px, 6.9vw, 100px) * var(--reading-scale, 1)); }
.bio .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }
.bio .flow-step::before, .bio .flow-step::after { display: none; }
.bio .flow-loop { margin-inline: 0; border-top: 1px dashed #b3b8dc; border-radius: 9px; padding-top: 14px; padding-bottom: 14px; }
.bio .flow-loop::before { display: none; }
@media (max-width: 1120px) { main.shell > * { width: 90%; } }
@media (max-width: 650px) {
  main.shell > * { width: 100%; }
  .bio .flow { grid-template-columns: 1fr; row-gap: 0; }
  .bio .flow-step:not(:last-child)::before { display: block; }
}
.bio .pieces { grid-template-columns: 1fr; }
.flow-step { min-width: 0; overflow-wrap: break-word; hyphens: auto; }

/* Artículos: tarjetas con ilustración */
.art-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: 8px; }
.art-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 20px; }
.art-card { min-width: 0; }
.art-card.featured { grid-column: 1 / -1; }
.art-card-link { display: grid; grid-template-rows: auto 1fr; height: 100%; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--surface, #fff); transition: border-color 160ms ease, transform 160ms ease; }
.art-card-link:hover { border-color: var(--ink); transform: translateY(-2px); }
.art-card.featured .art-card-link { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: none; }
.art-card-body { display: grid; align-content: start; gap: 12px; padding: clamp(20px, 2.4vw, 32px); }
.art-card.featured .art-card-body { align-content: center; gap: 16px; padding: clamp(24px, 3.4vw, 48px); }
.art-card-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; }
.art-card-meta span:last-child { color: var(--muted); font: 11px/1.55 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.art-card h2, .art-card h3 { margin: 0; font-size: calc(clamp(22px, 2.3vw, 30px) * var(--reading-scale, 1)); font-weight: 650; letter-spacing: -.045em; line-height: 1.12; }
.art-card.featured h2 { font-size: calc(clamp(30px, 3.6vw, 50px) * var(--reading-scale, 1)); }
.art-card p { font-size: calc(16px * var(--reading-scale, 1)); line-height: 1.5; }
.art-card.featured p { font-size: calc(18px * var(--reading-scale, 1)); }
.art-card-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--blue); font-size: calc(15px * var(--reading-scale, 1)); font-weight: 600; }
.art-card-link:hover .art-card-more { text-decoration: underline; text-underline-offset: 3px; }
.art-cover { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; color: #20201e; background: #e3e7fb; }
.art-card.featured .art-cover { aspect-ratio: auto; min-height: 340px; }
.art-cover-lg { aspect-ratio: 21 / 8; min-height: 200px; border-radius: 12px; margin: clamp(8px, 2vw, 24px) 0 0; }
.cv-contract { background: #f3e6dc; }
.cv-pilot { background: #e3efe1; }
.cv-stack { display: grid; justify-items: center; width: min(78%, 360px); }
.cv-node { padding: 9px 22px; border: 1px solid #20201e; border-radius: 8px; background: #fff; font: 600 13px/1 var(--mono); letter-spacing: .06em; }
.cv-stem { display: block; width: 1px; height: 24px; background: #3a48a8; }
.cv-bar { display: block; width: 84%; height: 1px; background: #3a48a8; }
.cv-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: 14px; }
.cv-row > span { position: relative; padding: 9px 2px; border: 1px solid #c7ccef; border-radius: 6px; background: #fff; font: 600 12px/1.2 "Helvetica Neue", Arial, sans-serif; text-align: center; }
.cv-row > span::before { content: ""; position: absolute; left: 50%; top: -15px; height: 14px; width: 1px; background: #3a48a8; }
.cv-card { width: min(70%, 320px); overflow: hidden; border: 1px solid #e3cfc2; border-radius: 10px; background: #fff; box-shadow: 0 10px 30px #20201e1a; }
.cv-dots { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid #eee3dc; }
.cv-dots i { width: 8px; height: 8px; border-radius: 50%; background: #e3cfc2; }
.cv-dots b { margin-left: 8px; font: 600 12px/1.3 var(--mono); }
.cv-line { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid #f3ece6; }
.cv-line em { font: normal 11px/1.3 var(--mono); color: #3a48a8; }
.cv-line u { display: block; height: 8px; border-radius: 4px; background: #e9e4df; }
.cv-line:nth-of-type(2) u { width: 90%; } .cv-line:nth-of-type(3) u { width: 62%; } .cv-line:nth-of-type(4) u { width: 78%; } .cv-line:nth-of-type(5) u { width: 50%; }
.cv-flow { display: flex; align-items: center; gap: 14px; }
.cv-in, .cv-out { display: grid; gap: 8px; }
.cv-in i, .cv-r i { display: block; height: 11px; border: 1px solid #c4d7c0; border-radius: 6px; background: #fff; }
.cv-in i { width: 50px; }
.cv-arrow { position: relative; width: 22px; height: 1px; background: #20201e; }
.cv-arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid #20201e; border-right: 1px solid #20201e; transform: rotate(45deg); }
.cv-ai { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #20201e; border-radius: 50%; background: #fff; font: 600 12px/1 var(--mono); }
.cv-r { display: flex; align-items: center; gap: 8px; }
.cv-r s { position: relative; flex: none; width: 16px; height: 16px; border-radius: 50%; background: #3a7a3a; }
.cv-r s::after { content: ""; position: absolute; left: 5px; top: 3.5px; width: 4px; height: 7px; border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(40deg); }
@media (max-width: 900px) {
  .art-grid.compact { grid-template-columns: 1fr; }
  .art-card.featured .art-card-link { grid-template-columns: 1fr; }
  .art-card.featured .art-cover { aspect-ratio: 16 / 10; min-height: 0; }
}
@media (max-width: 650px) { .art-grid { grid-template-columns: 1fr; } .art-cover-lg { aspect-ratio: 16 / 9; } }
@media (prefers-reduced-motion: reduce) { .art-card-link { transition: none; } .art-card-link:hover { transform: none; } }


/* apariencia.css */
:root {
  --surface: #fff;
  --active-nav: #eeede8;
  --on-ink: #fff;
  --on-accent: #fff;
  --controls-shadow: 0 3px 7px #20201e10, 0 8px 24px #20201e0c;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #18191c;
  --surface: #222429;
  --ink: #f3f1eb;
  --muted: #bfbfb8;
  --rule: #41434b;
  --blue: #b3baff;
  --wash: #2b2e45;
  --active-nav: #33353c;
  --on-ink: #18191c;
  --on-accent: #18191c;
  --controls-shadow: 0 3px 8px #0003, 0 8px 24px #0003;
}
.skip, .contact-form :is(input, textarea), .skill-card, .skill-card:last-child li,
.bio-skills li, .flow-lane, .bio .pieces li, .svc-index a, .svc-block, .svc-formats li { background: var(--surface); }
.skill-card:last-child, .flow-lane.ai, .svc-block:last-child { background: var(--wash); border-color: var(--rule); }
.skill-card:last-child li { border-color: var(--rule); }
.nav a[aria-current] { background: var(--active-nav); box-shadow: 0 0 0 5px var(--active-nav); }
.switch a[aria-current], .text-size button[aria-pressed="true"], .primary, a:hover .round { color: var(--on-ink); }
.primary:hover { color: var(--on-accent); }
.agent pre { background: var(--surface); }
.school-mark { border-color: var(--rule); color: var(--ink); }
.floating-controls {
  position: fixed;
  top: calc(var(--site-header-height, 80px) + 18px);
  inset-inline: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  pointer-events: none;
  opacity: var(--controls-opacity, 1);
  filter: blur(var(--controls-blur, 0px));
  transition: opacity 220ms ease, filter 220ms ease;
}
.floating-controls > * { pointer-events: auto; }
.floating-controls.is-faded > * { pointer-events: none; }
.floating-controls:focus-within { opacity: 1; filter: none; }
.appearance-theme, .appearance-trigger, .appearance-panel > .switch {
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--controls-shadow);
  border-radius: 999px;
}
.appearance-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 14px;
  cursor: pointer;
}
.appearance-theme > svg { flex: none; color: var(--muted); }
.appearance-theme[aria-checked="false"] > svg:first-child,
.appearance-theme[aria-checked="true"] > svg:last-child { color: var(--blue); }
.appearance-track { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--active-nav); }
.appearance-track::after { content: ""; position: absolute; inset: 3px auto 3px 3px; width: 14px; border-radius: 50%; background: var(--blue); transition: transform 180ms ease; }
.appearance-theme[aria-checked="true"] .appearance-track::after { transform: translateX(14px); }
.appearance-preferences { position: relative; }
.appearance-panel > .switch { min-height: 44px; padding: 5px; }
.appearance-trigger { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 9px 14px; font: 550 13px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; }
.appearance-panel .switch nav:nth-of-type(2) a:first-child { min-width: 62px; }
@media (min-width: 651px) and (max-width: 1120px) {
  .floating-ready .hero { padding-top: 100px; }
  .floating-ready :is(.collection, .detail) { padding-top: 96px; }
}
@media (max-width: 650px) {
  .floating-controls { top: calc(var(--site-header-height, 80px) + 12px); gap: 10px; }
  .floating-ready main { padding-top: 66px; }
  .appearance-trigger { display: inline-flex; }
  .appearance-panel { display: none; position: absolute; top: calc(100% + 10px); right: 0; width: min(288px, calc(100vw - 32px)); }
  .appearance-preferences.is-open .appearance-panel { display: block; }
  .appearance-panel > .switch { display: grid; gap: 10px; border-radius: 18px; padding: 12px; }
  .appearance-panel .switch nav { justify-content: center; }
  .appearance-panel .switch nav + nav { border: 0; margin: 0; padding: 0; }
  .appearance-panel .switch a { display: grid; align-items: center; min-height: 40px; padding-inline: 15px; }
  .appearance-panel .text-size { justify-content: center; border: 0; margin: 0; padding: 0; }
  .appearance-panel .text-size button { min-height: 40px; min-width: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .floating-controls, .appearance-track::after { transition: none; }
  .floating-controls { filter: none; }
}


/* layout.css */
/* One content container and one heading rhythm across every page. */
html { scrollbar-gutter: stable; }
main.page-content {
  width: calc((100% - 96px) * .8);
  max-width: 960px;
  margin-inline: auto;
  padding-top: 112px;
}
main.page-content > * { width: 100%; max-width: none; margin-inline: 0; }
main.page-content > .page-section {
  position: relative;
  padding-top: 0;
}
main.page-content .page-kicker {
  display: block;
  min-height: 18px;
  margin: 0;
  line-height: 18px;
}
main.page-content .page-title {
  clear: both;
  margin: 16px 0 22px;
  font-size: calc(clamp(46px, 6vw, 80px) * var(--reading-scale, 1));
  font-weight: 680;
  line-height: .98;
  letter-spacing: -.065em;
  overflow-wrap: break-word;
}
main.page-content .detail > .back {
  position: absolute;
  top: -38px;
  float: none;
  margin: 0;
  font-size: calc(11px * var(--reading-scale, 1));
  line-height: 18px;
}
main.page-content .detail > .back::after { content: none; }
main.page-content :is(.hero-copy, .bio-header > div) { min-width: 0; }
main.page-content .hero { column-gap: clamp(28px, 5vw, 64px); }
main.page-content .bio-header { column-gap: clamp(28px, 5vw, 64px); }
main.page-content :is(.hero-copy, .bio-header) .lede { max-width: 60ch; }
main.page-content :is(.collection, .detail) > header { padding-bottom: 0; margin-bottom: 42px; }
main.page-content .detail > header.bio-header { padding-bottom: 0; }
main.page-content .detail { margin: 0; }
main.page-content .bio > * { margin-inline: 0; }
main.page-content :is(.detail, .collection) .lede { max-width: 62ch; }
main.page-content .detail > section:not(.flow-section) { column-gap: clamp(24px, 4vw, 56px); }

/* Editorial article list. All stories share the same illustration/text layout. */
.writing-list.art-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 0;
}
.writing-list .art-card { grid-column: auto; }
.writing-list .art-card .art-card-link {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.65fr);
  grid-template-rows: auto;
  align-items: stretch;
  gap: clamp(20px, 3vw, 34px);
  padding: 12px;
  border-radius: 16px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.writing-list .art-card .art-card-link:hover {
  transform: none;
  border-color: var(--blue);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--ink) 5%, transparent);
}
.writing-list .art-card .art-cover {
  aspect-ratio: auto;
  min-height: 240px;
  border-radius: 9px;
}
.writing-list .art-card .art-card-body {
  align-content: center;
  gap: 13px;
  padding: 16px 18px 16px 0;
}
.writing-list .art-card-meta { justify-content: flex-start; gap: 8px 18px; align-items: baseline; }
.writing-list .art-card-meta > span:last-child { font: 12px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0; text-transform: none; }
.writing-list .art-card :is(h2, h3) {
  font-size: calc(clamp(25px, 2.7vw, 34px) * var(--reading-scale, 1));
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -.045em;
  text-wrap: pretty;
}
.writing-list .art-card p { font-size: calc(16px * var(--reading-scale, 1)); line-height: 1.55; }
.art-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 1px 0 0; padding: 0; }
.art-tags li { padding: 4px 9px; border: 1px solid var(--rule); border-radius: 5px; color: var(--muted); font-size: calc(11px * var(--reading-scale, 1)); line-height: 1.35; }
.writing-list .art-card-more { margin-top: 2px; font-size: calc(14px * var(--reading-scale, 1)); }
.writing-list .cv-stack { width: 86%; }
.writing-list .cv-card { width: 80%; }
.writing-list .cv-flow { gap: 10px; transform: scale(.88); }
.writing-list .cv-node { padding: 12px 22px; }
.writing-list .cv-row { gap: 5px; }
.writing-list .cv-row > span { font-size: calc(11px * var(--reading-scale, 1)); }
.home-writing .art-card .art-card-link { grid-template-columns: minmax(0, .7fr) minmax(0, 1.8fr); }
.home-writing .art-card .art-cover { min-height: 208px; }
.home-writing .art-card :is(h2, h3) { font-size: calc(clamp(24px, 2.3vw, 30px) * var(--reading-scale, 1)); }
.home-writing .art-card .art-card-body { padding-block: 12px; }

@media (max-width: 1120px) {
  main.page-content { width: calc((100% - 56px) * .9); max-width: none; }
  .writing-list .art-card .art-card-link { grid-template-columns: minmax(0, .85fr) minmax(0, 1.65fr); }
}
@media (max-width: 900px) {
  .writing-list .art-card .art-cover { min-height: 220px; }
  .writing-list .cv-flow { transform: scale(.70); }
}
@media (max-width: 650px) {
  main.page-content { width: calc(100% - 32px); padding-top: 104px; }
  main.page-content .page-title { font-size: calc(clamp(42px, 11vw, 60px) * var(--reading-scale, 1)); letter-spacing: -.055em; }
  main.page-content .hero-copy { grid-row: 1; }
  main.page-content .portrait { grid-row: 2; }
  main.page-content .bio-header > div { grid-row: 1; }
  main.page-content .bio-header .bio-portrait { order: 0; grid-row: 2; }
  main.page-content :is(.collection, .detail) > header { margin-bottom: 30px; }
  .writing-list.art-grid { gap: 22px; }
  .writing-list .art-card .art-card-link { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 10px; }
  .writing-list .art-card .art-cover { aspect-ratio: 16 / 9; min-height: 0; }
  .writing-list .art-card .art-card-body { padding: 20px 10px 12px; gap: 13px; }
  .writing-list .art-card :is(h2, h3) { font-size: calc(28px * var(--reading-scale, 1)); }
  .writing-list .cv-stack { width: min(80%, 280px); }
  .writing-list .cv-card { width: min(76%, 250px); }
  .writing-list .cv-line { padding-block: 7px; }
  .writing-list .cv-flow { transform: scale(.9); }
  .home-writing .art-card .art-card-link { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .writing-list .art-card .art-card-link { transition: none; }
}


/* Text-size preferences enlarge the type without changing the content width. */
main.page-content { font-size: calc(16px * var(--reading-scale, 1)); }
html[data-text="l"] :is(main.page-content, .footer) { --reading-scale: 1.125; }
html[data-text="x"] :is(main.page-content, .footer) { --reading-scale: 1.25; }