:root {
  color-scheme: light;
  --ink: #12263a;
  --muted: #445b70;
  --blue: #00569f;
  --navy: #0c2744;
  --orange: #ff7900;
  --line: #d6e2ee;
  --pale: #f0f6fc;
  font-family: Calibri, "Source Sans 3", system-ui, sans-serif;
  color: var(--ink);
  scroll-behavior: smooth;
}
* { box-sizing: border-box; }
body { margin: 0; background: #fff; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.hero :focus-visible, .site-footer :focus-visible { outline-color: #ffab5c; }
.skip { position: fixed; z-index: 2; top: .5rem; left: 1rem; padding: .7rem; background: white; transform: translateY(-150%); }
.skip:focus { transform: none; }
.wrap { width: min(1232px, calc(100% - 5rem)); margin-inline: auto; }
.site-header { background: white; border-bottom: 1px solid var(--line); }
.header-inner, nav, .footer { display: flex; align-items: center; justify-content: space-between; }
.header-inner { min-height: 78px; gap: 1rem; }
.brand img { width: 143px; }
nav { gap: clamp(.9rem, 3vw, 2.3rem); }
nav a, .footer a { font-weight: 700; text-decoration: none; }
nav a:hover, .footer a:hover { text-decoration: underline; text-underline-offset: .22em; }
.nav-contact { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid #b9cde0; border-radius: .45rem; padding: .56rem .85rem; color: var(--blue); }
.hero {
  color: white;
  background:
    radial-gradient(ellipse at 92% 20%, #154f7c 0, transparent 58%),
    linear-gradient(112deg, #0c243e, #103955);
  border-bottom: 4px solid var(--orange);
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding-block: clamp(3.2rem, 6.4vw, 6rem);
}
.hero-role {
  display: flex;
  align-items: center;
  gap: .72rem;
  color: #e1eef9;
  font-size: .92rem;
  font-weight: 700;
  margin: 0 0 1.2rem;
}
.hero-role::before { content: ""; flex: 0 0 1.5rem; height: 3px; background: var(--orange); }
h1, h2, h3 { margin: 0; line-height: 1.05; text-wrap: balance; }
h1 { font-size: clamp(3.1rem, 5.5vw, 5.4rem); letter-spacing: -.065em; }
h1 span { color: #ff9b41; }
h2 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); letter-spacing: -.049em; }
h3 { font-size: 1.55rem; letter-spacing: -.025em; }
p { color: var(--muted); line-height: 1.57; }
.hero-copy > p:not(.hero-role) { max-width: 27rem; color: #dfebf7; font-size: clamp(1.04rem, 1.5vw, 1.2rem); margin: 1.45rem 0 1.65rem; }
.button { display: inline-flex; align-items: center; gap: 1.05rem; padding: .78rem 1.05rem; border: 0; border-radius: .4rem; font: inherit; font-weight: 750; text-decoration: none; cursor: pointer; }
.primary { background: #ff932e; color: #14263b; }
.primary:hover { background: #ffae65; }
figure { min-width: 0; margin: 0; }
.featured {
  border: 1px solid #ffffff3f;
  border-radius: .85rem;
  background: #0b2945;
  padding: .72rem;
  box-shadow: 0 1.8rem 4rem #0011256b;
}
.featured-top, figcaption { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.featured-top { padding: .23rem .25rem .75rem; font-weight: 750; }
.featured-top > span + span { color: #c3d9ee; font-size: .84rem; font-weight: 600; }
.featured figcaption { color: #d4e7f7; padding: .64rem .25rem .13rem; font-size: .87rem; }
.image-link { display: block; overflow: hidden; border-radius: .34rem; cursor: zoom-in; background: #e8f0fa; }
.image-link img { width: 100%; transition: filter 150ms ease; }
.image-link:hover img { filter: brightness(.92); }
.portfolio, .contact, .experience { padding-block: clamp(3.25rem, 6vw, 6rem); }
.erp {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  align-items: center;
  gap: 1.7rem 3.5rem;
  margin: 1.8rem 0 1.35rem;
  padding: clamp(1.2rem, 3vw, 2.25rem);
  background: var(--pale);
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: .55rem;
}
.erp h3 { color: var(--blue); font-size: clamp(2rem, 3vw, 2.75rem); }
.erp p, .card-copy p, .time-project p { margin: .65rem 0 0; }
.erp p { max-width: 40rem; }
.erp-status { margin: 0; border: 1px solid var(--line); border-radius: .4rem; background: white; }
.erp-status div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem 1rem; padding: .7rem .9rem; }
.erp-status div + div { border-top: 1px solid var(--line); }
.erp-status dt { font-weight: 750; }
.erp-status dd { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .9rem; color: var(--muted); }
.erp-status dd::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--orange); }
.erp-status dd.active::before { background: #187d4d; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.85rem, 2vw, 1.4rem); }
.project-card { border: 1px solid var(--line); border-radius: .55rem; background: white; overflow: hidden; }
.project-card figure { padding: .65rem .65rem .48rem; background: #eef4fa; border-bottom: 1px solid var(--line); }
.project-card .image-link { border: 1px solid #b4cbe0; }
.project-card figcaption { color: var(--muted); padding: .48rem .14rem 0; font-size: .83rem; }
.card-copy { padding: 1.15rem; }
.time-project { display: flex; align-items: baseline; gap: .75rem 1.35rem; margin-top: 1.35rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: .5rem; }
.time-project p { margin: 0; }
.experience { border-block: 1px solid var(--line); background: var(--pale); }
.split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 5.8rem); }
.split > div:first-child p { max-width: 31rem; }
.service-list article { padding: 1rem 0; border-top: 1px solid #b9ccdf; }
.service-list p { margin: .55rem 0 0; }
.contact-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.35rem 2rem;
  padding: clamp(1.25rem, 4vw, 2.75rem);
  background: var(--pale);
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: .55rem;
}
.contact-panel p { margin: .75rem 0 0; }
.contact-email { background: var(--blue); color: white; overflow-wrap: anywhere; }
.contact-email:hover { background: var(--navy); }
.site-footer { color: #e0edf8; background: var(--navy); }
.footer { padding-block: 1.35rem; gap: .75rem; font-size: .93rem; }
dialog { max-width: min(1100px, calc(100% - 1.5rem)); max-height: calc(100% - 1.5rem); padding: .65rem; background: #fff; color: var(--ink); border: 0; border-radius: .6rem; }
dialog::backdrop { background: #05192cdb; }
body:has(dialog[open]) { overflow: hidden; }
.viewer-header { display: flex; justify-content: space-between; align-items: center; gap: .7rem; padding: 0 .35rem .4rem; }
.viewer-header h2 { font-size: 1.16rem; letter-spacing: 0; }
.viewer-header button { width: 2.45rem; height: 2.45rem; padding: 0; border: 1px solid var(--line); border-radius: .3rem; background: var(--pale); color: var(--ink); font-size: 1.5rem; cursor: pointer; }
#imagen-visor { width: auto; max-height: 77vh; margin-inline: auto; border-radius: .3rem; object-fit: contain; }
@media (max-width: 940px) {
  .wrap { width: min(100% - 3rem, 1232px); }
  .hero-inner { gap: 2rem; }
  .project-grid { gap: .75rem; }
  .card-copy { padding: .95rem; }
}
@media (max-width: 740px) {
  .wrap { width: min(100% - 2rem, 35rem); }
  .header-inner { min-height: 65px; }
  .brand img { width: clamp(76px, 23vw, 130px); }
  nav { gap: clamp(.55rem, 2.4vw, 1.25rem); font-size: .89rem; }
  .nav-contact { padding: .37rem .47rem; gap: .25rem; }
  .hero-inner, .split, .project-grid, .erp { grid-template-columns: 1fr; }
  .hero-inner { padding-block: 2.75rem; gap: 1.9rem; }
  h1 { font-size: clamp(2.8rem, 9.8vw, 4.1rem); text-wrap: initial; }
  .hero-role { font-size: .87rem; }
  .time-project { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 440px) {
  .nav-contact span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  .image-link img { transition: none; }
}
.arrow-out { display: inline-block; position: relative; width: .75em; height: .75em; flex: 0 0 .75em; }
.arrow-out::before { content: ""; position: absolute; width: .5em; height: .5em; top: 0; right: 0; border-top: 1.5px solid; border-right: 1.5px solid; }
.arrow-out::after { content: ""; position: absolute; width: .87em; height: 1.5px; top: 50%; right: -.02em; background: currentColor; transform: rotate(-45deg); }
.legal-page { max-width: 50rem; min-height: calc(100vh - 9rem); padding-block: clamp(2.5rem, 6vw, 5rem); }
.legal-page h1 { font-size: clamp(2.5rem, 6vw, 4.4rem); margin-bottom: 1.65rem; }
.legal-page h2 { font-size: 1.35rem; margin-top: 1.85rem; }
.legal-page a { color: var(--blue); text-underline-offset: .18em; }
.site-footer .footer { flex-wrap: wrap; }
.site-footer nav { flex-wrap: wrap; gap: .65rem 1.25rem; }