/* v03 — recreado del diseño de Mariana en Figma (deck fUcepLB69kLaUgHwfFfQ4y, 4 slides de 1920×1080).
   Medidas del Figma pasadas a vw: 1px de diseño = 100vw / 1920.
   Tipografía: Vend Sans (Google Fonts, OFL, libre). */
@font-face { font-family: "Vend Sans"; src: url("fonts/VendSans-latin.woff2") format("woff2"); font-weight: 300 700; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Vend Sans"; src: url("fonts/VendSans-latin-ext.woff2") format("woff2"); font-weight: 300 700; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --u: calc(100vw / 1920);           /* 1px del Figma */
  --paper: #fff;
  --ink: #000;
  --muted: #6f6f6f;
  --side: max(16px, calc(43 * var(--u)));
  --type: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--type)/1.5 "Vend Sans", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
p { margin: 0; }

/* Borrador */
.tbd { background: #fff27a; outline: 1px dashed var(--ink); padding: 0 .25em; font-style: italic; }
.draft-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; background: var(--ink); color: #fff; font-size: 11px; text-align: center; padding: 4px 16px; }
.draft-bar .tbd { color: var(--ink); }

/* Encabezado: firma a la izquierda, tres enlaces a la derecha (slide 1: x 1459/1613/1767, y 28) */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: space-between; align-items: flex-start; padding: calc(14 * var(--u)) var(--side) 0; }
.logo img { width: max(44px, calc(60 * var(--u))); height: auto; }
.site-header nav { display: flex; gap: calc(44 * var(--u)); padding-top: calc(14 * var(--u)); text-transform: uppercase; }
.site-header nav a { width: calc(110 * var(--u)); min-width: 7ch; text-align: right; }
.site-header nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }

