/* ═══════════════════════════════════════════════════════════════
   LA BIBLIA Y NOSOTRAS — sistema de diseño

   ─────────────────────────────────────────────────────────────
   ⚠ GENERADO. NO SE EDITA A MANO.

   Este tramo es copia exacta de `sitio/assets/lbyn.css`, que es
   la fuente de verdad. Son dos dominios distintos y no pueden
   compartir el archivo.

   Para actualizarlo:   npm run sync:tokens
   Para comprobarlo:    npm run check:tokens
   ─────────────────────────────────────────────────────────────
   ═══════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Libre';
  src:url('../fonts/LibreBaskerville-Bold.ttf') format('truetype');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Aloe';
  src:url('../fonts/AloeveraDisplay-Medium.otf') format('opentype');
  font-weight:500; font-style:normal; font-display:swap;
}

/* ── INICIO DEL TRAMO SINCRONIZADO ────────────────────────── */
:root{
  /* ── Paleta oficial ─────────────────────────────────────── */
  --black:#151714;
  --cream:#F4F3EA;
  --pink:#FF88B0;
  --red:#FF0C00;
  --blue-light:#00C5FF;
  --blue-dark:#0011E4;
  --yellow:#FFD609;
  --orange:#FF6700;
  --green-light:#C1FF1A;
  --green-dark:#1F5144;

  /* ── Derivados del collage ──────────────────────────────────
     Tonos que existen dentro de 04.webp y que hacen falta para
     que lo pintado en CSS y lo fotografiado convivan. */
  /* El #FF0C00 de la marca es el rojo de las grandes superficies y de
     los trazos. Sobre crema solo llega a 3.55:1, así que para TEXTO y
     para el fondo de un botón se usa --red-tinta, que es el mismo rojo
     llevado a la sombra y cumple AA (5.74:1). La marca no cambia: se
     lee. */
  --red-hondo:#C00A02;
  --red-tinta:#C00A02;      /* rojo legible: texto pequeño y botones */
  --rosa-tela:#F7B8C8;      /* el rosa acanalado del papel */
  --rosa-pálido:#FDE4EA;    /* el bordado de los corazones */
  --tinta:#5C1030;          /* el vino de la tipografía circular */
  --verde-hondo:#123028;    /* el verde llevado a la sombra */

  /* ── Jerarquía cromática ────────────────────────────────────
       crema    el papel sobre el que se compone
       negro    la voz que se lee
       rojo     el corazón de la marca: la acción principal
       rosa     el gesto: subrayados, sellos, marcas de agua
       verde    el camino de comunidad, y solo eso
       tinta    detalles pequeños, notas al margen
       amarillo, azules, naranja: acentos escasos y deliberados
     ──────────────────────────────────────────────────────── */
  --paper:#FFFDF7;
  --rule:rgba(21,23,20,.20);
  --rule-soft:rgba(21,23,20,.09);
  --muted:rgba(21,23,20,.62);
  --subtle:rgba(21,23,20,.42);
  --on-dark:rgba(244,243,234,.74);

  /* ── Espaciado, base 8 ──────────────────────────────────── */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --seccion:clamp(72px, 9vw, 144px);
  --margen:clamp(20px, 5vw, 72px);

  /* ── Tipografía fluida ──────────────────────────────────────
     El titular de portada tiene techo: por encima de ~4.6rem deja
     de ser una unidad visual y empieza a cortar palabras y a
     comerse la primera pantalla en portátiles de 1366×768. La
     medida editorial manda sobre el tamaño. */
  --portada:clamp(2.3rem, 4.9vw, 5rem);
  --display:clamp(2.05rem, 4.6vw, 3.5rem);
  --titulo:clamp(1.7rem, 3.2vw, 2.5rem);
  --subtitulo:clamp(1.28rem, 2.4vw, 1.8rem);
  --cuerpo:clamp(1rem, 1.05vw, 1.08rem);
  --pequeno:.875rem;
  --etiqueta:.7rem;

  /* ── Medidas de lectura ─────────────────────────────────── */
  --lectura:64ch;
  --lectura-corta:44ch;

  /* ── Formas ─────────────────────────────────────────────── */
  --radio:8px;
  --radio-grande:16px;
  --sombra:0 14px 40px rgba(21,23,20,.07);
  --sombra-alta:0 26px 66px rgba(21,23,20,.14);
  --sombra-papel:0 18px 44px rgba(92,16,48,.16);

  /* ── Movimiento ─────────────────────────────────────────── */
  --ease:cubic-bezier(.16, 1, .3, 1);
  --t-control:200ms;
  --t-editorial:640ms;

  /* ── Alias que usa la aplicación ────────────────────────── */
  --section:var(--seccion);
  --gutter:var(--margen);
  --small:var(--pequeno);
  --eyebrow:var(--etiqueta);
  --body:var(--cuerpo);
  --measure:var(--lectura);
  --measure-lead:52ch;
  --heading-lg:var(--titulo);
  --heading-md:var(--subtitulo);
}

