/* ============================================================
   TIPOGRAFÍAS PROPIAS
   Servidas desde la web, no desde Google. Recortadas al alfabeto
   latino que usa el sitio y en woff2: 154 KB las ocho.
   ============================================================ */
@font-face{font-family:'League Spartan';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/LeagueSpartan-500.woff2') format('woff2');}
@font-face{font-family:'League Spartan';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/LeagueSpartan-600.woff2') format('woff2');}
@font-face{font-family:'League Spartan';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/LeagueSpartan-700.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/Inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/Inter-600.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/IBMPlexMono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/IBMPlexMono-500.woff2') format('woff2');}


/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  --paper: #ECE8E0;
  --paper-card: #F7F5F0;
  --ink: #1B1B18;
  --ink-soft: #55524A;
  --oxblood: #8B2E2A;
  --forest: #3C4A3E;
  --mustard: #C79A3E;
  --line: #C9C2B4;
  --line-soft: #DAD5C9;
  --radius: 2px;
  --nav-h: 60px;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
/* el contenedor solo marca ancho y márgenes laterales: el ritmo vertical lo
   pone cada sección, no el contenedor (antes metía 90px extra por dentro) */
.wrap{ max-width: 920px; margin: 0 auto; padding: 0 24px; }

h1,h2,h3{ font-family:'League Spartan', sans-serif; font-weight:600; margin:0; }

::selection{ background: var(--mustard); color: var(--ink); }

@keyframes settle{
  0%{ transform: translateY(10px); opacity:0; }
  100%{ transform: translateY(0); opacity:1; }
}
@keyframes riseIn{
  from{ opacity:0; transform: translateY(18px); }
  to{ opacity:1; transform: translateY(0); }
}
/* revelado al entrar en pantalla: estado inicial oculto solo si JS lo activa
   (progressive enhancement — sin JS, el contenido se ve normal desde el inicio) */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible{ opacity:1; transform: translateY(0); }

/* ============================================================
   NAV GLOBAL
   ============================================================ */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
}
.site-header .bar{
  max-width: 920px; margin: 0 auto; padding: 0 24px;
  height: var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap: 16px;
  transition: height .25s ease;
}
.brand{
  font-family:'League Spartan', sans-serif; font-weight:600; font-size: 18px;
  letter-spacing: -0.01em; white-space: nowrap;
  background:none; border:none; cursor:pointer; color: var(--ink); padding:0;
  transition: color .15s ease, font-size .25s ease;
}
.brand:hover{ color: var(--oxblood); }

/* el nombre funciona como identidad persistente: al bajar se compacta un
   poco, sin perseguir al usuario ni cambiar de posición. Solo en desktop/
   tablet, para no interferir con el panel del menú móvil (usa --nav-h fijo) */
@media (min-width:761px){
  .site-header.is-compact .bar{ height: 52px; }
  .site-header.is-compact .brand{ font-size: 16px; }
}

.main-nav{ display:flex; align-items:center; gap: 4px; }
.navlink{
  font-family:'IBM Plex Mono', monospace;
  font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent; border: 1px solid transparent;
  padding: 7px 12px; cursor: pointer; border-radius: var(--radius);
  transition: all .15s ease;
  text-decoration:none; display:inline-block;
}
.navlink:hover{ border-color: var(--line); color: var(--ink); }
.navlink.active{ background: var(--ink); color: var(--paper); border-color: var(--ink); }

.nav-actions{ display:flex; align-items:center; gap: 10px; }

.btn{
  font-family:'IBM Plex Mono', monospace;
  font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 9px 16px; border-radius: var(--radius); cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  border: 1px solid var(--ink); transition: all .15s ease; white-space:nowrap;
}
.btn-solid{ background: var(--oxblood); border-color: var(--oxblood); color: var(--paper-card); }
.btn-solid:hover{ background: var(--ink); border-color: var(--ink); }
.btn-outline{ background: transparent; color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color: var(--paper); }
.btn-lg{ padding: 13px 22px; font-size: 12.5px; }

.menu-toggle{
  display:none; background:none; border:1px solid var(--ink); border-radius: var(--radius);
  width: 38px; height:34px; cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.menu-toggle span{ display:block; width:18px; height:1.5px; background: var(--ink); }

.mobile-panel{
  display:none;
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 99;
  background: var(--paper);
  padding: 12px 24px 40px;
  overflow-y:auto;
}
.mobile-panel.open{ display:block; }
.mobile-panel .navlink{
  display:block; font-size: 16px; padding: 16px 4px; border-bottom: 1px dashed var(--line);
  border-radius:0; font-family:'League Spartan', sans-serif; font-weight:600; text-transform:none; letter-spacing:0; color: var(--ink);
}
.mobile-panel .navlink.active{ background:none; color: var(--oxblood); }
.mobile-panel .btn{ margin-top: 22px; width:100%; justify-content:center; }

@media (max-width: 760px){
  .main-nav{ display:none; }
  .nav-actions .btn-outline-desktop{ display:none; }
  .menu-toggle{ display:flex; }
}

/* ============================================================
   VIEWS
   ============================================================ */
.view{ display:none; }
.view.active{ display:block; animation: settle .3s cubic-bezier(.2,.8,.2,1) both; }

/* ============================================================
   PRIMITIVAS COMPARTIDAS
   ============================================================ */
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--oxblood); display:flex; align-items:center; gap:10px; margin: 0 0 14px;
}
.eyebrow::after{ content:""; flex:1; height:1px; background: var(--line); }

.cap{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
  color: var(--ink-soft); margin: 8px 0 0;
}

.link-more{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px; white-space:nowrap; cursor:pointer; background:none; border-top:none; border-left:none; border-right:none;
}
.link-more:hover{ color: var(--oxblood); border-color: var(--oxblood); }

.tagset{ display:flex; flex-wrap:wrap; gap:7px; }
.tagset span{ font-family:'IBM Plex Mono', monospace; font-size:11px; border:1px solid var(--ink); padding:4px 10px; border-radius:999px; }

.lightbox{ position:fixed; inset:0; background:rgba(27,27,24,.92); display:none; align-items:center; justify-content:center; z-index:200; padding:24px; cursor:zoom-out; }
.lightbox.show{ display:flex; }
.lightbox img{ max-width:100%; max-height:90vh; border:2px solid var(--paper); }

/* ============================================================
   HOME — HERO
   ============================================================ */
.home-hero{
  min-height: calc(100vh - var(--nav-h));
  display:flex; flex-direction:column; justify-content:center;
  padding: 60px 0 40px;
}
.home-hero-copy{ display:flex; flex-direction:column; justify-content:center; }
.home-hero-eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--oxblood); margin-bottom:18px; }
.home-hero h1{ font-size:clamp(40px,7vw,76px); line-height:1.02; letter-spacing:-.01em; margin:0 0 22px; max-width:14ch; }
.home-hero p{ font-size:clamp(17px,2vw,20px); color: var(--ink-soft); max-width:46ch; margin:0 0 32px; }
.home-hero .btn{ align-self:flex-start; }

