/* ══════════════════════════════════════════════════════════
     ANTEPRIMA Journal — la sala de lectura.
     Registro MARFIL: es la única sala en papel. Las salas de venta
     son negras; ésta cambia de registro a propósito, como ya lo
     anuncia la plancha marfil del Journal en el Home.
     Motion CONTENIDO (revelado suave, grano) — el scrub de alta
     presencia está reservado a las páginas de producto.
     Dorado, 3 roles: (1) el filete de sección, (2) el numeral de
     la pieza, (3) el acento del titular inaugural. Nada más.
     ══════════════════════════════════════════════════════════ */
  :root{
    --negro:#0A0A0A; --marfil:#F5F0E8; --dorado:#C9A84C;
    /* Bronce de PAPEL: el #8A7B5C de la casa está calibrado sobre negro y
       sobre marfil cae a 3.65 (bajo AA). Éste conserva el matiz y da 5.04. */
    --bronce:#726549;
    --tinta:#14120F;              /* texto sobre papel */
    --tinta-2:rgba(20,18,15,0.62);
    --linea:rgba(20,18,15,0.14);
    --papel:#F5F0E8; --papel-2:#EDE7DC;
    --serif:"Cormorant Garamond",Georgia,"Iowan Old Style","Palatino Linotype",serif;
    --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--papel); color:var(--tinta);
    font-family:Inter,"Helvetica Neue",Arial,sans-serif;
    line-height:1.7; -webkit-font-smoothing:antialiased;
    overflow-x:hidden; position:relative;
  }
  /* Materialidad: grano de papel, no vector plano */
  body::after{
    content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
    opacity:0.045; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .wrap{max-width:1060px;margin:0 auto;padding:0 32px;}
  a{color:inherit;}
  h1,h2,h3,h4{font-weight:400;line-height:1.12;letter-spacing:0.005em;}

  /* ── Cabecera ── */
  nav{border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:40;
    background:rgba(245,240,232,0.92);backdrop-filter:saturate(140%) blur(8px);}
  nav .wrap{display:flex;justify-content:space-between;align-items:center;padding-block:1.25rem;gap:1rem;}
  .wordmark{font-size:0.74rem;letter-spacing:0.42em;text-transform:uppercase;font-weight:300;text-decoration:none;white-space:nowrap;}
  .wordmark b{font-weight:500;}
  .navlinks{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:flex-end;}
  .navlinks a{font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;text-decoration:none;opacity:0.55;transition:opacity 0.25s;}
  .navlinks a:hover{opacity:1;}
  @media(max-width:680px){
    nav .wrap{flex-direction:column;gap:0.6rem;padding-block:1rem;}
    .navlinks{gap:0.8rem 1rem;justify-content:center;}
    .navlinks a{font-size:0.56rem;letter-spacing:0.14em;}
  }

  /* Cabecera de la publicación — ficha, no cartel */
  .cabecera{padding:clamp(2.6rem,7vw,4.5rem) 0 clamp(1.4rem,3vw,2rem);}
  .cabecera .linea{display:flex;justify-content:space-between;align-items:baseline;
    gap:1rem;flex-wrap:wrap;font-family:var(--mono);font-size:0.58rem;
    letter-spacing:0.2em;text-transform:uppercase;color:var(--tinta-2);}
  .cabecera h1{font-family:var(--serif);font-size:clamp(2.6rem,8vw,5rem);
    letter-spacing:0.01em;margin:0.7rem 0 0;}
  .cabecera .tesis{font-family:var(--serif);font-style:italic;
    font-size:clamp(1.05rem,2.4vw,1.35rem);color:var(--tinta-2);
    max-width:46ch;margin-top:0.9rem;line-height:1.6;}
  .filete{height:1px;background:var(--dorado);opacity:0.5;margin-top:1.6rem;}  /* DORADO 1/3 */

  /* ── Franja de secciones + espacio reservado (Parte #2) ── */
  .franja{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
    padding:clamp(1.6rem,4vw,2.4rem) 0;display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;}
  .franja .criterio h3{font-family:var(--serif);font-size:clamp(1.2rem,2.6vw,1.6rem);max-width:22ch;}
  .franja .criterio p{margin-top:0.7rem;font-size:0.9rem;color:var(--tinta-2);max-width:50ch;}
  /* Espacio de anunciante: reservado en el código, jamás simulado con un
     anuncio falso. Se activa el día que exista un tercero real. */
  .reservado{border:1px dashed rgba(20,18,15,0.22);padding:1.4rem 1.2rem;text-align:center;background:rgba(20,18,15,0.02);}
  .reservado .k{font-family:var(--mono);font-size:0.54rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--tinta-2);}
  .reservado p{font-size:0.78rem;color:var(--tinta-2);margin-top:0.5rem;line-height:1.6;}
  .reservado a{font-size:0.78rem;text-decoration:none;border-bottom:1px solid var(--bronce);padding-bottom:1px;}
  @media(max-width:820px){.franja{grid-template-columns:1fr;}}

  /* ── The Curator's Choice (Parte #3) ── */
  .curaduria{padding:clamp(2.4rem,6vw,4rem) 0 clamp(1.6rem,4vw,2.4rem);}
  .sec-tit{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
  .sec-tit h2{font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2.2rem);}
  .sec-tit .nota{font-family:var(--mono);font-size:0.56rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--tinta-2);}
  .criterios{margin-top:1.8rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea);}
  .criterio-c{background:var(--papel);padding:1.4rem 1.3rem;}
  .criterio-c .n{font-family:var(--mono);font-size:0.56rem;letter-spacing:0.2em;color:var(--bronce);}
  .criterio-c h4{font-family:var(--serif);font-size:1.14rem;margin:0.5rem 0 0.5rem;}
  .criterio-c p{font-size:0.84rem;color:var(--tinta-2);line-height:1.75;}
  @media(max-width:820px){.criterios{grid-template-columns:1fr;}}

  /* ── Los siete pilares (Parte #4) ── */
  .pilares{padding:clamp(1.6rem,4vw,2.6rem) 0 clamp(3rem,7vw,4.5rem);}
  .rejilla{margin-top:1.8rem;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(0.8rem,2vw,1.4rem);}
  .pilar{display:block;text-decoration:none;}
  .pilar .lam{position:relative;border:1px solid var(--linea);background:var(--papel-2);overflow:hidden;aspect-ratio:1/1;}
  .pilar .lam img{width:100%;height:100%;object-fit:cover;display:block;
    filter:grayscale(1) contrast(1.04);opacity:0.88;transition:filter 0.6s ease,opacity 0.6s ease,transform 0.8s cubic-bezier(0.22,1,0.36,1);}
  .pilar:hover .lam img,.pilar:focus-visible .lam img{filter:grayscale(0);opacity:1;transform:scale(1.03);}
  .pilar .meta{display:flex;align-items:baseline;gap:0.5rem;margin-top:0.6rem;}
  .pilar .meta .n{font-family:var(--mono);font-size:0.56rem;letter-spacing:0.16em;color:var(--bronce);}
  .pilar .meta h4{font-family:var(--serif);font-size:1.02rem;}
  .pilar .desc{font-size:0.76rem;color:var(--tinta-2);line-height:1.65;margin-top:0.2rem;}
  .pilar.ancho{grid-column:span 2;}
  .pilar.ancho .lam{aspect-ratio:2/1;}
  @media(max-width:900px){.rejilla{grid-template-columns:repeat(2,1fr);}.pilar.ancho{grid-column:span 2;}}
  @media(max-width:520px){.rejilla{grid-template-columns:1fr;}.pilar.ancho{grid-column:span 1;}.pilar.ancho .lam{aspect-ratio:1/1;}}

  /* ── Cierre ── */
  .cierre{border-top:1px solid var(--linea);padding:clamp(2.4rem,6vw,3.6rem) 0;}
  .cierre h2{font-family:var(--serif);font-size:clamp(1.5rem,3.6vw,2.3rem);max-width:20ch;}
  .cierre p{margin-top:0.9rem;max-width:52ch;color:var(--tinta-2);font-size:0.94rem;}
  .cierre .acciones{margin-top:1.6rem;display:flex;gap:0.8rem;flex-wrap:wrap;}
  .btn{display:inline-block;font-size:0.64rem;letter-spacing:0.22em;text-transform:uppercase;
    text-decoration:none;border:1px solid rgba(20,18,15,0.35);padding:0.9rem 1.7rem;transition:border-color 0.3s,background 0.3s;}
  .btn:hover{border-color:var(--tinta);background:rgba(20,18,15,0.04);}

  footer{border-top:1px solid var(--linea);padding:2.2rem 0 3rem;}
  .foot{display:flex;justify-content:space-between;gap:0.8rem;flex-wrap:wrap;
    font-size:0.64rem;letter-spacing:0.12em;color:var(--tinta-2);}
  .foot a{text-decoration:none;}

  /* Revelado contenido — la sala editorial no hace espectáculo */
  .rev{opacity:0;transform:translateY(14px);transition:opacity 0.9s cubic-bezier(0.22,1,0.36,1),transform 0.9s cubic-bezier(0.22,1,0.36,1);}
  .rev.in{opacity:1;transform:none;}
  @media(prefers-reduced-motion:reduce){
    .rev{opacity:1;transform:none;transition:none;}
    .pilar .lam img{transition:none;}
    html{scroll-behavior:auto;}
  }

