/* ═══════════════════════════════════════════════════════════════
   CYK — VERSIÓN B v2 · "El Hilo"
   Lenguaje Tandjung Sari: crema cálido, serif Caslon gigante,
   hilo vertical con rombos, fotos enmarcadas, acento rojo corten.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --crema:#F1ECDE;
  --crema-2:#EAE4D3;      /* tarjeta / marco de foto */
  --tinta:#4A4438;         /* marrón grisáceo cálido (texto) */
  --tinta-2:#2E2A22;       /* titulares */
  --rojo:#8E2F1F;          /* acento: rojo corten */
  --hair:rgba(74,68,56,.28);
  --ease:cubic-bezier(.22,1,.36,1);
  --gut:clamp(1.4rem,5vw,4rem);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--crema);color:var(--tinta);
  font-family:'Inter',system-ui,sans-serif;font-weight:300;
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
::selection{background:var(--rojo);color:var(--crema)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.serif,h1,h2,.serif-big,.era-word{font-family:'Cormorant Garamond',Georgia,serif}

/* ── Header ── */
#top-bar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;
  align-items:center;justify-content:flex-end;padding:1.2rem var(--gut);
  transition:background .5s;min-height:56px}
#top-bar.solid{background:rgba(241,236,222,.92);backdrop-filter:blur(10px)}
/* logo 3x fuera del flujo: no engorda la barra, cuelga sobre el contenido.
   Siempre grande; sobre el hero va blanco y sobre la crema en tinta. */
.brand{position:absolute;top:.7rem;left:var(--gut);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.brand img{height:168px;width:auto;transition:filter .5s;
  filter:invert(.72) sepia(.18) saturate(.6) brightness(.55) drop-shadow(0 2px 10px rgba(46,42,34,.2))}
body:not(.scrolled) .brand img{filter:drop-shadow(0 2px 8px rgba(0,0,0,.55))}
/* al entrar al Libro de Obras el logo se retira; reaparece al subir */
body.logo-off .brand{opacity:0;transform:translateY(-14px);pointer-events:none}
.contact-link{position:relative;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
  font-weight:500;color:var(--crema);border-bottom:1px solid rgba(241,236,222,.5);
  padding-bottom:.2rem;transition:color .5s,border-color .5s}
/* zona de toque de 44px sin alterar el trazo visual */
.contact-link::before{content:"";position:absolute;left:-10px;right:-10px;top:50%;
  transform:translateY(-50%);height:44px}
body.scrolled .contact-link{color:var(--rojo);border-color:rgba(142,47,31,.4)}

/* ── data-reveal ── */
[data-reveal]{opacity:0;transform:translateY(28px)}

/* ═══ HERO ═══ */
.hero-b{position:relative;height:100svh;overflow:hidden;display:flex;
  align-items:center;justify-content:center;text-align:center}
.hero-media{position:absolute;inset:-6% 0;background-size:cover;background-position:center;
  transform:scale(1.08)}
.hero-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(30,26,20,.35),rgba(30,26,20,.18) 45%,rgba(30,26,20,.5))}
.hero-copy{position:relative;z-index:2;color:var(--crema);padding:0 var(--gut)}
.hero-over{font-size:.85rem;letter-spacing:.34em;text-transform:uppercase;font-weight:600;
  color:#fff;margin-bottom:2rem;
  text-shadow:0 1px 3px rgba(0,0,0,1),0 3px 10px rgba(0,0,0,.85),0 8px 24px rgba(0,0,0,.6)}
.hero-copy h1{font-size:clamp(3.4rem,9.5vw,8.5rem);font-weight:300;line-height:.98;
  letter-spacing:.01em;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.55),0 10px 40px rgba(0,0,0,.4)}
.hero-copy h1 em{font-style:italic;font-weight:300}
.hero-under{margin-top:2.2rem;font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:500;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,1),0 3px 10px rgba(0,0,0,.85),0 8px 24px rgba(0,0,0,.6)}
.hero-hint{position:absolute;bottom:0;left:50%;transform:translateX(-50%);z-index:2;
  width:1px;height:9vh;background:rgba(241,236,222,.55)}

/* ═══ EL HILO ═══ */
.thread-wrap{position:relative;padding:10vh 0 6vh}
.thread{position:absolute;top:0;bottom:0;left:50%;width:1px;transform:translateX(-50%)}
.thread-line{position:absolute;inset:0;background:var(--hair);transform-origin:top;
  transform:scaleY(0)}
.node{display:block;width:11px;height:11px;margin:0 auto 7vh;background:var(--crema);
  border:1px solid var(--rojo);transform:rotate(45deg);position:relative;z-index:2}
.node::after{content:"";position:absolute;inset:3px;background:var(--rojo)}

/* pasajes narrativos centrados */
.passage{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:14vh var(--gut);
  text-align:center;background:transparent}
.serif-big{font-size:clamp(1.9rem,4.4vw,3.6rem);font-weight:400;line-height:1.18;
  color:var(--tinta-2);letter-spacing:.005em}
