/* ============================================================
   LV SADE - lvsade.com
   Concepto: "Silueta / Sin rostro". La ausencia como marca.
   Sin dependencias externas salvo Google Fonts.
   ============================================================ */

:root{
  --negro:      #070708;
  --negro-2:    #0b0b0e;
  --humo:       #16161c;
  --hueso:      #e8e4dc;
  --gris:       #8a8790;
  --gris-tenue: #55525c;
  --sangre:     #9b1c22;
  --sangre-viva:#c02026;
  --borde:      #23232b;

  --display: "Oswald", "Segoe UI", sans-serif;
  --serif:   "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ui:      "Segoe UI", system-ui, -apple-system, sans-serif;

  --lento: cubic-bezier(.16,.68,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--negro);
  color:var(--hueso);
  font-family:var(--serif);
  font-size:clamp(1rem,.95rem + .35vw,1.2rem);
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

.sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

.saltar{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--sangre); color:#fff; padding:.7rem 1.2rem;
  font-family:var(--ui); font-size:.85rem;
}
.saltar:focus{ left:0; }

:focus-visible{ outline:2px solid var(--sangre-viva); outline-offset:3px; }

/* -- Grano de pelicula ------------------------------------ */
.grano{
  position:fixed; inset:-150%;
  z-index:60; pointer-events:none;
  opacity:.05;
  background-image:url("/img/grano.svg");
  animation:granear .6s steps(3) infinite;
}
@keyframes granear{
  0%  { transform:translate(0,0); }
  33% { transform:translate(-3%,2%); }
  66% { transform:translate(2%,-3%); }
  100%{ transform:translate(0,0); }
}

/* -- Navegacion ------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:1.1rem clamp(1.1rem,4vw,3.5rem);
  padding-top:max(1.1rem,env(safe-area-inset-top));
  font-family:var(--display);
  transition:background .5s var(--lento), border-color .5s var(--lento), padding .5s var(--lento);
  border-bottom:1px solid transparent;
}
.nav.is-fija{
  background:rgba(7,7,8,.88);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--borde);
  padding-block:.75rem;
}
.nav__marca{
  color:var(--hueso); text-decoration:none;
  font-weight:400; letter-spacing:.42em; font-size:.82rem;
  opacity:0; transform:translateY(-6px);
  transition:opacity .6s var(--lento), transform .6s var(--lento), color .3s;
}
.nav.is-fija .nav__marca{ opacity:1; transform:none; }
.nav__marca:hover{ color:#fff; }

.nav__links{ display:flex; gap:clamp(1rem,2.5vw,2.4rem); }
.nav__links a{
  color:var(--gris); text-decoration:none;
  font-weight:200; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.4rem 0; position:relative; transition:color .35s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--sangre-viva); transition:width .45s var(--lento);
}
.nav__links a:hover{ color:var(--hueso); }
.nav__links a:hover::after{ width:100%; }

/* -- Hero ------------------------------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
}

/* humo: manchas de luz que respiran muy despacio */
.hero__humo{
  position:absolute; inset:-20%;
  z-index:-2;
  background:
    radial-gradient(38% 45% at 32% 38%, rgba(70,70,90,.30), transparent 70%),
    radial-gradient(45% 40% at 72% 62%, rgba(120,30,35,.16), transparent 72%),
    radial-gradient(60% 60% at 50% 100%, rgba(0,0,0,.9), transparent 70%);
  filter:blur(24px);
  animation:respirar 26s ease-in-out infinite alternate;
}
@keyframes respirar{
  from{ transform:scale(1) translate3d(0,0,0); opacity:.85; }
  to  { transform:scale(1.14) translate3d(2%,-2%,0); opacity:1; }
}

.silueta{
  position:absolute; z-index:-1;
  bottom:0; left:50%; transform:translateX(-50%);
  margin:0;
  width:min(74vw,540px);
  opacity:0;
  animation:aparecerSilueta 3.4s var(--lento) .3s forwards;
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 97%);
          mask-image:linear-gradient(to bottom,#000 62%,transparent 97%);
}
.silueta svg{ width:100%; height:auto; display:block; }
@keyframes aparecerSilueta{
  from{ opacity:0; transform:translateX(-50%) scale(1.06); filter:blur(14px); }
  to  { opacity:1; transform:translateX(-50%) scale(1);    filter:blur(0); }
}

.hero__texto{
  position:relative; z-index:2;
  text-align:center;
  padding:6rem clamp(1.2rem,5vw,2rem) 8rem;
  max-width:62ch;
}