/* entrada escalonada muy suave: cada línea del hero aparece un poco después
   que la anterior. Se dispara sola porque #view-home ya lleva la clase
   "active" en el HTML; al volver de un proyecto se repite (display:none→block
   reinicia las animaciones CSS, igual que ya hace .view.active) */
.home-hero-eyebrow, .home-hero h1, .home-hero p, .home-hero .btn{
  animation: riseIn .6s cubic-bezier(.2,.8,.2,1) both;
}
.home-hero-eyebrow{ animation-delay: .05s; }
.home-hero h1{ animation-delay: .12s; }
.home-hero p{ animation-delay: .22s; }
.home-hero .btn{ animation-delay: .32s; }

/* ============================================================
   SELECTED WORK
   ============================================================ */
.home-section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom: 30px; flex-wrap:wrap; }
.home-section-head h2{ font-weight:600; font-size:clamp(26px,4.5vw,34px); }

.work-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 10px; }
@media (max-width:860px){ .work-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){ .work-grid{ grid-template-columns: 1fr; } }
.work-card{
  display:block; text-decoration:none; color:inherit; cursor:pointer;
  border:1px solid var(--line); background: var(--paper-card); border-radius: var(--radius);
  overflow:hidden; transition: border-color .18s ease, transform .18s ease;
}
.work-card:hover{ border-color: var(--ink); transform: translateY(-3px); }
.work-card .thumb{
  width:100%; aspect-ratio: 4/5; object-fit:cover; border-bottom:1px solid var(--line); background: var(--line-soft);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.work-card:hover .thumb{ transform: scale(1.025); }
.work-card .body{ padding:16px 18px 20px; }
.work-card .tag{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--oxblood); }
.work-card h3{
  font-weight:600; font-size:20px; margin: 6px 0 0;
  display:block;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.work-card:hover h3{ transform: translateX(2px); }
.work-card h3::after{
  content:"→"; font-family:'IBM Plex Mono', monospace; font-weight:400; font-size:15px;
  display:inline-block; margin-left:7px; vertical-align:middle;
  opacity:0; transform: translateX(-4px);
  transition: opacity .3s ease, transform .3s ease;
}
.work-card:hover h3::after{ opacity:1; transform: translateX(0); }

/* ============================================================
   SECTION SHELL — About / Experience / Contact en Home
   ============================================================ */
/* ritmo vertical único: 60px arriba y abajo, así el salto entre el contenido
   de dos secciones seguidas es siempre el mismo (120px) y la línea queda centrada */
.home-block{ padding: 60px 24px; border-top:1px solid var(--line-soft); scroll-margin-top: 70px; }
@media (max-width: 760px){ .home-block{ padding: 44px 24px; } }

/* ---------- ABOUT ---------- */
.about-grid{ display:grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items:center; }
@media (max-width: 760px){ .about-grid{ grid-template-columns: 1fr; gap:32px; } }
.about-photo{ overflow:hidden; }
.about-photo img{ width:100%; aspect-ratio: 4/5; object-fit:cover; border-radius: var(--radius); }
.about-copy p{ font-size:19px; line-height:1.6; margin: 0 0 20px; max-width: 46ch; }
.about-copy p strong{ color: var(--ink); }
.about-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 28px; }

