/* Layout: sala de lectura. Páginas de papel verde agua; cada colección es un tomo forrado en verde río
   con curvas de nivel; las tarjetas se muestran como láminas sobre el color de su especie. */
:root{
  --papel:#EEF4EF;      /* fondo de lectura */
  --papel-2:#DDE9E1;    /* cajas, filas alternas */
  --tinta:#13241E;      /* texto */
  --tinta-2:#45574F;    /* texto secundario */
  --acento:#173A31;     /* enlaces, foco */
  --linea:rgba(19,36,30,.14);
  --tomo:#173A31;       /* forro de las colecciones */
  --tomo-2:#0E2621;
  --tomo-texto:#F5E7CF;
  --tomo-texto-2:#A3BDAC;
  --arena:#EAD3AD;
  --marco:#333130;
  --sombra:rgba(14,38,33,.28);
  --display:"Libre Baskerville",Georgia,"Times New Roman",serif;
  --ui:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --r-carta:3.1%;
  --ancho:1200px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --papel:#173A31;--papel-2:#0E2621;--tinta:#F5E7CF;--tinta-2:#A3BDAC;--acento:#EAD3AD;
  --linea:rgba(234,211,173,.16);--tomo:#0E2621;--tomo-2:#0A1D19;--sombra:rgba(0,0,0,.45);color-scheme:dark}}
:root[data-theme="dark"]{
  --papel:#173A31;--papel-2:#0E2621;--tinta:#F5E7CF;--tinta-2:#A3BDAC;--acento:#EAD3AD;
  --linea:rgba(234,211,173,.16);--tomo:#0E2621;--tomo-2:#0A1D19;--sombra:rgba(0,0,0,.45);color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 17px/1.6 var(--ui);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--acento);color:var(--papel);padding:8px 14px;border-radius:6px;z-index:20}
.skip:focus{left:16px}

.wrap{max-width:var(--ancho);margin-inline:auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
@media (max-width:600px){.wrap{padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}}

h1,h2,h3{font-family:var(--display);font-weight:400;text-wrap:balance;margin:0;line-height:1.12;letter-spacing:-.015em}
p{margin:0}
.d1{font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:1.04;letter-spacing:-.025em}
.d2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.d3{font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.25}
.lede{font-size:clamp(1.06rem,1.4vw,1.2rem);line-height:1.62;color:var(--tinta-2);max-width:58ch}
.prose{display:flex;flex-direction:column;gap:16px;max-width:62ch}
.prose p{color:var(--tinta-2)}
.prose p strong{color:var(--tinta);font-weight:600}
.sci{font-family:var(--display);font-style:italic}
.small{font-size:14px;color:var(--tinta-2)}
.tab{font-variant-numeric:tabular-nums}

/* Encabezado */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--papel) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
@supports not (background:color-mix(in srgb,red,blue)){.top{background:var(--papel)}}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:11;background:var(--papel)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--acento);font-family:var(--display);font-size:1.22rem;letter-spacing:.01em}
.brand svg{width:30px;height:27px;flex:none}
.brand span{color:var(--tinta)}
.menu{display:flex;gap:4px}
.menu a{text-decoration:none;font-size:15.5px;font-weight:500;color:var(--tinta-2);padding:9px 12px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}
.menu a:hover{color:var(--tinta);background:var(--papel-2)}
.menu a[aria-current="page"]{color:var(--tinta);background:var(--papel-2)}
@media (max-width:560px){.brand span{display:none}.menu a{padding:9px 10px;font-size:15px}}

main{display:block}
.section{padding-block:clamp(56px,8vw,104px)}
.section + .section{padding-top:0}
.head{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(28px,4vw,44px)}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,44px)}
.head-row .head{margin:0}
.more{font-size:15.5px;font-weight:500;color:var(--acento);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;min-height:44px;display:inline-flex;align-items:center}
.more:hover{text-decoration-thickness:2px}

