/* soycesargonzalez.com
   Oscura, editorial y con un solo acento. Todo lo que se mueve, se mueve poco.
   Nada de adjetivos con género dirigidos a quien lee. */

:root{
  --negro:#0a0908;
  --panel:#141110;
  --ink:#f6f1ea;
  --muted:#9b8e83;
  --linea:rgba(246,241,234,.12);
  --acento:#d06f3e;
  --acento-ink:#120d09;
  --paso:clamp(5rem,13vh,10rem);
  --env:40rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--negro); color:var(--ink);
  font-family:'Lora',Georgia,'Times New Roman',serif;
  font-size:19px; line-height:1.75; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit}
::selection{background:var(--acento); color:var(--acento-ink)}
:focus-visible{outline:2px solid var(--acento); outline-offset:4px; border-radius:4px}

.env{max-width:var(--env); margin:0 auto; padding:0 22px}
.env-ancho{max-width:64rem; margin:0 auto; padding:0 22px}
section{padding:var(--paso) 0; position:relative}
section + section{border-top:1px solid var(--linea)}

/* ---------- Grano de película ---------- */
.grano{
  position:fixed; inset:-50%; z-index:9999; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grano 700ms steps(3) infinite;
}
@keyframes grano{0%{transform:translate(0,0)}33%{transform:translate(-2%,1%)}66%{transform:translate(1%,-2%)}}

/* ---------- Portada ---------- */
.portada{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 0 clamp(3rem,9vh,5rem); border:0;
}
.retrato{position:absolute; inset:0; overflow:hidden}
.retrato img{
  width:100%; height:100%; object-fit:cover; object-position:50% 28%;
  transform:scale(1.07); animation:entraFoto 2.4s cubic-bezier(.16,1,.3,1) .1s forwards;
}
@keyframes entraFoto{to{transform:scale(1)}}
.portada:after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,var(--negro) 14%,rgba(10,9,8,.92) 34%,rgba(10,9,8,.42) 54%,rgba(10,9,8,.1) 72%,rgba(10,9,8,.5) 100%);
}
.portada-texto{position:relative; z-index:2; max-width:var(--env); margin:0 auto; padding:0 22px; width:100%}
.hora{
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--acento);
  margin:0 0 1.2rem; font-weight:500;
}
h1{
  font-family:'Fraunces',Georgia,serif; font-weight:300;
  font-size:clamp(2.5rem,min(9.5vw,12.5vh),4.8rem); line-height:1.03; letter-spacing:-.025em;
  margin:0 0 1.2rem;
}
h1 span{display:block; overflow:hidden}
h1 span > *,h1 span{will-change:transform}
h1 em{font-style:italic; color:var(--ink)}
.portada h1 span{opacity:0; transform:translateY(105%); animation:sube 1s cubic-bezier(.16,1,.3,1) forwards}
.portada h1 span:nth-child(1){animation-delay:.35s}
.portada h1 span:nth-child(2){animation-delay:.5s}
@keyframes sube{to{opacity:1; transform:none}}
.bajo{font-size:1.05rem; color:var(--muted); margin:0 0 2.2rem; max-width:24rem;
  opacity:0; animation:sube 1s cubic-bezier(.16,1,.3,1) .75s forwards}
.portada .llamada,.portada .pie-llamada{opacity:0; animation:sube 1s cubic-bezier(.16,1,.3,1) .9s forwards}
.baja{
  position:absolute; left:50%; bottom:1.4rem; width:1px; height:2.6rem;
  background:linear-gradient(to bottom,transparent,var(--muted)); opacity:.5;
  animation:baja 2.4s ease-in-out infinite;
}
@keyframes baja{0%,100%{transform:translateY(0);opacity:.15}50%{transform:translateY(7px);opacity:.6}}