/* ---------- EXPERIENCE ---------- */
.timeline{ margin-top: 8px; }
.timeline-row{
  display:grid; grid-template-columns: 110px 1fr; gap: 24px;
  padding: 26px 0; border-top:1px solid var(--line-soft);
}
.timeline-row:last-child{ border-bottom:1px solid var(--line-soft); }
.timeline-when{ font-family:'IBM Plex Mono', monospace; font-size:12px; color: var(--ink-soft); padding-top:4px; }
.timeline-what h3{ font-size:20px; margin:0 0 4px; }
.timeline-what .role{ font-size:14px; color: var(--ink-soft); margin:0; }
@media (max-width:560px){ .timeline-row{ grid-template-columns: 1fr; gap:6px; } }

/* ---------- CONTACT ---------- */
.contact-card{
  background: var(--paper-card); border:1px solid var(--ink); padding: 44px 40px;
  display:grid; grid-template-columns: 1.2fr 1fr; gap: 32px;
}
@media (max-width:700px){ .contact-card{ grid-template-columns:1fr; padding: 30px 24px; } }
.contact-lede{ font-size:19px; max-width: 42ch; }
.contact-links{ display:flex; flex-direction:column; gap: 14px; }
.contact-link{
  display:flex; align-items:center; gap:12px; text-decoration:none; color: var(--ink);
  border:1px solid var(--line); padding: 14px 16px; border-radius: var(--radius);
  font-family:'IBM Plex Mono', monospace; font-size: 13px; transition: all .15s ease;
}
.contact-link:hover{ border-color: var(--ink); background: var(--paper); }
.contact-link b{ font-family:'Inter', sans-serif; font-weight:600; font-size: 13.5px; display:block; }
.contact-link span{ color: var(--ink-soft); font-size:12px; }
.availability-note{ margin-top: 18px; font-family:'IBM Plex Mono', monospace; font-size: 12px; color: var(--ink-soft); }

/* ============================================================
   PROJECT / CASE STUDY
   ============================================================ */
.project-back{
  position:absolute; top:16px; left:24px; z-index:5;
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; text-decoration:none; background:rgba(27,27,24,.35); padding:8px 12px; border-radius:999px;
  backdrop-filter: blur(4px);
}
.project-back:hover{ background:rgba(27,27,24,.6); }

.project-loading{ min-height:60vh; }

.project-hero{ position:relative; width:100%; height:78vh; min-height:440px; max-height:720px; overflow:hidden; background: var(--ink); }
.project-hero img{ width:100%; height:100%; object-fit:cover; }
/* si el rótulo de campaña va dentro de la gráfica, la imagen se ve entera:
   nunca se recorta el lettering por los lados */
.project-hero--full{ height:auto; min-height:0; max-height:none; }
.project-hero--full img{ height:auto; display:block; }
.project-hero-overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(20,19,17,.75), rgba(20,19,17,0) 55%); }
.project-hero-content{
  position:absolute; left:0; right:0; bottom:0; padding: 48px 24px;
  max-width:920px; margin:0 auto; width:100%; box-sizing:border-box; color:#fff;
}
.project-hero-eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; opacity:.9; margin-bottom:12px; }
.project-hero-content h1{ font-size:clamp(38px,7vw,68px); line-height:1; margin:0; color:inherit; }
/* cuando el título ya está rotulado dentro de la propia imagen de campaña,
   el h1 se mantiene para lectores de pantalla pero no se dibuja encima */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.project-hero-content--quiet .project-hero-eyebrow{ margin-bottom:0; }

.project-section{ padding: 42px 0; border-bottom:1px solid var(--line-soft); scroll-margin-top: 80px; }
@media (max-width: 760px){ .project-section{ padding: 32px 0; } }
.project-section:last-of-type{ border-bottom:none; }
.project-section-text{ font-size:18px; line-height:1.65; max-width: 62ch; margin: 0 0 24px; }
.project-section-text:last-child{ margin-bottom:0; }