/* ——— Portada (slide 1) ——— */
.home { position: relative; height: max(100svh, calc(1080 * var(--u))); overflow: hidden; }
/* Imágenes sueltas por la portada; se arrastran con el mouse o el dedo (ver v03.js) */
.scatter { position: absolute; inset: 0; }
.piece { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); height: calc(var(--h) * var(--u)); display: block; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; transition: transform .25s ease; }
.piece img { height: 100%; width: auto; max-width: none; pointer-events: none; }
.piece:hover { transform: scale(1.03); text-decoration: none; }
.piece.is-dragging { cursor: grabbing; transform: none; transition: none; }
.trail { position: absolute; max-width: none; pointer-events: none; user-select: none; }
.tribalero { position: absolute; right: calc(36 * var(--u)); bottom: calc(40 * var(--u)); z-index: 100001; display: block; width: max(120px, calc(250 * var(--u))); transform-origin: 50% 90%; transition: transform .3s ease; }
.tribalero img { width: 100%; height: auto; }
/* En About y Work queda fijo en la esquina al hacer scroll */
.tribalero-fixed { position: fixed; }
.tribalero:hover, .tribalero:focus-visible { transform: rotate(-6deg) scale(1.05); }
.home-hint { z-index: 100000; pointer-events: none; position: absolute; left: 0; right: 0; bottom: calc(40 / 1080 * 100%); text-align: center; color: var(--muted); }
.home-label { z-index: 100000; pointer-events: none; position: absolute; left: 0; right: 0; bottom: calc(72 / 1080 * 100%); text-align: center; min-height: 1.5em; }
/* Descripción en una sola línea, en el medio de la pantalla; no bloquea el arrastre de las imágenes */
.home-line { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 100000; pointer-events: none; text-align: center; font-size: max(16px, calc(24 * var(--u))); line-height: 1.5; padding: 0 var(--side); }
/* Fondo blanco detrás de la frase para que se lea aunque pasen imágenes o rastro por debajo */
.home-line span, .home-label span, .home-hint span { background: var(--paper); padding: .2em .6em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ——— Proyecto: láminas del portfolio anterior (PDF 1920×1080; 1 px de lámina = 100vw / 1600 en la maqueta de 1600) ——— */
:root { --s: calc(100vw / 1600); --dark: #111015; }

/* Lámina de apertura: foto a la izquierda (662/1600), texto a la derecha */
.intro { display: grid; grid-template-columns: calc(662 * var(--s)) 1fr; min-height: calc(900 * var(--s)); }
.intro-img { position: relative; --pad: calc(32 * var(--s)); --pad-top: max(64px, calc(72 * var(--s))); }
/* Proyectos con una sola imagen: la foto entera, sin recortar */
.intro-fit .intro-img { padding: var(--pad-top) var(--pad) var(--pad); }
.intro-fit .intro-img img { position: static; width: 100%; height: auto; cursor: zoom-in; }
/* Secuencia rápida (Cargo): las imágenes van apiladas y solo se ve la que tiene .is-on */
.intro-seq { position: relative; }
.intro-fit .intro-seq img { display: none; }
.intro-fit .intro-seq img.is-on { display: block; }
/* Arriba deja libre la firma del encabezado */
.intro-img img { position: absolute; top: var(--pad-top); left: var(--pad); width: calc(100% - 2 * var(--pad)); height: calc(100% - var(--pad-top) - var(--pad)); object-fit: cover; }
.intro-text { display: flex; flex-direction: column; justify-content: flex-start; gap: calc(110 * var(--s)); padding: calc(36 * var(--s)) calc(34 * var(--s)) calc(116 * var(--s)) calc(146 * var(--s)); font-size: max(13px, calc(15.5 * var(--s))); line-height: 1.3; }
.intro-title { margin: 0; font: inherit; }
.intro-title em { font-style: italic; }
.intro-row { display: grid; grid-template-columns: calc(129 * var(--s)) 1fr; }
.intro-row + .intro-row { margin-top: calc(60 * var(--s)); }
.intro-row div p + p { margin-top: 1.3em; }
.intro-row .intro-link { font-size: .8em; }
.intro-row .intro-link a { text-decoration: underline; text-underline-offset: 2px; }

/* Láminas 16:9 */
.sheet { position: relative; }
.sheet img { cursor: zoom-in; }
.sheet-full img { width: 100%; height: auto; }
.sheet-fit { aspect-ratio: 16 / 9; overflow: hidden; }
.sheet-white { background: var(--paper); }
.sheet-dark { background: var(--dark); }
.sheet-box { position: absolute; }

/* Carrusel deslizable (Cargo) */
.slider { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; padding: calc(32 * var(--s)) 0; }
.slider::-webkit-scrollbar { display: none; }
.slider.is-dragging { cursor: grabbing; }
.slider-track { display: flex; gap: calc(16 * var(--s)); width: max-content; padding: 0 calc(32 * var(--s)); }
.slider-track figure { margin: 0; width: calc(min(70svh, calc(720 * var(--s))) * .8); flex: none; }
.slider-track img { width: 100%; height: auto; max-width: none; user-select: none; -webkit-user-drag: none; }
.slider-track figcaption { margin-top: 10px; }
.sheet-box img { width: 100%; height: 100%; object-fit: contain; }

/* Bloque de texto en columnas (About) */
.info { display: grid; grid-template-columns: 1fr repeat(3, calc(294 * var(--u))); column-gap: calc(16 * var(--u)); padding: calc(98 * var(--u)) var(--side) 0 calc(42 * var(--u)); }
.page-top .info { padding-top: max(110px, calc(98 * var(--u))); }
.info-title { grid-row: 1 / span 2; }
.info-col { grid-row: 1 / span 2; padding-top: calc(75 * var(--u)); }
.info-col h2 { margin: 0 0 calc(33 * var(--u)); font: inherit; }
.info-col p + p { margin-top: 1.5em; }

.next { display: flex; justify-content: space-between; padding: calc(120 * var(--u)) var(--side) 48px calc(42 * var(--u)); }

/* ——— Work ——— */
.work { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(48 * var(--u)) calc(15 * var(--u)); padding: max(110px, calc(140 * var(--u))) var(--side) 72px calc(23 * var(--u)); }
.work a:hover { text-decoration: none; }
.work img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 8px; }
.work a:hover p:first-of-type { text-decoration: underline; text-underline-offset: 3px; }

/* ——— About ——— */
.about-intro { grid-column: 2 / -1; font-size: max(14px, calc(20 * var(--u))); line-height: 1.45; }
.about-intro h2 { font-size: var(--type); }
/* Mismos colores que el CV (CV10260.pdf): fondo crema y letra marrón */
.page-about { --paper: #fffbd8; --ink: #482329; --muted: rgba(72, 35, 41, .62); background: var(--paper); color: var(--ink); }
.about-portrait { padding: calc(40 * var(--u)) var(--side) 0 calc(23 * var(--u)); }
.about-portrait img { width: min(90vw, max(320px, calc(720 * var(--u)))); }
.about-lists { display: grid; grid-template-columns: 1fr repeat(3, calc(294 * var(--u))); column-gap: calc(16 * var(--u)); padding: calc(80 * var(--u)) var(--side) 0 calc(42 * var(--u)); }
.about-lists h2 { margin: 0 0 calc(33 * var(--u)); font: inherit; color: var(--muted); }
.about-lists ul, .about-lists ol { list-style: none; margin: 0; padding: 0; }
.about-lists { row-gap: calc(80 * var(--u)); }
.about-lists > div:first-child { grid-row: span 2; padding-right: calc(120 * var(--u)); }
.about-lists strong { font-weight: 500; }
.cv-item + .cv-item { margin-top: 2em; }
.cv-item p + p { margin-top: .75em; max-width: 52ch; }
.contact { display: grid; grid-template-columns: 1fr repeat(3, calc(294 * var(--u))); column-gap: calc(16 * var(--u)); padding: calc(100 * var(--u)) var(--side) 72px calc(42 * var(--u)); scroll-margin-top: 24px; }
.contact h2 { margin: 0; font: inherit; color: var(--muted); }
.contact-big { grid-column: 2 / -1; font-size: max(16px, calc(24 * var(--u))); }
.contact-note { grid-column: 2 / -1; margin-top: calc(40 * var(--u)); }

/* Visor */
.viewer[hidden] { display: none; }
.viewer { position: fixed; inset: 0; z-index: 40; background: rgba(255, 255, 255, .97); display: grid; place-items: center; padding: 56px var(--side); cursor: zoom-out; }
.viewer img { max-height: calc(100vh - 112px); width: auto; object-fit: contain; }
.viewer button { position: absolute; top: 24px; right: var(--side); font: inherit; text-transform: uppercase; background: none; border: 0; padding: 0; cursor: pointer; }

/* ——— Pantallas medianas: la escala del Figma deja columnas muy angostas ——— */
@media (max-width: 1200px) {
  .info, .about-lists, .contact { grid-template-columns: repeat(3, 1fr); column-gap: 24px; row-gap: 32px; padding-left: var(--side); }
  .info-title { grid-column: 1 / -1; grid-row: auto; }
  .info-col { grid-row: auto; padding-top: 0; }
  .info-col h2, .about-lists h2 { margin-bottom: 16px; }
  .about-lists > div:first-child { grid-column: 1 / -1; grid-row: auto; padding-right: 0; }
  .contact-big, .contact-note, .about-intro { grid-column: 1 / -1; }
}

/* Apertura de proyecto en pantallas angostas: la foto arriba, el texto abajo */
@media (max-width: 900px) {
  .intro { grid-template-columns: 1fr; }
  .intro-img { height: min(136vw, 90svh); --pad: var(--side); }
  .intro-fit .intro-img { height: auto; }
  .intro-text { padding: 32px var(--side) 56px; gap: 40px; font-size: 14px; }
  .intro-row { grid-template-columns: 76px 1fr; }
  .intro-row + .intro-row { margin-top: 24px; }
}

/* ——— Móvil ——— */
@media (max-width: 760px) {
  .site-header { padding-top: 12px; }
  .site-header nav { gap: 16px; padding-top: 10px; }
  .site-header nav a { width: auto; min-width: 0; }
  .home { height: 100svh; min-height: 600px; }
  .piece { left: calc(var(--mx) * 1%); top: calc(var(--my) * 1%); height: calc(var(--h) * .1vw); }
  .home-label { bottom: 64px; }
  .home-hint { bottom: 42px; }
  .tribalero { right: 8px; bottom: 92px; width: 84px; }
  .tribalero-fixed { bottom: 40px; width: 72px; }
  .home-line { font-size: 14px; }
  .home-line br { display: none; }
  .info, .about-lists, .contact { grid-template-columns: 1fr; }
  .work { grid-template-columns: 1fr 1fr; gap: 32px 12px; padding-left: var(--side); }
  .about-portrait { padding-left: var(--side); }
}