/* ══════════════════════════════════════════════════════════
   PIEZA — la página de artículo. Mismo papel, medida de lectura.
   El dorado sigue siendo filete, nunca tinta (ver nota arriba).
   ══════════════════════════════════════════════════════════ */
.pieza{max-width:720px;margin:0 auto;padding:0 32px;}
.pieza-cab{padding:clamp(2.4rem,6vw,4rem) 0 0;}
.pieza-ficha{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:0.56rem;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--bronce);}
.pieza-ficha .sec{display:inline-flex;align-items:center;gap:0.45rem;}
.pieza-ficha .sec::before{content:"";width:7px;height:7px;flex:none;
  background:var(--dorado);transform:rotate(45deg);}   /* DORADO — marca, no tinta */
.pieza h1{font-family:var(--serif);font-size:clamp(2.1rem,5.6vw,3.4rem);
  line-height:1.1;margin:1.1rem 0 0;letter-spacing:0.005em;}
.pieza .bajada{font-family:var(--serif);font-style:italic;font-size:clamp(1.02rem,2.2vw,1.24rem);
  color:var(--tinta-2);margin-top:0.9rem;line-height:1.6;}
.pieza .filete{margin-top:1.5rem;}

.pieza-lam{margin:1.8rem 0 0;border:1px solid var(--linea);background:var(--papel-2);overflow:hidden;}
.pieza-lam img{display:block;width:100%;height:auto;}
.pieza-lam figcaption{padding:0.7rem 0.9rem;font-family:var(--mono);font-size:0.54rem;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--bronce);border-top:1px solid var(--linea);}