/* ---------- overview: meta credits + hook ---------- */
.project-meta{
  display:grid; grid-template-columns: repeat(4, auto); gap: 28px 40px;
  margin-bottom: 44px; padding-bottom: 32px; border-bottom:1px solid var(--line-soft);
}
.project-meta div{ display:flex; flex-direction:column; gap:6px; }
.project-meta span{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft); }
.project-meta b{ font-family:'Inter', sans-serif; font-weight:600; font-size:14.5px; }
@media (max-width:700px){ .project-meta{ grid-template-columns: 1fr 1fr; } }

.project-hook{ font-size:clamp(26px,4vw,38px); line-height:1.15; max-width:22ch; margin: 0 0 26px; }

/* ---------- aplicaciones: lista + soporte visual ---------- */
.project-applications{
  list-style:none; margin: 0 0 28px; padding:0;
  display:flex; flex-wrap:wrap; gap:9px;
}
.project-applications li{
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.03em;
  border:1px solid var(--line); border-radius:999px; padding:7px 14px; color: var(--ink-soft);
}

/* cartel impreso y pieza animada en la misma fila y a la misma altura:
   --app-duo-h es exactamente el alto del PhoneFrame (280px en 9/19.5) */
.app-duo{
  --app-duo-h: calc(280px * 19.5 / 9);
  display:flex; flex-wrap:wrap; gap: 40px; align-items:flex-start; justify-content:center;
}
.app-duo-print{ flex:0 0 auto; min-width:0; }
.app-duo-print img{
  height: var(--app-duo-h); width:auto;
  border-radius: var(--radius); border:1px solid var(--line); cursor:zoom-in;
}
.app-duo-motion{ flex:0 0 auto; }
/* el alto manda sobre el ancho: así móvil y cartel miden exactamente lo mismo.
   Se fija en la pantalla y el marco añade sus 8px de padding arriba y abajo */
.app-duo-motion .phone-frame{ height: var(--app-duo-h); width:auto; }
.app-duo-motion .phone-frame--video{ height:auto; width:fit-content; }
.app-duo-motion .phone-frame--video .phone-frame-screen{ height: calc(var(--app-duo-h) - 16px); width:auto; }
.app-sub-label{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color: var(--ink-soft); margin: 16px 0 8px;
}
.reels-row.app-sub-row{ overflow:visible; padding: 0; gap:0; }
.app-duo-text{ font-size:15px; line-height:1.6; color: var(--ink-soft); margin:0; }
@media (max-width: 860px){
  .app-duo{ flex-direction:column; gap: 28px; align-items:flex-start; }
  .app-duo-print img{ height:auto; width:100%; }
  .app-duo-motion .phone-frame--video{ width:100%; max-width:300px; }
  .app-duo-motion .phone-frame--video .phone-frame-screen{ height:auto; width:100%; }
}

/* ficha técnica: datos de producción con las fuentes de la web, no una lámina pegada */
.spec-list{ margin:0; display:grid; grid-template-columns: repeat(2, 1fr); gap: 0 44px; }
.spec-list > div{ display:flex; flex-direction:column; gap:5px; padding: 14px 0; border-top:1px solid var(--line-soft); }
.spec-list dt{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color: var(--ink-soft);
}
.spec-list dd{ margin:0; font-size:15.5px; line-height:1.5; }
@media (max-width: 640px){ .spec-list{ grid-template-columns: 1fr; gap:0; } }

/* resultado final: el tablero de mockups y las newsletters como una sola
   composición. El 1fr/200px hace que ambas caigan casi al mismo alto */
/* 76/24 es la proporción que iguala el alto de un 16:9 y el de las newsletters
   (1100x1956). Al ir en fr, se mantiene igualado a cualquier ancho de ventana */
.result-combo{ display:grid; grid-template-columns: 76fr 24fr; gap: 8px; align-items:start; }
.result-combo .project-media-single{ margin:0; }
.result-combo img{ width:100%; height:auto; }
@media (max-width: 700px){
  .result-combo{ grid-template-columns: 1fr; gap: 20px; }
  .result-combo .result-combo-news{ max-width: 260px; margin: 0 auto; }
}

.project-media-single img{ width:100%; height:auto; border-radius: var(--radius); border:1px solid var(--line); cursor:zoom-in; }
/* imagen recortada sobre el propio papel: sin borde ni caja que la delate */
.project-media-single--cutout img{ border:0; border-radius:0; }
.project-media-pair{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.project-media-pair img{ width:100%; height:auto; border-radius: var(--radius); border:1px solid var(--line); cursor:zoom-in; }
@media (max-width:640px){ .project-media-pair{ grid-template-columns:1fr; } }

.project-media-placeholder{
  width:100%; aspect-ratio: 16/9; border:1px dashed var(--line); border-radius: var(--radius);
  background: var(--paper-card); display:flex; align-items:center; justify-content:center;
}
.project-media-placeholder.pair{ aspect-ratio:4/5; }
.project-media-placeholder span{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-soft);
}