/* ═══ Base ═══════════════════════════════════════════════════ */

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  background:var(--cream);
  color:var(--black);
  font-family:'Aloe', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:var(--cuerpo);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--pink); color:var(--black) }

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

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--blue-dark);
  outline-offset:3px;
  border-radius:3px;
}

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

.saltar{
  position:absolute; left:var(--s4); top:-120px; z-index:2000;
  background:var(--black); color:var(--cream);
  padding:var(--s3) var(--s5); border-radius:2px;
  font-size:var(--pequeno); text-decoration:none;
  transition:top var(--t-control) var(--ease);
}
.saltar:focus{ top:var(--s4) }

.envoltura{
  width:100%; max-width:1240px;
  margin-inline:auto;
  padding-inline:var(--margen);
}
.envoltura--angosta{ max-width:820px }

/* ═══════════════════════════════════════════════════════════════
   EL LENGUAJE DEL COLLAGE

   Cinco recursos que se combinan. Ninguno pide una imagen nueva:
   todo es CSS, así que pesan cero y escalan sin perder nitidez.
   ═══════════════════════════════════════════════════════════════ */

/* 1 · GRANO — el ruido del papel impreso. Va sobre cualquier fondo. */
.grano{ position:relative; isolation:isolate }
.grano::after{
  content:''; position:absolute; inset:0; z-index:1;
  pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px;
}

/* 2 · TELA — el acanalado del papel rosa del collage. */
.tela{
  background-image:repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.16) 0 1px,
    transparent 1px 5px
  );
}

/* 3 · RASGADO — bordes de papel roto.
      Los puntos están escritos a mano para que el corte sea
      irregular de verdad y no un zigzag repetido. */
.rasgado-abajo{
  clip-path:polygon(0 0,100% 0,100% 93%,
    96% 96.5%,92% 94%,88% 97.5%,83% 95%,79% 98%,74% 95.5%,
    69% 98.5%,64% 96%,59% 99%,54% 96.5%,48% 99.5%,43% 97%,
    38% 99.5%,33% 96.5%,27% 99%,22% 96%,17% 98.5%,12% 95.5%,
    7% 98%,3% 95%,0 97.5%);
}
.rasgado-arriba{
  clip-path:polygon(0 4%,4% 1.5%,9% 4.5%,14% 1%,19% 4%,24% 1.5%,
    30% 4.5%,35% 2%,40% 5%,46% 2%,51% 4.5%,56% 1.5%,61% 4%,
    66% 1%,72% 4%,77% 1.5%,82% 4.5%,87% 2%,92% 5%,96% 2.5%,
    100% 5%,100% 100%,0 100%);
}
.rasgado-izq{
  clip-path:polygon(3% 0,100% 0,100% 100%,3% 100%,
    0 96%,2.5% 92%,0 88%,3% 84%,.5% 80%,3% 76%,0 72%,2.5% 68%,
    0 64%,3% 60%,.5% 56%,3% 52%,0 48%,2.5% 44%,0 40%,3% 36%,
    .5% 32%,3% 28%,0 24%,2.5% 20%,0 16%,3% 12%,.5% 8%,3% 4%);
}