/* ---------- Tipos ---------- */
h2{
  font-family:'Fraunces',Georgia,serif; font-weight:300;
  font-size:clamp(1.65rem,5vw,2.4rem); line-height:1.16; letter-spacing:-.02em; margin:0 0 1.5rem;
}
h2.grande{font-size:clamp(2rem,6.6vw,3.4rem); line-height:1.08}
h2 em{font-style:italic}
h3{font-family:'Fraunces',Georgia,serif; font-weight:400; font-size:1.18rem; line-height:1.3; margin:0 0 .6rem; letter-spacing:-.01em}
p{margin:0 0 1.35rem}
.num{
  font-family:'Lora',serif; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--acento); margin:0 0 1.8rem; font-weight:500;
}
.destacado{font-family:'Fraunces',serif; font-style:italic; font-size:1.3rem; color:var(--ink); margin:-.6rem 0 1.6rem}
.nota{color:var(--muted); font-size:.92rem; line-height:1.65}
.declara{text-align:left}

/* ---------- Llamadas ---------- */
.llamada{
  display:inline-flex; align-items:center; justify-content:space-between; gap:1.4rem;
  width:100%; max-width:26rem;
  background:var(--acento); color:var(--acento-ink); text-decoration:none; border:0;
  font-family:'Lora',serif; font-size:1rem; font-weight:500; text-align:left;
  padding:1.15rem 1.5rem; border-radius:3px; min-height:60px; cursor:pointer;
  transition:transform .16s ease, filter .2s ease;
}
.llamada svg{width:22px; height:22px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s cubic-bezier(.16,1,.3,1)}
.llamada:hover svg{transform:translateX(5px)}
.llamada:active{transform:scale(.985)}
.llamada.hueca{background:none; color:var(--ink); box-shadow:inset 0 0 0 1px var(--linea)}
.llamada.hueca:hover{box-shadow:inset 0 0 0 1px var(--acento)}
.llamada[aria-busy="true"]{filter:brightness(.8); pointer-events:none}
.pie-llamada{display:block; margin:.8rem 0 0; font-size:.86rem; color:var(--muted)}

/* ---------- Firma ---------- */
.firma{width:min(64vw,300px); margin:2.6rem 0 0; color:var(--ink); opacity:.9}
.firma svg{width:100%; height:auto; overflow:visible}

/* ---------- ¿Dónde estás tú? ---------- */
.donde{display:grid; gap:12px}
.tarjeta{
  display:block; text-decoration:none; padding:1.6rem 1.5rem 1.4rem;
  background:var(--panel); border-radius:4px; box-shadow:inset 0 0 0 1px var(--linea);
  transition:box-shadow .25s ease, transform .25s cubic-bezier(.16,1,.3,1), background .25s;
}
.tarjeta:hover{box-shadow:inset 0 0 0 1px var(--acento); transform:translateY(-3px)}
.tarjeta p{color:var(--muted); font-size:.95rem; margin:0 0 1rem}
.mas{font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--acento)}
.mas:after{content:" →"}

