:root{
  --papel:#F3ECDF; --papel-hondo:#EAE0CD; --papel-claro:#FBF7EF;
  --tinta:#2A2119; --tinta-2:#594B3D; --tinta-3:#736250;
  --linea:rgba(42,33,25,.14); --linea-fuerte:rgba(42,33,25,.3);
  /* Naturaleza: el monte, el pastizal y el humedal */
  --monte:#2F4733; --monte-2:#4E6B49; --monte-claro:#E3E5D1; --hoja-nat:#ECEADB;
  --pastizal:#9C7A2E; --pastizal-claro:#EFE3BF;
  --humedal:#28585A; --humedal-claro:#DCE6E1;
  /* Política: tinta y papel de diario */
  --tinta-pol:#1E2A36; --pol:#34506C; --pol-claro:#E2E4E6; --diario:#EAE8E2; --lacre:#8E3A2B;
  --oro:#E4D2A0;
  --acento:var(--monte); --acento-2:var(--humedal); --titulo-tema:var(--monte); --capitular:var(--monte);
  --f-titulo:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --f-texto:"Source Serif 4",Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --tam-lectura:20px;
  --sombra:0 1px 1px rgba(70,45,20,.06),0 6px 14px -4px rgba(70,45,20,.14),0 26px 50px -18px rgba(70,45,20,.22);
  --sombra-suave:0 1px 1px rgba(70,45,20,.05),0 4px 10px -4px rgba(70,45,20,.12),0 14px 28px -16px rgba(70,45,20,.18);
  --sombra-alta:0 2px 2px rgba(70,45,20,.06),0 12px 24px -8px rgba(70,45,20,.2),0 36px 60px -24px rgba(70,45,20,.3);
  --puntos:radial-gradient(rgba(30,42,54,.1) 1px,transparent 1.3px) 0 0/7px 7px;
}
body[data-tema="politica"]{--acento:var(--pol);--acento-2:var(--pol);--titulo-tema:var(--tinta-pol);--capitular:var(--lacre)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--f-texto);font-size:17px;line-height:1.6;font-synthesis:none;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2.5px solid var(--acento);outline-offset:3px}
.envase{width:min(1180px,100% - 32px);margin-inline:auto}
@media(min-width:768px){.envase{width:min(1180px,100% - 64px)}}

/* Fondos: papel, monte y diario. Los puntos de Política no van acá: van con el contenido (ver «Trama»). */
.fondo{position:fixed;inset:0;z-index:-3;pointer-events:none;transition:opacity .7s var(--ease)}
.fondo--base{background:radial-gradient(900px 520px at 90% -8%,rgba(78,107,73,.16),transparent 70%),radial-gradient(700px 520px at -12% 45%,rgba(164,83,43,.07),transparent 70%),var(--papel)}
.fondo--naturaleza{opacity:0;background:radial-gradient(1000px 620px at 92% -10%,rgba(78,107,73,.24),transparent 70%),radial-gradient(700px 480px at -10% 105%,rgba(40,88,90,.09),transparent 70%),var(--hoja-nat)}
.fondo--politica{opacity:0;background:radial-gradient(900px 620px at 88% -10%,rgba(52,80,108,.16),transparent 70%),var(--diario)}
body:not([data-vista="inicio"]):not([data-vista="nada"])[data-tema="naturaleza"] .fondo--naturaleza,
body:not([data-vista="inicio"]):not([data-vista="nada"])[data-tema="politica"] .fondo--politica{opacity:1}
.grano{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.6;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .12 0 0 0 0 .07 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Trama de diario (Política): fuerte en el encabezado, casi nada detrás del texto largo.
   --trama-alto lo pone el script con la altura real del encabezado. */
.lista,.texto{position:relative;isolation:isolate}
body[data-tema="politica"] .lista::before,body[data-tema="politica"] .texto::before{
  content:"";position:absolute;z-index:-1;top:-68px;bottom:0;left:50%;width:100vw;transform:translateX(-50%);pointer-events:none;background:var(--puntos);
  -webkit-mask-image:linear-gradient(#000 calc(var(--trama-alto,400px) - 40px),rgba(0,0,0,.18) calc(var(--trama-alto,400px) + 110px));
  mask-image:linear-gradient(#000 calc(var(--trama-alto,400px) - 40px),rgba(0,0,0,.18) calc(var(--trama-alto,400px) + 110px));
}

/* Barra de arriba */
.barra{position:sticky;top:0;z-index:20;padding-top:env(safe-area-inset-top)}
.barra::before{content:"";position:absolute;inset:0;background:rgba(243,236,223,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s,background-color .7s var(--ease)}
body[data-tema="naturaleza"]:not([data-vista="inicio"]):not([data-vista="nada"]) .barra::before{background:rgba(236,234,219,.86)}
body[data-tema="politica"]:not([data-vista="inicio"]):not([data-vista="nada"]) .barra::before{background:rgba(234,232,226,.88)}
.barra.con-borde::before{border-bottom-color:var(--linea)}
.barra-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;height:68px}
.sello{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1.5px solid var(--tinta);border-radius:50%;font-family:var(--f-titulo);font-style:italic;font-weight:600;font-size:19px;letter-spacing:-.03em;text-decoration:none;transition:transform .2s var(--ease),background-color .2s,color .2s}
.sello:active{transform:scale(.92)}
.barra-nombre{display:none;position:relative;text-decoration:none;font-family:var(--f-titulo);font-weight:600;font-size:25px;letter-spacing:-.005em}
.barra-nombre::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease)}
@media(hover:hover){.sello:hover{background:var(--tinta);color:var(--papel-claro)}.barra-nombre:hover::after{transform:scaleX(1)}}
@media(min-width:768px){.sello{display:none}.barra-nombre{display:block}}
.selector{position:relative;display:grid;grid-template-columns:1fr 1fr;flex:0 1 290px;padding:4px;border:1px solid var(--linea-fuerte);border-radius:999px;background:rgba(255,255,255,.4)}
.selector a{position:relative;z-index:1;display:grid;place-items:center;height:44px;text-decoration:none;padding:0 12px;border-radius:999px;font-weight:600;font-size:15.5px;color:var(--tinta-2);transition:color .45s var(--ease),transform .15s var(--ease),background-color .2s}
.selector a[aria-current="page"]{color:var(--papel-claro)}
.selector a:active{transform:scale(.96)}
.selector a:focus-visible{outline-offset:-2px}
.selector-pastilla{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--monte);opacity:0;transition:transform .6s var(--ease),opacity .3s,background-color .6s;box-shadow:0 1px 2px rgba(42,33,25,.2),0 4px 10px -4px rgba(42,33,25,.35)}
.selector[data-activo="naturaleza"] .selector-pastilla,.selector[data-activo="politica"] .selector-pastilla{opacity:1}
.selector[data-activo="politica"] .selector-pastilla{transform:translateX(100%);background:var(--tinta-pol)}
@media(hover:hover){.selector a:not([aria-current="page"]):hover{color:var(--tinta);background:rgba(255,255,255,.55)}}

