/* =====================================================================
   LA SOCIEDAD DE LOS CURIOSOS — Landing (lista de espera)
   Estética: documento de archivo envejecido, sociedad antigua y secreta.
   Tipografía de máquina de escribir (Special Elite + Courier Prime).
   Paleta heredada del manual de marca.
   ===================================================================== */

:root{
  --crema:    #ECE0C4;
  --crema-2:  #E6D8B8;
  --papel:    #E0D0AC;
  --sepia:    #3B2F21;
  --sepia-2:  #211c17;
  --negro:    #18140f;
  --tinta:    #463724;
  --oro:      #9A7A2E;
  --oroc:     #C6A35A;
  --suave:    #6B5B45;
  --rojo:     #8C3B2E;
  --linea:    #c7b489;

  --type:  "Special Elite", "Courier New", monospace;   /* titulares, sello */
  --mono:  "Courier Prime", "Courier New", Courier, monospace; /* texto */

  --maxw: 1080px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--crema-2);
  color:var(--sepia);
  font-family:var(--mono);
  font-size:17px;
  line-height:1.75;
  /* manchas de humedad y de edad (foxing) repartidas por el papel */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(112,84,30,.12), transparent 36%),
    radial-gradient(circle at 88% 22%, rgba(140,59,46,.09), transparent 38%),
    radial-gradient(circle at 70% 84%, rgba(112,84,30,.12), transparent 40%),
    radial-gradient(circle at 30% 72%, rgba(80,60,30,.08), transparent 42%),
    radial-gradient(circle at 50% 45%, rgba(120,90,40,.05), transparent 55%),
    /* puntitos de foxing */
    radial-gradient(circle at 12% 40%, rgba(120,70,30,.16), transparent 3%),
    radial-gradient(circle at 84% 58%, rgba(120,70,30,.14), transparent 2.5%),
    radial-gradient(circle at 26% 88%, rgba(120,70,30,.13), transparent 2.5%),
    radial-gradient(circle at 62% 16%, rgba(120,70,30,.12), transparent 2%),
    radial-gradient(circle at 92% 90%, rgba(120,70,30,.12), transparent 2.5%),
    radial-gradient(circle at 6% 70%, rgba(120,70,30,.10), transparent 2%);
  background-attachment:fixed;
}

/* viñeta: bordes oscurecidos y manchados, como un papel guardado décadas */
body::before{
  content:""; position:fixed; inset:0; z-index:8; pointer-events:none;
  mix-blend-mode:multiply;
  background:
    radial-gradient(ellipse 130% 120% at 50% 50%, transparent 52%, rgba(60,40,18,.30) 88%, rgba(40,26,10,.55) 100%);
}

/* grano / textura de fibra de papel por encima de todo (sin bloquear clics) */
body::after{
  content:""; position:fixed; inset:0; z-index:9; pointer-events:none;
  opacity:.07; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
a{ color:var(--rojo); }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; position:relative; z-index:2; }

/* ---- Etiquetas tipo sello / mecanografía ---- */
.eyebrow{
  font-family:var(--mono);
  font-size:12.5px; font-weight:700;
  letter-spacing:4px; text-transform:uppercase;
  color:var(--oro); margin:0 0 14px;
}

/* =====================================================================
   BARRA SUPERIOR
   ===================================================================== */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(24,20,15,.97);
  border-bottom:1px solid #3a3024;
  color:var(--crema);
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; height:62px; }
.brand{
  display:flex; align-items:center; gap:11px;
  font-family:var(--type); letter-spacing:1px; color:var(--crema);
  text-decoration:none; font-size:15px;
}
.brand .lupa-mini{ width:26px; height:26px; flex:0 0 auto; }
.topbar nav{ display:flex; align-items:center; gap:24px; }
.topbar nav a{
  color:#cdbf9e; text-decoration:none; font-family:var(--mono);
  font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
}
.topbar nav a:hover{ color:var(--oroc); }
.topbar .btn-min{ border:1px solid var(--oroc); color:var(--oroc); padding:8px 16px; }
.topbar .btn-min:hover{ background:var(--oroc); color:var(--negro); }
@media (max-width:680px){ .topbar nav a:not(.btn-min){ display:none; } }

/* =====================================================================
   HÉROE
   ===================================================================== */