.nombre{
  margin:0 0 clamp(1.6rem,4vw,2.6rem);
  font-family:var(--display);
  font-weight:200;
  font-size:clamp(3rem,13vw,8.5rem);
  line-height:.95;
  letter-spacing:.06em;
  display:flex; justify-content:center; align-items:baseline; flex-wrap:nowrap;
}
.nombre .l{
  display:inline-block;
  opacity:0; transform:translateY(.35em);
  animation:letraEntra 1.5s var(--lento) forwards;
}
.nombre .l:nth-child(1){ animation-delay:.15s }
.nombre .l:nth-child(2){ animation-delay:.28s }
.nombre .l:nth-child(4){ animation-delay:.46s }
.nombre .l:nth-child(5){ animation-delay:.58s }
.nombre .l:nth-child(6){ animation-delay:.70s }
.nombre .l:nth-child(7){ animation-delay:.82s }
.nombre .sep{ display:inline-block; width:.42em; }
@keyframes letraEntra{
  from{ opacity:0; transform:translateY(.35em); filter:blur(9px); }
  to  { opacity:1; transform:none;              filter:blur(0); }
}

.frase{
  margin:0 auto;
  max-width:34ch;
  font-size:clamp(1.15rem,1rem + 1.1vw,1.7rem);
  font-weight:300;
  line-height:1.85;
  color:var(--gris);
}
.frase span{
  display:block;
  opacity:0; transform:translateY(10px);
  animation:subir 1.4s var(--lento) forwards;
}
.frase span:nth-child(1){ animation-delay:1.15s }
.frase span:nth-child(2){ animation-delay:1.40s }
.frase span:nth-child(3){ animation-delay:1.65s }
.frase span:nth-child(4){ animation-delay:2.05s }
.frase--acento{
  color:var(--hueso);
  font-style:italic;
  margin-top:.5em;
  text-shadow:0 0 28px rgba(155,28,34,.45);
}
@keyframes subir{ to{ opacity:1; transform:none; } }

.cta{
  display:inline-flex; flex-direction:column; align-items:center; gap:.5rem;
  margin-top:clamp(2.4rem,6vw,3.6rem);
  text-decoration:none;
  opacity:0; animation:subir 1.4s var(--lento) 2.5s forwards;
}
.cta span{
  font-family:var(--display); font-weight:300;
  font-size:.85rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--hueso);
  padding:.85rem 2.4rem;
  border:1px solid var(--borde);
  transition:border-color .4s var(--lento), background .4s var(--lento), letter-spacing .4s var(--lento);
}
.cta:hover span{ border-color:var(--sangre); background:rgba(155,28,34,.1); letter-spacing:.42em; }
.cta em{
  font-family:var(--ui); font-style:normal;
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gris-tenue);
}

.hero__scroll{
  position:absolute; bottom:1.8rem; left:50%; transform:translateX(-50%);
  width:1px; height:56px; overflow:hidden;
  background:var(--borde);
  opacity:0; animation:subir 1.2s var(--lento) 3s forwards;
}
.hero__scroll span{
  position:absolute; inset:0;
  background:linear-gradient(to bottom,transparent,var(--sangre-viva));
  animation:caer 2.6s ease-in-out infinite;
}
@keyframes caer{
  0%  { transform:translateY(-100%); }
  60% { transform:translateY(100%); }
  100%{ transform:translateY(100%); }
}

/* -- Secciones -------------------------------------------- */
.seccion{
  padding:clamp(5rem,14vh,9rem) clamp(1.2rem,6vw,4rem);
  max-width:1180px;
  margin-inline:auto;
}
.seccion--quien{
  border-top:1px solid var(--borde);
  background:linear-gradient(180deg,var(--negro),var(--negro-2) 60%,var(--negro));
  max-width:none;
}

.rotulo{
  font-family:var(--ui);
  font-size:.68rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gris-tenue);
  margin:0 0 2.2rem;
}
.titulo{
  font-family:var(--display); font-weight:200;
  font-size:clamp(2rem,1.4rem + 3vw,3.6rem);
  letter-spacing:.04em;
  margin:0 0 clamp(2rem,5vw,3.2rem);
}

/* aparicion al hacer scroll */
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity 1.1s var(--lento), transform 1.1s var(--lento);
}
.reveal.visible{ opacity:1; transform:none; }

/* -- Quien no es ------------------------------------------ */
.quien{ max-width:56ch; margin-inline:auto; text-align:center; }
.quien__linea{
  font-family:var(--display); font-weight:200;
  font-size:clamp(1.4rem,1rem + 2.2vw,2.6rem);
  line-height:1.35; color:var(--gris);
  margin:0 0 .6em;
}
.quien__linea:nth-of-type(2){ transition-delay:.12s }
.quien__linea:nth-of-type(3){ transition-delay:.24s }
.quien__cierre{
  margin:2.6rem 0 0;
  font-size:clamp(1.05rem,1rem + .5vw,1.35rem);
  color:var(--hueso);
  transition-delay:.36s;
}
.quien__firma{
  margin-top:2rem; font-style:italic; color:var(--sangre-viva);
  font-size:1.05rem; transition-delay:.48s;
}

/* -- Libros ----------------------------------------------- */
.libros{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
  gap:clamp(1.6rem,4vw,3rem);
}