/* Las láminas que salen por el borde se cortan ahí: así el celular no achica la página para mostrarlas. */
main{overflow-x:clip}
.vista{display:none}
body[data-vista="inicio"] #inicio,body[data-vista="lista"] #lista,body[data-vista="texto"] #texto,body[data-vista="nada"] #nada{display:block}
.lamina{mix-blend-mode:multiply}

/* Hero */
.hero{padding:4px 0 56px}
.hero-grid{display:grid;gap:8px}
.hero-arte{position:relative;height:clamp(220px,64vw,290px)}
/* El grupo entero multiplica: así el papel de la lámina se funde aunque GSAP mueva la caja. */
.hero-arte:not(.hero-arte--foto){mix-blend-mode:multiply}
.hero-ave{position:absolute;right:4%;bottom:0;height:100%;width:auto;max-width:none;transform-origin:50% 96%}
.hero-arte--foto .hero-ave{right:0;height:88%}
.polaroid{position:absolute;left:0;bottom:4%;width:42%;max-width:230px;margin:0;background:var(--papel-claro);padding:9px 9px 36px;box-shadow:var(--sombra);transform:rotate(-4deg)}
.polaroid-foto{display:grid;place-items:center;aspect-ratio:4/5;background:linear-gradient(160deg,#cfc1a8,#a3937a)}
.polaroid figcaption{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-family:var(--f-titulo);font-style:italic;font-size:17px;color:var(--tinta-2)}
.cinta{position:absolute;top:-12px;left:50%;width:84px;height:26px;transform:translateX(-50%) rotate(3deg);background:rgba(222,205,165,.75);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.hero-nombre{margin:0;font-family:var(--f-titulo);font-weight:600;font-size:clamp(54px,15vw,112px);line-height:.9;letter-spacing:-.025em}
.hero-nombre .linea{display:block;overflow:hidden;padding-bottom:.08em}
.hero-nombre .linea>span{display:block}
.hero-nombre em{font-style:italic;font-weight:500;color:var(--monte-2)}
.hero-cred{margin:18px 0 0;font-size:12.5px;line-height:1.75;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3)}
.hero-cred span{display:block}
.hero-cred .sep{display:none}
.hero-cred .fao{margin-top:4px;max-width:30em;text-wrap:balance}
@media(min-width:560px){.hero-cred span{display:inline}.hero-cred .sep{display:inline}.hero-cred .fao{display:block}}
.hero-bajada{margin:16px 0 0;max-width:30em;font-size:19px;line-height:1.55;color:var(--tinta-2);text-wrap:pretty}
@media(min-width:1024px){
  .hero{padding:24px 0 72px}
  .hero-grid{grid-template-columns:1.15fr .85fr;align-items:center;gap:48px}
  .hero-arte{order:2;height:min(470px,58vh);min-height:380px}
  .hero-ave{right:14%;height:90%}
  .polaroid{left:-4%;bottom:5%;width:236px}
  .hero-bajada{font-size:20px}
}

/* Bandada lejana: cada pájaro cruza la franja de lado a lado, aleteando */
.bandada{position:absolute;left:0;top:8%;width:70%;height:46%;pointer-events:none}
.bandada i{position:absolute;left:0;right:0;top:calc(8% + var(--i) * 15%);height:12px;transform:translateX(calc(var(--i) * 22%))}
.bandada svg{display:block;width:calc(18px - var(--i) * 2px);height:auto;fill:none;stroke:var(--tinta-2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.55;transform-origin:50% 70%}
@media(min-width:1024px){.bandada{top:4%;width:62%}.bandada svg{width:calc(22px - var(--i) * 2px)}}

/* Elegir tema */
.puertas{padding:8px 0 96px}
.seccion-titulo{margin:0 0 24px;font-family:var(--f-titulo);font-weight:600;font-size:clamp(38px,9.5vw,68px);line-height:1;letter-spacing:-.015em;text-wrap:balance}
.puertas-grid{display:grid;gap:16px}
@media(min-width:768px){.puertas-grid{grid-template-columns:1fr 1fr;gap:24px}}
.puerta{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:540px;padding:24px;border:1px solid var(--linea);border-radius:8px;overflow:hidden;text-decoration:none;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,var(--sombra-suave);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.puerta:active{transform:scale(.985);transition-duration:.12s}
.puerta:focus-visible{outline:3px solid currentColor;outline-offset:4px}
.puerta--naturaleza{color:var(--monte);background:radial-gradient(500px 360px at 80% 10%,rgba(255,255,255,.55),transparent 70%),radial-gradient(420px 220px at 10% 110%,rgba(40,88,90,.12),transparent 70%),var(--monte-claro)}
.puerta--politica{color:var(--tinta-pol);background:radial-gradient(500px 360px at 80% 6%,rgba(255,255,255,.5),transparent 70%),var(--pol-claro)}
.puerta--politica::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--puntos);-webkit-mask-image:linear-gradient(#000 35%,rgba(0,0,0,.14) 72%);mask-image:linear-gradient(#000 35%,rgba(0,0,0,.14) 72%)}
/* El dibujo ocupa el lugar que deja el texto: nunca lo pisa. */
.puerta-arte{position:relative;flex:1 1 0;min-height:170px;margin:-10px -8px 14px}
.puerta-lamina{position:absolute;top:0;right:0;height:100%;aspect-ratio:736/903;mix-blend-mode:multiply;transform-origin:70% 100%;transition:transform .7s var(--ease)}
.puerta-lamina--pluma{top:6px;right:8%;height:88%;aspect-ratio:240/300}
.puerta-ave{width:100%;height:100%;mix-blend-mode:normal}
.pluma-meneo{display:block;width:100%;height:100%;transform-origin:50% 92%}
.puerta-nombre{margin:0;font-family:var(--f-titulo);font-weight:600;font-size:clamp(50px,13vw,80px);line-height:.95;letter-spacing:-.02em}
.puerta-desc{margin:8px 0 0;max-width:22em;font-size:17px;line-height:1.5;color:color-mix(in srgb,currentColor 82%,var(--tinta))}
.puerta-pie{display:flex;align-items:center;justify-content:space-between;margin-top:20px;padding-top:16px;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent);font-size:15.5px;font-weight:600}
.flecha{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:currentColor;box-shadow:0 2px 4px rgba(42,33,25,.18),0 8px 18px -8px rgba(42,33,25,.45);transition:transform .45s var(--ease)}
.flecha svg{width:22px;height:22px;fill:none;stroke:var(--papel-claro);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease)}
.puerta:active .flecha{transform:scale(.92)}
@media(hover:hover){
  .puerta:hover{transform:translateY(-6px);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,var(--sombra-alta);border-color:color-mix(in srgb,currentColor 30%,transparent)}
  .puerta:hover .puerta-lamina{transform:translateY(-6px) scale(1.03)}
  .puerta:hover .flecha{transform:translateX(6px)}
  .puerta:hover .flecha svg{transform:translateX(2px)}
}
@media(min-width:1024px){.puerta{min-height:610px;padding:36px}.puerta-arte{margin:-14px -12px 18px}}

/* Ondas del humedal a los pies del tuyuyú */
.ondas{position:absolute;left:53%;top:87%;width:56%;height:9%;transform:translate(-50%,-50%);pointer-events:none}
.ondas i{position:absolute;inset:0;border:1.2px solid var(--humedal);border-radius:50%;opacity:0}

/* El libro */
.libro-seccion{position:relative;background:var(--monte);color:#EFE6D2;padding:64px 0 88px}
.libro-seccion :focus-visible{outline-color:var(--oro)}
.ola{position:absolute;left:0;top:-38px;width:100%;height:40px;fill:var(--monte)}
.libro-grid{display:grid;gap:44px;align-items:center}
@media(min-width:1024px){.libro-seccion{padding:110px 0 130px}.libro-seccion--sin-boton{padding-bottom:110px}.libro-grid{grid-template-columns:.8fr 1.2fr;gap:88px}}
.libro-3d{display:grid;place-items:center;perspective:1400px}
.libro{position:relative;width:min(270px,66vw);aspect-ratio:2/3;border-radius:2px 6px 6px 2px;background:linear-gradient(90deg,rgba(0,0,0,.3),rgba(0,0,0,0) 5%,rgba(255,255,255,.07) 6%,rgba(0,0,0,0) 8%),#1E3324;transform:rotateY(-20deg) rotateX(4deg);box-shadow:-2px 2px 0 rgba(0,0,0,.15),18px 26px 50px -12px rgba(5,15,8,.6),40px 50px 90px -30px rgba(5,15,8,.5)}
.libro::after{content:"";position:absolute;z-index:-1;top:5px;bottom:5px;right:-9px;width:11px;border-radius:0 4px 4px 0;background:repeating-linear-gradient(90deg,#efe5d0 0 1px,#d4c6a8 1px 2px)}
.tapa{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:20px 18px 18px;text-align:center;outline:1px solid rgba(214,190,130,.45);outline-offset:-9px}
.tapa-autor{margin-top:6px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#D6BE82}
.tapa-ovalo{width:70%;aspect-ratio:3/4;margin:12px auto 10px;border-radius:50%;overflow:hidden;background:#EEE2C7;box-shadow:0 0 0 3px #1E3324,0 0 0 4px rgba(214,190,130,.7)}
.tapa-ovalo img{width:100%;height:100%;object-fit:contain;object-position:50% 60%;transform:scale(1.12) translate(5%,3%);mix-blend-mode:multiply}
.tapa-titulo{margin-top:auto;font-family:var(--f-titulo);font-weight:600;font-size:clamp(18px,5.4vw,23px);line-height:1.04;color:var(--oro)}
.tapa-editorial{margin-top:8px;font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(214,190,130,.8)}
.libro-titulo{margin:0;font-family:var(--f-titulo);font-weight:600;font-size:clamp(38px,9vw,64px);line-height:1;letter-spacing:-.015em;color:#F4EBD8;text-wrap:balance}
.libro-titulo em{font-weight:500;color:var(--oro)}
.libro-desc{margin:18px 0 0;max-width:34em;font-size:18.5px;line-height:1.6;color:rgba(239,230,210,.88);text-wrap:pretty}
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0;padding:22px 0;border-block:1px solid rgba(239,230,210,.2)}
.cifra b{display:block;font-family:var(--f-titulo);font-weight:600;font-size:clamp(42px,11.5vw,68px);line-height:1;font-variant-numeric:lining-nums tabular-nums;color:var(--oro)}
.cifra span{display:block;margin-top:6px;font-size:14px;line-height:1.35;color:rgba(239,230,210,.82)}
.libro-dato{display:flex;align-items:center;gap:18px;margin:0 0 28px}
.libro-seccion--sin-boton .libro-dato{margin-bottom:0}
.libro-dato p{margin:0;font-size:16px;line-height:1.55;color:rgba(239,230,210,.78)}
.sello-feria{flex:none;width:76px;height:76px;fill:none;stroke:var(--oro);stroke-width:1.6;transform:rotate(-9deg);opacity:.9}
.sello-feria .fino{stroke-width:.8}
.sello-feria text{fill:var(--oro);stroke:none;font:600 8.6px var(--f-texto);letter-spacing:.06em}
.sello-feria .dia{font:600 12.5px var(--f-texto);letter-spacing:.04em}
.sello-feria .anio{font:600 21px var(--f-titulo);font-variant-numeric:lining-nums;letter-spacing:.02em}
@media(min-width:1024px){.sello-feria{width:88px;height:88px}}

/* Botones */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border:1.5px solid transparent;border-radius:999px;font-weight:600;font-size:17px;text-decoration:none;transition:transform .15s var(--ease),background-color .25s,border-color .25s,box-shadow .25s}
.boton:active{transform:scale(.97)}
.boton svg{width:20px;height:20px;flex:none}
.boton--papel{background:#F3ECDF;color:var(--monte)}
.boton--tinta{background:var(--tinta);color:var(--papel-claro)}
.boton--borde{border-color:var(--tinta);color:var(--tinta)}
.boton--wa{background:#1E6E47;color:#fff}
.boton--fb{background:#1D4C93;color:#fff}
@media(hover:hover){
  .boton:hover{box-shadow:0 8px 18px -10px rgba(42,33,25,.45)}
  .boton--papel:hover{background:#fff}
  .boton--tinta:hover{background:#3B2F24}
  .boton--borde:hover{background:rgba(255,255,255,.6)}
  .boton--wa:hover{background:#185B3A}
  .boton--fb:hover{background:#173E79}
}
@media(max-width:767px){.boton{width:100%}}

/* Pie */
.pie{position:relative;background:var(--papel-hondo);border-top:1px solid var(--linea);padding:56px 0 calc(40px + env(safe-area-inset-bottom))}
.pie-grid{display:grid;gap:28px}
@media(min-width:1024px){.pie-grid{grid-template-columns:1fr auto;align-items:end;gap:64px}}
.pie-persona{display:flex;gap:16px;align-items:flex-start}
.pie-foto{flex:none;width:76px;height:76px;border-radius:50%;object-fit:cover;background:linear-gradient(160deg,#cfc1a8,#a3937a);border:3px solid var(--papel-claro);box-shadow:var(--sombra)}
.pie-nombre{margin:0;font-family:var(--f-titulo);font-weight:600;font-size:29px;line-height:1.05}
.pie-bio{margin:8px 0 0;max-width:34em;font-size:16.5px;color:var(--tinta-2)}
.pie-botones{display:flex;flex-wrap:wrap;gap:12px}
@media(min-width:768px){.pie-botones .boton{min-width:200px}}
.pie-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:40px;padding-top:20px;border-top:1px solid var(--linea);font-size:13.5px;color:var(--tinta-3)}

/* Lista de textos */
.lista{padding-bottom:96px}
.lista-cabeza{display:grid;grid-template-columns:1fr auto;align-items:end;gap:0 12px;padding-top:28px}
.lista-titulo{margin:0;font-family:var(--f-titulo);font-weight:600;font-size:clamp(58px,16.5vw,128px);line-height:.88;letter-spacing:-.03em;color:var(--titulo-tema)}
.lista-cuenta{margin:12px 0 0;font-size:15.5px;color:var(--tinta-2)}
.lista-arte{position:relative;width:clamp(96px,26vw,206px);height:clamp(130px,36vw,290px)}
.arte-capa{position:absolute;inset:0;display:flex;justify-content:flex-end;align-items:flex-end}
.lista-ave{height:100%;width:auto;max-width:none;transform-origin:50% 96%}
.arte--politica{opacity:0}
body[data-tema="politica"] .arte--naturaleza{opacity:0}
body[data-tema="politica"] .arte--politica{opacity:1}
.pluma{position:absolute;right:2%;bottom:12%;width:78%;height:100%;transform-origin:50% 92%;transform:rotate(24deg);overflow:visible}
.trazo{position:absolute;right:0;bottom:0;width:88%;height:22%;overflow:visible}
.trazo path{fill:none;stroke:var(--tinta-pol);stroke-width:2.4;stroke-linecap:round}
.lista-borde{grid-column:1/-1;position:relative;height:64px;margin-top:14px}
.horizonte{position:absolute;left:0;bottom:0;width:100%;height:64px;overflow:visible}
.horizonte svg{overflow:visible}
.horizonte path,.horizonte line{fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.h-monte path{stroke:var(--monte)}
.h-pastizal path{stroke:var(--pastizal)}
.h-humedal path{stroke:var(--humedal)}
.horizonte .h-totora{fill:var(--humedal);stroke:none}
.horizonte .h-tierra{stroke:var(--tinta);stroke-width:1.6}
.mata,.junco{transform-box:fill-box;transform-origin:50% 100%}
.regla{display:none;position:absolute;left:0;right:0;bottom:0;height:6px;border-top:2.5px solid var(--tinta-pol);border-bottom:1px solid var(--tinta-pol)}
body[data-tema="politica"] .horizonte{display:none}
body[data-tema="politica"] .regla{display:block}
body[data-tema="politica"] .lista-borde{height:22px}

.entradas{margin:8px 0 0;padding:0;list-style:none}
.entrada a{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr auto;grid-template-areas:"fecha min" "cuerpo cuerpo";gap:6px 16px;padding:24px 0;border-bottom:1px solid var(--linea);text-decoration:none;outline:none}
.entrada a::before{content:"";position:absolute;inset:6px -12px;z-index:-1;border-radius:12px;background:var(--papel-claro);box-shadow:var(--sombra-suave);opacity:0;transform:scale(.985);transition:opacity .35s var(--ease),transform .35s var(--ease),box-shadow .2s}
.entrada a:active::before{opacity:1;transform:scale(.99);transition-duration:.08s}
.entrada a:focus-visible::before{opacity:1;transform:none;box-shadow:0 0 0 2.5px var(--acento),var(--sombra-suave)}
.e-fecha,.e-min{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-3);font-variant-numeric:tabular-nums}
.e-fecha{grid-area:fecha}
.e-min{grid-area:min;text-align:right}
.e-cuerpo{grid-area:cuerpo;transition:transform .45s var(--ease)}
.e-serie{display:block;margin-bottom:2px;font-family:var(--f-titulo);font-style:italic;font-weight:600;font-size:19px;color:var(--acento-2)}
.e-titulo{margin:0;font-family:var(--f-titulo);font-weight:600;font-size:clamp(28px,7.4vw,40px);line-height:1.04;letter-spacing:-.012em;text-wrap:balance;transition:color .3s}
.e-bajada{margin:8px 0 0;max-width:40em;font-size:17px;line-height:1.55;color:var(--tinta-2);text-wrap:pretty}
.e-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.e-tambien{margin:0;font-size:14.5px;color:var(--tinta-3)}
.e-tambien::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--pol);vertical-align:1px}
body[data-tema="politica"] .e-tambien::before{background:var(--monte-2)}
.e-ir{display:grid;place-items:center;flex:none;width:42px;height:42px;border:1.5px solid color-mix(in srgb,var(--acento) 55%,transparent);border-radius:50%;color:var(--acento);transition:transform .4s var(--ease),background-color .3s,border-color .3s,color .3s}
.e-ir svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.entrada a:active .e-ir,.entrada a:focus-visible .e-ir{background:var(--acento);border-color:var(--acento);color:var(--papel-claro)}
.entrada.elegida a::before{opacity:1;transform:none;transition:none}
.entrada.recien a::before{animation:recien 2.4s var(--ease) both}
@keyframes recien{0%{opacity:0;transform:scale(.985)}18%,55%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@media(min-width:1024px){
  .entrada a{grid-template-columns:150px 1fr 110px;grid-template-areas:"fecha cuerpo min";column-gap:40px;padding:34px 0}
  .entrada a::before{inset:10px -24px}
  .e-fecha,.e-min{padding-top:12px}
  .e-ir{position:absolute;right:0;bottom:34px}
}
@media(hover:hover){
  .entrada a:hover::before{opacity:1;transform:none}
  .entrada a:hover .e-cuerpo{transform:translateX(6px)}
  .entrada a:hover .e-titulo{color:var(--acento)}
  .entrada a:hover .e-ir{background:var(--acento);border-color:var(--acento);color:var(--papel-claro);transform:translateX(4px)}
}

/* Texto abierto */
.texto{padding:20px 0 96px}
.texto-envase{width:min(700px,100% - 32px);margin-inline:auto}
.volver{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding-right:10px;font-size:16px;font-weight:600;color:var(--acento);text-decoration:none;text-underline-offset:4px}
.volver svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.volver:active{opacity:.7}
@media(hover:hover){.volver:hover{text-decoration:underline}.volver:hover svg{transform:translateX(-4px)}}
.t-serie{display:block;margin-top:20px;font-family:var(--f-titulo);font-style:italic;font-weight:600;font-size:21px;line-height:1.35;color:var(--acento-2)}
.t-titulo{margin:6px 0 0;font-family:var(--f-titulo);font-weight:600;font-size:clamp(42px,11vw,70px);line-height:.98;letter-spacing:-.022em;text-wrap:balance}
.t-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px;padding:10px 0;border-block:1px solid var(--linea)}
.t-datos{display:flex;flex-direction:column;gap:2px;margin:0;font-size:15px;line-height:1.4;color:var(--tinta-2)}
@media(min-width:560px){.t-datos{flex-direction:row;gap:18px}}
.herramientas{display:flex;flex:none;gap:2px;padding:3px;border:1px solid var(--linea-fuerte);border-radius:999px;background:rgba(255,255,255,.4)}
.herramientas button{display:inline-flex;align-items:center;justify-content:center;gap:1px;width:46px;height:44px;border-radius:999px;font-family:var(--f-titulo);font-weight:700;font-size:20px;line-height:1;transition:transform .15s var(--ease),background-color .2s,opacity .2s}
.herramientas button[data-letra="-1"]{font-size:16px}
.herramientas button span{font-family:var(--f-texto);font-weight:600;font-size:.7em}
.herramientas button:active{transform:scale(.9);background:var(--papel-claro)}
.herramientas button:disabled{opacity:.3;cursor:default;transform:none}
.herramientas button:focus-visible{outline-offset:0}
@media(hover:hover){.herramientas button:not(:disabled):hover{background:var(--papel-claro);box-shadow:0 1px 3px rgba(42,33,25,.15)}}
.t-titulo .palabra{display:inline-block}
.t-cuerpo{margin-top:32px;font-size:var(--tam-lectura);line-height:1.72}
.t-cuerpo p{margin:0 0 1.1em;text-wrap:pretty}
.t-cuerpo p:first-child::first-letter{float:left;margin:.07em .1em 0 0;font-family:var(--f-titulo);font-weight:600;font-size:4.5em;line-height:.8;color:var(--capitular)}
.t-cuerpo blockquote{margin:1.5em 0;padding-left:22px;border-left:3px solid var(--acento);font-family:var(--f-titulo);font-style:italic;font-weight:500;font-size:1.55em;line-height:1.18}
.t-cuerpo h2{margin:1.6em 0 .5em;font-family:var(--f-titulo);font-weight:600;font-size:1.45em;line-height:1.1}
.t-cuerpo figure{margin:1.6em 0}
.t-cuerpo figure img{width:100%;height:auto;border-radius:4px;box-shadow:var(--sombra)}
.t-cuerpo figcaption{margin-top:10px;font-size:.78em;font-style:italic;color:var(--tinta-3)}
.t-cuerpo a{color:var(--acento);text-underline-offset:3px}
.t-portada{margin:28px 0 0}
.t-portada img{width:100%;height:auto;border-radius:4px;box-shadow:var(--sombra)}
.t-fin{display:block;width:200px;height:auto;margin:44px auto 0;overflow:visible;fill:var(--tinta-2)}
.fin-trazo{fill:none;stroke:var(--tinta-3);stroke-width:1.2;stroke-linecap:round}
.t-fin .garza-patas{fill:none;stroke:var(--tinta-2);stroke-width:5;stroke-linecap:round}
.t-fin .ala-lejos{opacity:.45}
.fin-pluma{fill:rgba(30,42,54,.08);stroke:var(--tinta-pol);stroke-width:1.1}
.fin-cana{fill:none;stroke:var(--tinta-pol);stroke-width:1.2;stroke-linecap:round}
.firma{margin:28px 0 0;font-family:var(--f-titulo);font-style:italic;font-size:23px;line-height:1.3;color:var(--tinta-2)}
.compartir{display:grid;gap:12px;margin-top:40px}
@media(min-width:560px){.compartir{grid-template-columns:1fr 1fr}}
.siguientes{display:grid;gap:12px;margin-top:48px}
@media(min-width:768px){.siguientes{grid-template-columns:1fr 1fr}}
.siguiente{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 18px 20px 22px;border:1px solid var(--linea-fuerte);border-radius:12px;background:rgba(251,247,239,.55);text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s,background-color .3s}
.siguiente:active{transform:scale(.985);transition-duration:.1s}
.siguiente small{display:block;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-3)}
.siguiente strong{display:block;margin-top:6px;font-family:var(--f-titulo);font-weight:600;font-size:26px;line-height:1.08;text-wrap:balance}
.sig-flecha{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1.5px solid color-mix(in srgb,var(--acento) 55%,transparent);border-radius:50%;color:var(--acento);transition:transform .4s var(--ease),background-color .3s,color .3s}
.sig-flecha svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){
  .siguiente:hover{transform:translateY(-3px);border-color:var(--acento);background:var(--papel-claro);box-shadow:var(--sombra-suave)}
  .siguiente:hover .sig-flecha{background:var(--acento);color:var(--papel-claro);transform:translateX(3px)}
}
.progreso{position:fixed;top:0;left:0;right:0;z-index:30;height:3px;background:var(--acento);transform-origin:0 50%;transform:scaleX(0)}
body:not([data-vista="texto"]) .progreso{display:none}

/* No encontramos */
.lista-mas{display:flex;width:fit-content;margin:40px auto 0}
.lista-vacia{padding:40px 0;font-size:18px;color:var(--tinta-2)}
.nada{padding:56px 0 120px}
.nada-botones{display:grid;gap:12px;max-width:560px;margin-top:28px}
@media(min-width:560px){.nada-botones{grid-template-columns:1fr 1fr}}

/* Hoja del cuaderno que pasa entre temas, y el ave que cruza */
.hoja{position:fixed;inset:0;z-index:50;pointer-events:none;visibility:hidden;--hoja-color:var(--papel);--hoja-tinta:var(--tinta)}
.hoja[data-destino="naturaleza"]{--hoja-color:var(--hoja-nat);--hoja-tinta:var(--monte)}
.hoja[data-destino="politica"]{--hoja-color:var(--diario);--hoja-tinta:var(--tinta-pol)}
.hoja-papel{position:absolute;inset:0;display:grid;place-items:center;background:
  linear-gradient(90deg,transparent 46px,rgba(142,58,43,.28) 46px,rgba(142,58,43,.28) 47.5px,transparent 47.5px),
  linear-gradient(rgba(42,33,25,.055) 1px,transparent 1px) 0 0/100% 28px,
  linear-gradient(90deg,rgba(42,33,25,.045) 1px,transparent 1px) 0 0/28px 100%,
  var(--hoja-color)}
.hoja-papel::before,.hoja-papel::after{content:"";position:absolute;top:0;bottom:0;width:48px;pointer-events:none}
.hoja-papel::before{right:100%;background:linear-gradient(to left,rgba(42,33,25,.22),transparent)}
.hoja-papel::after{left:100%;background:linear-gradient(to right,rgba(42,33,25,.22),transparent)}
.hoja-titulo{position:relative;margin:0;padding:0 24px;font-family:var(--f-titulo);font-style:italic;font-weight:600;font-size:clamp(58px,17vw,132px);line-height:1;letter-spacing:-.02em;color:var(--hoja-tinta);text-align:center}
.hoja-titulo span{display:inline-block;white-space:pre}
.hoja-pluma{position:absolute;left:0;top:0;width:clamp(56px,13vw,96px);height:clamp(70px,16vw,120px);opacity:0}
.vuelo{position:fixed;left:0;top:0;z-index:51;width:clamp(130px,28vw,230px);pointer-events:none;visibility:hidden;color:var(--tinta)}
.garza{display:block;width:100%;height:auto;overflow:visible;fill:currentColor}
.garza .ala-lejos{opacity:.45}
.garza-patas{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.garza .ala{transform-box:fill-box;transform-origin:78% 100%}

/* Movimiento chico y en bucle: solo con movimiento permitido, y quieto cuando no se ve */
@media(prefers-reduced-motion:no-preference){
  .bandada i{animation:bandada-cruza calc(30s + var(--i) * 3s) linear infinite;animation-delay:calc(var(--i) * -7.5s)}
  .bandada svg{animation:aleteo-lejos calc(.8s + var(--i) * .07s) ease-in-out infinite alternate}
  .hero-ave{animation:mecer 7s ease-in-out infinite alternate}
  .ondas i{animation:onda 4.2s cubic-bezier(.2,.6,.3,1) infinite}
  .ondas i:nth-child(2){animation-delay:1.4s}
  .ondas i:nth-child(3){animation-delay:2.8s}
  .pluma-meneo{animation:meneo 6s ease-in-out infinite alternate}
  .mata,.junco{animation:mata 4.6s ease-in-out infinite alternate}
  .mata:nth-child(2n),.junco:nth-child(2n){animation-duration:5.4s;animation-delay:-1.8s}
  .vuelo.activa .ala{animation:aleteo .38s ease-in-out infinite alternate}
  [data-vivo].quieto *,[data-vivo].quieto{animation-play-state:paused}
}
@keyframes bandada-cruza{
  0%{transform:translate3d(-14%,6px,0);opacity:0}
  8%{opacity:1}
  50%{transform:translate3d(45%,-8px,0)}
  90%{opacity:1}
  100%{transform:translate3d(108%,2px,0);opacity:0}
}
@keyframes aleteo-lejos{from{transform:scaleY(1)}to{transform:scaleY(.35)}}
@keyframes mecer{from{transform:rotate(-.7deg)}to{transform:rotate(.7deg)}}
@keyframes onda{0%{transform:scale(.25);opacity:0}15%{opacity:.6}100%{transform:scale(1.15);opacity:0}}
@keyframes meneo{from{transform:rotate(-2deg)}to{transform:rotate(2.5deg)}}
@keyframes mata{from{transform:rotate(-2.5deg)}to{transform:rotate(3deg)}}
@keyframes aleteo{from{transform:scaleY(1)}to{transform:scaleY(-.55)}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation:none!important}}

/* Agregados del sitio real */
.polaroid-foto img{width:100%;height:100%;object-fit:cover}
.tapa-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* Navegación sin recarga: el título recibe el foco sin marco */
main h1[tabindex="-1"]:focus{outline:none}