/* Tarjeta como objeto */
.carta{display:block;border-radius:var(--r-carta)/2.2%;box-shadow:0 1px 1px rgba(0,0,0,.12),0 14px 28px -14px var(--sombra);aspect-ratio:745/1063;width:100%;object-fit:cover;background:var(--marco)}

/* Portada */
.intro{padding-block:clamp(40px,6vw,84px) clamp(8px,2vw,24px)}
.intro .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(36px,6vw,88px);align-items:center}
.intro-copy{display:flex;flex-direction:column;gap:24px;min-width:0}
.intro-copy .d1{max-width:13ch}
.tally{font-family:var(--display);font-style:italic;font-size:1.06rem;color:var(--tinta);border-top:1px solid var(--linea);padding-top:18px;max-width:46ch}
.pair{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:end;max-width:540px;justify-self:end;width:100%}
.pair figure{margin:0}
.pair .foto img{border-radius:6px;aspect-ratio:3/4;object-fit:cover;width:100%;box-shadow:0 14px 28px -16px var(--sombra)}
.pair .foto{transform:rotate(-2.2deg);transform-origin:bottom right}
.pair .lam{margin-left:-14%;margin-bottom:-6%;transform:rotate(3deg);position:relative;width:114%}
.pair figcaption{grid-column:1/-1;margin-top:40px;font-size:14px;color:var(--tinta-2);max-width:44ch}
.pair figcaption i{font-family:var(--display)}
@media (max-width:860px){.intro .wrap{grid-template-columns:1fr}.pair{justify-self:start;max-width:460px}}