.hero{
  position:relative; text-align:center;
  background:
    radial-gradient(ellipse at center, #2a2419 0%, #18140f 78%);
  color:var(--crema);
  padding:70px 0 92px;
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
.hero .wrap{ position:relative; z-index:2; }

/* Dibujo de los prismáticos montado como una fotografía antigua, pegada con cinta */
.hero-photo{
  position:relative; display:inline-block; margin:0 auto 26px;
  padding:7px; background:#e7dcc0;
  border:1px solid #b29a6b;
  box-shadow:0 14px 34px rgba(0,0,0,.6), 0 2px 0 rgba(0,0,0,.3);
  transform:rotate(-1.6deg);
}
.hero-photo img{
  display:block; width:clamp(230px, 36vw, 300px); height:auto;
  /* envejecido: sepia, contraste suave y viñeta para fundir el papel */
  filter:sepia(.38) saturate(.85) contrast(.96) brightness(.97);
}
.hero-photo .grain-edge{
  position:absolute; inset:7px; pointer-events:none;
  box-shadow:inset 0 0 38px rgba(60,40,18,.45);
}
.hero-photo .tape{
  position:absolute; top:-13px; width:104px; height:27px;
  background:rgba(198,163,90,.34); border:1px solid rgba(154,122,46,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.hero-photo .tape.l{ left:8%; transform:rotate(-7deg); }
.hero-photo .tape.r{ right:8%; transform:rotate(6deg); }

/* ---- Bordes rasgados de papel (entre zonas oscuras y crema) ---- */
.tear{ position:relative; }
.tear::before, .tear::after{
  content:""; position:absolute; left:0; right:0; height:16px; z-index:3;
  background:var(--tear-color, var(--crema-2));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='16' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 16 L0 7 L9 10 L18 4 L27 9 L36 3 L45 8 L54 5 L63 10 L72 4 L81 9 L90 6 L90 16 Z'/%3E%3C/svg%3E") repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='16' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 16 L0 7 L9 10 L18 4 L27 9 L36 3 L45 8 L54 5 L63 10 L72 4 L81 9 L90 6 L90 16 Z'/%3E%3C/svg%3E") repeat-x;
}
.tear.tear-top::before{ top:-15px; }
.tear.tear-bottom::after{ bottom:-15px; transform:scaleY(-1); }

.hero h1{
  font-family:var(--type); font-weight:normal;
  font-size:clamp(30px, 5.2vw, 50px);
  letter-spacing:2px; line-height:1.15;
  margin:0 0 12px; color:var(--crema);
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.hero .kicker{
  font-family:var(--mono); font-size:12.5px; font-weight:700; letter-spacing:5px;
  text-transform:uppercase; color:var(--oroc); margin:0 0 24px;
}
.hero .lede{
  font-family:var(--mono); font-size:clamp(16px, 2.2vw, 20px);
  max-width:600px; margin:0 auto 16px; color:#e7dcc1;
}
.hero .motto{
  font-family:var(--type); font-size:13px; letter-spacing:2px;
  color:#a8966f; margin:0 auto 32px; font-style:normal;
}
.hero .rule{ width:58px; height:2px; background:var(--oro); margin:0 auto 26px; border:0; }

/* =====================================================================
   BOTONES
   ===================================================================== */
.btn{
  display:inline-block; cursor:pointer;
  font-family:var(--mono); font-size:13.5px; font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; text-decoration:none;
  padding:15px 34px; border:1px solid var(--oro);
  transition:.18s ease;
}
.btn-primary{
  background:var(--oro); color:var(--negro); border-color:var(--oro);
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}
.btn-primary:hover{ background:var(--oroc); border-color:var(--oroc); }
.btn-ghost{ background:transparent; color:var(--oroc); }
.btn-ghost:hover{ background:rgba(198,163,90,.12); }

/* =====================================================================
   SECCIONES
   ===================================================================== */
section{ padding:74px 0; position:relative; }
.section-head{ text-align:center; max-width:700px; margin:0 auto 48px; }
.section-head h2{
  font-family:var(--type); font-weight:normal;
  font-size:clamp(25px, 3.6vw, 35px); letter-spacing:1px;
  margin:0 0 14px; color:var(--sepia);
}
.section-head p{ color:var(--tinta); margin:0; }
.section-head h2::after{
  content:"\2766"; display:block; margin-top:12px;
  font-family:var(--type); font-size:17px; color:var(--oro); opacity:.65;
}

.alt{ background:var(--papel); --tear-color:var(--papel); }

/* ---- Manifiesto / qué es ---- */
.manifesto{ max-width:760px; margin:0 auto; text-align:center; }
.manifesto p{ font-size:18px; line-height:1.85; color:var(--tinta); }
.manifesto .grande{
  font-family:var(--type); font-size:clamp(22px,3vw,30px);
  color:var(--sepia); line-height:1.45; letter-spacing:.5px;
}

/* ---- Tarjetas del sobre ---- */
.subhead{
  text-align:center; font-family:var(--mono); font-weight:700;
  font-size:13px; letter-spacing:3px; text-transform:uppercase;
  color:var(--oro); margin:0 0 26px;
}
.grid{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit, minmax(248px, 1fr)); }
.card{
  background:var(--crema);
  border:1px solid var(--linea);
  border-top:3px solid var(--oro);
  padding:26px 24px;
  box-shadow:0 4px 14px rgba(59,47,33,.12);
}
.card.first{ border-top-color:var(--rojo); background:#efe4c8; }
.card .num{ font-family:var(--mono); font-weight:700; font-size:11.5px; letter-spacing:2px; color:var(--oro); }
.card.first .num{ color:var(--rojo); }
.card h3{ font-family:var(--type); font-weight:normal; font-size:19px; margin:9px 0 10px; color:var(--sepia); letter-spacing:.5px; }
.card p{ margin:0; font-size:15px; color:var(--tinta); line-height:1.65; }

/* ---- Expediente 001 (teaser) ---- */
.dossier{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
@media (max-width:780px){ .dossier{ grid-template-columns:1fr; gap:34px; } }
.dossier .stamp{
  font-family:var(--mono); font-weight:700; font-size:11.5px; letter-spacing:3px;
  text-transform:uppercase; color:var(--rojo);
  border:1.5px solid var(--rojo); display:inline-block;
  padding:6px 12px; transform:rotate(-2deg); margin-bottom:22px;
}
.dossier h2{ font-family:var(--type); font-weight:normal; font-size:clamp(26px,4vw,40px); margin:0 0 20px; line-height:1.2; letter-spacing:1px; }
.dossier blockquote{ margin:0 0 22px; padding-left:18px; border-left:3px solid var(--oro); font-family:var(--type); font-size:21px; color:var(--sepia); letter-spacing:.5px; }
.dossier .q{ color:var(--tinta); font-size:18px; line-height:1.8; }
.dossier .q strong{ color:var(--sepia); }

/* tarjeta-archivo lateral */
.filecard{
  background:#f6eccf; border:1px solid var(--linea);
  box-shadow:0 8px 24px rgba(59,47,33,.22);
  padding:28px; transform:rotate(1.3deg);
  font-family:var(--mono); color:var(--tinta); font-size:13.5px;
}
.filecard .row{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px dashed var(--linea); }
.filecard .row:last-child{ border-bottom:0; }
.filecard .k{ color:var(--oro); letter-spacing:1px; font-weight:700; }
.filecard .v{ color:var(--sepia); text-align:right; }
.filecard .title{ font-family:var(--type); font-size:16px; color:var(--sepia); letter-spacing:2px; margin-bottom:14px; text-align:center; }
/* texto "censurado" / expurgado */
.redacted{ background:var(--sepia); color:var(--sepia); border-radius:1px; padding:0 8px; user-select:none; }

/* ---- Para quién ---- */
.who{ display:flex; flex-wrap:wrap; gap:13px; justify-content:center; max-width:760px; margin:0 auto; }
.chip{ font-family:var(--mono); font-size:13px; letter-spacing:.5px; background:var(--crema); border:1px solid var(--linea); padding:10px 18px; border-radius:999px; color:var(--tinta); }

/* =====================================================================
   LISTA DE ESPERA
   ===================================================================== */
.waitlist{ background:radial-gradient(ellipse at center, #2a2419 0%, #18140f 80%); color:var(--crema); border-top:3px double var(--oro); }
.waitlist .section-head h2{ color:var(--crema); }
.waitlist .section-head p{ color:#d6c9aa; }

.form{ max-width:520px; margin:0 auto; text-align:center; }
.form .fields{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.form input[type=email], .form input[type=text]{
  flex:1 1 280px; min-width:0; font-family:var(--mono); font-size:16px;
  padding:15px 16px; border:1px solid #5b4d39; background:#14110d; color:var(--crema);
}
.form input::placeholder{ color:#9a8d72; }
.form input:focus{ outline:none; border-color:var(--oroc); }
.form .consent{ font-family:var(--mono); font-size:11.5px; color:#a89a7c; margin-top:18px; line-height:1.6; }
.form .consent a{ color:var(--oroc); }
.form-msg{ margin-top:18px; min-height:24px; font-family:var(--mono); font-size:14px; letter-spacing:.5px; }
.form-msg.ok{ color:var(--oroc); }
.form-msg.err{ color:#e08b7d; }

.thanks{ display:none; }
.thanks.show{ display:block; }
.form.hide{ display:none; }

/* =====================================================================
   PIE
   ===================================================================== */
footer{ background:var(--negro); color:#bdae8e; text-align:center; padding:46px 0; font-size:13.5px; }
footer .lupa-mini{ width:30px; height:30px; margin:0 auto 14px; }
footer .marca{ font-family:var(--type); font-size:17px; color:var(--crema); letter-spacing:1.5px; }
footer .sub{ font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:2px; color:var(--oro); margin-top:8px; }
footer .motto{ font-family:var(--type); font-size:12.5px; letter-spacing:1.5px; color:#8a7a5c; margin-top:14px; }
footer .social{ margin-top:18px; }
footer .social a{ color:var(--oroc); text-decoration:none; font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:1px; }
footer .legal{ margin-top:22px; font-family:var(--mono); font-size:11px; color:#7a6f57; letter-spacing:.5px; }

/* =====================================================================
   PÁGINAS DE TEXTO (aviso legal, privacidad)
   ===================================================================== */
.doc{ max-width:760px; margin:0 auto; padding:64px 0 20px; }
.doc h1{ font-family:var(--type); font-weight:normal; font-size:clamp(26px,4.5vw,38px); color:var(--sepia); letter-spacing:1px; margin:0 0 6px; }
.doc .updated{ font-family:var(--mono); font-size:12px; color:var(--suave); letter-spacing:1px; margin:0 0 34px; }
.doc h2{ font-family:var(--type); font-weight:normal; font-size:21px; color:var(--sepia); letter-spacing:.5px; margin:36px 0 10px; }
.doc p, .doc li{ color:var(--tinta); font-size:16px; line-height:1.75; }
.doc ul{ padding-left:22px; }
.doc li{ margin-bottom:6px; }
.doc a{ color:var(--rojo); }
.doc .back{ display:inline-block; margin-top:36px; font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
/* dato que debe rellenar la fundadora */
.doc .ph{ background:#f6e2b0; border-bottom:1px dashed var(--oro); padding:0 4px; color:var(--sepia); font-style:normal; }

/* casilla de consentimiento del formulario */
.consent-check{ display:flex; gap:9px; align-items:flex-start; justify-content:center;
  max-width:430px; margin:16px auto 0; text-align:left; }
.consent-check input{ margin-top:3px; flex:0 0 auto; width:16px; height:16px; accent-color:var(--oro); }
.consent-check label{ font-family:var(--mono); font-size:12px; color:#a89a7c; line-height:1.55; }
.consent-check a{ color:var(--oroc); }

/* revelado al hacer scroll */
.reveal{ opacity:0; transform:translateY(16px); transition:.7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* =====================================================================
   MOVIMIENTO Y VIDA
   ===================================================================== */
@keyframes fadeUp{ from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:none;} }
@keyframes photoIn{ from{opacity:0; transform:rotate(-1.6deg) scale(.9);} to{opacity:1; transform:rotate(-1.6deg) scale(1);} }
@keyframes blink{ 50%{opacity:0;} }
@keyframes shimmer{ to{ left:135%; } }

.hero .hero-photo{ animation:photoIn 1s cubic-bezier(.2,.7,.3,1) both; }
.hero .kicker{ animation:fadeUp .7s ease both .25s; }
.hero h1{ animation:fadeUp .7s ease both .4s; }
.hero .rule{ animation:fadeUp .7s ease both .55s; }
.hero .lede{ animation:fadeUp .7s ease both .65s; }
.hero .motto{ animation:fadeUp .7s ease both .8s; }
.hero .btn-primary{ animation:fadeUp .7s ease both .95s; }

/* cursor del efecto máquina de escribir */
#tw.typing::after{ content:"▌"; color:var(--oroc); margin-left:1px; animation:blink 1s steps(1) infinite; }

/* brillo al pasar el ratón por el botón principal */
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::after{ content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform:skewX(-18deg); }
.btn-primary:hover::after{ animation:shimmer .8s ease; }

/* tarjetas que se elevan */
.card{ transition:transform .2s ease, box-shadow .2s ease; }
.card:hover{ transform:translateY(-5px); box-shadow:0 14px 28px rgba(59,47,33,.24); }

/* =====================================================================
   FOTOS ENMARCADAS (galería, El Archivista, Expediente)
   ===================================================================== */
.photo{ position:relative; display:inline-block; padding:8px; background:#e7dcc0;
  border:1px solid #b29a6b; box-shadow:0 12px 30px rgba(0,0,0,.4); max-width:100%; }
.photo img{ display:block; width:100%; height:auto; filter:sepia(.12) contrast(.99); }
.photo.rot1{ transform:rotate(-1.4deg); } .photo.rot2{ transform:rotate(1.3deg); }
.photo .tape{ position:absolute; top:-12px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:92px; height:24px; background:rgba(198,163,90,.34); border:1px solid rgba(154,122,46,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.25); }
.photo:hover{ filter:none; }

/* dos columnas (texto + foto) */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
@media (max-width:780px){ .split{ grid-template-columns:1fr; gap:30px; } }
.split h2{ font-family:var(--type); font-weight:normal; font-size:clamp(26px,4vw,38px);
  letter-spacing:1px; margin:0 0 18px; color:var(--sepia); }
.split p{ color:var(--tinta); }
.split blockquote{ margin:0 0 18px; padding-left:18px; border-left:3px solid var(--oro);
  font-family:var(--type); font-size:19px; color:var(--sepia); line-height:1.5; }

/* galería */
.gallery{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:34px; align-items:start; justify-items:center; }

/* =====================================================================
   LÍNEA DE TIEMPO (cómo funciona)
   ===================================================================== */
.timeline{ list-style:none; padding:0; max-width:660px; margin:0 auto; position:relative; }
.timeline::before{ content:""; position:absolute; left:22px; top:8px; bottom:30px; width:2px; background:var(--linea); }
.timeline li{ position:relative; display:flex; gap:22px; padding:0 0 28px; }
.timeline .step{ flex:0 0 auto; width:46px; height:46px; border-radius:50%; background:var(--sepia2);
  color:var(--oroc); font-family:var(--type); font-size:21px; display:flex; align-items:center;
  justify-content:center; border:2px solid var(--oro); z-index:1; box-shadow:0 4px 10px rgba(0,0,0,.2); }
.timeline h3{ font-family:var(--type); font-weight:normal; font-size:20px; margin:9px 0 6px; color:var(--sepia); letter-spacing:.5px; }
.timeline p{ margin:0; color:var(--tinta); font-size:15.5px; line-height:1.6; }

/* =====================================================================
   PREGUNTAS FRECUENTES (FAQ)
   ===================================================================== */
.faq{ max-width:720px; margin:0 auto; }
.faq details{ border:1px solid var(--linea); background:var(--crema); margin-bottom:12px; padding:0 18px; }
.faq summary{ cursor:pointer; list-style:none; padding:16px 0; font-family:var(--type); font-size:17.5px;
  color:var(--sepia); display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--oro); font-size:22px; font-family:var(--mono); flex:0 0 auto; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin:0 0 16px; color:var(--tinta); font-size:15.5px; line-height:1.7; }

/* =====================================================================
   INTERRUPTOR DE SONIDO
   ===================================================================== */
.sound-toggle{
  position:fixed; right:16px; bottom:16px; z-index:60;
  display:flex; align-items:center; gap:8px;
  background:rgba(24,20,15,.92); color:var(--oroc);
  border:1px solid var(--oro); border-radius:999px;
  padding:9px 15px; cursor:pointer;
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  box-shadow:0 6px 18px rgba(0,0,0,.4); transition:.18s ease;
}
.sound-toggle:hover{ background:var(--oro); color:var(--negro); }
.sound-toggle svg{ flex:0 0 auto; }
.sound-toggle.on{ background:var(--oro); color:var(--negro); }
@media (max-width:480px){ .sound-toggle .lbl{ display:none; } .sound-toggle{ padding:11px; } }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero .hero-photo,.hero .kicker,.hero h1,.hero .rule,.hero .lede,.hero .motto,.hero .btn-primary{ animation:none; }
  .btn-primary:hover::after{ animation:none; }
  html{ scroll-behavior:auto; }
}