/* ============================================================
   Cécica Bernasconi — Actriz & Artista plástica
   Paleta papel / tinta / cobre · editorial cálido
   EDITAR colores acá (tokens).
   ============================================================ */
:root{
  --papel:#f6f1e9;
  --papel-2:#efe7d7;      /* fondo sección museo (piezas) */
  --blanco:#fffdf7;       /* passe-partout de las piezas   */
  --tinta:#221d15;
  --tinta-2:#6d6251;
  --linea:#d8ccb8;
  --carbon:#171310;       /* fondo oscuro: reels y footer  */
  --claro:#ece3d2;        /* texto sobre carbon            */
  --cobre:#9a6234;        /* acento, usado con moderación  */
  --cobre-claro:#cfa06d;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --max:1180px;
  --nav-h:76px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-weight:400;
  background:var(--papel);
  color:var(--tinta);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
ul{list-style:none}
:focus-visible{outline:2px solid var(--cobre);outline-offset:3px;border-radius:2px}
::selection{background:var(--tinta);color:var(--papel)}

.saltar{position:absolute;left:-9999px;top:0;z-index:300;background:var(--tinta);color:var(--papel);padding:.7rem 1.2rem;text-decoration:none}
.saltar:focus{left:1rem;top:1rem}

/* ---------- micro-etiqueta ---------- */
.micro{
  font-size:.72rem;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--tinta-2);
}

/* ============================================================
   NAVEGACIÓN
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto;
  height:var(--nav-h);z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(1.1rem,4vw,2.4rem);
  border-bottom:1px solid transparent;
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease;
}
.nav.scrolled{
  background:rgba(246,241,233,.88);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom-color:var(--linea);
}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.brand .mono{
  width:40px;height:40px;flex:0 0 auto;
  display:grid;place-items:center;
  border:1px solid var(--tinta);
  font-family:var(--serif);font-size:1.45rem;line-height:1;
}
.brand .word{
  font-family:var(--serif);
  font-size:1.3rem;
  letter-spacing:.04em;
  white-space:nowrap;
}
.nav-links{display:flex;align-items:center;gap:2.2rem}
.nav-links a{
  position:relative;
  text-decoration:none;
  font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--tinta-2);
  padding:.6rem 0;
  transition:color .2s;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;
  width:100%;height:1px;background:var(--cobre);
  transform:scaleX(0);transform-origin:left;
  transition:transform .28s ease;
}
.nav-links a:hover{color:var(--tinta)}
.nav-links a:hover::after{transform:scaleX(1)}

.hamb{
  display:none;
  width:46px;height:46px;
  background:none;border:0;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.hamb span{display:block;width:24px;height:1.5px;background:var(--tinta);transition:transform .3s,opacity .3s}
.nav.abierto .hamb span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav.abierto .hamb span:nth-child(2){opacity:0}
.nav.abierto .hamb span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

@media (max-width:860px){
  .hamb{display:flex}
  .nav-links{
    display:none;
    position:absolute;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--papel);
    border-bottom:1px solid var(--linea);
    padding:0 clamp(1.2rem,6vw,2rem) .8rem;
  }
  .nav.abierto .nav-links{display:flex}
  .nav-links li{border-top:1px solid rgba(216,204,184,.6)}
  .nav-links a{display:block;padding:1rem 0;font-size:.8rem}
  .nav-links a::after{display:none}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;place-items:center;
  text-align:center;
  padding:calc(var(--nav-h) + 2rem) 1.5rem 4.5rem;
  overflow:hidden;
  background:
    radial-gradient(1100px 560px at 50% -12%, rgba(154,98,52,.12), transparent 62%),
    radial-gradient(900px 520px at 88% 112%, rgba(23,19,16,.07), transparent 58%),
    var(--papel);
}
.hero::before{
  content:"";position:absolute;
  inset:clamp(12px,2.2vw,28px);
  border:1px solid rgba(34,29,21,.17);
  pointer-events:none;
}
.hero-inner{position:relative;max-width:920px;margin:0 auto}
.hero .micro{margin-bottom:1.7rem}
.hero h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(3.6rem,12vw,7.6rem);
  line-height:.98;
  letter-spacing:.01em;
}
.hero h1 .h1-ap{
  display:block;
  font-style:italic;
  font-weight:500;
  font-size:.58em;
  line-height:1.05;
  margin-top:.16em;
  letter-spacing:.02em;
}
.facetas{
  display:flex;align-items:center;justify-content:center;gap:1.2rem;
  margin:1.8rem 0 2.6rem;
  font-size:.86rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--tinta-2);
}
.facetas .pto{color:var(--cobre);font-size:1.2rem;letter-spacing:0;line-height:1}
.hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.cue{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  font-size:.66rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--tinta-2);
}
@media (max-width:560px){ .facetas{flex-direction:column;gap:.35rem} .facetas .pto{display:none} }

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.9rem 2.1rem;
  border:1px solid var(--tinta);
  background:transparent;color:var(--tinta);
  font-family:var(--sans);
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;
  transition:background .25s,color .25s;
  min-height:44px;
}
.btn:hover{background:var(--tinta);color:var(--papel)}

/* ---------- puente (frase entre secciones) ---------- */
.puente{
  padding:4.2rem 1.5rem;
  text-align:center;
  background:var(--papel);
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.35rem,3vw,2rem);
  color:var(--tinta-2);
}
.puente::before,.puente::after{
  content:"—";display:block;
  color:var(--cobre);opacity:.75;
  font-style:normal;
  letter-spacing:.6em;
}
.puente::before{margin-bottom:.7rem}
.puente::after{margin-top:.7rem}