.cuerpo-larga{margin-top:2rem;}
.cuerpo-larga p{font-family:var(--serif);font-size:1.08rem;line-height:1.98;
  color:rgba(20,18,15,0.84);margin-bottom:1.15rem;}
.cuerpo-larga p b,.cuerpo-larga strong{font-weight:500;color:var(--tinta);}
.cuerpo-larga h2{font-family:var(--serif);font-size:clamp(1.3rem,3vw,1.7rem);
  margin:2.4rem 0 0.9rem;}
.cuerpo-larga a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(114,101,73,0.5);}
.cuerpo-larga a:hover{border-bottom-color:var(--tinta);}
.cita{margin:2.2rem 0;padding-left:1.4rem;border-left:2px solid rgba(201,168,76,0.5);}
.cita p{font-family:var(--serif);font-style:italic;font-size:1.2rem;line-height:1.62;
  color:var(--tinta);margin:0;}
.cita .quien{display:block;margin-top:0.6rem;font-family:var(--mono);font-style:normal;
  font-size:0.56rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--bronce);}

/* Ficha del objeto — la columna de datos de un catálogo */
.ficha-obj{margin:2.2rem 0;border:1px solid var(--linea);background:var(--papel-2);}
.ficha-obj .t{padding:0.8rem 1.1rem;border-bottom:1px solid var(--linea);
  font-family:var(--mono);font-size:0.56rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--bronce);}
.ficha-obj dl{display:grid;grid-template-columns:auto 1fr;gap:0;margin:0;}
.ficha-obj dt,.ficha-obj dd{padding:0.62rem 1.1rem;border-bottom:1px solid var(--linea);font-size:0.84rem;}
.ficha-obj dt{font-family:var(--mono);font-size:0.58rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--bronce);white-space:nowrap;}
.ficha-obj dd{color:rgba(20,18,15,0.82);}
.ficha-obj dl > :nth-last-child(-n+2){border-bottom:none;}
@media(max-width:560px){.ficha-obj dl{grid-template-columns:1fr;}
  .ficha-obj dt{border-bottom:none;padding-bottom:0;}}