.libro{
  position:relative;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--humo),var(--negro-2));
  border:1px solid var(--borde);
  padding:1rem 1rem 1.6rem;
  overflow:hidden;
  transition:border-color .5s var(--lento), transform .5s var(--lento);
}
.libro:hover{ border-color:#3a3a46; transform:translateY(-5px); }
.libro--proximo{ border-style:dashed; opacity:.72; }

.libro__portada{
  position:relative;
  aspect-ratio:2/3;
  background:#101015;
  border:1px solid #1d1d25;
  overflow:hidden;
  display:grid; place-items:center;
}
.libro__portada img{ width:100%; height:100%; object-fit:cover; }
.libro__falta{
  font-family:var(--display); font-weight:200;
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gris-tenue); text-align:center; padding:1rem;
}
.libro__cinta{
  position:absolute; top:1.1rem; left:-2.6rem;
  transform:rotate(-45deg);
  background:var(--sangre); color:#fff;
  font-family:var(--ui); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.28rem 2.8rem;
  z-index:3;
}

.libro__titulo{
  font-family:var(--display); font-weight:300;
  font-size:1.35rem; letter-spacing:.05em; text-transform:uppercase;
  margin:1.3rem 0 .3rem;
}
.libro__meta{
  font-family:var(--ui); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gris-tenue); margin:0 0 .9rem;
}
.libro__sinopsis{
  font-size:.98rem; color:var(--gris); margin:0 0 1.2rem; flex:1;
}
.libro__avisos{
  display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1.3rem; padding:0; list-style:none;
}
.libro__avisos li{
  font-family:var(--ui); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:#b8848a;
  border:1px solid rgba(155,28,34,.45);
  padding:.22rem .6rem;
}
.libro__cta{
  display:block; text-align:center; text-decoration:none;
  font-family:var(--display); font-weight:300;
  font-size:.76rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--hueso);
  background:transparent; border:1px solid var(--sangre);
  padding:.8rem 1rem; min-height:48px;
  transition:background .4s var(--lento), color .4s var(--lento);
}
.libro__cta:hover{ background:var(--sangre); color:#fff; }
.libro__cta--muerto{
  border-color:var(--borde); color:var(--gris-tenue); pointer-events:none;
}
.libros__nota{
  margin-top:2.6rem; font-size:.9rem; color:var(--gris-tenue); font-style:italic;
}

/* -- La carta --------------------------------------------- */
.seccion--carta{
  border-top:1px solid var(--borde);
  text-align:center;
  max-width:720px;
}
.carta__texto{ color:var(--gris); margin:0 auto 2.4rem; }
.carta__form{
  display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center;
}
.carta__form input{
  flex:1 1 260px;
  background:var(--negro-2);
  border:1px solid var(--borde);
  color:var(--hueso);
  font-family:var(--ui); font-size:16px;   /* 16px: evita el zoom de iOS al enfocar */
  padding:.95rem 1.1rem;
  min-height:48px;
  transition:border-color .4s;
}
.carta__form input::placeholder{ color:var(--gris-tenue); }
.carta__form input:focus{ border-color:var(--sangre); outline:none; }
.carta__form button{
  font-family:var(--display); font-weight:300;
  font-size:.78rem; letter-spacing:.26em; text-transform:uppercase;
  color:#fff; background:var(--sangre);
  border:1px solid var(--sangre);
  padding:.95rem 2rem; min-height:48px;
  cursor:pointer;
  transition:background .4s var(--lento);
}
.carta__form button:hover{ background:var(--sangre-viva); }
.carta__aviso{
  margin-top:1.1rem;
  font-family:var(--ui); font-size:.7rem; letter-spacing:.1em;
  color:var(--gris-tenue);
}

/* -- Pie -------------------------------------------------- */
.pie{
  border-top:1px solid var(--borde);
  padding:3.4rem clamp(1.2rem,6vw,4rem);
  padding-bottom:max(3.4rem,env(safe-area-inset-bottom));
  text-align:center;
  background:#050506;
}
.pie__marca{
  font-family:var(--display); font-weight:200;
  letter-spacing:.5em; font-size:.85rem; color:var(--gris);
  margin:0 0 1.4rem;
}
.pie__links{ display:flex; gap:1.6rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.6rem; }
.pie__links a{
  color:var(--gris); text-decoration:none;
  font-family:var(--ui); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.4rem 0;
  transition:color .35s;
}
.pie__links a:hover{ color:var(--sangre-viva); }
.pie__legal{
  margin:0; font-family:var(--ui); font-size:.66rem; letter-spacing:.12em;
  color:#3a3842;
}

/* -- Responsive ------------------------------------------- */
@media (max-width:640px){
  .nav__links{ gap:1rem; }
  .nav__links a{ font-size:.68rem; letter-spacing:.14em; }
  .silueta{ width:88vw; }
  .hero__texto{ padding-bottom:6rem; }
}

/* -- Accesibilidad de movimiento -------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .silueta,.nombre .l,.frase span,.cta,.hero__scroll{ opacity:1; transform:none; }
  .reveal{ opacity:1; transform:none; }
  .grano{ display:none; }
}