/* ============================================================
   SECCIONES GENÉRICAS
   ============================================================ */
.seccion{
  padding:clamp(4.2rem,9vw,7.2rem) clamp(1.2rem,5vw,2.4rem);
  scroll-margin-top:var(--nav-h);
}
.seccion-papel{background:var(--papel)}
.seccion-museo{background:var(--papel-2)}
.seccion-carbon{background:var(--carbon);color:var(--claro)}
.seccion-carbon .micro{color:rgba(236,227,210,.62)}

.seccion-cab{
  max-width:var(--max);margin:0 auto clamp(2.4rem,5vw,3.8rem);
  display:grid;grid-template-columns:1fr 1.15fr;gap:1.4rem 2.5rem;
  align-items:end;
}
.seccion-cab .micro{margin-bottom:.9rem}
.seccion-cab h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2.7rem,6.5vw,4.6rem);
  line-height:1;
}
.seccion-cab p{
  color:var(--tinta-2);
  font-size:.97rem;
  max-width:48ch;
  justify-self:end;
  text-align:right;
}
.seccion-carbon .seccion-cab p{color:rgba(236,227,210,.72)}
@media (max-width:820px){
  .seccion-cab{grid-template-columns:1fr;align-items:start;gap:.6rem}
  .seccion-cab p{justify-self:start;text-align:left;margin-top:.4rem}
}

/* ============================================================
   GALERÍAS
   ============================================================ */
.galeria{
  max-width:var(--max);margin:0 auto;
  display:grid;
  gap:clamp(1rem,2.5vw,1.8rem);
}
.galeria figure{margin:0}
.galeria .marco{
  display:block;position:relative;overflow:hidden;
  width:100%;padding:0;border:0;background:var(--blanco);
  cursor:zoom-in;
}
.galeria .marco img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.6,.2,1);
}
.galeria .marco:hover img{transform:scale(1.045)}
.galeria figcaption{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin-top:.8rem;
  font-size:.82rem;color:var(--tinta-2);
}
.galeria figcaption .nom{font-family:var(--serif);font-style:italic;font-size:1.08rem;color:var(--tinta)}
.galeria figcaption .det{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}

/* -- Book: retrato 4:5, sin marco -- */
.galeria-book{grid-template-columns:repeat(3,1fr)}
.galeria-book .marco{aspect-ratio:4/5}

/* -- Piezas: enmarcadas como obra, 1:1 -- */
.galeria-piezas{grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,3vw,2.4rem)}
.galeria-piezas figure{
  background:var(--blanco);
  border:1px solid var(--linea);
  padding:.85rem .85rem 1.15rem;
  box-shadow:0 1px 0 rgba(34,29,21,.04),0 18px 40px -26px rgba(34,29,21,.35);
  transition:transform .35s ease,box-shadow .35s ease;
}
.galeria-piezas figure:hover{transform:translateY(-3px);box-shadow:0 2px 0 rgba(34,29,21,.05),0 26px 50px -26px rgba(34,29,21,.45)}
.galeria-piezas .marco{aspect-ratio:1/1}
.galeria-piezas figcaption{
  flex-direction:column;align-items:center;text-align:center;gap:.2rem;
  margin-top:.95rem;
}