.serif-big em{font-style:italic;font-weight:400;color:var(--rojo)}
.passage-sub{margin:2.4rem auto 0;max-width:56ch;font-size:.98rem;line-height:1.75}
/* el texto tapa el hilo detrás */
.passage>p{background:var(--crema);padding-left:.6rem;padding-right:.6rem}

/* marcador de época — serif gigante que desborda */
.era{position:relative;z-index:1;padding:8vh 0;text-align:center;overflow:hidden}
.era-word{display:block;font-size:clamp(7rem,26vw,24rem);line-height:.85;font-weight:300;
  font-style:italic;color:var(--tinta-2);white-space:nowrap;opacity:.92}
.era-note{margin-top:1.2rem;font-size:.95rem;background:var(--crema);display:inline-block;
  padding:0 .8rem}

/* ═══ OBRAS · fotos enmarcadas alternadas ═══ */
.obras-head{position:relative;z-index:1;text-align:center;padding:12vh var(--gut) 6vh}
.obras-head>p,.obras-head>h2{background:var(--crema);display:inline-block;padding:0 .8rem}
.caps{font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;font-weight:500;
  color:var(--rojo)}
.obras-head h2{margin-top:1.4rem}
.terr-caps{margin-top:2rem;background:var(--crema);display:inline-block;padding:0 .8rem}

.obra{position:relative;z-index:1;padding:9vh var(--gut);display:flex}
.obra:nth-child(odd){justify-content:flex-start}
.obra:nth-child(even){justify-content:flex-end}
.obra-frame{width:min(680px,100%);background:var(--crema-2);padding:1.1rem;
  box-shadow:0 24px 60px -28px rgba(46,42,34,.45)}
.obra-media{position:relative;overflow:hidden;aspect-ratio:4/3}
.obra-zoom{position:absolute;inset:0;transform:scale(1.12)}
.obra-zoom>i{position:absolute;inset:0;background-size:cover;background-position:center;display:block}
.capa-antes{filter:grayscale(.3) brightness(.92)}
.capa-despues{z-index:2}
.wipeline{position:absolute;top:0;bottom:0;left:0;width:1.5px;background:var(--rojo);
  z-index:3;opacity:0;pointer-events:none}
.obra-meta{padding:1.5rem .5rem .7rem;display:flex;flex-direction:column;gap:.45rem}
.obra-num{font-size:.62rem;letter-spacing:.3em;font-weight:500;color:var(--rojo)}
.obra-name{font-family:'Cormorant Garamond',serif;font-size:clamp(1.9rem,3.4vw,2.8rem);
  font-weight:400;font-style:italic;line-height:1;color:var(--tinta-2)}
.obra-tag{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
  color:var(--tinta)}