/* Tomos: cada colección */
.estante{display:flex;flex-direction:column;gap:22px}
.tomo{position:relative;display:grid;grid-template-columns:minmax(270px,.9fr) minmax(0,2.1fr);gap:clamp(24px,4vw,56px);align-items:center;background:var(--tomo);color:var(--tomo-texto);border-radius:10px;padding:clamp(24px,3.4vw,44px);text-decoration:none;overflow:hidden;isolation:isolate}
.tomo::before{content:"";position:absolute;inset:0 auto 0 0;width:14px;background:var(--tomo-2);z-index:-1}
.tomo canvas.topo{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.tomo-ficha{display:flex;flex-direction:column;gap:14px;padding-left:10px;min-width:0}
.tomo-num{font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--arena);font-variant-numeric:tabular-nums}
.tomo h3{font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.05;color:var(--tomo-texto)}
.tomo p{color:var(--tomo-texto-2);font-size:15.5px;line-height:1.55}
.tomo dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:6px 0 0;font-size:14.5px}
.tomo dt{color:var(--tomo-texto-2)}
.tomo dd{margin:0;color:var(--tomo-texto)}
.tomo-cartas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.2vw,16px);min-width:0}
.tomo-cartas .carta{box-shadow:0 1px 1px rgba(0,0,0,.25),0 16px 26px -14px rgba(0,0,0,.6);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
a.tomo:hover .tomo-cartas .carta{transform:translateY(-6px)}
a.tomo:hover .tomo-cartas > :nth-child(2) .carta{transition-delay:.03s}
a.tomo:hover .tomo-cartas > :nth-child(3) .carta{transition-delay:.06s}
a.tomo:hover .tomo-cartas > :nth-child(4) .carta{transition-delay:.09s}
a.tomo:hover .tomo-cartas > :nth-child(5) .carta{transition-delay:.12s}
.hueco{aspect-ratio:745/1063;border-radius:var(--r-carta)/2.2%;border:1.5px dashed rgba(234,211,173,.32);display:flex;align-items:flex-end;justify-content:center;padding-bottom:12%;font-family:var(--display);font-style:italic;font-size:13px;color:var(--tomo-texto-2);text-align:center;line-height:1.3}
.tomo.pendiente{background:transparent;color:var(--tinta);border:1.5px solid var(--linea)}
.tomo.pendiente::before{background:var(--papel-2)}
.tomo.pendiente h3{color:var(--tinta)}
.tomo.pendiente p,.tomo.pendiente dt{color:var(--tinta-2)}
.tomo.pendiente dd{color:var(--tinta)}
.tomo.pendiente .tomo-num{color:var(--tinta-2)}
.tomo.pendiente .hueco{border-color:var(--linea);color:var(--tinta-2)}
@media (max-width:860px){
  .tomo{grid-template-columns:1fr}
  .tomo-cartas{grid-template-columns:repeat(5,minmax(118px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin-right:calc(-1 * clamp(24px,3.4vw,44px));padding-right:clamp(24px,3.4vw,44px)}
  .tomo-cartas > *{scroll-snap-align:start}
}

/* Índice (tabla de catálogo) */
.indice-wrap{overflow-x:auto;border-top:1px solid var(--tinta)}
table.indice{width:100%;border-collapse:collapse;min-width:760px;font-size:15px}
.indice th{text-align:left;font-weight:600;font-size:13.5px;letter-spacing:.02em;color:var(--tinta-2);padding:12px 14px 12px 0;border-bottom:1px solid var(--linea);white-space:nowrap}
.indice td{padding:14px 14px 14px 0;border-bottom:1px solid var(--linea);vertical-align:middle}
.indice tr{position:relative}
.indice tbody tr:hover{background:color-mix(in srgb,var(--papel-2) 70%,transparent)}
.indice .n{font-variant-numeric:tabular-nums;color:var(--tinta-2);width:64px;padding-left:4px}
.indice .esp{display:flex;align-items:center;gap:14px;min-width:240px}
.indice .esp img{width:40px;border-radius:3px;box-shadow:0 4px 10px -6px var(--sombra)}
.indice .esp a{font-family:var(--display);font-size:1.04rem;text-decoration:none}
.indice .esp a::after{content:"";position:absolute;inset:0}
.indice .esp a:hover{text-decoration:underline;text-underline-offset:4px}
.indice .apodo{font-family:var(--display);font-weight:700;font-size:14.5px}
.indice .sci{color:var(--tinta-2)}
.indice .tipo{color:var(--tinta-2)}

/* Láminas */
.laminas{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:clamp(28px,3.4vw,44px) clamp(18px,2.4vw,32px)}
.lamina{display:flex;flex-direction:column;gap:14px;text-decoration:none;min-width:0}
.lamina .mat{background:var(--mat,var(--papel-2));border-radius:6px;padding:12%  13% 14%;transition:background-color .3s}
.lamina .mat .carta{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.lamina:hover .mat .carta{transform:translateY(-5px) rotate(-.6deg)}
.lamina .pie{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:baseline}
.lamina .pie .tab{font-size:13.5px;color:var(--tinta-2);grid-row:span 3}
.lamina .pie b{font-family:var(--display);font-weight:400;font-size:1.08rem;line-height:1.3}
.lamina .pie i{font-family:var(--display);font-size:14px;color:var(--tinta-2)}
.lamina .pie em{font-style:normal;font-size:13.5px;color:var(--tinta-2)}

/* Filtros del catálogo */
.controles{display:flex;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;align-items:center;margin-bottom:32px;padding-block:14px;border-block:1px solid var(--linea)}
.grupo{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.grupo > span{font-size:14px;color:var(--tinta-2);margin-right:6px}
.chip{font:500 15px/1 var(--ui);min-height:40px;padding:0 15px;border-radius:999px;border:1px solid var(--linea);background:transparent;color:var(--tinta);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.chip small{font-size:13px;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--tinta-2)}
.chip[aria-pressed="true"]{background:var(--acento);border-color:var(--acento);color:var(--papel)}
.chip[aria-pressed="true"] small{color:inherit;opacity:.75}

/* Cómo nace una tarjeta */
.proceso{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);counter-reset:paso;list-style:none;margin:0;padding:0}
.proceso li{display:flex;flex-direction:column;gap:14px;min-width:0}
.proceso .img{aspect-ratio:745/1063;border-radius:6px;overflow:hidden;background:var(--papel-2);display:flex;align-items:center;justify-content:center}
.proceso .img img{width:100%;height:100%;object-fit:cover}
.proceso .img.carta-box{background:var(--mat);padding:10%}
.proceso .img.carta-box img{height:auto;object-fit:contain;border-radius:var(--r-carta)/2.2%;box-shadow:0 12px 22px -14px var(--sombra)}
.proceso .img.registro{flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:9%;gap:10px;background:var(--tomo);color:var(--tomo-texto)}
.registro .sci{font-size:1.25rem;line-height:1.3}
.registro p{font-size:14px;color:var(--tomo-texto-2);line-height:1.5}
.registro .ok{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--arena)}
.registro .ok svg{width:18px;height:18px}
.proceso h3{font-size:1.15rem;display:flex;gap:10px;align-items:baseline}
.proceso h3::before{counter-increment:paso;content:counter(paso);font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.proceso p{font-size:15.5px;color:var(--tinta-2);line-height:1.55}
@media (max-width:900px){.proceso{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}}

/* Página de colección */
.portada{position:relative;color:var(--tomo-texto);background:var(--tomo);isolation:isolate}
.portada .foto{position:absolute;inset:0;z-index:-1}
.portada .foto img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.portada .foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,38,33,.15) 0%,rgba(14,38,33,.55) 55%,rgba(14,38,33,.94) 100%)}
.portada .wrap{min-height:clamp(380px,52vw,560px);display:flex;flex-direction:column;justify-content:flex-end;gap:16px;padding-block:40px 48px}
.portada .crumbs a,.portada .crumbs{color:var(--tomo-texto-2)}
.portada .d1{color:var(--tomo-texto)}
.portada .lede{color:var(--tomo-texto);opacity:.9;max-width:52ch}
.portada .credit{font-size:13px;color:var(--tomo-texto-2)}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;font-size:14.5px;color:var(--tinta-2)}
.crumbs li + li::before{content:"/";margin-right:6px;opacity:.6}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}

