/* ============================================================
   Jinara Crafts. Collage de recortes.
   Papel rasgado, titulares condensados, resaltador amarillo,
   círculos y subrayados a mano, cinta washi y fotos recortadas.
   Los bordes rasgados salen del filtro SVG #rasgado, que vive
   en el HTML.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Caveat:wght@600;700&family=Instrument+Serif:ital@0;1&family=Poppins:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');

:root {
  --rosa: #E01B5D;          /* queda como color de apoyo, casi no se usa */
  --rosa-osc: #A8123F;
  /* La paleta del lado profesional sale de los tres colores que eligió Nath
     (21-sep-2026): vino, azul profundo y bordo. */
  --acento: #440044;        /* vino: los títulos, los botones, el subrayado */
  --acento-osc: #2B002B;
  --azul-hondo: #002244;    /* el azul de ella: tinta, pie y bloques oscuros */
  --bordo: #6E1329;         /* el calor: hover, detalles, la cinta */
  --vino-claro: #EEDCEC;    /* el vino aguado, para fondos suaves */
  --azul-claro: #D8E3EE;
  --violeta: #440044;
  --violeta-osc: #2B002B;
  --amarillo: #FFC93C;
  --tinta: #0E1B2C;        /* negro con azul adentro, del #002244 */
  --tinta-suave: #55505E;
  --papel: #FBF8F3;
  --papel-som: rgba(23, 21, 26, .22);
}

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

body {
  margin: 0;
  color: var(--tinta);
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* papel cuadriculado, que es lo que ella pidió desde el principio */
  background-color: #FAF7F1;
  background-image:
    radial-gradient(62rem 48rem at 80% -8%, rgba(238, 220, 236, .55), transparent 72%);
  background-attachment: fixed;
}

/* grano sobre todo */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: .10;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23r)'/%3E%3C/svg%3E");
}

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

.envoltorio {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding-inline: 22px;
}

.saltar { position: absolute; left: -9999px; }
.saltar:focus {
  left: 12px; top: 12px; z-index: 90;
  background: var(--amarillo);
  border: 2px solid var(--tinta);
  padding: 8px 14px;
}

/* ---------- el recorte de papel ---------- */

.recorte {
  position: relative;
  isolation: isolate;
  padding: 22px 26px;
  transform: rotate(-1.1deg);
}
.recorte::before {
  content: '';
  position: absolute;
  inset: -9px -7px;
  z-index: -1;
  background: var(--papel);
  filter: url(#rasgado) drop-shadow(3px 5px 4px var(--papel-som));
}
.recorte.derecho     { transform: rotate(1.4deg); }
.recorte.plano       { transform: none; }
.recorte.tira        { padding: 10px 20px; }
.recorte.amarillo::before { background: var(--amarillo); }
.recorte.rosa::before     { background: var(--bordo); }
.recorte.rosa            { color: #fff; }

/* ---------- titulares ---------- */

.titular {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -.012em;
  margin: 0;
  font-size: clamp(2.7rem, 9vw, 5.2rem);
}
.titular .rosa   { color: var(--acento); }
.titular .violeta{ color: var(--violeta); }
.titular.chico   { font-size: clamp(2rem, 5.4vw, 2.9rem); }
.titular em, .titular .cursiva { font-style: italic; }

.bajada {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.2rem, 3.2vw, 1.7rem);
  line-height: 1.2;
  margin: 0;
}

.mano {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.28;
  margin: 0;
}
.mano.grande { font-size: 1.9rem; }

.etiqueta {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0;
}

/* ---------- marcas a mano ---------- */

/* resaltador amarillo */
.marcador {
  background: linear-gradient(180deg, transparent 52%, var(--amarillo) 52%, var(--amarillo) 94%, transparent 94%);
  padding: 0 .12em;
}

/* subrayado de pincel rosa */
.pincel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9c40-6 92 4 132-1 22-3 44 1 64-2' stroke='%23440044' stroke-width='6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% .38em;
  padding-bottom: .12em;
}

