/* ==========================================================================
   Irene Ortega — Portfolio "IreneOS"
   ========================================================================== */

:root {
  --bg: #f5f2f3;
  --ink: #021f94; /* azul de marca */
  --ink-deep: #011466;
  --ink-soft: rgba(2, 31, 148, .06);
  --text: #1d1d22;
  --muted: #6b6b78;
  --window: #f5f2f3;
  --window-bar: #ebe7e8;
  --line: rgba(0, 0, 0, .1);
  --shadow: 0 30px 70px rgba(20, 22, 60, .28), 0 8px 20px rgba(20, 22, 60, .14);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
img { display: block; max-width: 100%; }

/* ==========================================================================
   LOCK SCREEN + FACE ID
   ========================================================================== */

.lock {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--bg);
  cursor: pointer;
  transition: opacity .5s ease;
}
.lock.is-unlocked {
  opacity: 0;
  pointer-events: none;
}


.faceid {
  width: 220px;
  padding: 30px 20px 22px;
  border-radius: 34px;
  background: rgba(20, 20, 28, .78);
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  color: #fff;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  animation: pop-in .35s var(--ease-out) both;
}
.faceid__icon { position: relative; width: 104px; height: 104px; margin: 0 auto 16px; }
.faceid__icon svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }


.faceid__glyph { stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; transition: opacity .3s ease, transform .4s var(--ease-out); }
.faceid.is-scanning .glyph-corners { animation: corners-breathe 1.2s ease-in-out infinite; transform-origin: center; }
.glyph-scan { stroke: #7d8cff; stroke-width: 2.5; opacity: 0; }
.faceid.is-scanning .glyph-scan { animation: scan 1.4s ease-in-out infinite; }

.faceid__check { opacity: 0; transform: scale(.7); transition: opacity .3s ease, transform .5s var(--ease-out); }
.faceid__check circle { stroke: #7d8cff; stroke-width: 5; stroke-dasharray: 252; stroke-dashoffset: 252; }
.faceid__check path { stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; }

.faceid.is-success .faceid__glyph { opacity: 0; transform: scale(.8); }
.faceid.is-success .faceid__check { opacity: 1; transform: scale(1); }
.faceid.is-success .faceid__check circle { animation: draw .6s ease forwards; }
.faceid.is-success .faceid__check path { animation: draw .4s ease .35s forwards; }

.faceid__title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.faceid__msg { margin: 4px 0 0; min-height: 2.6em; font-size: 13px; line-height: 1.3; color: rgba(255, 255, 255, .72); transition: opacity .2s ease; }
.faceid__msg.is-swapping { opacity: 0; }


@keyframes corners-breathe { 50% { transform: scale(.93); } }
@keyframes scan {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(60px); }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.85); } }

/* ==========================================================================
   DESKTOP
   ========================================================================== */

.desktop {
  position: fixed;
  inset: 0;
  transform: scale(1.04);
  filter: blur(8px);
  transition: transform 1s var(--ease-out), filter 1s ease;
}
.desktop.is-on { transform: none; filter: none; }

/* ---------- Language switch ---------- */