/* ---------- pasapáginas de revista ---------- */
.flipbook{ --flip-ms: 620ms; max-width: 620px; margin: 0 auto; }
.flipbook-stage{
  position:relative; perspective: 2000px;
  background: var(--paper-card); border:1px solid var(--line); border-radius: var(--radius);
  overflow:hidden;
}
.flipbook-stage img{
  width:100%; height:auto; display:block; backface-visibility:hidden;
}
.flipbook-stage .flip-top{
  position:absolute; inset:0; transform-origin: left center;
  transition: transform var(--flip-ms) cubic-bezier(.4,0,.2,1), opacity var(--flip-ms) ease;
  box-shadow: 0 0 40px rgba(27,27,24,0);
}
.flipbook-stage.turning .flip-top{ transform: rotateY(-155deg); opacity:.25; }
.flipbook-stage.turning-back .flip-top{ transform: rotateY(0deg); }

.flipbook-bar{
  display:flex; align-items:center; justify-content:center; gap:22px; margin-top:16px;
}
.flipbook-bar button{
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.06em;
  background:none; border:1px solid var(--line); color: var(--ink);
  width:38px; height:38px; border-radius:50%; cursor:pointer; transition: all .15s ease;
}
.flipbook-bar button:hover{ border-color: var(--ink); background: var(--ink); color: var(--paper); }
.flipbook-bar button:disabled{ opacity:.3; cursor:default; }
.flipbook-bar button:disabled:hover{ background:none; color:var(--ink); border-color:var(--line); }
.flipbook-count{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:.1em; color: var(--ink-soft); min-width:64px; text-align:center; }
@media (prefers-reduced-motion: reduce){ .flipbook-stage .flip-top{ transition:none; } }

/* ---------- paleta cromática nativa ---------- */
.palette-row{ display:grid; grid-template-columns: repeat(var(--n, 8), 1fr); gap:10px; margin-top: 28px; }
.palette-row div{ display:flex; flex-direction:column; gap:8px; }
.palette-row .sw{ aspect-ratio:1; border-radius: var(--radius); border:1px solid rgba(27,27,24,.12); }
.palette-row span{ font-family:'IBM Plex Mono', monospace; font-size:9.5px; letter-spacing:.04em; color: var(--ink-soft); }
@media (max-width:760px){ .palette-row{ grid-template-columns: repeat(4, 1fr); } }

/* ---------- bloques nativos: mismo papel y mismas fuentes que la web ---------- */
.arch-grid{ display:grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap:1px; background: var(--line); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; }
.arch-col{ background: var(--paper-card); padding:20px 16px; }
.arch-col h3{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color: var(--oxblood); margin:0 0 14px; font-weight:500;
}
.arch-col ul{ list-style:none; margin:0; padding:0; }
.arch-col li{ font-size:13px; line-height:1.45; color: var(--ink-soft); padding:5px 0; border-top:1px dashed var(--line-soft); }
.arch-col li:first-child{ border-top:none; }
@media (max-width:860px){ .arch-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:520px){ .arch-grid{ grid-template-columns: 1fr; } }

.persona-card{
  display:grid; grid-template-columns: 1fr 1.4fr; gap:0;
  border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; background: var(--paper-card);
}
.persona-id{ padding:26px; border-right:1px solid var(--line); }
.persona-id h3{ font-size:22px; margin:0 0 4px; }
.persona-id .role{ font-size:13.5px; color: var(--ink-soft); margin:0 0 18px; }
.persona-id dl{ margin:0; font-family:'IBM Plex Mono', monospace; font-size:11.5px; }
.persona-id dt{ color: var(--ink-soft); letter-spacing:.06em; text-transform:uppercase; font-size:10px; margin-top:12px; }
.persona-id dd{ margin:2px 0 0; }
.persona-body{ padding:26px; display:flex; flex-direction:column; justify-content:center; }
.persona-quote{ font-family:'League Spartan', sans-serif; font-size:clamp(18px,2.2vw,24px); line-height:1.3; margin:0 0 18px; }
.persona-body p{ font-size:14.5px; color: var(--ink-soft); margin:0; max-width:52ch; }
@media (max-width:760px){ .persona-card{ grid-template-columns:1fr; } .persona-id{ border-right:none; border-bottom:1px solid var(--line); } }

.trio-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; align-items:start; }
.trio-grid figure{ margin:0; }
.trio-grid img{ width:100%; height:auto; border-radius: var(--radius); border:1px solid var(--line); cursor:zoom-in; }
.trio-grid .cap{ margin-top:8px; }
@media (max-width:760px){ .trio-grid{ grid-template-columns:1fr; } }

.pieces-lead{ margin-bottom:28px; }