.obra-line{font-size:.92rem;line-height:1.65;max-width:52ch;margin-top:.4rem}
/* full-bleed de ritmo (cada 4) */
.obra.bleed{padding:12vh 0}
.obra.bleed .obra-frame{width:100%;background:transparent;padding:0;box-shadow:none}
.obra.bleed .obra-media{aspect-ratio:auto;height:92svh}
.obra.bleed .obra-meta{position:absolute;left:var(--gut);bottom:2.4rem;z-index:2;color:#fff;padding:0}
.obra.bleed .obra-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(30,26,20,0) 55%,rgba(30,26,20,.55))}
.obra.bleed .obra-num{color:var(--crema)}
.obra.bleed .obra-name{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.obra.bleed .obra-tag{color:rgba(241,236,222,.95);text-shadow:0 1px 4px rgba(0,0,0,.7)}
.obra.bleed .obra-line{color:rgba(241,236,222,.95);text-shadow:0 1px 4px rgba(0,0,0,.75)}
.obra.bleed{position:relative}
.obra.bleed .obra-meta{position:absolute}

/* obra bajo reserva: ninguna fotografía, solo la promesa */
.obra-soon{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.1rem;text-align:center;
  padding:2rem;background:
    repeating-linear-gradient(135deg,rgba(74,68,56,.045) 0 2px,transparent 2px 11px),
    var(--crema)}
.soon-node{width:11px;height:11px;background:var(--crema);border:1px solid var(--rojo);
  transform:rotate(45deg);position:relative;flex:none}
.soon-node::after{content:"";position:absolute;inset:3px;background:var(--rojo)}
.soon-word{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(2.4rem,5.5vw,4rem);line-height:1;color:var(--tinta-2)}
.soon-sub{font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;font-weight:500;
  color:var(--rojo)}
.obra.is-soon .obra-frame{box-shadow:0 18px 48px -30px rgba(46,42,34,.35)}

/* util */
.nowrap{white-space:nowrap}
/* obras con original de baja resolución: marco más compacto (se ven nítidas) */
.obra.sm .obra-frame{width:min(520px,100%)}

/* ── fotos adicionales de una obra: buena calidad → marcos grandes;
      chicas → collage a su tamaño natural, nunca estiradas ── */
.obra-addendum{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:0 var(--gut) 7vh}
.obra-addendum.frames{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
.add-frame{background:var(--crema-2);padding:.7rem;box-shadow:0 16px 40px -26px rgba(46,42,34,.35)}
.add-shot{aspect-ratio:4/3;background-size:cover;background-position:center}
.add-cap{display:block;margin-top:.7rem;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta);text-align:center}
.obra-addendum.collage{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.col-tile{height:150px;flex:0 0 auto;background-size:cover;background-position:center;
  box-shadow:0 10px 24px -16px rgba(46,42,34,.35)}

/* ═══ CONTACTO ═══ */
.contacto-b{padding:14vh var(--gut) 10vh;display:flex;justify-content:center}
.card-form{width:min(680px,100%);background:var(--crema-2);padding:clamp(2rem,5vw,4rem);
  box-shadow:0 24px 60px -28px rgba(46,42,34,.4);text-align:center}
.card-form h2{font-size:clamp(2.2rem,4.6vw,3.6rem);font-weight:400;line-height:1.05;
  color:var(--tinta-2)}
.card-form h2 em{font-style:italic;color:var(--rojo)}
.card-form .lead{margin:1.2rem 0 2.8rem;font-size:.95rem}
.card-form form{display:flex;flex-direction:column;gap:1.5rem;text-align:left}
.card-form label{display:flex;flex-direction:column;gap:.45rem}
.card-form label>span,.card-form legend{font-size:.62rem;letter-spacing:.26em;
  text-transform:uppercase;font-weight:500;color:var(--tinta)}
.card-form input,.card-form textarea{background:transparent;border:0;
  border-bottom:1px solid var(--hair);font-family:'Inter',sans-serif;font-size:1rem;
  font-weight:300;color:var(--tinta-2);padding:.8rem .05rem;min-height:44px;border-radius:0;
  outline:none;transition:border-color .3s;resize:vertical}
.card-form input:focus,.card-form textarea:focus{border-bottom-color:var(--rojo)}
.card-form ::placeholder{color:rgba(74,68,56,.4)}
.card-form .two{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.card-form fieldset{border:1px solid var(--hair);padding:1.1rem 1.2rem;display:flex;
  gap:1.5rem;flex-wrap:wrap}
.card-form legend{padding:0 .5rem}
.ck{flex-direction:row!important;align-items:center;gap:.55rem!important;cursor:pointer;
  font-size:.92rem;user-select:none;min-height:44px}
.ck input{position:absolute;opacity:0;pointer-events:none}
.ck i{width:15px;height:15px;border:1px solid var(--hair);flex:none;position:relative;
  transform:rotate(45deg);transition:background .25s,border-color .25s}
.ck input:checked+i{background:var(--rojo);border-color:var(--rojo)}
.ck input:focus-visible+i{outline:2px solid var(--rojo);outline-offset:2px}
.card-form button{align-self:center;margin-top:.6rem;background:var(--rojo);
  color:var(--crema);border:0;cursor:pointer;font-family:'Inter',sans-serif;
  font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;font-weight:500;
  padding:1.1rem 3.4rem;border-radius:0;transition:opacity .3s}
.card-form button:hover{opacity:.85}
.note{font-size:.72rem;color:var(--rojo);text-align:center}
.direct{margin-top:2.4rem;font-size:.85rem;letter-spacing:.04em;display:flex;gap:.8rem;
  justify-content:center;align-items:center;flex-wrap:wrap}
.direct a{display:inline-flex;align-items:center;min-height:44px}
.direct a:hover{color:var(--rojo)}

/* ── FOOTER · cierre de marca ── */
footer{display:flex;flex-direction:column;align-items:center;gap:2.4rem;
  padding:5rem var(--gut) 3.5rem;border-top:1px solid var(--hair)}
.footer-logo{height:clamp(220px,34vw,420px);width:auto;
  filter:invert(.72) sepia(.18) saturate(.6) brightness(.55)}
.footer-meta{display:flex;gap:1.8rem;flex-wrap:wrap;justify-content:center;align-items:center;
  font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  color:var(--tinta)}
.footer-meta a{color:var(--rojo);display:inline-flex;align-items:center;min-height:44px}

/* ═══ RESPONSIVE ═══ */
@media(max-width:700px){
  .brand img{height:144px}
  .obra{padding:7vh var(--gut)}
  .obra.bleed .obra-media{height:70svh}
  .obra-addendum{padding:0 var(--gut) 5vh}
  .obra-addendum.frames{grid-template-columns:1fr}
  .col-tile{height:110px}
  .card-form .two{grid-template-columns:1fr}
  .era-word{font-size:clamp(5rem,30vw,9rem)}
}

/* ═══ REDUCED MOTION ═══ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
  .hero-media{transform:none}
  .thread-line{transform:none}
  .obra-zoom{transform:none}
  .capa-despues{clip-path:none!important}
  .wipeline{display:none}
}