/* 4 · SELLO — el isotipo como marca de agua o gesto. */
.sello{
  background-image:url('../img/isotipo-lbyn.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

/* 5 · MARCAS EDITORIALES — subrayado y círculo hechos a mano. */
.subrayado{ position:relative; display:inline-block; white-space:nowrap }
.subrayado::after{
  content:''; position:absolute; left:-1.5%; right:-1.5%; bottom:-.1em;
  height:.13em; border-radius:100px; background:var(--pink);
  transform:scaleX(0); transform-origin:left center;
  transition:transform 900ms var(--ease) 200ms;
}
.visible .subrayado::after,
.subrayado.visible::after{ transform:scaleX(1) }

.circulado{ position:relative; display:inline-block }
.circulado::before{
  content:''; position:absolute; inset:-.34em -.5em -.28em;
  border:2px solid var(--red); border-radius:52% 48% 49% 51% / 58% 42% 58% 42%;
  transform:rotate(-1.6deg) scale(.9); opacity:0;
  transition:opacity 700ms var(--ease) 350ms, transform 700ms var(--ease) 350ms;
  pointer-events:none;
}
.visible .circulado::before,
.circulado.visible::before{ opacity:1; transform:rotate(-1.6deg) scale(1) }

/* Nota al margen: escrita a un lado, como en un cuaderno. */
.nota-margen{
  font-family:'Libre', Georgia, serif; font-style:italic;
  font-size:var(--pequeno); line-height:1.5;
  color:var(--tinta); max-width:19ch;
}

/* Fragmento tipográfico enorme, al fondo. Decorativo, nunca leído. */
.fragmento{
  font-family:'Libre', Georgia, serif; font-weight:700;
  letter-spacing:-.05em; line-height:.8;
  color:var(--pink); opacity:.14;
  user-select:none; pointer-events:none;
  position:absolute; z-index:0;
}

/* Línea de camino: une secciones sin decorar de más. */
.camino-linea{
  width:1px; margin-inline:auto;
  background:linear-gradient(180deg, transparent, var(--rule), transparent);
}

/* ═══ Piezas de texto ════════════════════════════════════════ */

.etiqueta{
  display:inline-flex; align-items:center; gap:.75rem;
  font-size:var(--etiqueta); letter-spacing:.14em;
  text-transform:uppercase; font-weight:bold; color:var(--red-tinta);
}
.etiqueta::before{
  content:''; width:22px; height:1px; background:currentColor; opacity:.55;
}
.etiqueta--sola::before{ display:none }

.editorial{
  font-family:'Libre', Georgia, serif; font-weight:700;
  letter-spacing:-.035em; line-height:1.04;
  text-wrap:balance;
}

/* ═══ Controles ══════════════════════════════════════════════ */

/* Botones editoriales: sólidos, de esquina casi recta, sin resplandor
   y sin elevación. Un botón es una superficie de tinta, no un objeto
   que flota sobre la página. Las acciones secundarias no son botones
   alternativos: son enlaces. */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  min-height:54px;
  padding:.95rem 1.8rem;
  border:1px solid transparent; border-radius:2px;
  font-family:inherit; font-size:.86rem;
  letter-spacing:.06em; text-transform:uppercase; font-weight:bold;
  text-decoration:none; cursor:pointer;
  transition:background var(--t-control) var(--ease),
             color var(--t-control) var(--ease),
             border-color var(--t-control) var(--ease);
}
.boton .flecha{ transition:transform var(--t-control) var(--ease) }
.boton:hover .flecha{ transform:translateX(4px) }

.boton--principal{ background:var(--red-tinta); color:var(--cream) }
.boton--principal:hover{ background:var(--black) }

.boton--segundo{ background:var(--green-dark); color:var(--cream) }
.boton--segundo:hover{ background:var(--verde-hondo) }

.boton--claro{ background:var(--cream); color:var(--black) }
.boton--claro:hover{ background:#fff }

.boton--contorno{ background:transparent; color:var(--black); border-color:var(--rule) }
.boton--contorno:hover{ background:var(--black); color:var(--cream); border-color:var(--black) }

/* La acción principal de una sección: la misma tinta, más presencia. */
.boton--enorme{
  font-size:clamp(.86rem, 1.1vw, .95rem);
  padding:1.05em 2.1em;
  min-height:58px;
}

/* ── FIN DEL TRAMO SINCRONIZADO ───────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   SOLO DE LA APLICACIÓN

   Estas clases se perdieron al regenerar el archivo desde la landing
   y sin ellas todo se estiraba a lo ancho de la pantalla: no había
   contenedor. Van aquí, fuera del tramo sincronizado, para que
   `npm run sync:tokens` no vuelva a borrarlas.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --max:1200px;
  --cols:12;
  --gap:clamp(16px, 1.8vw, 32px);
  --s11:176px;
  --display-xl:clamp(4.25rem, 10.5vw, 10.5rem);
  --display-lg:clamp(3.4rem, 7.4vw, 7.75rem);
  --display-md:clamp(2.7rem, 5.4vw, 5.5rem);
  --body-lg:clamp(1.08rem, 1.4vw, 1.35rem);
  --measure-form:560px;
}

/* ── Contenedor: ancho máximo y márgenes ───────────────────── */
.wrap{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:var(--seccion) }
.grid{
  display:grid;
  grid-template-columns:repeat(var(--cols), minmax(0, 1fr));
  gap:var(--gap);
}

/* ── Piezas de texto ──────────────────────────────────────── */
.eyebrow{
  font-size:var(--eyebrow); letter-spacing:.28em;
  text-transform:uppercase; font-weight:bold; color:var(--red-tinta);
}
.heading-lg{
  font-family:'Libre', Georgia, serif; font-weight:700;
  font-size:var(--heading-lg); line-height:1.08; letter-spacing:-.03em;
  text-wrap:balance;
}
.heading-md{
  font-family:'Libre', Georgia, serif; font-weight:700;
  font-size:var(--heading-md); line-height:1.15; letter-spacing:-.02em;
  text-wrap:balance;
}
.lead{
  font-size:var(--body-lg); line-height:1.7;
  color:var(--muted); max-width:var(--measure-lead);
  text-wrap:pretty;
}
.prose{ max-width:var(--measure); line-height:1.8 }
.prose p + p{ margin-top:var(--s5) }
.prose h2{ font-family:'Libre', Georgia, serif; font-size:var(--heading-md); margin-top:var(--s7) }

/* ── Enlace de salto ──────────────────────────────────────── */
.skip{
  position:absolute; left:var(--s4); top:-120px; z-index:2000;
  background:var(--black); color:var(--cream);
  padding:var(--s3) var(--s5); border-radius:var(--radio);
  font-size:var(--small); text-decoration:none;
  transition:top var(--t-control) var(--ease);
}
.skip:focus{ top:var(--s4) }

/* ── Columna de campos del formulario ─────────────────────── */
.stage__fields{ min-width:0 }

/* Turnstile: el hueco lo reserva el propio widget. */
.cf-turnstile{ margin-top:var(--s5); min-height:65px }

/* ── El círculo dibujado a mano sobre una palabra ──────────────
   Lo coloca el guion del index de la aplicación, midiendo la
   palabra. Es propio de esa página, no del sistema. */
.circle-mark{
  pointer-events:none; z-index:0;
  border:2px solid var(--red);
  border-radius:52% 48% 49% 51% / 58% 42% 58% 42%;
  transform:rotate(-2deg);
  animation:trazo 900ms var(--ease) both;
}
@keyframes trazo{ from{ opacity:0; transform:rotate(-2deg) scale(.86) }
                  to{ opacity:1; transform:rotate(-2deg) scale(1) } }
.em-word{ font-style:normal; position:relative; z-index:1 }