/* =========================================================
   JUAN GAUTIER — site actor
   Paleta y tipografía heredan la identidad ya fijada en el
   book impreso: Helvetica, mayúsculas con tracking, filete
   fino como único adorno. Nada que "se note".
   ========================================================= */

:root{
  --paper:      #f7f6f2;
  --paper-raise:#ffffff;
  --ink:        #171613;
  --ink-soft:   #5c584f;
  --ink-faint:  #8c887d;
  --line:       #ddd9d0;
  --accent:     #6b1f22;   /* rouge rideau — sobrio, se usa muy poco */

  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --wrap: 1240px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important; transition:none !important;}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{display:block; max-width:100%; height:auto;}
a{color:inherit; text-decoration:none;}

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 32px;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  margin:0;
}

/* ---------- NAV ---------- */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 32px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
  background:rgba(247,246,242,.88);
  backdrop-filter:blur(6px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.nav__name{font-weight:600;}
.nav__right{display:flex; align-items:center; gap:28px;}
.nav__links{display:flex; gap:28px;}
.nav__links a{opacity:.7;}
.nav__links a:hover{opacity:1;}

/* ---------- HERO ---------- */
.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  min-height:100svh;
  padding-top:84px;
}
.hero__text{
  padding:48px clamp(32px,5vw,80px);
}
.hero__name{
  font-size:clamp(40px,5.6vw,76px);
  letter-spacing:.01em;
  text-transform:uppercase;
  line-height:1.02;
}
.hero__role{
  margin-top:22px;
  font-size:clamp(16px,1.8vw,20px);
  letter-spacing:.03em;
  color:var(--ink-soft);
}
.hero__nav{
  margin-top:42px;
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.hero__nav a{
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  color:var(--ink);
  transition:border-color .15s ease, color .15s ease;
}
.hero__nav a:hover{border-color:var(--ink); color:var(--accent); border-color:var(--accent);}

.hero__media{
  position:relative;
  width:100%;
  aspect-ratio:2/3;
  overflow:hidden;
  background:#111;
}
.hero__media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 30%;
}

@media (max-width:900px){
  .hero{grid-template-columns:1fr; min-height:auto;}
  .hero__media{order:-1; aspect-ratio:3/4;}
  .hero__text{padding:40px 24px;}
}

/* ---------- SECTION SHELL ---------- */
section{padding:118px 0;}
#book{scroll-margin-top:100px;}
.section__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--line);
  padding-bottom:22px;
  margin-bottom:56px;
  flex-wrap:wrap;
}
.section__title{
  font-size:clamp(30px,4vw,44px);
  text-transform:uppercase;
  letter-spacing:.03em;
}
.section__note{
  max-width:520px;
  color:var(--ink-soft);
  font-size:15px;
  text-transform:uppercase;
}

