/* ===========================================================
   Portfolio Manel de Ramón — sistema base
   Formato: 16:9 · 1920×1080 · export a PDF sin cortes
   Tipografía: Clash Display (titulares) + Work Sans (cuerpo)
   =========================================================== */

/* ---- Fuentes incrustadas (local, sin internet) ---- */
@font-face { font-family:'Clash Display'; font-weight:400; font-display:block;
  src:url('fonts/clash-400.woff2') format('woff2'); }
@font-face { font-family:'Clash Display'; font-weight:500; font-display:block;
  src:url('fonts/clash-500.woff2') format('woff2'); }
@font-face { font-family:'Clash Display'; font-weight:600; font-display:block;
  src:url('fonts/clash-600.woff2') format('woff2'); }
@font-face { font-family:'Clash Display'; font-weight:700; font-display:block;
  src:url('fonts/clash-700.woff2') format('woff2'); }

/* Work Sans (variable, cubre latin + latin-ext con acentos) */
@font-face { font-family:'Work Sans'; font-weight:300 700; font-display:block;
  src:url('fonts/work-QGYsz_wNahGAdqQ43Rh_fKDptfpA4Q.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Work Sans'; font-weight:300 700; font-display:block;
  src:url('fonts/work-QGYsz_wNahGAdqQ43Rh_cqDptfpA4cD3.woff2') format('woff2');
  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; }

/* ---- Tokens ---- */
:root{
  --black:#141414;      /* panel/fondo oscuro (negro unificado del deck) */
  --ink:#141414;        /* caja del nombre — mismo negro que el panel */
  --lime:#c6f24a;       /* verde destacado */
  --white:#ffffff;
  --grey-body:#5b5b5b;  /* cuerpo de texto gris */
  --grey-soft:#9a9a9a;  /* header superior */
  --purple:#6c5ce7;     /* timeline */
  --line:#d9d9d9;
}

*{ margin:0; padding:0; box-sizing:border-box; }

@page{ size:1920px 1080px; margin:0; }

.page{
  width:1920px; height:1080px; position:relative; overflow:hidden;
  background:var(--white);
  font-family:'Work Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
  page-break-after:always; break-after:page;
}
.page:last-child{ page-break-after:auto; break-after:auto; }

/* ===========================================================
   MODO WEB (pantalla) — deck 16:9 escalado al viewport
   El escalado vive solo en pantalla; en impresión/PDF se ignora
   y cada .page sale a 1920×1080 nativo vía @page.
   --s lo fija el JS de index.html (innerWidth/1920).
   =========================================================== */
@media screen{
  html{ scroll-behavior:smooth; }
  body{ background:#0a0a0a; }
  .deck{
    display:flex; flex-direction:column; align-items:center;
    gap:22px; padding:22px 0;
    scroll-snap-type:y proximity;
  }
  .slide{
    width:calc(1920px * var(--s,1));
    height:calc(1080px * var(--s,1));
    overflow:hidden; border-radius:6px;
    box-shadow:0 14px 50px rgba(0,0,0,.5);
    scroll-snap-align:center;
  }
  .slide .page{ transform:scale(var(--s,1)); transform-origin:top left; }
}
/* En impresión, el wrapper desaparece y las .page vuelven a fluir como páginas */
@media print{
  .slide{ display:contents; }
  body{ background:#fff; }
}

/* Clases utilitarias tipográficas */
.display{ font-family:'Clash Display',sans-serif; }
.lime{ color:var(--lime); }

/* ===========================================================
   PLANTILLA · PORTADA
   =========================================================== */
.cover{ display:flex; background:var(--black); }
.cover__media{
  position:absolute; top:0; right:0; width:1065px; height:100%;
  background:url('assets/cover-portrait.jpg') center 18% / cover no-repeat;
}
.cover__panel{ position:relative; z-index:2; width:900px; height:100%;
  background:var(--black); }
/* Difuminado del borde entre panel y foto */
.cover__panel::after{ content:''; position:absolute; top:0; right:-120px; width:120px;
  height:100%; background:linear-gradient(90deg,var(--black),transparent); }

.cover__namebox{
  position:absolute; left:150px; top:330px; z-index:3;
  background:var(--ink); padding:26px 54px 34px 42px; border-radius:2px;
}
.cover__name{ font-family:'Clash Display'; font-weight:700; font-size:112px;
  line-height:.92; color:var(--lime); letter-spacing:-1px; white-space:nowrap; }
.cover__role{ font-family:'Work Sans'; font-weight:700; font-size:26px;
  letter-spacing:4px; color:var(--white); margin-top:16px; }

.cover__contact{ position:absolute; left:192px; top:600px; z-index:3;
  display:flex; flex-direction:column; gap:26px; }
.cover__row{ display:flex; align-items:center; gap:22px;
  color:var(--white); font-family:'Work Sans'; font-weight:400; font-size:30px; }
.cover__ic{ width:44px; height:44px; flex:0 0 44px; display:flex; align-items:center;
  justify-content:center; background:var(--white); border-radius:9px; }
.cover__ic svg{ width:26px; height:26px; fill:var(--black); }

/* ===========================================================
   PLANTILLA · CV / BIO
   =========================================================== */
.cv{ display:flex; }
.cv__panel{ width:600px; height:100%; background:var(--black); color:var(--white);
  display:flex; align-items:center; padding:0 70px; }
.cv__hello{ font-family:'Clash Display'; font-weight:600; font-size:60px;
  line-height:1.05; letter-spacing:-.5px; }
.cv__hello .wave{ font-family:'Work Sans'; }

.cv__body{ flex:1; position:relative; padding:150px 90px 90px 110px; }
.cv__header{ position:absolute; top:70px; left:110px; right:90px;
  display:flex; justify-content:space-between; align-items:center;
  color:var(--grey-soft); font-size:26px; font-weight:400; }
.cv__header a{ color:var(--grey-soft); text-decoration:underline; }

.cv__cols{ display:flex; gap:80px; height:100%; }
.cv__text{ flex:1; max-width:720px; }
.cv__text p{ color:var(--grey-body); font-size:22px; line-height:1.55;
  margin-bottom:24px; }
.cv__text strong{ color:var(--black); font-weight:600; }

/* Timeline */
.cv__timeline{ width:330px; padding-top:6px; position:relative; }
.tl{ position:relative; padding-left:42px; }
.tl::before{ content:''; position:absolute; left:9px; top:14px; bottom:14px;
  width:2px; background:var(--purple); opacity:.5; }
.tl__item{ position:relative; margin-bottom:30px; }
.tl__item:last-child{ margin-bottom:0; }
.tl__dot{ position:absolute; left:-42px; top:4px; width:18px; height:18px;
  border:3px solid var(--purple); border-radius:50%; background:var(--white); }
.tl__year{ color:var(--grey-body); font-size:19px; margin-bottom:3px; }
.tl__role{ font-family:'Clash Display'; font-weight:600; font-size:26px;
  color:var(--purple); line-height:1.05; }
.tl__sub{ color:var(--grey-body); font-size:19px; margin-top:2px; }

/* ===========================================================
   PLANTILLA · INTRO DE PROYECTO
   Izquierda: bloque visual de marca (asset). Derecha: texto editable.
   =========================================================== */
.proj{ position:relative; background:var(--black); color:var(--white); }
/* Bloque visual de marca a la izquierda — el ancho se fija inline por proyecto */
.proj__media{ position:absolute; left:0; top:0; bottom:0;
  background:center/cover no-repeat; }
/* Zona derecha (solo para la cabecera) — left inline = ancho del media */
.proj__right{ position:absolute; top:0; right:0; bottom:0; }
.proj__header{ position:absolute; top:56px; left:66px; right:70px;
  display:flex; justify-content:space-between; align-items:center;
  color:var(--grey-soft); font-size:25px; }
.proj__header a{ color:var(--grey-soft); text-decoration:underline; }

/* El bloque de texto queda a una x fija, independiente del ancho de imagen */
.proj__content{ position:absolute; left:1150px; top:495px; width:690px; }
.proj__title{ font-family:'Clash Display'; font-weight:700; font-size:84px;
  line-height:1; letter-spacing:-1px; }
.proj__tags{ display:flex; gap:20px; margin-top:30px; flex-wrap:wrap; }
.pill{ border:2px solid var(--lime); color:var(--lime); border-radius:40px;
  padding:11px 28px; font-size:23px; font-weight:500; white-space:nowrap; }
.proj__desc{ margin-top:48px; color:#9a9a9a; font-size:25px; line-height:1.55; }
.proj__desc + .proj__desc{ margin-top:22px; }

/* ===========================================================
   PLANTILLA · GALERÍA A SANGRE
   Páginas de muestra (feed, stories, mockups, cartas): imagen 1:1.
   =========================================================== */
.page--full{ background:#fff; }
.full-img{ width:1920px; height:1080px; object-fit:cover; display:block; }

/* Galería de pantallas de app (móvil) en fila */
.screens{ display:flex; align-items:center; justify-content:center; gap:34px;
  height:100%; background:#ececec; padding:0 60px; }
.screens img, .screens video{ width:300px; height:auto; border-radius:22px;
  box-shadow:0 18px 50px rgba(0,0,0,.18); display:block; }
/* variante alineada por altura (mezcla de aspect ratios: vídeo + capturas) */
.screens--h img, .screens--h video{ width:auto; height:650px; }