/* =========================================================
   Julieta Maio — Portfolio
   Lienzo de diseño: 1024 unidades de ancho (igual que en Canva).
   Toda posición/tamaño se expresa en unidades × var(--u).
   ========================================================= */

@font-face { font-family: "Aileron"; src: url("fonts/aileron-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Aileron"; src: url("fonts/aileron-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Aileron"; src: url("fonts/aileron-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Aileron"; src: url("fonts/aileron-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Aileron"; src: url("fonts/aileron-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Aileron"; src: url("fonts/aileron-600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Aileron"; src: url("fonts/aileron-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Aileron"; src: url("fonts/aileron-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Aileron"; src: url("fonts/aileron-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Aileron"; src: url("fonts/aileron-800-italic.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-800-italic.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-900-normal.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-900-italic.woff2") format("woff2"); font-weight: 900; font-style: italic; font-display: swap; }

:root {
  /* Paleta del diseño */
  --crema: #fffce9;
  --verde: #76aa3b;
  --rosa: #f97495;
  --petroleo: #37798b;
  --mostaza: #e2d376;
  --chocolate: #61442c;
  --tinta: #0e1318;

  --f-body: "Aileron", "Helvetica Neue", Arial, sans-serif;
  --f-head: "Montserrat", "Arial Black", sans-serif;

  /* Efecto "en blanco" al pasar el cursor por un enlace */
  --hover-ms: 350ms;
  --hover-img-filter: grayscale(1) contrast(.2) brightness(2.1);
  --hover-text: #ffffff;
  --hover-text-shadow: 0 0 .08em rgba(14, 19, 24, .28);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--f-body);
  container-type: inline-size;   /* las unidades cqw se miden contra el ancho real */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; }

.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: #fff; padding: .6em 1em; }
.skip:focus { left: 1em; top: 1em; }

/* -------------------------------------------------- Lienzo */
.wrap, .topbar { --u: calc(100cqw / 1024); }

.lienzo {
  position: relative;
  width: 100%;
  height: calc(var(--H) * var(--u));
  overflow: hidden;
}

.el {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  display: block;
  color: inherit;
  text-decoration: none;
}
.el svg { display: block; width: 100%; height: 100%; overflow: visible; }
.el { z-index: var(--z, auto); }
.grp, .gin, .row { display: contents; }   /* en escritorio los grupos no existen: cada elemento va a su posición */
.pbr { display: none; }

.k-text {
  height: auto;
  white-space: nowrap;
  font-size: calc(var(--fs) * var(--u));
  font-kerning: normal;
  text-rendering: geometricPrecision;
}
.k-text .ln { display: block; }
.k-text .gap { display: inline-block; }
.k-text.rot-up { writing-mode: vertical-rl; transform: rotate(180deg); height: calc(var(--h) * var(--u)); white-space: nowrap; }
.k-text.rot-down { writing-mode: vertical-rl; height: calc(var(--h) * var(--u)); white-space: nowrap; }
/* Aileron Light del diseño es apenas más gruesa que la Light web: se compensa con un trazo fino */
.k-text[style*="font-weight:300"], .k-text span[style*="font-weight:300"] { -webkit-text-stroke: .02em currentColor; }

body.single .wrap { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }

/* -------------------------------------------------- Encabezado y menú desplegable */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: calc(26.88 * var(--u));
  min-height: 40px;
  background: var(--crema);
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo {
  position: absolute;
  left: calc(12 * var(--u));
  top: 50%;
  transform: translateY(-50%);
  height: 70%;
}
.logo img { height: 100%; width: auto; }

.menu { position: relative; }
.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font: 600 clamp(13px, calc(11 * var(--u)), 16px)/1 var(--f-body);
  letter-spacing: .02em;
  color: var(--verde);
  background: var(--crema);
  border: 1.5px solid var(--rosa);
  border-radius: 999px;
  padding: .5em 1.15em .5em 1.3em;
  cursor: pointer;
  transition: background var(--hover-ms), color var(--hover-ms);
}
.menu-btn:hover, .menu-btn[aria-expanded="true"] { background: var(--rosa); color: #fff; }
.menu-btn:focus-visible { outline-color: var(--chocolate); }
.menu-btn:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; }
.chev { width: .75em; height: .5em; transition: transform var(--hover-ms); }
.menu-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

.menu-list {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  min-width: max(260px, calc(230 * var(--u)));
  margin: 0;
  padding: .55em;
  list-style: none;
  background: var(--crema);
  border: 1.5px solid var(--rosa);
  border-radius: 22px;
  box-shadow: 0 14px 40px -12px rgba(249, 116, 149, .35);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px) scale(.97);
  transform-origin: top center;
  transition: opacity 250ms ease, transform 250ms ease, visibility 0s 250ms;
}
.menu.open .menu-list {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition: opacity 250ms ease, transform 250ms ease;
}
.menu-list a {
  display: block;
  padding: .7em 1.1em;
  border-radius: 14px;
  font: 400 clamp(14px, calc(12 * var(--u)), 17px)/1.25 var(--f-body);
  color: var(--verde);
  text-decoration: none;
  text-align: center;
  transition: background var(--hover-ms), color var(--hover-ms);
}
.menu-list a:hover, .menu-list a:focus-visible { background: var(--mostaza); outline: none; }
.menu-list a[aria-current="page"] { font-weight: 700; }

/* -------------------------------------------------- Enlaces: se ponen en blanco */
a.el svg, a.el.k-text, a.el.k-text span { transition: filter var(--hover-ms) ease, color var(--hover-ms) ease, text-shadow var(--hover-ms) ease; }
a.el.hover svg { filter: var(--tint, var(--hover-img-filter)); }   /* tinte del color del proyecto, con baja opacidad */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* -------------------------------------------------- Cursor: estrellita */
html, body, .lienzo { cursor: url("cursor-star.png") 16 16, auto; }
a, button, a.el, .menu-btn, .menu-list a { cursor: url("cursor-star-link-rosa.png") 18 18, pointer; }
a.el.k-text.hover, a.el.k-text.hover span { color: var(--hover-text) !important; text-shadow: var(--hover-text-shadow); }
a.el:focus-visible { outline: 2px dashed var(--rosa); outline-offset: 4px; }

/* -------------------------------------------------- Animaciones */
/* 1) Recortes: los stickers entran como papeles recortados que se pegan */
.loop { display: block; width: 100%; height: 100%; }
.js .anim-recorte { opacity: 0; }
.anim-recorte.in { animation: recorte 1s cubic-bezier(.22, .9, .3, 1.12) both; animation-delay: var(--delay, 0s); }
@keyframes recorte {
  0%   { opacity: 0; transform: translate(calc(var(--sx) * 110 * var(--u)), calc(-150 * var(--u))) rotate(calc(var(--rot) * 4)) scale(1.3); }
  12%  { opacity: 1; }
  68%  { transform: translate(0, 0) rotate(calc(var(--rot) * -.7)) scale(.96); }
  84%  { transform: rotate(calc(var(--rot) * .3)) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
/* … y después quedan latiendo o titilando */
.in .loop-pulse   { animation: pulse .45s ease-in-out infinite alternate; animation-delay: calc(1s + var(--d) + var(--delay, 0s)); }
.in .loop-twinkle { animation: twinkle .55s ease-in-out infinite alternate; animation-delay: calc(1s + var(--d) + var(--delay, 0s)); }
@keyframes pulse   { from { transform: scale(.85); } to { transform: scale(1.15); } }
@keyframes twinkle { from { opacity: 1; } to { opacity: .35; } }

/* 2) Fotos que aparecen como si las pintaran a pincel */
.anim-paint .brush path { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.js .anim-paint .brush path { stroke-dashoffset: 1; }
.anim-paint.in .brush path { animation: paint .32s cubic-bezier(.55, 0, .35, 1) forwards; animation-delay: calc(var(--i) * .07s); }
@keyframes paint { to { stroke-dashoffset: 0; } }

/* 3) Texto que aparece letra por letra (páginas de proyecto) */
.anim-letters .ch { transition: opacity .25s ease; transition-delay: calc(var(--r) * .45s); }
.js .anim-letters .ch { opacity: 0; }
.js .anim-letters.in .ch { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .js .anim-recorte, .js .anim-letters .ch { opacity: 1 !important; animation: none !important; transition: none !important; }
  .js .anim-paint .brush path { stroke-dashoffset: 0 !important; animation: none !important; }
  .loop { animation: none !important; }
}


/* =========================================================
   Celular y tablet (fase 2)
   Se conserva exactamente la composición de escritorio, escalada al ancho
   de la pantalla. Solo se ajusta el encabezado para que el botón del menú
   sea cómodo de tocar sin tapar el contenido.
   ========================================================= */
@media (max-width: 900px) {
  .topbar { height: 44px; }
  .logo { left: 12px; height: 55%; }
  .lienzo { margin-top: max(0px, calc(44px - 26.88 * var(--u))); }
  .menu-btn { font-size: 14px; padding: .45em 1.05em .45em 1.2em; }
  /* los recortes entran desde más cerca en pantallas chicas */
  @keyframes recorte {
    0%   { opacity: 0; transform: translate(calc(var(--sx) * 30px), -45px) rotate(calc(var(--rot) * 4)) scale(1.3); }
    12%  { opacity: 1; }
    68%  { transform: translate(0, 0) rotate(calc(var(--rot) * -.7)) scale(.96); }
    84%  { transform: rotate(calc(var(--rot) * .3)) scale(1.02); }
    100% { opacity: 1; transform: none; }
  }
}