/* ---------- BOOK GRID (4 categorías en fila, título + contador superpuestos) ---------- */
.section__downloads{
  margin-top:14px;
  display:flex;
  justify-content:flex-end;
  gap:20px;
  flex-wrap:wrap;
}
.book-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.book-card{
  position:relative;
  display:block;
  padding:0;
  margin:0;
  border:none;
  background:#111;
  aspect-ratio:2/3;
  overflow:hidden;
  cursor:pointer;
}
.book-card img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(1);
  transition:filter .45s ease, transform .5s ease;
}
.book-card:hover img{
  filter:grayscale(0);
  transform:scale(1.03);
}
.book-card__overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  background:rgba(10,9,8,.42);
  transition:background .45s ease;
}
.book-card:hover .book-card__overlay{
  background:rgba(10,9,8,.14);
}
.book-card__title{
  display:block;
  font-family:var(--font-display);
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#f7f6f2;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.book-card__count{
  display:block;
  margin-top:6px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:rgba(247,246,242,.8);
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}


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

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(10,9,8,.95);
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:28px 16px;
}
.lightbox.is-open{display:flex;}
.lightbox__topbar{
  display:none;
  width:100%;
  max-width:92vw;
  margin-bottom:10px;
}
.lightbox__topbar span{
  font-family:var(--font-display);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#e7e4dc;
}
.lightbox__stage{
  position:relative;
  max-width:92vw;
  max-height:70svh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox__stage img{
  max-width:92vw;
  max-height:70svh;
  width:auto; height:auto;
  object-fit:contain;
  display:block;
  cursor:pointer;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  position:relative;
  z-index:2;
}
.lightbox__peek{
  /* Ya no muestran una miniatura: se dejan invisibles pero con el mismo
     tamaño y posición de antes, para conservar la misma zona de clic
     "segura" (donde un clic no cierra el visor) sin el recorte visual. */
  position:absolute;
  top:6%; bottom:6%;
  width:130px;
  z-index:1;
}
.lightbox__peek--prev{left:-96px;}
.lightbox__peek--next{right:-96px;}
.lightbox__arrow{
  /* Ancladas al stage (que se ajusta al tamaño real de la foto) y no al
     viewport, para que queden pegadas a la imagen y dejen mucho menos
     espacio "muerto" donde un clic cierra el visor por error. */
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:none; color:#f2f0ea;
  font-size:34px; line-height:1; cursor:pointer;
  padding:8px 14px; z-index:3;
  opacity:.75; transition:opacity .15s ease;
}
.lightbox__arrow:hover{opacity:1; color:var(--accent);}
.lightbox__arrow--prev{left:-50px;}
.lightbox__arrow--next{right:-50px;}
.lightbox__close{
  position:absolute; top:20px; right:24px;
  background:none; border:none; color:#f2f0ea;
  font-size:20px; cursor:pointer; z-index:4;
}
.lightbox__bar{
  margin-top:20px;
  display:flex;
  align-items:center;
  gap:14px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#e7e4dc;
}
.lightbox__cat-desktop{font-family:var(--font-display); letter-spacing:.08em;}
.lightbox__sep-desktop{color:#6b6862;}
.lightbox__dots{display:none; gap:6px;}
.lightbox__dot{width:5px; height:5px; border-radius:50%; background:#524e47;}
.lightbox__dot.is-active{width:7px; height:7px; background:currentColor;}

@media (max-width:760px){
  .lightbox__topbar{display:block; max-width:100%;}
  .lightbox__peek, .lightbox__arrow{display:none;}
  .lightbox__cat-desktop, .lightbox__sep-desktop{display:none;}
  .lightbox__dots{display:flex;}
  /* El título usa 100% del contenedor con padding; antes la foto usaba
     max-width:92vw (relativo al viewport), que en la práctica no
     coincide exactamente con ese 100% en todos los anchos de pantalla,
     dejando el título unos px desalineado del borde real de la foto.
     Igualamos stage e imagen a la misma referencia (100% del mismo
     contenedor que el título) para que el margen izquierdo quede
     matemáticamente idéntico, no aproximado. */
  .lightbox__stage{
    width:100%;
    max-width:100%;
    justify-content:flex-start;
  }
  .lightbox__stage img{max-width:100%;}
  /* Puntos arriba, conteo de fotos debajo (no al lado) */
  .lightbox__bar{flex-direction:column; justify-content:center; gap:10px;}
}

/* ---------- CV ---------- */
.cv-head h3{
  font-size:clamp(24px,3vw,32px);
  text-transform:uppercase;
  letter-spacing:.02em;
}
.cv-head .eyebrow{margin-top:8px;}

.cv-meta{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:32px 0;
  margin:32px 0 56px;
}
.cv-meta__item h4{
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--ink-faint);
  font-weight:500;
  margin:0 0 14px;
}
.cv-pair{margin-bottom:12px;}
.cv-pair:last-child{margin-bottom:0;}
.cv-pair__main{margin:0; font-size:14px; color:var(--ink); font-weight:600; line-height:1.35;}
.cv-pair__sub{margin:1px 0 0; font-size:13px; color:var(--ink-faint); line-height:1.35;}

.cv-credits{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
}
.cv-credits__col h4{
  font-family:var(--font-display);
  font-size:17px;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:16px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.credit-list{list-style:none; margin:0; padding:0;}
.credit{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid var(--line);
}
.credit:last-child{border-bottom:none;}
.credit__year{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-faint);
}
.credit__title{
  font-style:italic;
  font-size:14.5px;
}
.credit__desc{
  font-size:12.5px;
  color:var(--ink-soft);
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 26px;
  border:1px solid var(--ink);
  font-family:var(--font-mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.1em;
  transition:background .2s ease, color .2s ease;
}
.btn:hover{background:var(--ink); color:var(--paper);}
.btn--accent{border-color:var(--accent); color:var(--accent);}
.btn--accent:hover{background:var(--accent); color:var(--paper); border-color:var(--accent);}

/* ---------- NAV LANGUAGE SWITCH (permanente) ---------- */
.nav__lang{
  display:flex;
  align-items:center;
  gap:6px;
}
.nav__lang-sep{opacity:.4;}
.nav__lang-btn{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  background:none;
  border:none;
  padding:2px 3px;
  color:var(--ink);
  opacity:.55;
  cursor:pointer;
  transition:opacity .15s ease, color .15s ease;
}
.nav__lang-btn:hover{opacity:1; color:var(--accent);}
.nav__lang-btn.is-active{opacity:1; border-bottom:1px solid var(--accent); color:var(--accent);}

@media (max-width:760px){
  .nav__right{gap:16px;}
}

/* ---------- LANGUAGE GATE (modal de primera visita) ---------- */
.lang-gate{
  position:fixed; inset:0; z-index:300;
  background:rgba(20,18,16,.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.lang-gate.is-open{display:flex;}
.lang-gate__card{
  background:var(--paper-raise);
  width:100%;
  max-width:360px;
  padding:44px 32px;
  text-align:center;
}
.lang-gate__name{
  font-family:var(--font-display);
  font-size:17px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink);
}
.lang-gate__rule{width:44px; height:1px; background:var(--accent); margin:18px auto;}
.lang-gate__prompt{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--ink-faint);
  margin-bottom:24px;
}
.lang-gate__choices{display:flex; gap:14px; justify-content:center;}
.lang-gate__choices button{
  padding:9px 22px;
  background:transparent;
  border:1px solid var(--line);
  font-family:var(--font-display);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.lang-gate__choices button:hover{border-color:var(--accent); color:var(--accent);}

/* ---------- SHOWREEL ---------- */
.reel{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#0d0c0b;
  border:1px solid var(--line);
  overflow:hidden;
}
.reel-poster{
  position:relative;
  width:100%; height:100%;
  cursor:pointer;
}
.reel-poster img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.reel-poster__play{
  position:absolute; inset:0;
  margin:auto;
  width:76px; height:54px;
  background:none; border:none; padding:0;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease;
}
.reel-poster:hover .reel-poster__play{transform:scale(1.08);}
.reel iframe{width:100%; height:100%; border:0;}

/* ---------- CONTACT / FOOTER ---------- */
.contact{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:48px;
}
.contact__big{
  margin:0;
  font-size:clamp(28px,4vw,42px);
  line-height:1.15;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.contact__list{margin-top:0; font-family:var(--font-mono); font-size:14px;}
.contact__list a{border-bottom:1px solid var(--line); display:inline-block; padding-bottom:1px;}
.contact__list a:hover{border-color:var(--accent); color:var(--accent);}
.contact__row{margin-bottom:12px;}
.contact__label{color:var(--ink-faint); display:inline-block; width:110px;}

footer{
  border-top:1px solid var(--line);
  padding:26px 0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-faint);
  text-transform:uppercase;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:760px){
  .wrap{padding:0 20px;}
  section{padding:76px 0;}
  .cv-meta{grid-template-columns:1fr 1fr; gap:24px;}
  .cv-credits{grid-template-columns:1fr; gap:36px;}
  .contact{grid-template-columns:1fr; gap:28px;}
  .hero{padding-top:134px;}

  /* Nav: nombre en su propia línea arriba, botones + idioma debajo,
     alineados al mismo margen izquierdo (en vez de nombre a la izquierda
     y botones empujados al extremo derecho). */
  .nav{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding:16px 20px;
  }
  .nav__right{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
    row-gap:10px;
  }
  .nav__links{gap:16px; font-size:11px;}
}