/* Enlace de afiliado — SIEMPRE con declaración visible y rel="sponsored" */
.afiliado{margin:2.2rem 0;border:1px solid rgba(114,101,73,0.4);padding:1.2rem 1.3rem;background:rgba(20,18,15,0.02);}
.afiliado .k{font-family:var(--mono);font-size:0.54rem;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--bronce);}
.afiliado p{font-size:0.84rem;color:var(--tinta-2);margin:0.5rem 0 0.9rem;line-height:1.65;}
.afiliado .btn{font-size:0.6rem;padding:0.75rem 1.4rem;}
.afiliado .aviso{display:block;margin-top:0.8rem;font-size:0.7rem;color:var(--bronce);line-height:1.55;}

.fuentes{margin:2.6rem 0 0;border-top:1px solid var(--linea);padding-top:1.2rem;}
.fuentes .t{font-family:var(--mono);font-size:0.56rem;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--bronce);margin-bottom:0.6rem;}
.fuentes ol{margin:0;padding-left:1.1rem;}
.fuentes li{font-size:0.78rem;color:var(--tinta-2);line-height:1.7;margin-bottom:0.3rem;}
.fuentes a{color:inherit;}
.volver{display:inline-block;margin:2.4rem 0 0;font-family:var(--mono);font-size:0.58rem;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--bronce);text-decoration:none;}
.volver:hover{color:var(--tinta);}


/* ══════════════════════════════════════════════════════════
   DOS REGISTROS DE PIEZA — no se mezclan nunca.

   · OBJETO  (.ficha-obj + .afiliado)  → cosas que se compran.
     Lleva ficha técnica y, si existe programa real, enlace de afiliado
     declarado. Es la única familia donde el dinero puede tocar la página.

   · FIGURA / PROYECTO  (.trayectoria + .apoyo) → personas y causas.
     NUNCA lleva afiliado. Sobre alguien que sube o un proyecto social no
     se monetiza: la difusión no se cobra. En su lugar va la trayectoria
     verificable o la forma de apoyar, sin intermediario y sin comisión.
   ══════════════════════════════════════════════════════════ */

/* Trayectoria — la carrera como registro, no como palmarés presumido */
.trayectoria{margin:2.2rem 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);}
.trayectoria .t{padding:0.9rem 0 0.7rem;font-family:var(--mono);font-size:0.56rem;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--bronce);}
.trayectoria ol{list-style:none;margin:0;padding:0 0 0.8rem;}
.trayectoria li{display:grid;grid-template-columns:4.2rem 1fr;gap:1rem;
  padding:0.6rem 0;align-items:baseline;}
.trayectoria li + li{border-top:1px solid rgba(20,18,15,0.07);}
.trayectoria .anio{font-family:var(--mono);font-size:0.68rem;color:var(--bronce);letter-spacing:0.06em;}
.trayectoria .hecho{font-size:0.9rem;line-height:1.62;color:rgba(20,18,15,0.84);}
.trayectoria .hecho b{font-weight:500;color:var(--tinta);}
@media(max-width:520px){.trayectoria li{grid-template-columns:1fr;gap:0.15rem;}}

/* Apoyo — para proyectos sociales. Enlace directo, sin comisión, sin intermediario. */
.apoyo{margin:2.2rem 0;border:1px solid rgba(114,101,73,0.4);padding:1.2rem 1.3rem;}
.apoyo .k{font-family:var(--mono);font-size:0.54rem;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--bronce);}
.apoyo p{font-size:0.86rem;color:var(--tinta-2);margin:0.5rem 0 0.9rem;line-height:1.68;}
.apoyo .aviso{display:block;margin-top:0.8rem;font-size:0.7rem;color:var(--bronce);line-height:1.55;}

/* Distintivo de registro en la ficha de cabecera */
.pieza-ficha .reg{color:var(--bronce);opacity:0.85;}

/* ══════════════════════════════════════════════════════════
   EL CATÁLOGO — disciplina Stripe Press, formato ficha.

   Principio: TODAS las entradas pesan igual. No hay "destacado".
   La jerarquía la pone el lector al elegir, no la página al gritar.
   Izquierda siempre. Cero decoración: lo único que ocupa espacio
   es información.

   La lámina: Stripe Press ancla cada entrada en la portada del
   libro; Side Gallery, en la foto del objeto. Anteprima no tiene
   ni una ni otra —no vende objetos y no usa imagen sin licencia
   confirmada—, así que el ancla es una LÁMINA DE CATÁLOGO: número
   de pieza y sección compuestos como placa de museo. El día que
   exista una imagen de dominio público verificada, entra en esa
   misma ranura y sustituye la lámina sin tocar la retícula.
   ══════════════════════════════════════════════════════════ */