.lang {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 80;
  display: flex;
  padding: 3px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(0, 0, 0, .06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.lang__btn {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
  transition: background .15s ease, color .15s ease;
}
.lang__btn:hover { color: var(--text); }
.lang__btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.lang__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* ---------- Wallpaper ---------- */

.wallpaper { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }


.wallpaper__stickman {
  position: absolute;
  right: 3vw;
  bottom: 4vh;
  width: clamp(160px, 22vw, 300px);
  opacity: .95;
}

/* ---------- Desktop title ---------- */

.desk-title {
  position: absolute;
  top: 4vh;
  left: 1.2vw;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: .2em;
  font-size: clamp(44px, 7vw, 112px);
  color: var(--ink);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  animation: fade-in .8s ease .2s both;
}
.desk-title__slash { font-weight: 500; font-size: .8em; line-height: 1; transform: translateY(-.04em); }
.desk-title__name {
  margin: 0;
  font-size: 1em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.06em;
}
.desk-title__role {
  grid-column: 2;
  margin: .02em 0 0;
  font-size: .4em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
}

/* ---------- Desktop icons ---------- */

.icons {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  pointer-events: none;
}
.icons .icon { pointer-events: auto; }
.icons .icon { width: 118px; }

.icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px 6px;
  border-radius: 10px;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
  transform: translateY(12px) scale(.9);
}
.desktop.is-on .icon {
  animation: icon-in .55s var(--ease-out) forwards;
  animation-delay: calc(.35s + var(--i, 0) * 60ms);
}
@keyframes icon-in { to { opacity: 1; transform: none; } }

.icon:hover .icon__art, .icon:focus-visible .icon__art { transform: translateY(-3px); }
.icon:focus-visible { outline: none; background: rgba(2, 31, 148, .12); }
.icon.is-selected { background: rgba(2, 31, 148, .16); }
.icon.is-selected .icon__name { background: var(--ink); color: #fff; }

.icon__art { width: 76px; height: 62px; transition: transform .25s var(--ease-out); filter: drop-shadow(0 6px 10px rgba(20, 22, 60, .18)); }
.icon__art svg { width: 100%; height: 100%; }
.icon__name {
  max-width: 112px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--text);
}
.icon__tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.icon__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tag-color, var(--ink)); }

/* ==========================================================================
   WINDOWS
   ========================================================================== */

.windows { position: absolute; inset: 0; z-index: 50; pointer-events: none; }