.pieces-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; }

/* variante para pantallas de móvil: celdas verticales, sin recorte agresivo */
.pieces-grid--screens{ grid-template-columns: repeat(6, 1fr); gap:12px; }
.pieces-grid--screens .piece-cell img{ aspect-ratio: 9/17; object-fit:cover; object-position:top; }
@media (max-width:900px){ .pieces-grid--screens{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:520px){ .pieces-grid--screens{ grid-template-columns: repeat(2, 1fr); } }
.piece-cell{ margin:0; }
.piece-cell img{ width:100%; height:auto; aspect-ratio:6/5; object-fit:cover; background: var(--paper-card); border-radius: var(--radius); border:1px solid var(--line); cursor:zoom-in; }
.pieces-grid--cutout .piece-cell img{ aspect-ratio: 1/1; object-fit: contain; border:0; background:none; }
.piece-cell .cap{ margin-top:8px; }
@media (max-width:800px){ .pieces-grid{ grid-template-columns: repeat(2, 1fr); } }

.project-tags-row{ padding: 40px 0 0; }
.project-footer-nav{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  max-width:920px; margin: 0 auto; padding: 40px 24px 90px;
}
.project-next{
  text-decoration:none; color: var(--ink); text-align:right;
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
}
.project-next span{ display:block; font-family:'League Spartan', sans-serif; font-weight:600; font-size:22px; text-transform:none; letter-spacing:0; margin-top:4px; }
.project-next:hover{ color: var(--oxblood); }

/* ---------- horizontal carousel (Gallery / Digital Applications) ---------- */
.carousel{ position:relative; }
.carousel-track{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding: 2px 2px 10px; margin: 0 -2px; cursor:grab; -webkit-overflow-scrolling:touch;
}
.carousel-track.dragging{ cursor:grabbing; scroll-snap-type:none; user-select:none; }
.carousel-item{ flex:0 0 auto; scroll-snap-align:start; margin:0; max-width:78vw; }
.carousel-item img{ height:400px; width:auto; max-width:78vw; display:block; border:1px solid var(--line); border-radius:var(--radius); cursor:zoom-in; }
@media (max-width:700px){ .carousel-item img{ height:300px; } }

/* ---------- phone frame (Trivia prototype embed) ---------- */
.phone-frame{
  width: 280px; aspect-ratio: 9 / 19.5; flex-shrink:0;
  background: var(--ink); border-radius: 34px; padding: 8px; position: relative;
  box-shadow: 0 14px 30px rgba(27,27,24,.16);
}
.phone-frame::before{
  content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:38%; height:16px; background:var(--ink); border-radius:0 0 10px 10px; z-index:2;
}
.phone-frame-screen{
  width:100%; height:100%; border-radius:26px; overflow:hidden; background: var(--paper-card);
  border:1px solid rgba(255,255,255,.08); position:relative;
}
.phone-frame-screen img, .phone-frame-screen video, .phone-frame-screen iframe{
  width:100%; height:100%; border:none; display:block; object-fit:cover;
}
.phone-frame-screen video{ background: var(--ink); }
.phone-frame.small{ width:220px; }
/* marco para vídeo vertical 1080x1920. El 9/16 va en la PANTALLA, no en el
   marco: si se lo pones al marco, el padding se come unos píxeles del ancho y
   el vídeo se sigue recortando por los lados. El marco crece con ella */
.phone-frame--video{ aspect-ratio: auto; height: auto; }
.phone-frame--video .phone-frame-screen{ aspect-ratio: 9 / 16; height: auto; }
/* marco del prototipo: exactamente el tamaño de frame del diseño (1080x1929) */
.phone-frame--proto .phone-frame-screen{ aspect-ratio: 1080 / 1929; }

/* ============================================================
   SOCIAL LAYOUT — TikTok Strategy (reels + carruseles)
   ============================================================ */
/* fila de reels: --n columnas iguales, sin scroll lateral. El móvil se encoge
   con la celda en vez de recortarse */
.reels-grid{ display:grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 16px; }
.reels-grid .phone-frame{ width:100%; height:auto; border-radius:22px; padding:5px; }
.reels-grid .phone-frame::before{ height:10px; border-radius:0 0 6px 6px; }
.reels-grid .phone-frame-screen{ border-radius:18px; }

/* rejilla de carruseles 2x2 */
.ig-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* los 4px compensan el bisel del marco del móvil: así la imagen del carrusel
   y la pantalla del reel miden exactamente lo mismo (los dos son 1080 de ancho) */
.ig-grid .ig-post{ width:auto; flex:1 1 auto; padding: 0 4px 0; }
.ig-grid .ig-post-header{ margin: 0 -4px; padding-left:9px; padding-right:9px; }
.ig-grid .ig-post-track img{ width:100%; height:auto; aspect-ratio: 4/5; }

.app-sub-label--spaced{ margin-top: 34px; }

/* etiqueta corta sobre una pieza concreta, solo si tiene una cifra que contar */
.reel-badge{
  position:absolute; left:8px; bottom:8px; z-index:2;
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.08em;
  background: rgba(27,27,24,.72); color:#fff; padding:5px 8px; border-radius:999px;
  backdrop-filter: blur(4px);
}

@media (max-width: 900px){ .ig-grid{ grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 700px){
  .reels-grid{ grid-template-columns: 1fr; gap: 20px; justify-items:center; }
  .reels-grid .phone-frame{ max-width: 280px; border-radius:34px; padding:8px; }
  .reels-grid .phone-frame-screen{ border-radius:26px; }
  .ig-grid{ grid-template-columns: 1fr; }
}

.reels-row{
  display:flex; gap:28px; overflow-x:auto; padding: 8px 2px 24px;
  scroll-snap-type:x proximity;
}
.reels-row .phone-frame{ scroll-snap-align:start; }
.reels-row .phone-frame-screen, .reels-grid .phone-frame-screen{ cursor:pointer; }
.reels-grid .phone-frame-screen::after,
.reels-row .phone-frame-screen::after{
  content:""; position:absolute; inset:0; margin:auto; width:44px; height:44px;
  background: rgba(27,27,24,.45) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>') center/18px no-repeat;
  border-radius:50%; opacity:0; transition: opacity .2s ease; pointer-events:none;
}
.reels-row .phone-frame-screen.playing::after,
.reels-grid .phone-frame-screen.playing::after{ display:none; }
.reels-row .phone-frame-screen:hover::after,
.reels-grid .phone-frame-screen:hover::after{ opacity:1; }

.ig-row{ display:flex; gap:24px; overflow-x:auto; padding: 8px 2px 24px; }
.ig-post{
  flex:0 0 auto; width:280px; border:1px solid var(--line); border-radius:8px;
  overflow:hidden; background: var(--paper-card); scroll-snap-align:start;
}
.ig-post-header{
  display:flex; align-items:center; gap:9px; padding:11px 13px; border-bottom:1px solid var(--line-soft);
}
.ig-post-avatar{
  width:26px; height:26px; border-radius:50%; background: var(--ink); color: var(--paper);
  display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0;
}
.ig-post-username{ font-family:'Inter', sans-serif; font-weight:600; font-size:12.5px; }
.ig-post-track{ display:flex; overflow-x:auto; scroll-snap-type:x proximity; scroll-behavior:smooth; scrollbar-width:none; }
.ig-post-track::-webkit-scrollbar{ display:none; }
.ig-post-track img{ width:280px; height:350px; object-fit:cover; flex-shrink:0; scroll-snap-align:start; cursor:zoom-in; }
.ig-post-dots{ display:flex; justify-content:center; gap:5px; padding:10px; }
.ig-post-dots span{ width:5px; height:5px; border-radius:50%; background: var(--line); }
.ig-post-dots span.active{ background: var(--oxblood); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  margin-top: 0; padding: 24px; border-top:1px solid var(--ink);
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; color: var(--ink-soft);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
}
.site-footer a{ color: var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
.site-footer a:hover{ border-color: var(--oxblood); color: var(--oxblood); }

:focus-visible{ outline: 2px solid var(--oxblood); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  /* apaga toda animación/transición decorativa sin ocultar nada: el estado
     final (visible, en su sitio) se alcanza igual, solo que sin movimiento */
  *, *::before, *::after{
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  html{ scroll-behavior:auto; }
}

/* láminas de desarrollo apiladas: sin marco, se apoyan en el propio papel */
.slide-stack{ display:flex; flex-direction:column; gap: 18px; }
.slide-stack .project-media-single{ margin:0; }

/* información y pieza lado a lado: los datos a la izquierda, la pieza a la derecha */
.info-duo{ display:grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items:start; margin-top: 4px; }
.info-duo-text{ font-size:15.5px; line-height:1.6; margin:0 0 16px; }
.info-duo-list{ margin:0; padding:0; list-style:none; }
.info-duo-list li{
  font-size:14.5px; line-height:1.5; color: var(--ink-soft);
  padding: 9px 0; border-top:1px solid var(--line-soft);
}
@media (max-width: 700px){ .info-duo{ grid-template-columns: 1fr; gap: 22px; } }

/* lista de apoyo bajo un bloque nativo */
.notes-list{ margin: 22px 0 0; padding:0; list-style:none; display:grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.notes-list li{ font-size:15px; line-height:1.55; color: var(--ink-soft); padding: 10px 0; border-top:1px solid var(--line-soft); }
@media (max-width: 700px){ .notes-list{ grid-template-columns: 1fr; } }

/* prototipo de Figma: el embed ya dibuja su propio iPhone, no lleva marco encima */
/* el prototipo trae su propio iPhone. La caja recorta el bisel sobrante de
   arriba y abajo y redondea las esquinas para que se lea como un móvil */
.proto-embed{
  width: 300px; max-width:100%; height: 600px; margin: 0 auto;
  position:relative; overflow:hidden; border-radius: 34px; background:#000;
}
.proto-embed iframe{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:100%; height: 658px; border:0; display:block;
}

/* fases del proceso: término y descripción, como un glosario */
.phase-list{ margin: 0; }
.phase-list > div{
  display:grid; grid-template-columns: 190px 1fr; gap: 26px;
  padding: 15px 0; border-top:1px solid var(--line-soft);
}
.phase-list dt{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color: var(--ink); padding-top:3px;
}
.phase-list dd{ margin:0; font-size:15.5px; line-height:1.6; color: var(--ink-soft); }
@media (max-width: 700px){
  .phase-list > div{ grid-template-columns: 1fr; gap: 6px; }
}
.phase-media-lead{ margin-top: 30px; }

/* carrusel: que se vea que se pasa. Flechas, contador y puntos más marcados */
.ig-post-stage{ position:relative; }
.ig-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:28px; height:28px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.5); background:rgba(27,27,24,.55); color:#fff;
  font-family:'IBM Plex Mono', monospace; font-size:12px; line-height:1;
  opacity:0; transition:opacity .18s ease; backdrop-filter: blur(3px);
}
.ig-post:hover .ig-nav{ opacity:1; }
.ig-nav.prev{ left:8px; }
.ig-nav.next{ right:8px; }
.ig-nav:disabled{ opacity:0 !important; }
.ig-post-count{
  margin-left:auto; font-family:'IBM Plex Mono', monospace; font-size:10.5px;
  letter-spacing:.06em; color: var(--ink-soft);
}
.ig-post-dots span{ width:6px; height:6px; }
.ig-post-dots span.active{ transform: scale(1.25); }
@media (hover:none){ .ig-nav{ opacity:1; } }

/* tabla de datos nativa: cabecera en mono y filas con filete fino */
.data-table{ display:grid; grid-template-columns: repeat(var(--n,3), 1fr); margin-top: 26px; }
.dt-head{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color: var(--ink); padding: 0 16px 10px 0; border-bottom:1px solid var(--line);
}
.dt-cell{ font-size:14.5px; line-height:1.5; color: var(--ink-soft); padding: 14px 16px 14px 0; border-top:1px solid var(--line-soft); }
.dt-first{ color: var(--ink) !important; font-weight:500; }
@media (max-width: 760px){
  .data-table{ grid-template-columns: 1fr; }
  .dt-head{ display:none; }
  .dt-cell{ padding: 6px 0; border-top:none; }
  .dt-first{ border-top:1px solid var(--line-soft); padding-top:14px; margin-top:10px; }
}
.slide-solo{ margin-top: 18px; }

/* apartado de fase: explicación arriba, su tabla o su imagen justo debajo */
.phase-item{ padding-top: 20px; margin-top: 20px; border-top:1px solid var(--line-soft); }
.phase-item:first-child{ border-top:none; padding-top:0; margin-top:26px; }
.phase-item-title{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.11em;
  text-transform:uppercase; color: var(--ink); margin:0 0 8px;
}
.phase-item-text{ font-size:15.5px; line-height:1.6; color: var(--ink-soft); margin:0; max-width:70ch; }
.phase-item .data-table,
.phase-item .arch-grid,
.phase-item .persona-card,
.phase-item .pieces-grid,
.phase-item .trio-grid,
.phase-item .slide-solo{ margin-top: 18px; }
.phase-item .persona-card + .persona-card{ margin-top: 12px; }

.slide-solo{ max-width: 780px; }

/* fichas de persona más contenidas */
.persona-card{ font-size:14px; }
.persona-id{ padding: 14px 16px; }
.persona-id dl{ display:grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.persona-id h3{ font-size:18px; line-height:1.15; }
.persona-id .role{ font-size:12.5px; margin-bottom:10px; line-height:1.3; }
.persona-id dt{ font-size:9.5px; margin-top:6px; }
.persona-id dd{ font-size:11px; }
.persona-body{ padding: 14px 18px; }
.persona-quote{ font-size:clamp(15px,1.6vw,18px); margin-bottom:9px; line-height:1.2; }
.persona-body p{ font-size:13.5px; }

/* mapas de empatía: los tres en fila, pequeños y ampliables al pulsar */
.trio-grid--tight{ gap:10px; }
.trio-grid--tight img{ cursor: zoom-in; }
@media (max-width:760px){ .trio-grid--tight{ grid-template-columns: repeat(3, 1fr); } }