/* círculo dibujado alrededor de una palabra */
.circulado {
  position: relative;
  display: inline-block;
  padding: 0 .38em;
}
.circulado::after {
  content: '';
  position: absolute;
  inset: -.42em -.12em;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 100' preserveAspectRatio='none'%3E%3Cpath d='M14 52C10 24 66 8 132 11c68 3 110 18 108 42-2 25-58 40-128 38C48 89 8 74 12 44' stroke='%23440044' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}

/* chispas amarillas */
.chispas {
  display: inline-block;
  width: 62px;
  height: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 44'%3E%3Cg stroke='%23FFC93C' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M6 30L26 14'/%3E%3Cpath d='M14 40L38 24'/%3E%3Cpath d='M2 16L18 6'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  vertical-align: middle;
}

/* flecha a mano */
.flecha {
  display: inline-block;
  width: 54px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 22'%3E%3Cpath d='M2 12c14-6 30-8 48-3' stroke='%23440044' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M40 4l10 5-9 6' stroke='%23440044' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  vertical-align: middle;
}

/* cinta washi */
.washi {
  position: absolute;
  width: 96px;
  height: 30px;
  z-index: 2;
  transform: rotate(-6deg);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 5px, rgba(255,255,255,0) 5px 11px),
    var(--acento);
  opacity: .92;
  box-shadow: 1px 2px 3px rgba(23,21,26,.18);
}
.washi.amarilla { background: repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 5px, rgba(255,255,255,0) 5px 11px), var(--amarillo); }
.washi.violeta  { background: repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 5px, rgba(255,255,255,0) 5px 11px), var(--violeta); }
.washi.corta    { width: 62px; height: 24px; }