.win {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: min(980px, calc(100vw - 40px));
  height: min(640px, calc(100vh - 120px));
  border-radius: 12px;
  background: var(--window);
  box-shadow: var(--shadow);
  border: 1px solid rgba(0, 0, 0, .12);
  overflow: hidden;
  pointer-events: auto;
  animation: win-open .38s var(--ease-out) both;
}
.win.is-closing { animation: win-close .22s ease-in both; }
.win:not(.is-focused) { box-shadow: 0 16px 40px rgba(20, 22, 60, .16); }
.win:not(.is-focused) .win__dots span { background: #cfcfd6 !important; }

@keyframes win-open { from { opacity: 0; transform: scale(.4); } }
@keyframes win-close { to { opacity: 0; transform: scale(.6); } }

.win__bar {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  background: var(--window-bar);
  border-bottom: 1px solid var(--line);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.win__bar:active { cursor: grabbing; }
.win__dots { display: flex; gap: 8px; }
.win__dots span, .win__dots button { width: 12px; height: 12px; border-radius: 50%; }
.win__close { background: #ff5f57; display: grid; place-items: center; }
.win__close svg { width: 8px; height: 8px; stroke: rgba(0, 0, 0, .55); stroke-width: 1.6; opacity: 0; }
.win__dots:hover .win__close svg, .win__close:focus-visible svg { opacity: 1; }
.win__min { background: #febc2e; }
.win__max { background: #28c840; }
.win__title {
  position: absolute;
  left: 90px;
  right: 90px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #4a4a55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.win__body { flex: 1; overflow: auto; overscroll-behavior: contain; }

/* ---------- Project window ---------- */

.project {
  min-height: 100%;
  padding: 36px 44px 44px;
  background: var(--bg);
}
.project__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.project__brand { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.slash { font-weight: 500; margin-right: .3em; }
.project__title {
  flex-basis: 100%;
  order: 3;
  margin: 0;
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.055em;
  color: var(--ink);
}
.project__tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.project__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tag-color); }
.project__lead { max-width: 60ch; margin: 14px 0 0; font-size: 18px; line-height: 1.45; letter-spacing: -.01em; }

.brief {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px 40px;
  margin: 30px 0 34px;
  padding-top: 22px;
  border-top: 1.5px solid var(--ink);
}
.brief__label { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.brief__text { max-width: 60ch; margin: 0; font-size: 19px; line-height: 1.45; letter-spacing: -.01em; color: var(--text); }

.project__media { display: grid; gap: 16px; min-width: 0; }
.media-title { margin: 18px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -.04em; color: var(--ink); }
.media-title:first-child { margin-top: 0; }
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  background: #e6e1e3;
  cursor: zoom-in;
  transition: transform .3s var(--ease-out);
}
.gallery img:hover { transform: scale(1.015); }

/* ---------- Finder list window (Trabajos) ---------- */

.finder { display: flex; min-height: 100%; }
.finder__side {
  flex: none;
  width: 180px;
  padding: 16px 10px;
  background: rgba(0, 0, 0, .035);
  border-right: 1px solid var(--line);
  font-size: 13px;
}
.finder__side h4 { margin: 0 0 6px 8px; font-size: 11px; color: var(--muted); font-weight: 600; }
.finder__side button, .finder__side a {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 8px;
  border-radius: 6px;
  text-align: left;
  text-decoration: none;
}
.finder__side button:hover, .finder__side a:hover { background: rgba(0, 0, 0, .06); }
.finder__side .is-active { background: rgba(2, 31, 148, .1); color: var(--ink); font-weight: 600; }
.finder__side svg { width: 16px; height: 16px; flex: none; }
.finder__grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  align-content: start;
  gap: 14px 6px;
  padding: 18px;
}
.desktop.is-on .finder__grid .icon { animation: icon-in .4s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 40ms); }

/* ---------- About window ---------- */

.about {
  --photo-w: 360px;
  --photo-h: calc(var(--photo-w) * 1.236); /* irene.webp is 1200×1483 */
  height: 100%;
  padding: 36px 44px 0;
  background: var(--bg);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -.01em;
}
.about h2 { margin: 0 0 18px; font-size: clamp(34px, 4.2vw, 50px); line-height: 1; font-weight: 800; letter-spacing: -.055em; color: var(--ink); }
.about p { margin: 0 0 14px; }
.about strong { color: var(--ink); font-weight: 600; }
.about__spacer { float: right; width: 0; height: calc(100% - var(--photo-h)); }
.about__photo {
  float: right;
  clear: right;
  width: var(--photo-w);
  height: var(--photo-h);
  margin: 0 -44px 0 12px;
  shape-outside: url("assets/img/irene.webp");
  shape-margin: 14px;
}

/* ---------- Contact popup ---------- */

.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 14px;
  min-height: 100%;
  padding: 22px;
}
.contact__item {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  padding: 20px 14px;
  border-radius: 12px;
  background: var(--ink-soft);
  text-align: center;
}
.contact__icon { width: 56px; height: 56px; margin-bottom: 6px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .15)); }
.contact__icon svg { width: 100%; height: 100%; }
.contact__label { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.contact__value {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  overflow-wrap: anywhere;
  user-select: all;
  -webkit-user-select: all;
}
.contact__actions { display: flex; gap: 8px; margin-top: 10px; }
.contact__actions button, .contact__actions a {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  background: rgba(0, 0, 0, .07);
  transition: background .15s ease;
}
.contact__actions button:hover { background: rgba(0, 0, 0, .12); }
.contact__actions .is-primary { background: var(--ink); color: #fff; }
.contact__actions .is-primary:hover { background: var(--ink-deep); }
.contact__actions [aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 40px;
  background: rgba(15, 16, 30, .82);
  cursor: zoom-out;
  animation: fade-in .2s ease both;
}
.lightbox img { max-height: 100%; border-radius: 8px; box-shadow: var(--shadow); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 860px) {
  .project { padding: 28px 22px 40px; }
  .finder__side { display: none; }
  .finder__grid { grid-template-columns: repeat(3, 1fr); padding: 14px 8px; }
}

@media (max-width: 720px) {
  .lang { top: 7px; right: 10px; }
  .wallpaper__stickman { width: 150px; right: 4vw; bottom: 24px; opacity: .5; }
  .icons { gap: 24px; }
  .icon__art { width: 64px; height: 52px; }
  .contact { grid-template-columns: 1fr; height: auto; }

  .windows { z-index: 70; }
  .win { border-radius: 10px; }
  .win__bar { height: 44px; }
  .win__dots span, .win__dots button { width: 14px; height: 14px; }
  .win__close svg { opacity: 1; }
  .about { --photo-w: 190px; display: flex; flex-direction: column; height: auto; min-height: 100%; padding: 24px 20px 0; }
  .about__spacer { display: none; }
  .about__photo { order: 1; align-self: flex-end; float: none; margin: auto -20px 0 0; shape-outside: none; }
  .gallery { grid-template-columns: 1fr; }
}

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