@media (max-width:900px){ .galeria-book{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .galeria-book{grid-template-columns:repeat(2,1fr);gap:.9rem} .galeria-book figcaption{flex-direction:column;gap:.15rem} }
@media (max-width:520px){
  .galeria-piezas{grid-template-columns:1fr}
}

/* ============================================================
   REELS (YouTube embebidos) — sección oscura
   ============================================================ */
.reels-grid{
  max-width:var(--max);margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));
  gap:clamp(1.2rem,2.5vw,2rem);
}
.reel{
  aspect-ratio:16/9;
  border-radius:10px;overflow:hidden;
  background:#000;
  border:1px solid rgba(236,227,210,.16);
}
.reel iframe{display:block;width:100%;height:100%;border:0}
.reel--vacio{
  aspect-ratio:16/9;
  display:grid;place-items:center;gap:.7rem;
  padding:1.6rem;
  text-align:center;
  border:1px dashed rgba(236,227,210,.38);
  border-radius:10px;
  background:rgba(236,227,210,.03);
  color:rgba(236,227,210,.75);
  font-size:.92rem;
}
.reel--vacio svg{opacity:.55}
.reel--vacio code{
  font-size:.82em;color:var(--cobre-claro);
  background:rgba(236,227,210,.08);
  padding:.15rem .45rem;border-radius:3px;
}

/* ============================================================
   FOOTER / CONTACTO
   ============================================================ */
.pie-pag{
  background:var(--carbon);color:var(--claro);
  padding:clamp(3.6rem,8vw,5.8rem) clamp(1.2rem,5vw,2.4rem) 2.2rem;
  scroll-margin-top:var(--nav-h);
}
.pie-grid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1.3fr 1fr;gap:3rem;
  align-items:start;
}
.pie-pag h3{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2rem,4.5vw,3.2rem);
  line-height:1.1;
  margin:.5rem 0 1.1rem;
}
.pie-pag .micro{color:rgba(236,227,210,.6)}
.pie-intro{color:rgba(236,227,210,.68);font-size:.95rem;max-width:44ch}
.pie-links{display:flex;flex-direction:column;gap:.35rem}
.pie-links a{
  display:flex;align-items:center;gap:.85rem;
  padding:.75rem .4rem;
  text-decoration:none;color:rgba(236,227,210,.85);
  font-size:.95rem;
  border-bottom:1px solid rgba(236,227,210,.12);
  transition:color .2s,padding-left .2s;
  min-height:44px;
}
.pie-links a:hover{color:#fff;padding-left:.9rem}
.pie-links svg{width:20px;height:20px;flex:0 0 auto;color:var(--cobre-claro)}
.pie-note{
  max-width:var(--max);margin:2.4rem auto 0;
  padding-top:1.5rem;
  border-top:1px solid rgba(236,227,210,.14);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
  font-size:.74rem;letter-spacing:.08em;
  color:rgba(236,227,210,.5);
}
@media (max-width:820px){ .pie-grid{grid-template-columns:1fr;gap:2rem} }

.pie-note a{
  color:var(--claro);
  text-decoration:none;
  border-bottom:1px solid rgba(236,227,210,.35);
  transition:color .2s,border-color .2s;
}
.pie-note a:hover{color:#fff;border-bottom-color:var(--cobre-claro)}

/* ============================================================
   LIGHTBOX (visor de imágenes)
   ============================================================ */
.lightbox{
  position:fixed;inset:0;z-index:100;
  background:rgba(12,10,7,.94);
  display:grid;place-items:center;
  padding:2rem;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.lightbox.abierto{opacity:1;pointer-events:auto}
.lightbox figure{margin:0;max-width:min(1000px,92vw);text-align:center}
.lightbox img{
  max-height:76vh;
  max-width:min(1000px,92vw);
  margin:0 auto;
  box-shadow:0 34px 90px -32px rgba(0,0,0,.85);
}
.lightbox figcaption{
  margin-top:1.1rem;
  color:var(--claro);
  font-family:var(--serif);font-style:italic;font-size:1.2rem;
}
.lb-boton{
  width:48px;height:48px;
  display:grid;place-items:center;
  background:none;border:1px solid rgba(236,227,210,.45);
  color:var(--claro);
  font-size:1.4rem;line-height:1;
  border-radius:50%;
  cursor:pointer;
  transition:background .2s,color .2s;
}
.lb-boton:hover{background:var(--claro);color:var(--carbon)}
.lb-cierre{position:absolute;top:1.2rem;right:1.3rem;z-index:2}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2}
.lb-prev{left:1.1rem}
.lb-next{right:1.1rem}
.lb-contador{
  position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);
  color:rgba(236,227,210,.6);
  font-size:.7rem;letter-spacing:.34em;
}
@media (max-width:640px){
  .lb-nav{top:auto;bottom:1.1rem;transform:none}
  .lb-prev{left:auto;right:6.4rem}
  .lb-next{right:1.2rem}
}

/* ============================================================
   REVELADO AL SCROLL + accesibilidad de movimiento
   ============================================================ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.6,.2,1)}
.reveal.visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}