.datos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 28px;margin:0;padding-block:28px;border-bottom:1px solid var(--linea)}
.datos div{display:flex;flex-direction:column;gap:4px;min-width:0}
.datos dt{font-size:13.5px;color:var(--tinta-2)}
.datos dd{margin:0;font-family:var(--display);font-size:1.06rem;line-height:1.4}
@media (max-width:760px){.datos{grid-template-columns:repeat(2,minmax(0,1fr))}}

.dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(32px,6vw,88px);align-items:start}
@media (max-width:860px){.dos{grid-template-columns:1fr}}

/* El río por alturas */
.alturas{display:flex;flex-direction:column;border-radius:8px;overflow:hidden;border:1px solid var(--linea)}
.altura{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center;padding:16px 20px;min-height:84px}
.altura + .altura{border-top:1px solid var(--linea)}
.altura dt{font-size:14px;color:var(--tinta-2)}
.altura dd{margin:0;display:flex;flex-wrap:wrap;gap:10px 18px}
.altura dd a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display)}
.altura dd a:hover{text-decoration:underline;text-underline-offset:4px}
.altura dd img{width:34px;border-radius:3px}
.altura.agua{background:var(--tomo);color:var(--tomo-texto);border-top-color:transparent}
.altura.agua dt{color:var(--tomo-texto-2)}
.altura.agua.hondo{background:var(--tomo-2)}
.superficie-agua{height:10px;background:var(--tomo);position:relative}
.superficie-agua::before{content:"";position:absolute;left:0;right:0;top:-6px;height:12px;background:radial-gradient(14px 7px at 14px 100%,var(--tomo) 98%,transparent) repeat-x;background-size:28px 12px}
@media (max-width:520px){.altura{grid-template-columns:1fr;gap:8px}}