/* ---------- Cifras ---------- */
.rejilla-cifras{display:grid; gap:2.6rem; margin:0 0 2.6rem}
.rejilla-cifras > div{border-top:1px solid var(--linea); padding-top:1.1rem}
.cifra{
  display:block; font-family:'Fraunces',serif; font-weight:300;
  font-size:clamp(2.6rem,10vw,4.2rem); line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.etiqueta{display:block; color:var(--muted); font-size:.94rem; margin-top:.5rem}
.paises{color:var(--muted); font-size:.95rem; margin:0; max-width:34rem}

/* ---------- El río de voces ---------- */
.voces-seccion{overflow:hidden}
.rio{display:flex; gap:12px; width:max-content; margin:0 0 12px; will-change:transform; animation:rio 78s linear infinite}
.rio.derecha{animation-direction:reverse; animation-duration:96s; margin-bottom:2.4rem}
@keyframes rio{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.voces-seccion:hover .rio{animation-play-state:paused}
.voz{
  flex:0 0 auto; width:min(78vw,22rem); padding:1.2rem 1.3rem;
  background:var(--panel); border-radius:4px; box-shadow:inset 0 0 0 1px var(--linea);
  font-style:italic; color:#e3dad1; font-size:.96rem; line-height:1.6;
}

/* ---------- La pausa ---------- */
.pausa{padding:0; border:0; height:clamp(26rem,78vh,46rem); overflow:hidden; position:relative}
.pausa-foto{position:absolute; inset:-14% 0; will-change:transform}
.pausa-foto picture{display:block; width:100%; height:100%}
.pausa-foto img{width:100%; height:100%; object-fit:cover; object-position:50% 34%}
.pausa:after{content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom,var(--negro),transparent 24%,transparent 76%,var(--negro))}

/* ---------- Formulario ---------- */
.formulario{margin-top:2.2rem}
.campo{display:block; margin:0 0 1rem}
.campo span{display:block; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 .5rem}
.campo input{
  width:100%; font:inherit; font-size:1.02rem; color:var(--ink); background:var(--panel);
  border:0; box-shadow:inset 0 0 0 1px var(--linea); border-radius:3px; padding:1rem 1.1rem; outline:none;
  transition:box-shadow .2s;
}
.campo input:focus{box-shadow:inset 0 0 0 1px var(--acento)}
.campo input[aria-invalid="true"]{box-shadow:inset 0 0 0 1px #c9553f}
.acepta{display:flex; gap:.7rem; align-items:flex-start; font-size:.9rem; color:var(--muted); margin:0 0 1.6rem; line-height:1.55}
.acepta input{width:20px; height:20px; margin:2px 0 0; accent-color:var(--acento); flex:0 0 auto}
.acepta a{color:var(--muted)}
.aviso{margin:1rem 0 0; font-size:.95rem; min-height:1.4em}
.aviso[data-mal]{color:#e08a76}
.aviso[data-bien]{color:var(--ink); font-family:'Fraunces',serif; font-size:1.15rem}

/* ---------- Caja del audiolibro ---------- */
.caja{background:var(--panel); border-radius:6px; padding:clamp(1.8rem,6vw,2.8rem); box-shadow:inset 0 0 0 1px var(--linea)}
.precio{font-family:'Fraunces',serif; font-size:2.5rem; font-weight:300; margin:.4rem 0 1.4rem; letter-spacing:-.02em}

/* ---------- Preguntas ---------- */
.pregunta{border-bottom:1px solid var(--linea); padding:1.1rem 0}
.pregunta summary{cursor:pointer; list-style:none; font-family:'Fraunces',serif; font-size:1.12rem; display:flex; justify-content:space-between; gap:1rem; align-items:center}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary:after{content:"+"; color:var(--acento); font-size:1.3rem; transition:transform .25s}
.pregunta[open] summary:after{transform:rotate(45deg)}
.pregunta p{margin:1rem 0 .4rem; color:var(--muted); font-size:.97rem}

/* ---------- Silencio y cierre ---------- */
.silencio{padding:clamp(7rem,22vh,14rem) 0; text-align:center}
.silencio p{
  font-family:'Fraunces',serif; font-weight:300; font-style:italic;
  font-size:clamp(1.5rem,5.4vw,2.3rem); line-height:1.3; margin:0; letter-spacing:-.015em;
}
.cierre .ultima{margin:2.4rem 0 0; color:var(--muted); font-style:italic; font-size:1rem}

/* ---------- Pie ---------- */
footer{padding:var(--paso) 0 7rem; border-top:1px solid var(--linea); text-align:center}
.redes{display:flex; justify-content:center; gap:1.5rem; margin:0 0 2.2rem}
.redes a{opacity:.55; transition:opacity .2s}
.redes a:hover{opacity:1}
.redes svg{width:22px; height:22px; fill:var(--ink)}
.legal{font-size:.82rem; color:var(--muted); line-height:2.1; margin:0}
.legal a{color:var(--muted); text-decoration:none; border-bottom:1px solid transparent}
.legal a:hover{border-color:var(--muted)}
.sin-galletas{opacity:.55}

/* ---------- La barra fija del móvil ---------- */
.fija{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:50;
  display:none; align-items:center; justify-content:center; text-align:center;
  background:var(--acento); color:var(--acento-ink); text-decoration:none;
  font-size:.98rem; font-weight:500; padding:1.05rem 1rem; border-radius:3px;
  transform:translateY(160%); transition:transform .4s cubic-bezier(.16,1,.3,1);
  box-shadow:0 8px 30px rgba(0,0,0,.5);
}
.fija.dentro{transform:none}
@media (max-width:759px){ .fija{display:flex} footer{padding-bottom:7.5rem} }

/* ---------- El único movimiento al bajar ---------- */
.sube{opacity:0; transform:translateY(26px); transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1)}
.sube.dentro{opacity:1; transform:none}

/* ---------- Teléfono: que el texto no le tape la cara ---------- */
@media (max-width:759px){
  .portada{padding-bottom:2.4rem}
  .baja{display:none}
  .portada h1{font-size:clamp(2.05rem,8.4vw,2.7rem); margin-bottom:.9rem}
  .hora{font-size:.72rem; margin-bottom:.9rem; line-height:1.5}
  .bajo{font-size:1rem; margin-bottom:1.4rem}
  .portada .llamada{padding:1rem 1.2rem; font-size:.96rem; gap:1rem}
  .pie-llamada{margin-top:.7rem; font-size:.84rem}
}
@media (max-width:380px){
  .portada .llamada{font-size:.9rem; gap:.7rem; padding:.95rem 1rem}
  .fija{font-size:.92rem}
}

/* ---------- Pantallas grandes ---------- */
@media (min-width:760px){
  body{font-size:20px}
  .env{padding:0 32px}
  .env-ancho{padding:0 32px}
  .donde{grid-template-columns:repeat(3,1fr); gap:18px}
  .tarjeta{padding:2rem 1.9rem 1.8rem}
  .rejilla-cifras{grid-template-columns:repeat(3,1fr); gap:2rem}
  .voz{width:24rem}
}

/* ---------- Tableta de pie: la foto entera y el texto debajo ---------- */
@media (min-width:760px) and (orientation:portrait){
  .portada{padding-bottom:clamp(3rem,7vh,5rem)}
  .portada-texto{max-width:36rem; margin:0; padding:0 clamp(2rem,5vw,4rem)}
  .portada h1{font-size:clamp(2.6rem,6.2vw,4rem)}
}

/* ---------- Apaisado: la foto a un lado y el texto al otro ---------- */
@media (min-width:760px) and (orientation:landscape){
  .portada{display:grid; grid-template-columns:57fr 43fr; align-items:center; padding:0}
  .retrato{position:relative; inset:auto; grid-column:1; grid-row:1; height:100%}
  .retrato:after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(to left,var(--negro) 1%,rgba(10,9,8,.72) 18%,rgba(10,9,8,.1) 44%,transparent 62%);
  }
  .retrato img{object-position:46% 28%}
  .portada:after{display:none}
  .portada-texto{grid-column:2; grid-row:1; max-width:none; margin:0; padding:0 clamp(2rem,4.5vw,5rem) 0 clamp(1rem,2vw,2.5rem)}
  .portada h1{font-size:clamp(2.3rem,3.5vw,4.1rem)}
  .bajo{max-width:22rem}
  .baja{left:28.5%}
}

/* ---------- Móvil tumbado: poca altura, todo más justo ---------- */
@media (max-height:540px) and (orientation:landscape){
  :root{--paso:4rem}
  .portada{min-height:100svh; padding:2rem 0}
  .portada h1{font-size:min(7.2vh,2.5rem); margin-bottom:.7rem}
  .hora{font-size:.68rem; margin-bottom:.7rem}
  .bajo{font-size:.92rem; margin-bottom:1.1rem; max-width:20rem}
  .portada .llamada{padding:.8rem 1.1rem; font-size:.9rem; min-height:50px; max-width:22rem}
  .pie-llamada{font-size:.78rem; margin-top:.5rem}
  .baja{display:none}
}

/* ---------- Quien prefiere no ver movimiento ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .sube{opacity:1; transform:none}
  .portada h1 span,.bajo,.portada .llamada,.portada .pie-llamada{opacity:1; transform:none}
  .grano{display:none}
}

/* ---------- Si alguien la imprime ---------- */
@media print{
  .grano,.fija,.baja,.pausa,.rio,.retrato{display:none !important}
  body{background:#fff; color:#000; font-size:11pt}
  section{padding:1.2rem 0; border-color:#ccc}
  .llamada{background:none; color:#000; box-shadow:none; padding:0}
  .llamada svg{display:none}
  .cifra,h1,h2{color:#000}
  a{text-decoration:underline}
}