/* foto recortada con borde blanco de sticker */
.foto {
  position: relative;
  display: block;
  background: linear-gradient(150deg, #D9CBE6, #F0C3D6 55%, #F6E2AE);
  border: 9px solid #fff;
  box-shadow: 4px 6px 8px var(--papel-som);
  transform: rotate(1.8deg);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
}

/* ---------- botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--tinta);
  color: #fff;
  font-family: 'Instrument Serif', Georgia, serif;
  letter-spacing: .01em;
  font-size: 18px;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  box-shadow: 4px 5px 0 var(--acento);
  transform: rotate(-.8deg);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.boton:hover {
  background: var(--acento);
  box-shadow: 4px 5px 0 var(--tinta);
  transform: rotate(0) translate(-1px, -2px);
}
.boton:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--tinta); }
.boton.claro { background: var(--papel); color: var(--tinta); box-shadow: 4px 5px 0 var(--violeta); }
.boton.claro:hover { background: var(--amarillo); box-shadow: 4px 5px 0 var(--tinta); }

/* ---------- secciones y grillas ---------- */

section { margin-block: 72px; }

.rejilla {
  display: grid;
  gap: 30px 26px;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

/* las fichas del blog, recortes con cinta */
.nota {
  position: relative;
  display: block;
  padding: 26px 24px 22px;
  color: inherit;
  text-decoration: none;
  transform: rotate(-.9deg);
  transition: transform .14s ease;
}
.nota::before {
  content: '';
  position: absolute;
  inset: -9px -7px;
  z-index: -1;
  background: var(--papel);
  filter: url(#rasgado) drop-shadow(3px 5px 4px var(--papel-som));
}
.nota { isolation: isolate; }
.nota:nth-child(even) { transform: rotate(1.2deg); }
.nota:hover { transform: rotate(0) translateY(-4px); }
.nota .washi { top: -18px; left: 50%; margin-left: -48px; }
.nota h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.6rem;
  line-height: 1.1;
  margin: 8px 0 10px;
}
.nota p { margin: 0; font-size: 15px; color: var(--tinta-suave); }

/* desparramo: recortes sueltos con rotaciones distintas */
.desparramo {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 26px;
  align-items: flex-start;
}
.desparramo .recorte:nth-child(3n)   { transform: rotate(1.8deg); }
.desparramo .recorte:nth-child(3n+1) { transform: rotate(-2.2deg); }
.desparramo .recorte:nth-child(4n)   { transform: rotate(.9deg); }

/* ---------- lectura del blog ---------- */

.lectura p { max-width: 34rem; font-size: 1.02rem; }
.lectura p + p { margin-top: 1.1em; }

/* ---------- pie ---------- */

footer.pie {
  margin-top: 90px;
  background: var(--azul-hondo);
  color: #fff;
  padding: 30px 0 40px;
}
footer.pie a { color: var(--amarillo); }
/* la etiqueta hereda el gris del papel y sobre el azul del pie no se leía */
footer.pie .etiqueta { color: #B9CADD; }
footer.pie a:hover { color: #fff; }
footer.pie .envoltorio {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: space-between;
}

/* ---------- idioma ---------- */

.idioma { display: inline-flex; }
.idioma button {
  border: 2.5px solid var(--tinta);
  background: var(--papel);
  color: var(--tinta);
  padding: 6px 15px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
}
.idioma button + button { border-left: 0; }
.idioma button:hover { background: var(--amarillo); }
.idioma button[aria-pressed="true"] { background: var(--acento); color: #fff; }

/* la versión del pie, sobre fondo oscuro */
.idioma.oscura button { border-color: #fff; background: transparent; color: #fff; }
.idioma.oscura button:hover { background: rgba(255,255,255,.14); }
.idioma.oscura button[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); }

/* la barra de arriba donde vive el switch */
.barra-idioma {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding-top: 30px;
}
.barra-idioma .idioma { transform: rotate(-1.6deg); box-shadow: 3px 4px 0 var(--violeta); }
.barra-idioma .washi { top: 12px; right: -14px; }

/* ---------- responsive ---------- */

@media (max-width: 560px) {
  .recorte { padding: 18px 20px; }
  section { margin-block: 52px; }
  .washi { width: 74px; }
}

/* ---------- la portada de las dos homes ---------- */

.portada { display: grid; gap: 34px; align-items: start; }
@media (min-width: 900px) {
  .portada { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 54px; }
  /* en el lado creativo la foto manda, así que se lleva más columna */
  .tema-jinara .portada { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 60px; }
}
.portada-texto { min-width: 0; }
.portada-foto { min-width: 0; }

/* ---------- la ficha de la portada profesional ---------- */

.ficha {
  position: relative;
  background: var(--papel);
  border: 2px solid var(--tinta);
  border-radius: 12px;
  box-shadow: 8px 9px 0 var(--acento);
  padding: 24px 26px;
  transform: rotate(-1deg);
}
.ficha ul { margin: 14px 0 0; padding-left: 18px; }
.ficha li { margin: 10px 0; }

/* ---------- guía larga (/como-saber-que-trabajo-quieres/) ---------- */

.guia h2 { margin: 64px 0 0; }
.guia h3 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.22rem; margin: 0 0 6px; }
.guia p code, .guia li code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em; background: var(--amarillo); padding: 1px 6px; border-radius: 4px;
}

.guia-indice {
  background: var(--papel); border: 2px solid var(--tinta); border-radius: 10px;
  box-shadow: 6px 7px 0 var(--violeta); padding: 18px 22px; margin: 36px 0 0; max-width: 32rem;
}
.guia-indice ol { margin: 10px 0 0; padding-left: 20px; }
.guia-indice li { margin: 6px 0; }
.guia-indice a { color: var(--tinta); text-decoration-color: var(--acento); text-underline-offset: 3px; }

.aviso {
  background: var(--amarillo); border: 2px solid var(--tinta); border-radius: 10px;
  box-shadow: 5px 6px 0 var(--tinta); padding: 14px 20px; margin: 30px 0 0; max-width: 34rem;
  transform: rotate(-.5deg);
}

.paso {
  background: var(--papel); border: 2px solid var(--tinta); border-radius: 12px;
  box-shadow: 7px 8px 0 var(--acento); padding: 22px 24px; margin: 26px 0 0; max-width: 40rem;
}
.paso:nth-child(even) { box-shadow: 7px 8px 0 var(--violeta); }
.paso .etiqueta { margin: 0 0 8px; }

.guia-lista { margin: 20px 0 0; padding-left: 20px; max-width: 36rem; }
.guia-lista li { margin: 10px 0; }

.guia-codigo {
  background: var(--tinta); color: #F8F5EF; border-radius: 10px; padding: 16px 20px;
  margin: 18px 0 0; max-width: 34rem; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; line-height: 1.5;
}
.guia-codigo code { color: inherit; background: none; padding: 0; }

.guia-faq { margin-top: 24px; max-width: 36rem; }
.guia-faq details {
  background: var(--papel); border: 2px solid var(--tinta); border-radius: 10px;
  padding: 14px 18px; margin: 12px 0;
}
.guia-faq summary { cursor: pointer; font-weight: 700; }
.guia-faq details[open] summary { color: var(--acento); }

/* la foto de verdad, dentro del marco polaroid */
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   Tema jinara: el clima de la imagen que mandó Nath (21-sep-2026).
   Fondo de agua profunda, violeta, y brillos naranjas como los de
   la pintura. Los recortes de papel siguen claros: collage sobre
   agua oscura. Solo lo usa /crafts/.
   ============================================================ */

.tema-jinara {
  /* La paleta "Main" del kit de Canva de Nath, tal como ella la tiene guardada
     (mandó la captura el 21-sep-2026). No inventar colores acá ni sacarlos del
     logo: esta es la lista completa y es la que manda. */
  --jc-orquidea: #964089;        /* el principal. De fondo, con letra blanca: 6,19:1 */
  --jc-morado: #552666;          /* el oscuro. Sobre papel: 9,28:1 */
  --jc-lavanda: #A69DCC;         /* de fondo, con tinta encima: 5,29:1 */
  --jc-azul: #76B6DB;            /* de fondo, con tinta encima: 6,03:1 */
  --jc-rosa: #CC9DB4;            /* de fondo, con tinta encima: 5,75:1 */
  --jc-lila: #EEE6F1;            /* el papel, y los recortes claros */
  --jc-tinta: #382A40;           /* su negro, que tiene violeta adentro: 10,95:1 */
  --jc-papel: #EDE4F0;
  --papel-som: rgba(56, 42, 64, .20);
  --tinta: var(--jc-tinta);
  --tinta-suave: #6B5E73;
  color: var(--jc-tinta);
  background-color: var(--jc-papel);
  /* El fondo de recortes vive en .fondo::before, que es lo que se mueve al
     hacer scroll. Acá solo queda el color por si el SVG no carga. */
  background-image: none;
}
.tema-jinara::after { opacity: .05; }

/* ---------- el fondo de recortes de papel (21-sep-2026) ----------
   Nath lo pidió así: "y si simulamos un fondo de papel? como si fueran recortes
   de papel unidos en un bucle infinito?". El mosaico lo arma
   herramientas/fondo-papel.py y calza consigo mismo, así que se repite sin
   costura. Se mueve muy despacio al hacer scroll, nada más. */
.tema-jinara .fondo span { display: none; }
.tema-jinara .fondo::before {
  content: '';
  position: absolute;
  inset: -14% -6%;
  background: url('/fondo-papel.svg') repeat;
  background-size: 920px 920px;
  transform: translate3d(0, calc(var(--s) * -0.035px), 0);
  will-change: transform;
}
/* un velo de papel encima, para que el collage no le gane nunca al texto */
.tema-jinara .fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(243, 238, 247, .5);
}
@media (prefers-reduced-motion: reduce) {
  .tema-jinara .fondo::before { transform: none; }
}

.tema-jinara .titular { color: var(--tinta); }
.tema-jinara .titular .rosa { color: var(--jc-morado); }
.tema-jinara .mano { color: var(--jc-morado); }
.tema-jinara .etiqueta { color: var(--tinta-suave); }
.tema-jinara .chispas { filter: hue-rotate(20deg) brightness(1.5); }

/* los recortes siguen siendo papel, pero su sombra y sus acentos cambian */
.tema-jinara .recorte { color: var(--tinta); }
.tema-jinara .recorte.rosa::before { background: var(--jc-orquidea); }
/* .tema-jinara .recorte pisaba el blanco de .recorte.rosa y la letra oscura
   sobre violeta no se leía. Nath lo vio el 21-sep-2026. */
.tema-jinara .recorte.rosa { color: #fff; }
.tema-jinara .boton { background: var(--jc-orquidea); border-color: var(--tinta); color: #fff; box-shadow: 4px 5px 0 var(--jc-lavanda); }
.tema-jinara .boton:hover { background: var(--jc-morado); box-shadow: 4px 5px 0 var(--jc-azul); }
.tema-jinara .boton.claro { background: var(--papel); color: var(--tinta); box-shadow: 4px 5px 0 var(--jc-orquidea); }
.tema-jinara .boton.claro:hover { background: var(--jc-lavanda); box-shadow: 4px 5px 0 var(--tinta); }
.tema-jinara .nota { background: rgba(248, 245, 239, .96); color: var(--tinta); }
.tema-jinara .washi.violeta { background: repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 5px, rgba(255,255,255,0) 5px 11px), var(--jc-orquidea); }
.tema-jinara .washi.amarilla { background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 5px, rgba(255,255,255,0) 5px 11px), var(--jc-rosa); }
.tema-jinara .idioma button[aria-pressed="true"] { background: var(--jc-orquidea); color: #fff; }
.tema-jinara a { color: var(--jc-morado); }
.tema-jinara .recorte a, .tema-jinara .nota a { color: var(--acento-osc); }
.tema-jinara footer.pie { background: #020B1C; }

/* ============================================================
   El fondo que se mueve (parallax), para el lado creativo.
   Capas fijas detrás de todo: dos manchas fluidas, una malla de
   puntos, unas rayas diagonales y unas chispas. Cada una se
   desplaza a distinta velocidad con la variable --s, que escribe
   fondo.js con el scroll. Sin librerías.
   ============================================================ */

.fondo {
  position: fixed;
  inset: -12vh -10vw;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  --s: 0;
}

.fondo span { position: absolute; display: block; will-change: transform; }

.mancha {
  filter: blur(6px);
  opacity: .92;
}
.mancha-1 {
  width: 78vw; height: 78vw; left: -22vw; top: 4vh;
  background: linear-gradient(140deg, #7A3FD1, #C0299B 58%, #5B21B6);
  border-radius: 44% 56% 61% 39% / 47% 38% 62% 53%;
  transform: translate3d(0, calc(var(--s) * -0.09px), 0) rotate(-8deg);
}
.mancha-2 {
  width: 66vw; height: 66vw; right: -20vw; top: 38vh;
  background: linear-gradient(200deg, #1E7BE0, #7A3FD1 55%, #3B0F6E);
  border-radius: 58% 42% 38% 62% / 54% 60% 40% 46%;
  transform: translate3d(0, calc(var(--s) * 0.06px), 0) rotate(6deg);
}
.mancha-3 {
  width: 40vw; height: 40vw; left: 26vw; top: 120vh;
  background: linear-gradient(120deg, #C0299B, #FF8A1E 78%);
  opacity: .55;
  border-radius: 52% 48% 44% 56% / 48% 52% 48% 52%;
  transform: translate3d(0, calc(var(--s) * -0.14px), 0);
}

.puntos {
  width: 26vw; height: 46vh; left: 2vw; top: 52vh;
  background-image: radial-gradient(rgba(255,255,255,.55) 1.6px, transparent 1.6px);
  background-size: 22px 22px;
  opacity: .5;
  transform: translate3d(0, calc(var(--s) * -0.04px), 0);
}

.rayas {
  width: 20vw; height: 30vh; right: 6vw; top: 8vh;
  background-image: repeating-linear-gradient(48deg, rgba(255,255,255,.4) 0 2px, transparent 2px 12px);
  border-radius: 0 0 0 60% ;
  opacity: .45;
  transform: translate3d(0, calc(var(--s) * 0.05px), 0);
}

.chispa {
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 3px rgba(255, 255, 255, .55);
  opacity: .8;
}
.chispa-1 { left: 12vw; top: 16vh; transform: translate3d(0, calc(var(--s) * -0.22px), 0); }
.chispa-2 { left: 74vw; top: 28vh; transform: translate3d(0, calc(var(--s) * -0.16px), 0); }
.chispa-3 { left: 44vw; top: 64vh; transform: translate3d(0, calc(var(--s) * -0.28px), 0); width: 4px; height: 4px; }
.chispa-4 { left: 88vw; top: 74vh; transform: translate3d(0, calc(var(--s) * -0.12px), 0); }

.aro, .triangulo {
  border: 2px solid rgba(255,255,255,.35);
  opacity: .7;
}
.aro { width: 74px; height: 74px; border-radius: 50%; left: 6vw; top: 78vh;
  transform: translate3d(0, calc(var(--s) * -0.07px), 0); }
.triangulo { width: 0; height: 0; border: none; left: 80vw; top: 88vh;
  border-left: 26px solid transparent; border-right: 26px solid transparent;
  border-bottom: 44px solid rgba(255,255,255,.18);
  transform: translate3d(0, calc(var(--s) * 0.08px), 0); }

@media (prefers-reduced-motion: reduce) {
  .fondo span { transform: none !important; }
}

/* ============================================================
   Fondo de acuarela, para el lado profesional.
   Manchas enormes y muy difuminadas en los tonos de la paleta,
   que respiran solas y además se corren un poco con el scroll.
   Mismo mecanismo que el fondo del lado creativo: la variable --s.
   ============================================================ */

.acuarela .aguada {
  border-radius: 50%;
  filter: blur(58px);
  opacity: .85;
  mix-blend-mode: multiply;
}
.aguada-1 {
  width: 62vw; height: 52vh; left: -8vw; top: -6vh;
  background: radial-gradient(circle at 40% 40%, #B888B4, transparent 66%);
  transform: translate3d(0, calc(var(--s) * -0.05px), 0);
  animation: respirar1 34s ease-in-out infinite alternate;
}
.aguada-2 {
  width: 54vw; height: 48vh; right: -10vw; top: 6vh;
  background: radial-gradient(circle at 55% 45%, #8FB0D2, transparent 64%);
  transform: translate3d(0, calc(var(--s) * 0.04px), 0);
  animation: respirar2 42s ease-in-out infinite alternate;
}
.aguada-3 {
  width: 48vw; height: 44vh; left: 18vw; top: 52vh;
  background: radial-gradient(circle at 50% 50%, #CE9AA9, transparent 68%);
  transform: translate3d(0, calc(var(--s) * -0.08px), 0);
  animation: respirar3 38s ease-in-out infinite alternate;
}
.aguada-4 {
  width: 44vw; height: 40vh; right: 4vw; bottom: -8vh;
  background: radial-gradient(circle at 45% 55%, #DCC9A2, transparent 66%);
  transform: translate3d(0, calc(var(--s) * 0.06px), 0);
  animation: respirar1 46s ease-in-out infinite alternate-reverse;
}
.aguada-5 {
  width: 36vw; height: 34vh; left: 44vw; top: 20vh;
  background: radial-gradient(circle at 50% 50%, #A6C3DA, transparent 70%);
  opacity: .6;
  transform: translate3d(0, calc(var(--s) * -0.03px), 0);
  animation: respirar2 52s ease-in-out infinite alternate;
}

/* el papel encima, para que siga siendo papel y no una pantalla */
/* Sin puntitos ni cuadrícula: la acuarela sola (Nath, 21-sep-2026).
   La capa queda por si algún día se quiere volver a poner una textura encima. */
.acuarela .grano-papel { display: none; }

@keyframes respirar1 { from { translate: 0 0; scale: 1; } to { translate: 3vw 2vh; scale: 1.12; } }
@keyframes respirar2 { from { translate: 0 0; scale: 1.06; } to { translate: -3vw 3vh; scale: .96; } }
@keyframes respirar3 { from { translate: 0 0; scale: .98; } to { translate: 2vw -3vh; scale: 1.1; } }

@media (prefers-reduced-motion: reduce) {
  .acuarela .aguada { animation: none !important; }
}

/* ---------- línea de tiempo (/guapetones/) ---------- */

.linea {
  list-style: none;
  margin: 46px 0 0;
  padding: 0 0 0 34px;
  position: relative;
  max-width: 44rem;
}
.linea::before {
  content: '';
  position: absolute;
  left: 9px; top: 6px; bottom: 6px;
  width: 3px;
  background: linear-gradient(var(--acento), var(--bordo) 55%, var(--azul-hondo));
  border-radius: 3px;
}
.hito {
  position: relative;
  background: var(--papel);
  border: 2px solid var(--tinta);
  border-radius: 12px;
  box-shadow: 7px 8px 0 var(--acento);
  padding: 20px 24px;
  margin: 0 0 26px;
  opacity: 0;
  translate: 0 18px;
  transition: opacity .6s ease, translate .6s ease;
}
.hito.se-ve { opacity: 1; translate: 0 0; }
.hito:nth-child(even) { box-shadow: 7px 8px 0 var(--bordo); }
.hito::before {
  content: '';
  position: absolute;
  left: -32px; top: 26px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--papel);
  border: 3px solid var(--acento);
}
.hito:nth-child(even)::before { border-color: var(--bordo); }
.hito .etiqueta { margin: 0 0 6px; color: var(--bordo); }
.hito h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.7rem;
  line-height: 1.12;
  margin: 0 0 8px;
}
.hito p { margin: 0; max-width: 34rem; }

@media (prefers-reduced-motion: reduce) {
  .hito { opacity: 1; translate: none; transition: none; }
}

/* el logo de Jinara Crafts, sobre un papel para que se lea en el agua oscura */
.marca-papel { padding: 14px 20px 10px; }
.marca-papel img { width: 224px; height: auto; margin: 0 auto; }
.marca-papel .etiqueta { display: block; text-align: center; margin-top: 4px; }
.tema-jinara .marca-papel .etiqueta { color: var(--tinta-suave); }

/* El lado creativo se queda con el cartel: Anton en mayúsculas, que es lo que pega
   con el collage. Instrument Serif manda solo en el lado profesional. */
.tema-jinara .titular, .tema-jinara .bajada {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: .004em;
}
.tema-jinara .titular { font-size: clamp(2.4rem, 8.5vw, 4.6rem); }
.tema-jinara .bajada { font-size: clamp(1.05rem, 3vw, 1.5rem); }
.tema-jinara .nota h3, .tema-jinara .boton {
  font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: .03em;
}
.tema-jinara .boton { font-size: 15px; }
.tema-jinara .nota h3 { font-size: 1.35rem; }

/* el hueco donde después va la foto de cada tramo */
.hueco-foto {
  margin: 16px 0 0;
  border: 2px dashed var(--acento);
  border-radius: 10px;
  min-height: 120px;
  display: grid;
  place-items: center;
  padding: 16px;
  opacity: .75;
}
.hueco-foto figcaption { text-align: center; max-width: 24rem; }
.hueco-foto img { border-radius: 8px; }

/* la línea de tiempo, en el lado creativo */
.tema-jinara .linea::before { background: linear-gradient(var(--jc-azul), var(--jc-orquidea) 50%, var(--jc-morado)); }
/* la tarjeta del hito es papel de verdad: sobre el agua oscura, el fondo translúcido
   dejaba la tinta ilegible */
.tema-jinara .hito {
  background: rgba(252, 250, 253, .97);
  color: var(--tinta);
  border-color: #0A0620;
  box-shadow: 7px 8px 0 var(--jc-orquidea);
}
.tema-jinara .hito:nth-child(even) { box-shadow: 7px 8px 0 var(--jc-azul); }
.tema-jinara .hito::before { border-color: var(--jc-orquidea); background: var(--papel); }
.tema-jinara .hito:nth-child(even)::before { border-color: var(--jc-morado); }
.tema-jinara .hito .etiqueta { color: var(--bordo); }
.tema-jinara .hito h3 { font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 1.5rem; margin: 0 0 8px; line-height: 1.04; }
.tema-jinara .hito h3 .rosa { color: var(--acento-osc); }
.tema-jinara .hueco-foto { border-color: var(--jc-orquidea); background: rgba(122, 63, 209, .06); }
.tema-jinara .hueco-foto figcaption { color: var(--tinta-suave); }

/* un hito que ya tiene su foto: nada de borde punteado, la foto manda */
.foto-hito { margin: 18px 0 0; }
.foto-hito img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 10px;
  border: 3px solid var(--papel);
  box-shadow: 5px 6px 0 var(--acento), 0 10px 24px rgba(4, 18, 42, .22);
}
.foto-hito figcaption { margin-top: 12px; max-width: 26rem; }
.tema-jinara .foto-hito img { box-shadow: 5px 6px 0 var(--jc-orquidea), 0 10px 24px rgba(56, 42, 64, .28); }
.tema-jinara .foto-hito figcaption { color: var(--tinta-suave); }

/* dos fotos en el mismo hito, una al lado de la otra */
.foto-hito .par-fotos { display: flex; flex-wrap: wrap; gap: 14px; }
.foto-hito .par-fotos img { flex: 1 1 190px; max-width: 240px; }

/* ---------- los clips en cámara lenta (21-sep-2026) ----------
   Nath pidió "muestras en cámara lenta". Los genera herramientas/clips-web.py
   desde material/originales/, que no está en el repo. Van sin audio y en bucle,
   así que no hay controles: es textura en movimiento, no un video para ver. */
.clips { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.clips figure { margin: 0; }
.clips video {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
  border: 3px solid var(--papel);
  box-shadow: 5px 6px 0 var(--jc-orquidea), 0 10px 24px rgba(56, 42, 64, .22);
  background: var(--jc-papel);
}
.clips figcaption { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) {
  /* si la persona pidió menos movimiento, se queda el póster quieto */
  .clips video { animation: none; }
}
/* los clips que van dentro de un hito comparten el marco de las fotos */
.foto-hito .par-fotos video {
  flex: 1 1 190px;
  max-width: 240px;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  background: var(--jc-lila);
}

/* ---------- migas de pan y fechas (22-sep-2026) ----------
   Salen de herramientas/marcado.py. Nath las pidió después de mirar cómo está
   organizado angelicaladino.com: que se sepa dónde estás parada y que se vea
   que el sitio está vivo. Las fechas las saca de git, no se inventan. */
.migas {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  letter-spacing: .04em;
  margin: 0 0 18px;
  color: var(--tinta-suave);
}
.migas a { color: var(--acento-osc); }
.migas span[aria-current] { color: var(--tinta-suave); }
.tema-jinara .migas a { color: var(--jc-morado); }

.fecha {
  margin: 56px 0 0;
  padding-top: 18px;
  border-top: 2px dotted var(--papel-som);
  font-size: 14px;
  color: var(--tinta-suave);
}
.fecha time { font-variant-numeric: tabular-nums; }