/* Bitácora de salidas */
.bitacora{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;border-left:1.5px solid var(--linea);margin-left:6px}
.bitacora > li{position:relative;padding:0 0 36px 28px;display:flex;flex-direction:column;gap:10px}
.bitacora > li::before{content:"";position:absolute;left:-7px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--papel);border:2px solid var(--acento)}
.bitacora > li.sin::before{border-style:dashed;border-color:var(--tinta-2)}
.bitacora time,.bitacora .fecha{font-family:var(--display);font-size:1.2rem}
.bitacora p{color:var(--tinta-2);font-size:15.5px;max-width:52ch}
.bitacora p a{color:var(--tinta)}
.fotos{display:flex;gap:10px;flex-wrap:wrap}
.fotos img{width:110px;aspect-ratio:3/4;object-fit:cover;border-radius:4px}

.video-set{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:clamp(28px,5vw,64px);align-items:center;background:var(--papel-2);border-radius:10px;padding:clamp(24px,4vw,48px)}
.video-set video{width:100%;aspect-ratio:9/16;border-radius:8px;background:var(--tomo)}
@media (max-width:760px){.video-set{grid-template-columns:1fr}.video-set video{max-width:300px}}

/* Ficha de tarjeta */
.ficha{padding-block:clamp(28px,4vw,48px) clamp(56px,8vw,96px)}
.ficha .crumbs{margin-bottom:clamp(24px,3vw,36px)}
.ficha-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(32px,6vw,96px);align-items:start}
@media (max-width:860px){.ficha-grid{grid-template-columns:1fr}}
.visor{position:sticky;top:96px;display:flex;flex-direction:column;align-items:center;gap:18px}
@media (max-width:860px){.visor{position:static}}
.escena{width:min(100%,440px);background:var(--mat);border-radius:8px;padding:9%;perspective:1600px}
.giro{position:relative;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,.7,.2,1)}
.giro.volteada{transform:rotateY(180deg)}
.giro .cara{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.giro .cara.atras{position:absolute;inset:0;transform:rotateY(180deg)}
.escena .alt{border-radius:4px;overflow:hidden;aspect-ratio:745/1063;box-shadow:0 14px 28px -16px var(--sombra)}
.escena .alt img{width:100%;height:100%;object-fit:cover}
.vistas{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.vista-nota{font-size:14px;color:var(--tinta-2);text-align:center;max-width:40ch;min-height:1.6em}

.registro-ficha{display:flex;flex-direction:column;gap:22px;min-width:0}
.registro-ficha .num{font-size:14.5px;color:var(--tinta-2)}
.registro-ficha h1{font-size:clamp(2.3rem,4.6vw,3.6rem);line-height:1.04}
.registro-ficha > .sci{font-size:1.3rem;color:var(--tinta-2);margin-top:-8px}
.apodo-grande{font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--acento);padding-top:18px;border-top:1px solid var(--linea)}
.texto-carta{font-family:var(--display);font-style:italic;font-size:1.1rem;line-height:1.75;max-width:52ch}
.atributos{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:0;margin:0;border-top:1px solid var(--linea)}
.atributos dt,.atributos dd{padding:12px 0;border-bottom:1px solid var(--linea);margin:0}
.atributos dt{font-size:14.5px;color:var(--tinta-2);padding-right:20px}
.atributos dd{font-size:15.5px}
.atributos a{color:var(--acento);text-underline-offset:4px}
.nota-ia{font-size:14px;color:var(--tinta-2);max-width:56ch;line-height:1.55}

.encuentro{margin-top:clamp(40px,6vw,72px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(24px,5vw,72px);align-items:center;padding-block:clamp(40px,6vw,72px);border-top:1px solid var(--linea)}
.encuentro .fotos-g{display:flex;gap:12px}
.encuentro .fotos-g figure{margin:0;flex:1;min-width:0}
.encuentro .fotos-g img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px}
@media (max-width:760px){.encuentro{grid-template-columns:1fr}}

.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:1px solid var(--linea);padding-block:28px}
.pager a{display:flex;align-items:center;gap:14px;text-decoration:none;padding:10px;border-radius:8px;min-width:0}
.pager a:hover{background:var(--papel-2)}
.pager a.next{justify-content:flex-end;text-align:right;grid-column:2}
.pager img{width:48px;border-radius:3px;flex:none}
.pager small{display:block;font-size:13.5px;color:var(--tinta-2)}
.pager b{font-family:var(--display);font-weight:400;font-size:1.06rem}
.pager .kbd{font-size:13px;color:var(--tinta-2);grid-column:1/-1;text-align:center}