.catalogo{padding:clamp(1.4rem,3.5vw,2.2rem) 0 clamp(2.6rem,6vw,4rem);}
.cat-rejilla{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.6rem,3.4vw,2.8rem) clamp(1.2rem,2.6vw,2rem);margin-top:1.8rem;}
@media(max-width:900px){.cat-rejilla{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.cat-rejilla{grid-template-columns:1fr;gap:2.2rem;}}

.entrada-cat{display:flex;flex-direction:column;text-decoration:none;height:100%;}

/* Lámina: placa de catálogo, no fotografía de producto */
.lamina{position:relative;aspect-ratio:4/3;border:1px solid var(--linea);
  background:linear-gradient(163deg,var(--papel-2) 0%,#E7E0D3 100%);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:0.9rem 1rem;overflow:hidden;transition:border-color 0.4s ease;}
.lamina::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0.5;
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,0.7),transparent 62%);}
.entrada-cat:hover .lamina,.entrada-cat:focus-visible .lamina{border-color:rgba(20,18,15,0.34);}
.lamina img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* Bronce de LÁMINA: el fondo de la placa (#E7E0D3) es más oscuro que el
   papel, y ahí el bronce de papel #726549 cae a 4.36. Éste da 5.16. */
.lam-num{position:relative;font-family:var(--mono);font-size:0.58rem;
  letter-spacing:0.22em;color:#665A40;}
/* El número de pieza es el dato de catálogo, y por eso pesa: no es adorno.
   Se retiró la marca de agua con el nombre de la sección — era decoración
   redundante (la sección ya va en .meta) y no alcanzaba contraste AA. */
.lam-cifra{position:relative;font-family:var(--mono);font-weight:300;
  font-size:clamp(2.2rem,4.4vw,3.1rem);line-height:0.9;color:var(--tinta);
  opacity:0.78;letter-spacing:-0.02em;}
.lam-marca{position:relative;align-self:flex-end;width:9px;height:9px;
  background:var(--dorado);transform:rotate(45deg);}   /* DORADO — marca, no tinta */

/* Texto de la entrada — mismo tratamiento en las ocho */
.entrada-cat .meta{margin-top:0.8rem;font-family:var(--mono);font-size:0.54rem;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--bronce);}
.entrada-cat h3{margin-top:0.45rem;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.16rem,2.1vw,1.36rem);line-height:1.22;color:var(--tinta);}
.entrada-cat .sumario{margin-top:0.5rem;font-size:0.82rem;line-height:1.66;
  color:var(--tinta-2);flex:1;}
.entrada-cat .leer{margin-top:0.9rem;font-family:var(--mono);font-size:0.56rem;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--tinta);
  border-bottom:1px solid rgba(20,18,15,0.28);padding-bottom:2px;align-self:flex-start;
  transition:border-color 0.3s;}
.entrada-cat:hover .leer{border-bottom-color:var(--tinta);}

/* Índice de secciones — foto + nombre, una tarjeta por tema */
.secciones{border-top:1px solid var(--linea);padding:clamp(1.8rem,4vw,2.6rem) 0;}
.sec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);margin-top:1.2rem;}
.sec-card{background:var(--papel);display:flex;flex-direction:column;}
.sec-card picture{display:block;overflow:hidden;aspect-ratio:4/3;}
.sec-card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 0.35s cubic-bezier(0.22,1,0.36,1),opacity 0.35s;}
.sec-card:hover img{transform:scale(1.04);opacity:0.88;}
.sec-card .sec-pie{padding:0.7rem 0.8rem;display:flex;flex-direction:column;gap:0.15rem;}
.sec-card .sec-pie strong{font-family:var(--serif);font-size:0.82rem;font-weight:400;line-height:1.2;}
.sec-card .sec-pie span{font-size:0.62rem;color:var(--tinta-2);line-height:1.4;}

@media(prefers-reduced-motion:reduce){
  .lamina,.entrada-cat .leer{transition:none;}
}