/* Qué es Naturario */
.anatomia{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:center}
.anatomia .lienzo{position:relative}
.marca{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:var(--acento);color:var(--papel);font:600 13px/28px var(--ui);text-align:center;box-shadow:0 0 0 3px color-mix(in srgb,var(--papel) 80%,transparent);font-variant-numeric:tabular-nums}
.partes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:20px 32px;counter-reset:parte}
.partes li{display:grid;grid-template-columns:28px 1fr;gap:4px 12px}
.partes li::before{counter-increment:parte;content:counter(parte);grid-row:span 2;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--acento);color:var(--acento);font:600 13px/25px var(--ui);text-align:center;font-variant-numeric:tabular-nums}
.partes b{font-family:var(--display);font-weight:400;font-size:1.06rem}
.partes span{font-size:15px;color:var(--tinta-2);line-height:1.5}
@media (max-width:860px){.anatomia{grid-template-columns:1fr}.anatomia .lienzo{max-width:380px}}
@media (max-width:520px){.partes{grid-template-columns:1fr}}

.origen{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:center}
.origen figure{margin:0;display:flex;flex-direction:column;gap:10px}
.origen figure img{border-radius:6px;aspect-ratio:4/5;object-fit:cover;width:100%}
.origen figcaption{font-size:14px;color:var(--tinta-2)}
blockquote{margin:0;font-family:var(--display);font-style:italic;font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.4;color:var(--tinta);padding-left:20px;border-left:2px solid var(--acento)}
@media (max-width:860px){.origen{grid-template-columns:1fr}.origen figure{max-width:420px}}

.pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;counter-reset:p}
.pasos li{display:flex;flex-direction:column;gap:10px;padding-top:18px;border-top:2px solid var(--tinta)}
.pasos li::before{counter-increment:p;content:counter(p);font-size:13.5px;font-weight:600;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.pasos h3{font-size:1.2rem}
.pasos p{font-size:15.5px;color:var(--tinta-2)}
@media (max-width:860px){.pasos{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pasos{grid-template-columns:1fr}}

.reparto{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--linea);border-radius:8px;overflow:hidden}
.reparto > div{padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:12px}
.reparto > div + div{border-left:1px solid var(--linea)}
.reparto h3{font-size:1.2rem}
.reparto ul{margin:0;padding-left:18px;color:var(--tinta-2);display:flex;flex-direction:column;gap:6px}
.reparto .mano{background:var(--papel-2)}
@media (max-width:620px){.reparto{grid-template-columns:1fr}.reparto > div + div{border-left:0;border-top:1px solid var(--linea)}}

/* Pie */
.pie-sitio{background:var(--tomo);color:var(--tomo-texto-2);position:relative;isolation:isolate;overflow:hidden}
.pie-sitio canvas.topo{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.pie-sitio .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:32px;padding-block:56px 48px}
.pie-sitio .brand{color:var(--arena)}
.pie-sitio .brand span{color:var(--tomo-texto);display:inline}
.pie-sitio p{font-size:15px;max-width:44ch;margin-top:14px;line-height:1.55}
.pie-sitio nav{display:flex;flex-direction:column;gap:2px}
.pie-sitio h2{font:600 14px/1.4 var(--ui);color:var(--tomo-texto);margin-bottom:8px;letter-spacing:.02em}
.pie-sitio nav a{text-decoration:none;font-size:15px;min-height:36px;display:inline-flex;align-items:center}
.pie-sitio nav a:hover{color:var(--tomo-texto);text-decoration:underline;text-underline-offset:4px}
@media (max-width:760px){.pie-sitio .wrap{grid-template-columns:1fr 1fr}.pie-sitio .wrap > div:first-child{grid-column:1/-1}}

.atributos .sci{font-size:inherit;color:inherit}
.intro{overflow-x:clip}
.proceso .registro p{color:var(--tomo-texto-2)}
@media (max-width:860px){.pair .lam{width:100%;margin-left:-8%}}
@media (max-width:600px){
  .laminas{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}
  .lamina .pie{grid-template-columns:1fr}
  .lamina .pie .tab{grid-row:auto}
  .lamina .pie b{font-size:1rem}
}
/* Portada: qué es Naturario */
.intro .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.tesis{font-size:clamp(2.1rem,4.2vw,3.5rem);line-height:1.08;max-width:17ch!important}
.define{display:flex;flex-direction:column;margin:8px 0 0;border-top:1px solid var(--linea);max-width:60ch}
.define div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 20px;padding-block:14px;border-bottom:1px solid var(--linea)}
.define dt{font-size:14.5px;font-weight:600;color:var(--tinta)}
.define dd{margin:0;font-size:15.5px;color:var(--tinta-2);line-height:1.55}
@media (max-width:520px){.define div{grid-template-columns:1fr}}
.abanico{position:relative;width:100%;max-width:440px;aspect-ratio:1/1.12;justify-self:center}
.abanico .carta{position:absolute;width:56%;left:22%;top:8%;transform-origin:50% 115%}
.abanico .a1{transform:rotate(-16deg) translateX(-6%)}
.abanico .a2{transform:rotate(-6deg)}
.abanico .a3{transform:rotate(5deg)}
.abanico .a4{transform:rotate(15deg) translateX(6%)}
@media (prefers-reduced-motion:no-preference){
  .abanico .carta{animation:abre .9s cubic-bezier(.2,.7,.2,1) both}
  .abanico .a2{animation-delay:.08s}.abanico .a3{animation-delay:.16s}.abanico .a4{animation-delay:.24s}
  @keyframes abre{from{transform:rotate(0) translateX(0)}}
}
@media (max-width:860px){.abanico{max-width:340px}}
.abanico .carta{width:50%;left:25%}
.abanico .a1{transform:rotate(-20deg) translateX(-30%)}
.abanico .a2{transform:rotate(-8deg) translateX(-12%)}
.abanico .a3{transform:rotate(5deg) translateX(8%)}
.abanico .a4{transform:rotate(17deg) translateX(28%)}
@media (max-width:860px){.intro .wrap{grid-template-columns:1fr}.abanico{max-width:360px;margin-top:8px}}
@media (max-width:860px){.abanico{max-width:290px}}
/* Curvas del reverso, de fondo en la portada */
:root{--curva:rgba(23,58,49,.16)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--curva:rgba(234,211,173,.12)}}
:root[data-theme="dark"]{--curva:rgba(234,211,173,.12)}
.intro{position:relative;isolation:isolate}
.intro canvas.curvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 70% 85% at var(--cx,72%) 50%,#000 30%,transparent 78%);
  mask-image:radial-gradient(ellipse 70% 85% at var(--cx,72%) 50%,#000 30%,transparent 78%)}
.intro .wrap{position:static}
[id]{scroll-margin-top:100px}

.intro canvas.curvas{-webkit-mask-image:radial-gradient(ellipse 75% 95% at 72% 50%,#000 25%,transparent 80%);mask-image:radial-gradient(ellipse 75% 95% at 72% 50%,#000 25%,transparent 80%)}
@media (max-width:860px){.intro canvas.curvas{-webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 75%,#000 25%,transparent 85%);mask-image:radial-gradient(ellipse 90% 60% at 50% 75%,#000 25%,transparent 85%)}}