/* =====================================================================
   DOS MATERIALES. La app es la mesa de trabajo de una excavacion.
   - ROCA (:root): el mundo. Titulos tallados (Cinzel) y notas a carbon (Gochi Hand).
   - PAPEL: lo que escribio el paleontologo. Tinta sobre hoja vieja.
   Las mismas variables (--paper, --ink, --line...) valen una cosa sobre la
   roca y otra dentro de una hoja, asi que una regla escrita con ellas sirve
   en los dos sitios. No hay tema claro ni oscuro: son objetos fisicos, y un
   objeto no cambia de color con el sistema operativo.
   ===================================================================== */
  /* los lados cuentan con el teléfono en horizontal: la cámara del borde queda a izquierda o derecha */
  :root{color-scheme:dark; box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
    padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px);
    --roca:#221f1b;
    --paper:#221f1b; --paper-2:#2c2823; --paper-3:#3d362e;
    --ink:#ece1c8; --ink-soft:#c6b99d; --ink-mute:#978a71;
    --accent:#e2854a; --ink2:#9db6cf; --fern:#7bab8c; --jura:#5f9a78; --trias:#a888b6; --cuaternario:#7fc4e8;
    --cambrico:#c890b6; --ordovicico:#7fa9d6; --silurico:#88b4d0; --devonico:#6fc0c0; --carbonifero:#8cc06a; --permico:#d78a5c; --paleogeno:#a898d6; --neogeno:#84b884;
    --line:#51473a; --good:#86b592; --bad:#d97a68;
    --human:#7fc2a8; --bus:#8a7b62; --grid:rgba(236,225,200,.07); --water:rgba(110,175,225,.16);
    --paper-rgb:34,31,27; --ink-rgb:236,225,200;
    --shadow-1:0 1px 2px rgba(0,0,0,.35), 0 1px 0 rgba(0,0,0,.2);
    --shadow-2:0 4px 8px rgba(0,0,0,.3), 0 14px 28px rgba(0,0,0,.4);
    --shadow:var(--shadow-1);
    --lift:0 24px 64px rgba(0,0,0,.6), 0 4px 16px rgba(0,0,0,.4);
    --cat-dino:#e2854a; --cat-ptero:#8fb4d9; --cat-marine:#5fc2cc; --cat-croc:#c9c25a; --cat-mammal:#d9a15f; --cat-all:#e2854a;
    --cat-fish:#6fb3c4; --cat-synapsid:#d69a5c; --cat-amphibian:#8fc07a; --cat-bird:#e0a05f; --cat-reptile:#b6c46a; --cat-arthropod:#c98bad;
    /* papel y tinta: constantes, valen igual en todas las hojas */
    --tinta:#2b2620; --tinta-suave:rgba(43,38,32,.76); --tinta-tenue:rgba(43,38,32,.52); --lapiz:#4a453c; --rojo:#8f3520;
    --grano:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='gt'><feTurbulence type='fractalNoise' baseFrequency='.9 .45' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23gt)' opacity='.5'/></svg>");
    --hoja-a:radial-gradient(70% 50% at 25% 12%, rgba(255,246,222,.55), transparent 70%), linear-gradient(168deg,#ded0ae,#cdbb93 55%,#b8a377);
    --hoja-b:radial-gradient(60% 45% at 70% 30%, rgba(255,248,228,.4), transparent 72%), linear-gradient(174deg,#e2d7ba,#d0c29c 50%,#bcab84);
    /* tres voces: tallado en la roca, titulo a carbon, nota a carbon */
    --f-talla:'Cinzel',Georgia,serif; --f-mano:'Rock Salt','Gochi Hand',cursive; --f-nota:'Gochi Hand','Segoe Print',cursive;
  }
  /* Rock Salt se declara aca y no en el enlace de Google Fonts: dibuja un 37% mas
     ancho que la letra a la que estan medidos todos los tamanos, y size-adjust la
     achica una sola vez en vez de retocar cada regla que usa --f-mano. */
  @font-face{font-family:'Rock Salt'; font-style:normal; font-weight:400; font-display:swap; size-adjust:73%;
    src:url(https://fonts.gstatic.com/s/rocksalt/v24/MwQ0bhv11fWD6QsAVOZrt0M6.woff2) format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
  /* dentro de una hoja: tinta sobre papel */
  .cat-card,.dossier,.specimen-card,.summary-card,.expo-tile,.option-btn,.es-op,.feedback,
  .mapa,.tr-papeleta,.tr-info,.tr-ficha,.es-caja,.es-veredicto,.ru-item,.cmp-resumen,.cmp-escala,.mu-hoja{
    --paper:#e3d6b3; --paper-2:#d8caa5; --paper-3:#c4b38a;
    --ink:#2b2620; --ink-soft:#5f4e35; --ink-mute:#7c6e55;
    --accent:#8f3520; --ink2:#2d4256; --fern:#3f6b52; --jura:#3f6b52; --trias:#7d5a8c; --cuaternario:#3d6e82;
    --cambrico:#8a4a72; --ordovicico:#3f6f9a; --silurico:#4a6f8a; --devonico:#2d6b6b; --carbonifero:#2a4a22; --permico:#8a4a2a; --paleogeno:#6b5a9c; --neogeno:#4a7a4a;
    --line:#a8946a; --good:#3f6b52; --bad:#a13b2e;
    --human:#2f6f5b; --bus:#9a8a6e; --grid:rgba(36,26,16,.1); --water:rgba(64,130,190,.2);
    --paper-rgb:227,214,179; --ink-rgb:43,38,32;
    --cat-dino:#b1481a; --cat-ptero:#3f5f80; --cat-marine:#186269; --cat-croc:#67641f; --cat-mammal:#7c4d22; --cat-all:#b1481a;
    --cat-fish:#2d5f6b; --cat-synapsid:#8a5a2b; --cat-amphibian:#4a6b3f; --cat-bird:#8c5520; --cat-reptile:#5d6b2a; --cat-arthropod:#6b3050;
    color:var(--tinta); font-family:var(--f-nota); color-scheme:light;
  }
  *{box-sizing:border-box;}
  html{scroll-padding-top:env(safe-area-inset-top,0px)}
  img{max-width:100%}
  [hidden]:not([hidden=until-found i]){display:none!important}
  /* la roca: grano fino y los planos de estratificacion cruzandola casi en horizontal */
  body{margin:0; font:400 1rem/1.5 var(--f-nota); color:var(--ink);
    padding-inline:20px; padding-block:26px 64px;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='rc'><feTurbulence type='fractalNoise' baseFrequency='.42 .95' numOctaves='4' seed='11'/><feColorMatrix values='0 0 0 0 .93 0 0 0 0 .88 0 0 0 0 .78 0 0 0 .17 0'/></filter><rect width='320' height='320' filter='url(%23rc)'/></svg>"),
      repeating-linear-gradient(179.4deg, transparent 0 150px, rgba(0,0,0,.2) 150px 152px, rgba(236,225,200,.018) 152px 290px,
        rgba(0,0,0,.14) 290px 291px, transparent 291px 470px, rgba(236,225,200,.028) 470px 560px,
        rgba(0,0,0,.24) 560px 563px, rgba(0,0,0,.05) 563px 760px, transparent 760px 940px),
      var(--roca);
  }
  h1,h2,h3{font-family:var(--f-talla); font-weight:700; letter-spacing:.02em; text-wrap:balance; margin:0;}
  a{color:inherit;}
  button{font:inherit;}
  .wrap{max-width:820px; margin-inline:auto;}
  .mono{font-variant-numeric:tabular-nums;}

  /* ---------- cabecera: el nombre tallado y, debajo, un surco ---------- */
  .topbar{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;
    padding-bottom:13px; margin-bottom:22px; border-bottom:2px solid #0c0a08; box-shadow:0 1px 0 rgba(236,225,200,.13);}
  .brand{display:flex; align-items:center; gap:12px; background:none; border:0; padding:0; color:inherit; text-align:left; cursor:pointer;}
  .brand-mark{width:36px; height:36px; flex:none; color:var(--accent);}
  .brand-mark svg{display:block; width:100%; height:100%;}
  .brand h1{font-size:1.6rem;}
  .brand-sub{margin:0; font-size:.95rem; line-height:1.2; color:var(--ink-soft);}
  .stats{display:flex; gap:22px;}
  .stat{display:flex; flex-direction:column; align-items:flex-end;}
  .stat-label{font-size:.88rem; line-height:1.2; color:var(--ink-mute);}
  .stat-value{font-family:var(--f-mano); font-size:1.45rem; line-height:1; color:var(--accent);}

  .screen{animation:rise .35s ease both;}
  @keyframes rise{from{opacity:.001; transform:translateY(6px);} to{opacity:1; transform:none;}}
  @media (prefers-reduced-motion: reduce){ .screen{animation:none;} *{transition:none !important;} }

  .intro{color:var(--ink-soft); margin:0 0 18px; max-width:60ch; line-height:1.55;}
  /* rotulo de seccion: una nota corta, a tiza sobre la roca o a tinta dentro de una hoja */
  .eyebrow{display:inline-block; font-size:.95rem; color:var(--ink-mute);}
  /* los titulos de pantalla van tallados: sombra arriba, filo de luz abajo */
  .brand h1,.catalog-head h2{text-shadow:0 -1px 0 rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.09);}

  /* ---------- inicio ---------- */
  /* la repisa: una laja de roca con los especimenes del campo puestos encima */
  .drawer{position:relative; display:grid; grid-template-columns:repeat(var(--cajon,8), minmax(0,1fr)); align-items:end; gap:6px;
    background:var(--paper-2); padding:18px 16px 12px; margin-bottom:22px; box-shadow:inset 0 0 46px rgba(0,0,0,.55);
    clip-path:polygon(0 3%, 7% 0, 31% 2%, 58% 0, 86% 2.5%, 100% 0, 99.4% 34%, 100% 71%, 99% 100%, 71% 98%, 44% 100%, 15% 97.5%, 0 100%, .7% 62%);}
  .drawer::after{content:""; position:absolute; left:16px; right:16px; bottom:11px; border-bottom:2px solid rgba(var(--ink-rgb),.3);}
  .drawer img{width:100%; height:64px; object-fit:contain; object-position:bottom; display:block; position:relative; z-index:1;}
  @media (max-width:560px){ .drawer{grid-template-columns:repeat(4, minmax(0,1fr)); row-gap:14px;} .drawer::after{display:none;} }

  /* ---- el inicio es de piedra ----
     Sobre el paisaje real del campo, las entradas son piedras: el texto va tallado y el signo, pintado
     en ocre rojo como en un abrigo rupestre. La superficie no es una imagen: es ruido fractal iluminado
     de lado (feDiffuseLighting), teñido con el color de cada piedra (--c) y oscurecido hacia los bordes
     para darle bulto. */
  #screen-home{--relieve:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400'><filter id='pi' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.011 .019' numOctaves='5' seed='4'/><feDiffuseLighting lighting-color='white' surfaceScale='3.2' diffuseConstant='1.12'><feDistantLight azimuth='235' elevation='57'/></feDiffuseLighting></filter><rect width='600' height='400' filter='url(%23pi)'/></svg>");
    /* letra tallada: el surco es mas oscuro que la piedra y deja ver su grano; el labio de arriba queda en
       sombra y el de abajo recoge la luz, que viene de arriba a la izquierda igual que en el relieve */
    --surco:rgba(26,19,12,.8);
    --talla:-.5px -1px 1px rgba(0,0,0,.55), .6px 1.2px 0 rgba(255,250,235,.5);
    --talla-fina:0 -1px 0 rgba(0,0,0,.36), 0 1px 0 rgba(255,250,235,.44);}
  /* los dos juegos: dos lajas grandes */
  .mode-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; filter:drop-shadow(0 12px 9px rgba(0,0,0,.6));}
  @media (max-width:560px){ .mode-grid{grid-template-columns:1fr;} }
  .mode-card{--c:#a89b82; position:relative; text-align:left; border:0; cursor:pointer; padding:26px 26px 24px;
    display:flex; flex-direction:column; gap:9px; color:var(--surco); font-family:var(--f-talla);
    background:radial-gradient(120% 130% at 26% 14%, rgba(255,250,235,.26) 0%, transparent 40%, rgba(0,0,0,.48) 100%), var(--relieve) center/cover, var(--c);
    background-blend-mode:normal, multiply, normal;
    clip-path:polygon(1% 8%, 6% 1%, 22% 3%, 41% 0, 63% 2.5%, 82% 0, 96% 3%, 100% 16%, 98.5% 45%, 100% 74%, 97% 95%, 85% 100%, 61% 97.5%, 38% 100%, 16% 97%, 3% 99%, 0 80%, 1.5% 50%, 0 26%); transition:transform .16s ease;}
  .mode-card-clue{--c:#99907f; cursor:default;
    clip-path:polygon(0 5%, 9% 0, 28% 2.5%, 50% 0, 71% 3%, 91% 0, 100% 9%, 98% 38%, 100% 66%, 98.5% 93%, 90% 100%, 66% 97%, 45% 100%, 21% 97.5%, 5% 100%, 0 88%, 2% 58%, 0 31%);}
  button.mode-card:hover{transform:translateY(-3px);}
  .mode-card h2{font-family:var(--f-talla); font-weight:800; font-size:clamp(1.4rem, 1.8vw, 2rem); letter-spacing:.04em; line-height:1.1;
    color:var(--surco); text-shadow:var(--talla);}
  .mode-card p{margin:0; font-weight:700; font-size:.92rem; letter-spacing:.03em; line-height:1.55; text-shadow:var(--talla-fina);}
  .mode-cta{margin-top:auto; align-self:flex-start; font-weight:800; font-size:1rem; letter-spacing:.06em;
    color:rgba(112,36,18,.92); text-shadow:var(--talla-fina);}
  /* la dificultad: tres rebajes labrados en la laja, con nombre de carnivoro, de menor a mayor */
  .diff-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}
  .diff-btn{flex:1 1 0; min-width:96px; cursor:pointer; text-align:center; padding:9px 6px 8px;
    display:flex; flex-direction:column; gap:1px; font-family:var(--f-talla);
    background:rgba(20,15,10,.13); border:0; border-radius:3px;
    box-shadow:inset 0 2px 4px rgba(0,0,0,.48), inset 0 -1px 0 rgba(255,250,235,.22), 0 1px 0 rgba(255,250,235,.3);}
  .diff-btn:hover{background:rgba(255,250,235,.2);}
  .diff-name{font-weight:800; font-size:.9rem; letter-spacing:.03em; color:var(--surco); text-shadow:var(--talla-fina);}
  .diff-label{font-weight:700; font-size:.74rem; line-height:1.2; letter-spacing:.07em; text-shadow:var(--talla-fina);}
  .diff-baja{color:#2a523c;}
  .diff-media{color:#674509;}
  .diff-alta{color:#7f2a17;}
  /* la misma dificultad, como sello sobre la hoja de la partida */
  .diff-chip{font-family:var(--f-mano); font-size:.92rem; padding:0 8px; border:1.5px solid currentColor; border-radius:2px; transform:rotate(-2deg);}
  .diff-chip[data-diff="baja"]{color:var(--good);}
  .diff-chip[data-diff="media"]{color:#8a5f1a;}
  .diff-chip[data-diff="alta"]{color:var(--bad);}

  /* los cinco accesos: cantos rodados con su signo en ocre */
  .home-links{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px 20px; margin-top:30px;
    filter:drop-shadow(0 10px 7px rgba(0,0,0,.6));}
  .catalog-link{--c:#ab9e85; position:relative; display:grid; grid-template-columns:auto 1fr; align-items:center; align-content:center;
    gap:8px 12px; min-height:150px; padding:20px 26px 22px 24px; text-align:left; cursor:pointer; border:0;
    color:var(--surco); font-family:var(--f-talla);
    background:radial-gradient(120% 130% at 30% 18%, rgba(255,250,235,.26) 0%, transparent 40%, rgba(0,0,0,.48) 100%), var(--relieve) center/cover, var(--c);
    background-blend-mode:normal, multiply, normal;
    clip-path:polygon(4% 22%, 12% 6%, 31% 1%, 55% 4%, 78% 0, 93% 9%, 99% 30%, 97% 62%, 100% 82%, 90% 96%, 68% 100%, 44% 96%, 22% 100%, 7% 91%, 0 66%, 2% 42%); transition:transform .15s ease;}
  .catalog-link:nth-child(3n+2){--c:#96928a;
    clip-path:polygon(2% 30%, 9% 9%, 26% 3%, 48% 0, 70% 5%, 90% 2%, 98% 20%, 100% 55%, 96% 84%, 84% 98%, 60% 95%, 38% 100%, 15% 96%, 3% 82%, 0 55%);}
  .catalog-link:nth-child(3n){--c:#a48a6c;
    clip-path:polygon(6% 12%, 24% 0, 46% 5%, 66% 1%, 88% 7%, 100% 26%, 97% 52%, 100% 78%, 91% 95%, 70% 100%, 49% 94%, 27% 99%, 8% 93%, 0 70%, 3% 38%);}
  .catalog-link:nth-child(4){--c:#8c9182;}
  .catalog-link:hover{transform:translateY(-3px);}
  .catalog-link svg{width:38px; height:38px; fill:none; stroke:#8a2f1b; stroke-width:3.4;
    stroke-linecap:round; stroke-linejoin:round; opacity:.86;}
  .cl-txt{display:contents;}
  .catalog-link strong{font-weight:800; font-size:1.04rem; letter-spacing:.04em; line-height:1.2; text-shadow:var(--talla);}
  .cl-txt > span{grid-column:1 / -1; font-weight:700; font-size:.76rem; letter-spacing:.03em; line-height:1.45; text-shadow:var(--talla-fina);}
  :where(button,a,input,select):focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  /* lo recortado con clip-path no puede llevar outline (se recortaria con el): el foco va por dentro */
  .mode-card:focus-visible,.catalog-link:focus-visible{outline:none; box-shadow:inset 0 0 0 3px var(--rojo);}

  /* ---------- periodo: el color de su estrato, como una franja al margen ---------- */
  .period-tag{position:relative; display:inline-flex; align-items:center; font-size:.9rem; line-height:1.3;
    padding:1px 9px 1px 12px; color:var(--ink); background:color-mix(in srgb, var(--ink-soft) 12%, transparent);
    white-space:nowrap; --pc:var(--ink-soft);}
  .period-tag::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--pc);}
  .period-tag[data-period="Jurásico"]{--pc:var(--jura);}
  .period-tag[data-period="Cretácico"]{--pc:var(--accent);}
  .period-tag[data-period="Triásico"]{--pc:var(--trias);}
  .period-tag[data-period="Cuaternario"]{--pc:var(--cuaternario);}
  .period-tag[data-period="Cámbrico"]{--pc:var(--cambrico);}
  .period-tag[data-period="Ordovícico"]{--pc:var(--ordovicico);}
  .period-tag[data-period="Silúrico"]{--pc:var(--silurico);}
  .period-tag[data-period="Devónico"]{--pc:var(--devonico);}
  .period-tag[data-period="Carbonífero"]{--pc:var(--carbonifero);}
  .period-tag[data-period="Pérmico"]{--pc:var(--permico);}
  .period-tag[data-period="Paleógeno"]{--pc:var(--paleogeno);}
  .period-tag[data-period="Neógeno"]{--pc:var(--neogeno);}

  /* ---------- partida ---------- */
  /* la cuenta de la ronda: palotes, como en un hueso tallado. El quinto cruza a los cuatro anteriores */
  .progress-dots{display:flex; align-items:center; gap:9px; height:26px; margin-bottom:16px; padding-left:2px;}
  .progress-dots span{width:3px; height:20px; border-radius:2px; background:var(--ink-mute); opacity:.55; transform:rotate(7deg);}
  .progress-dots span:nth-child(odd){transform:rotate(-4deg);}
  .progress-dots span:nth-child(5n){height:46px; margin:0 26px 0 -31px; transform:rotate(-66deg);}
  .progress-dots span.done{background:var(--ink); opacity:1;}
  .progress-dots span.current{background:var(--accent); opacity:1;}
  /* la hoja del especimen */
  .specimen-card{position:relative; padding:20px 24px 22px; margin-bottom:18px;
    background:var(--grano), var(--hoja-a); background-blend-mode:multiply, normal, normal;}
  .specimen-card-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
  .specimen-id{font-size:.98rem; color:var(--tinta-tenue);}
  .specimen-art{position:relative; display:flex; align-items:flex-end; justify-content:center;
    height:clamp(190px, 42vw, 300px); padding:6px 4% 0; border-bottom:2px solid rgba(43,38,32,.42);}
  .specimen-art::after{content:""; position:absolute; left:18%; right:18%; bottom:-3px; height:10px; border-radius:50%;
    background:radial-gradient(closest-side, rgba(0,0,0,.18), transparent); pointer-events:none;}
  .specimen-art img{max-width:100%; max-height:100%; object-fit:contain; position:relative; z-index:1;
    mix-blend-mode:multiply; filter:sepia(.22) contrast(1.04) saturate(.9);}
  .specimen-art.flight{align-items:center;}
  .specimen-art.flight::after{left:32%; right:32%; opacity:.6;}
  .clue-kind{margin:0 0 8px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
    font-size:1rem; color:var(--tinta-suave);}
  .clue-worth{color:var(--rojo);}
  .clue-list{list-style:none; margin:0; padding:0; counter-reset:clue;}
  .clue-list li{counter-increment:clue; position:relative; padding:9px 2px 9px 42px; border-top:1px dashed rgba(43,38,32,.3);
    font-size:1.16rem; line-height:1.5;}
  .clue-list li:first-child{border-top:0;}
  /* el numero de la pista, rodeado a mano */
  .clue-list li::before{content:counter(clue); position:absolute; left:0; top:9px; width:28px; height:28px;
    display:grid; place-items:center; font:400 1.05rem var(--f-mano); transform:rotate(-6deg);
    border:1.6px solid var(--tinta-suave); border-radius:50% 44% 52% 46% / 46% 54% 44% 52%;}
  .clue-list li.new{animation:clueIn .35s ease;}
  .clue-list li.late{color:var(--tinta-tenue);}
  .clue-list li.late::before{border-color:var(--tinta-tenue);}
  .clue-list .clue-tag{display:block; font-family:var(--f-mano); font-size:.95rem; color:var(--rojo); margin-bottom:1px;}
  @keyframes clueIn{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;}}
  @media (prefers-reduced-motion: reduce){ .clue-list li.new{animation:none;} }
  .hint-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px;}
  .hint-btn{cursor:pointer; font-family:var(--f-mano); font-size:1.05rem; color:var(--accent); background:none;
    border:0; border-bottom:1.6px dashed currentColor; padding:2px 1px;}
  .hint-btn:hover:not(:disabled){border-bottom-style:solid;}
  .hint-btn:disabled{opacity:.45; cursor:default;}
  .hint-note{font-size:.92rem; color:var(--ink-soft);}
  .summary-points{font-size:1rem; color:var(--ink-soft); margin:-4px 0 10px;}
  .answer-zone{margin-bottom:16px;}
  .answer-zone label{display:block; font-family:var(--f-talla); font-weight:700; font-size:1.1rem; letter-spacing:.02em; margin-bottom:8px;}
  .input-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
  /* donde se escribe: una tira de papel con su renglon */
  #guess-input,.search input,.modo select{font:400 1.08rem var(--f-nota); color:var(--tinta); color-scheme:light;
    background:linear-gradient(172deg,#e9dec0,#d6c7a0); border:0; border-bottom:2px solid rgba(43,38,32,.5); border-radius:1px;
    padding:9px 13px 8px; max-width:100%;}
  #guess-input{flex:1 1 220px; min-width:0;}
  #guess-input::placeholder,.search input::placeholder{color:rgba(43,38,32,.5);}
  /* las respuestas: tiras de papel. Se acierta con un cerco de tinta verde; se falla con un tachon */
  .options-zone{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  @media (max-width:480px){ .options-zone{grid-template-columns:1fr;} }
  .option-btn,.es-op{font-family:var(--f-mano); font-size:1.12rem; text-align:left; cursor:pointer; border:0;
    padding:13px 16px 12px; background:var(--hoja-b); transition:transform .12s ease;}
  .option-btn:nth-child(odd),.es-op:nth-child(odd){transform:rotate(-.5deg);}
  .option-btn:nth-child(even),.es-op:nth-child(even){transform:rotate(.45deg);}
  .option-btn:hover:not(:disabled),.es-op:hover:not(:disabled){transform:translateY(-2px);}
  .option-btn:disabled,.es-op:disabled{cursor:default;}
  .option-btn:disabled:not(.correct):not(.incorrect),.es-op:disabled:not(.correct):not(.incorrect){opacity:.62;}
  .option-btn.correct,.es-op.correct{color:var(--good); box-shadow:inset 0 0 0 2.5px var(--good);}
  .option-btn.incorrect,.es-op.incorrect{color:var(--bad); text-decoration:line-through; box-shadow:inset 0 0 0 2.5px var(--bad);}
  /* boton principal: un brochazo de ocre rojo, el pigmento de las pinturas rupestres */
  .primary-btn,.submit-btn{cursor:pointer; padding:10px 26px 11px; font-family:var(--f-mano); font-size:1.12rem; color:#f6ecd4;
    background:#a03e22; border:0;
    clip-path:polygon(1.5% 16%, 8% 3%, 29% 8%, 53% 0, 77% 7%, 96% 2%, 100% 31%, 98% 70%, 100% 93%, 81% 100%, 57% 93%, 34% 100%, 9% 95%, 0 76%, 2% 44%);
    transition:filter .15s ease, transform .15s ease;}
  .primary-btn:hover:not(:disabled),.submit-btn:hover{filter:brightness(1.18); transform:translateY(-1px);}
  .primary-btn:focus-visible,.submit-btn:focus-visible{outline:none; box-shadow:inset 0 0 0 3px #f6ecd4;}
  /* boton secundario: una palabra subrayada */
  .ghost-btn{cursor:pointer; padding:6px 2px 3px; font-size:1.02rem; color:var(--ink-soft);
    background:none; border:0; border-bottom:1.5px solid var(--line);}
  .ghost-btn:hover{color:var(--ink); border-color:var(--ink);}
  .feedback{display:flex; align-items:center; gap:12px; padding:10px 16px; margin-bottom:14px;
    font-family:var(--f-mano); font-size:1.15rem; background:var(--hoja-a); transform:rotate(-.4deg);}
  .feedback img{width:72px; height:44px; object-fit:contain; flex:0 0 auto; mix-blend-mode:multiply;}
  .feedback.ok{color:var(--good);}
  .feedback.no{color:var(--bad);}
  .feedback em{font-style:normal; border-bottom:1.6px solid currentColor;}
  .game-actions{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;}
  .game-head{display:flex; justify-content:flex-end; margin-bottom:10px;}

  .summary-card{padding:38px 28px 32px; text-align:center;
    background:var(--grano), var(--hoja-b); background-blend-mode:multiply, normal, normal;}
  .summary-card h3{font-family:var(--f-mano); font-weight:400; letter-spacing:0;}
  .summary-card .big{font-family:var(--f-mano); font-size:4.2rem; line-height:1; color:var(--rojo); margin-top:6px;}
  .summary-card p{color:var(--lapiz); margin:8px 0 22px; font-size:1.05rem;}
  .summary-card .eyebrow,.summary-card .summary-points{color:var(--tinta-suave);}
  .summary-actions{display:flex; gap:14px 22px; justify-content:center; align-items:center; flex-wrap:wrap;}

  /* ---------- catalogo ---------- */
  .catalog-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px;}
  .catalog-head h2{font-size:1.5rem; margin:2px 0 6px;}
  .catalog-head .intro{margin:0;}
  .catalog-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px;}
  @media (max-width:560px){ .catalog-grid{grid-template-columns:repeat(2, minmax(0,1fr));} }
  /* la hoja de cada especie: el papel, las manchas y el canto roto se le ponen mas abajo (.cat-card[data-papel]) */
  .cat-card{position:relative; text-align:left; cursor:pointer; display:flex; flex-direction:column;}
  .cat-num{position:absolute; font-variant-numeric:tabular-nums;}
  .cat-art{height:130px; display:flex; align-items:flex-end; justify-content:center; margin-bottom:10px; padding:4px 6px 6px;}
  .cat-art.flight{align-items:center;}
  .cat-art img{max-width:100%; max-height:100%; object-fit:contain;}
  .cat-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px;}
  .cat-card .clade{margin:0 0 10px;}
  .cat-card .cta{margin-top:auto; align-self:flex-start; padding-bottom:1px;}
  .catalog-tools{display:flex; gap:10px 16px; flex-wrap:wrap; align-items:center; margin-bottom:10px;}
  .search{flex:1 1 260px; min-width:0;}
  .search input{width:100%;}
  /* filtros y pestañas: palabras a tiza sobre la roca; la elegida va rodeada */
  .chips{display:flex; gap:2px 4px; flex-wrap:wrap;}
  .chip,.es-pestanas button{cursor:pointer; font-size:1.02rem; color:var(--ink-soft); background:none;
    border:1.6px solid transparent; padding:2px 12px 1px; border-radius:50% 45% 52% 46% / 60% 52% 48% 56%;}
  .chip:hover,.es-pestanas button:hover{color:var(--ink);}
  .chip[aria-pressed="true"],.es-pestanas button[aria-pressed="true"]{color:var(--ink); border-color:var(--accent); transform:rotate(-1.2deg);}
  .catalog-status{font-size:.95rem; color:var(--ink-mute); margin:0 0 12px;}
  .catalog-empty{grid-column:1 / -1; color:var(--ink-soft); padding:24px 0;}
  .sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

  /* el árbol evolutivo tiene su propia hoja: arbol.css */
  .credits{margin-top:30px; border-top:1px solid var(--line); padding-top:16px;}
  .credits h3{font-size:1rem; margin-bottom:8px;}
  .credits ul{list-style:none; margin:0; padding:0; display:grid; gap:6px;}
  .credits li{font-size:.8rem; color:var(--ink-soft); line-height:1.45;}
  .credits li strong{color:var(--ink); font-weight:600;}
  .credits p{font-size:.76rem; color:var(--ink-mute); margin:10px 0 0; line-height:1.45; max-width:70ch;}

  /* ---------- dossier ---------- */
  .modal-backdrop{position:fixed; inset:0; background:rgba(12,10,8,.72); display:flex; align-items:flex-start; justify-content:center;
    padding:28px 16px; z-index:20; overflow-y:auto;}
  .dossier{position:relative; width:100%; max-width:780px; margin-block:auto;
    animation:dossierIn .4s cubic-bezier(.16,.84,.32,1) both;}
  /* la ficha se saca del cajón y se asienta sobre la mesa: el único gesto de la app */
  @keyframes dossierIn{from{opacity:0; transform:translateY(22px) scale(.96) rotate(-.7deg);} to{opacity:1; transform:none;}}
  @media (prefers-reduced-motion: reduce){ .dossier{animation:none;} }
  /* la fibra del canto roto (inset negativo) asoma 5px por los lados: sin overflow-x la hoja se mueve de costado con el dedo */
  @media (max-width:560px){ .modal-backdrop{padding:0; overflow-x:hidden;} .dossier{min-height:100%;} }
  .dossier-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px;}
  .dossier-title{display:flex; flex-direction:column; gap:2px;}
  .dossier-title h3{font-size:1.6rem; font-weight:600;}
  .dossier-sci{font-style:italic; color:var(--ink-soft); font-size:.95rem; margin:0;}
  .dossier-tools{display:flex; align-items:center; gap:10px;}
  .close-btn{background:none; border:1.6px solid var(--line); border-radius:50% 44% 52% 46% / 46% 54% 44% 52%; width:34px; height:34px; color:var(--ink-soft); font-size:1rem; cursor:pointer;}
  .close-btn:hover{color:var(--ink); border-color:var(--ink);}

  .plate{background:var(--paper-2); border:1px solid var(--line); border-radius:10px; padding:12px 12px 10px; margin-bottom:18px;}
  .plate-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; padding:0 4px 6px;}
  .plate-legend{display:flex; gap:14px; flex-wrap:wrap; font-size:.72rem; color:var(--ink-soft);}
  .plate-legend i{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; vertical-align:-1px;}
  .diagram{overflow-x:auto;}
  .diagram svg{display:block; width:100%; height:auto;}
  /* telefono en horizontal: el diagrama crece con el ancho y no entraba en los ~412 px de alto */
  @media (orientation:landscape) and (max-height:500px){ .diagram svg{width:auto; max-width:100%; max-height:72vh; margin-inline:auto;} }
  .dg-grid{stroke:var(--grid); stroke-width:1;}
  .dg-tick{font-family:var(--f-nota); font-size:12px; fill:var(--ink-mute);}
  .dg-ground{stroke:var(--ink); stroke-width:1.6;}
  .dg-soil{fill:var(--paper-3);}
  .dg-water{fill:var(--water);}
  .dg-dim{stroke:var(--ink-soft); stroke-width:1.1; fill:none;}
  .dg-ext{stroke:var(--ink-mute); stroke-width:.9; stroke-dasharray:3 3; fill:none;}
  .dg-pill{fill:var(--paper); stroke:var(--line); stroke-width:1;}
  .dg-val{font-family:var(--f-mano); font-size:14px; fill:var(--ink);}
  .dg-cap{font-family:var(--f-nota); font-size:10.5px; fill:var(--ink-soft);}
  .dg-human{fill:var(--human);}
  .dg-bus{fill:var(--bus);}
  .dg-bus-win{fill:var(--paper-2);}
  .dg-label{font-family:var(--f-nota); font-size:12px; fill:var(--ink-soft);}
  .dg-label-val{font-family:var(--f-nota); font-size:12px; fill:var(--human);}
  .plate-note{font-size:.72rem; color:var(--ink-mute); margin:6px 4px 0;}

  .dossier-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px 18px; margin:0 0 16px; padding:0 2px;}
  @media (max-width:560px){ .dossier-grid{grid-template-columns:1fr 1fr;} }
  .dossier-field.wide{grid-column:span 2;}
  @media (max-width:560px){ .dossier-field.wide{grid-column:1 / -1;} }
  .dossier-field dt{font-size:.74rem; font-variant:small-caps; letter-spacing:.02em; color:var(--ink-mute);}
  .dossier-field dd{margin:3px 0 0; font-family:var(--f-nota); font-size:.9rem; line-height:1.35;}
  /* nota de campo: como si alguien la hubiera escrito a mano en el margen */
  .dossier-fact{position:relative; border-top:1px dashed var(--line); padding:16px 2px 2px 4px; margin:0;
    font-size:1.05rem; line-height:1.5;}
  .dossier-fact b{display:block; font-family:var(--f-mano); font-weight:700; font-size:1.35rem; color:var(--accent);
    line-height:1;}
  .dossier-credit{margin:14px 2px 0; font-size:.72rem; color:var(--ink-mute); line-height:1.5;}

  /* ---------- dónde vivió + galería ---------- */
  .bloque{border-top:1px dashed var(--line); margin-top:16px; padding-top:14px;}
  .bloque > .eyebrow{display:block; margin-bottom:8px;}
  .mapa{background:var(--hoja-b); padding:8px; overflow:hidden;}
  .mapa svg{display:block; width:100%; height:auto;}
  /* una carta de papel: el mar en aguada, la tierra perfilada a tinta con su sombra de costa, y la
     reticula de meridianos y paralelos cada 30 grados. Los lagos son huecos del mismo trazo (evenodd). */
  .mapa-mar{fill:rgba(74,112,128,.3);}
  .mapa-red{fill:none; stroke:rgba(43,38,32,.2); stroke-width:.5; vector-effect:non-scaling-stroke;}
  .mapa-tierra{fill:#cfbf97; fill-rule:evenodd; stroke:#4a3a26; stroke-width:.8; stroke-linejoin:round; vector-effect:non-scaling-stroke;
    filter:drop-shadow(0 0 1.4px rgba(40,62,74,.75)); transition:opacity .4s ease;}
  .mapa-envoltorio{position:relative;}
  .mapa-paleo{position:absolute; inset:0; background:#c4b38a;
    -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    pointer-events:none;}
  .mapa-marca{position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%;
    background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent),
    0 0 0 1.5px var(--paper); pointer-events:none; transition:left .5s ease, top .5s ease;}
  .mapa-barra{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:8px 2px 0;}
  .mapa-btn{cursor:pointer; font-size:.98rem; color:var(--ink); background:rgba(255,250,235,.4);
    border:1.4px solid var(--tinta-tenue); border-radius:2px; padding:3px 12px 2px;}
  .mapa-btn:hover{border-color:var(--accent); color:var(--accent);}
  .mapa-btn[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--paper);}
  .mapa-epoca{font-size:.92rem; color:var(--ink-mute);}
  .sitio-txt{margin:8px 2px 0; font-size:.86rem; line-height:1.5; color:var(--ink-soft);}
  .sitio-txt b{color:var(--ink); font-weight:600;}
  .gal{display:grid; grid-template-columns:repeat(auto-fill, minmax(148px, 1fr)); gap:10px;}
  .gal figure{margin:0; background:var(--paper-2); border:1px solid var(--line); overflow:hidden; cursor:zoom-in;}
  .gal img{display:block; width:100%; height:108px; object-fit:cover; background:var(--paper-3);}
  .gal figcaption{font-size:.68rem; color:var(--ink-soft); padding:6px 8px 7px; line-height:1.35;}
  .gal figcaption b{display:block; color:var(--ink); font-weight:600; font-size:.72rem; margin-bottom:1px;}
  .visor{position:fixed; inset:0; z-index:40; background:rgba(20,14,8,.82); display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:12px; padding:24px 18px; cursor:zoom-out;}
  .visor img{max-width:min(100%, 1100px); max-height:78vh; object-fit:contain; background:#e3d6b3;}
  .visor p{margin:0; color:#f2e9d8; font-size:.82rem; text-align:center; max-width:70ch; line-height:1.5;}
  .visor a{color:#f2e9d8;}
  .dossier-credit a{color:var(--ink-soft);}

  /* ---------- expedicion: elegir campo ---------- */
  .expedition-intro{color:var(--ink-soft); margin:0 0 24px; max-width:60ch; line-height:1.55;}
  .expedition-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:22px 18px; margin-bottom:8px;}
  /* cada campo es una foto de campaña sujeta a la roca con cinta, con el pie escrito a mano.
     La foto va virada al color de su campo: la luminosidad es la de la imagen, el tono el del campo. */
  .expo-tile{position:relative; display:flex; flex-direction:column; min-height:150px; padding:8px 8px 9px; border:0;
    cursor:pointer; text-align:left; background:#e8e0c9; transform:rotate(var(--giro,-.7deg)); transition:transform .16s ease;}
  .expo-tile:nth-child(3n+2){--giro:.8deg;}
  .expo-tile:nth-child(4n+3){--giro:-1.2deg;}
  .expo-tile:nth-child(5n+4){--giro:.35deg;}
  .expo-tile:hover:not(:disabled){transform:rotate(0deg) translateY(-3px);}
  .expo-tile:disabled{cursor:default; opacity:.55;}
  .expo-tile::before{content:""; position:absolute; left:50%; top:-9px; width:78px; height:21px; margin-left:-39px; z-index:2;
    background:rgba(216,198,146,.76); transform:rotate(-3deg); box-shadow:0 1px 2px rgba(0,0,0,.3);}
  .expo-tile:nth-child(even)::before{transform:rotate(2.5deg); margin-left:-56px;}
  .tile-photo{flex:1 1 auto; min-height:92px; background-size:cover; background-position:center;
    background-color:color-mix(in srgb, var(--tile-c) 62%, #7d6e52); background-blend-mode:luminosity;}
  .expo-tile svg{flex:1 1 auto; min-height:92px; width:60%; align-self:center; opacity:.5;}
  .expo-tile span{margin-top:7px; font-family:var(--f-mano); font-size:1.15rem; line-height:1.1;}
  .expo-tile small{font-size:.92rem; line-height:1.3; color:var(--tinta-tenue);}
  .ph-dino{background-image:url(img/fondo/tile-dino.jpg)}
  .ph-ptero{background-image:url(img/fondo/tile-ptero.jpg)}
  .ph-marine{background-image:url(img/fondo/tile-marine.jpg)}
  .ph-croc{background-image:url(img/fondo/tile-croc.jpg)}
  .ph-todos{background-image:url(img/fondo/tile-todos.jpg)}
  .ph-mammal{background-image:url(img/fondo/tile-mammal.jpg);}
  .ph-fish{background-image:url(img/fondo/tile-fish.jpg)}
  .ph-synapsid{background-image:url(img/fondo/tile-synapsid.jpg)}
  .ph-amphibian{background-image:url(img/fondo/tile-amphibian.jpg)}
  .ph-bird{background-image:url(img/fondo/tile-bird.jpg)}
  .ph-reptile{background-image:url(img/fondo/tile-reptile.jpg)}
  .ph-arthropod{background-image:url(img/fondo/tile-arthropod.jpg)}

  /* ---------- cabecera del inicio: el campo, tallado en la roca ---------- */
  .campo-title{font-family:var(--f-talla); font-weight:800;
    font-size:clamp(2rem, 5.4vw, 3.2rem); line-height:1.04; letter-spacing:.02em; margin:2px 0 8px;
    color:var(--live-c, var(--accent));}
  .campo-pill{display:inline-flex; background:none; border:0; padding:0; margin-bottom:16px; cursor:pointer; color:var(--ink-soft);}
  .campo-pill:hover{color:var(--ink);}
  .campo-pill-dot,.campo-pill-label{display:none;}
  .campo-pill-change{font-size:1rem; border-bottom:1.5px solid var(--line);}

  /* ---------- fondo temático sutil del campo activo, detrás del expositor ---------- */
  .drawer-photo{position:absolute; inset:0; z-index:0; overflow:hidden;
    background-size:cover; background-position:center 30%; mix-blend-mode:luminosity; opacity:.28;
    filter:contrast(1.05); -webkit-mask-image:linear-gradient(to bottom, black 0%, transparent 92%);
    mask-image:linear-gradient(to bottom, black 0%, transparent 92%);}
  .drawer > img{position:relative; z-index:1;}


  /* ---------- pantallas anchas (portátil 1366+, escritorio 1920) ----------
     La app nació con una columna de 820 px pensada para móvil y tablet. En un
     monitor grande eso deja dos tercios de pantalla vacíos, así que a partir de
     1100 px el contenedor se ensancha y cada pantalla reparte el espacio en
     columnas, manteniendo la prosa en una medida legible (~68 caracteres). */
  @media (min-width:1100px){
    body{padding-inline:34px; padding-block:30px 72px;}
    .wrap{max-width:1180px;}
    .intro, .expedition-intro, .catalog-head .intro{max-width:68ch;}
    .brand h1{font-size:1.85rem;}
    .catalog-grid{grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));}
    .cat-art{height:150px;}
    .credits ul{grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:6px 22px;}
    /* las pantallas cortas (expedición, inicio, resumen) estiran sus piezas
       hasta llenar el alto del monitor en vez de dejar medio lienzo vacío */
    #screen-expedition, #screen-home{display:flex; flex-direction:column;
      min-height:calc(100vh - 190px);}
    #screen-expedition .expedition-grid{flex:1 1 auto; align-content:stretch;}
    #screen-home .mode-grid{flex:1 1 auto;}
    #screen-home .mode-card{height:100%;}
    #screen-summary{display:flex; min-height:calc(100vh - 190px); align-items:center; justify-content:center;}
    #screen-summary .summary-card{width:min(680px, 100%); padding:44px 40px;}
    .expedition-grid{grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px;}
    .expo-tile{min-height:clamp(170px, 26vh, 270px);}
    .expo-tile-all{grid-column:span 2;}
    .expo-tile span{font-size:1.4rem;}
    .expo-tile small{font-size:1rem;}
    .mode-card{min-height:clamp(210px, 27vh, 320px); padding:32px 34px 28px;}
    .drawer{padding:22px 20px 14px; min-height:clamp(140px, 20vh, 240px); align-items:end;}
    .drawer img{height:78px;}

    /* partida: el espécimen a la izquierda, la respuesta a la derecha */
    #screen-game{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(330px,0.95fr);
      column-gap:26px; align-items:start;}
    #screen-game > .game-head, #screen-game > .progress-dots{grid-column:1 / -1;}
    #screen-game > .specimen-card{grid-column:1; grid-row:3 / span 8; margin-bottom:0;}
    #screen-game > .answer-zone, #screen-game > .feedback,
    #screen-game > .game-actions, #screen-game > datalist{grid-column:2;}
    #screen-game > .game-actions{align-self:start;}
    #screen-game{min-height:calc(100vh - 190px);}
    #screen-game > .specimen-card{display:flex; flex-direction:column;}
    .specimen-art{flex:1 1 auto; height:auto; min-height:clamp(260px, 34vh, 460px);}
    .option-btn{padding:15px 20px 14px; font-size:1.24rem;}
    #guess-input{font-size:1.2rem; padding:11px 15px 10px;}

    /* ficha técnica: diagrama y datos en paralelo */
    .dossier{max-width:1180px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,1fr);
      column-gap:26px; align-content:start;}
    .dossier > *{min-width:0;}
    .dossier-head, .dossier-fact, .dossier-credit{grid-column:1 / -1;}
    .dossier > .plate{grid-column:1; margin:0 !important;}
    .dossier > .dossier-grid{grid-column:2; grid-template-columns:1fr 1fr; align-content:start; margin-bottom:0;}
    #comportamiento-wrap{grid-column:1;}
    #comparacion-wrap{grid-column:2;}
    #sitio-wrap{grid-column:1;}
    #galeria-wrap{grid-column:2;}
    .gal{grid-template-columns:repeat(auto-fill, minmax(135px, 1fr));}
  }
  @media (min-width:1500px){
    body{padding-inline:48px;}
    .wrap{max-width:1480px;}
    .catalog-grid{grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:18px;}
    .cat-art{height:170px;}
    .expo-tile{min-height:clamp(200px, 30vh, 320px);}
    .drawer{min-height:clamp(170px, 23vh, 280px);}
    .drawer img{height:clamp(110px, 17vh, 200px);}
    .mode-card{min-height:clamp(240px, 30vh, 360px);}
    .expo-tile span{font-size:1.55rem;}
    .specimen-art{min-height:clamp(320px, 40vh, 560px);}
    .dossier{max-width:1440px; grid-template-columns:minmax(0,1.25fr) minmax(360px,1fr);}
    .mode-card p{font-size:1.02rem;}
  }

  /* ================= atmósfera: la ventana a cada época ================= */
  /* paleta por campo — cielo (1→3), siluetas y partícula. Solo cambia de color;
     la forma del horizonte y el tipo de partícula los elige cada campo más abajo. */
  body{
    --atm-1:#f3d9a8; --atm-2:#dba468; --atm-3:#b97a4a; --atm-particula:#f0dfa8;
  }
  body[data-campo="dino"]{ --atm-1:#f6dca0; --atm-2:#e0964a; --atm-3:#9c4620; --atm-particula:#f2c98a; }
  body[data-campo="ptero"]{ --atm-1:#dce9f2; --atm-2:#9fc0d9; --atm-3:#4f7fa0; --atm-particula:#fbfeff; }
  body[data-campo="marine"]{ --atm-1:#2c7078; --atm-2:#124048; --atm-3:#07222b; --atm-particula:#bfeef0; }
  body[data-campo="croc"]{ --atm-1:#cdd79a; --atm-2:#8fa35a; --atm-3:#525f2c; --atm-particula:#e8ecc8; }
  body[data-campo="fish"]{ --atm-1:#3d8a96; --atm-2:#1a5560; --atm-3:#0a2c36; --atm-particula:#cfeef0; }
  body[data-campo="synapsid"]{ --atm-1:#f2cf9a; --atm-2:#c98a52; --atm-3:#8a4a2a; --atm-particula:#f0c890; }
  body[data-campo="amphibian"]{ --atm-1:#c9d4a8; --atm-2:#7f9662; --atm-3:#3f5230; --atm-particula:#e4ead0; }
  body[data-campo="bird"]{ --atm-1:#dfe9f0; --atm-2:#b9c9a8; --atm-3:#7a8a52; --atm-particula:#ffffff; }
  body[data-campo="reptile"]{ --atm-1:#f0d8a8; --atm-2:#c99a5c; --atm-3:#7c5230; --atm-particula:#f0dcb0; }
  body[data-campo="arthropod"]{ --atm-1:#b9cf9a; --atm-2:#5f8a4a; --atm-3:#2a4a22; --atm-particula:#d6e6a8; }
  body[data-campo="mammal"]{ --atm-1:#f0dfa0; --atm-2:#c9a24a; --atm-3:#6e4520; --atm-particula:#dcc276; }

  #atmosfera{position:fixed; inset:0; overflow:hidden;
    z-index:0; pointer-events:none; opacity:0; transition:opacity .8s ease;}
  body[data-pantalla="expedition"] #atmosfera, body[data-pantalla="home"] #atmosfera{opacity:1;}
  .wrap{position:relative; z-index:1;}

  .atm-cielo{position:absolute; inset:0;
    background:linear-gradient(180deg, var(--atm-1) 0%, var(--atm-2) 48%, var(--atm-3) 82%, transparent 100%);
    transition:background 1s ease;}
  .atm-foto{position:absolute; inset:0; background-size:cover; background-position:center 42%;
    transition:background-image .3s ease;}
  body[data-campo="all"] .atm-foto{background-image:url(img/fondo/campo-all.jpg);}
  body[data-campo="dino"] .atm-foto{background-image:url(img/fondo/campo-dino.jpg);}
  body[data-campo="ptero"] .atm-foto{background-image:url(img/fondo/campo-ptero.jpg); background-position:center 40%;}
  body[data-campo="marine"] .atm-foto{background-image:url(img/fondo/campo-marine.jpg); background-position:center 45%;}
  body[data-campo="croc"] .atm-foto{background-image:url(img/fondo/campo-croc.jpg);}
  body[data-campo="mammal"] .atm-foto{background-image:url(img/fondo/campo-mammal.jpg);}
  body[data-campo="fish"] .atm-foto{background-image:url(img/fondo/campo-fish.jpg);}
  body[data-campo="synapsid"] .atm-foto{background-image:url(img/fondo/campo-synapsid.jpg);}
  body[data-campo="amphibian"] .atm-foto{background-image:url(img/fondo/campo-amphibian.jpg);}
  body[data-campo="bird"] .atm-foto{background-image:url(img/fondo/campo-bird.jpg); background-position:center 80%;}
  body[data-campo="reptile"] .atm-foto{background-image:url(img/fondo/campo-reptile.jpg);}
  body[data-campo="arthropod"] .atm-foto{background-image:url(img/fondo/campo-arthropod.jpg);}

  #atm-particulas{position:absolute; inset:0; width:100%; height:100%;}
  .atm-bruma{position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(20,17,13,.58) 0%, rgba(20,17,13,.14) 24%, rgba(20,17,13,.1) 52%, rgba(20,17,13,.62) 100%);}

  /* legibilidad del texto que cae sobre la escena, sin taparla con una placa opaca */
  body[data-pantalla="expedition"] h2, body[data-pantalla="expedition"] .expedition-intro,
  body[data-pantalla="home"] #home-intro{
    text-shadow:0 1px 2px var(--paper), 0 0 16px var(--paper), 0 0 3px var(--paper);
  }
  body[data-pantalla="home"] .campo-title{
    text-shadow:0 0 3px var(--paper), 0 0 14px var(--paper), 0 0 26px var(--paper), 0 2px 0 color-mix(in srgb, var(--paper) 70%, white 30%);
  }

  /* ---------- portal: el viaje al pasado ----------
     Al elegir un campo se baja por la columna de estratos hasta su epoca (entrarEnCampo, en app.js).
     Cuatro tiempos: la vista se cierra sobre la foto elegida; se desciende por los estratos, uno por
     periodo, con los fosiles de cada uno al pasar y un contador de millones de años que corre hacia
     atras; al llegar, la roca se abre y aparece el paisaje, desenfocado, que se asienta; y el inicio
     se monta pieza a pieza. Bajar es retroceder: en la roca, lo mas hondo es lo mas antiguo.
     Nada de colores de interfaz: cada estrato lleva el tono de la roca que da nombre o fama a su
     periodo (la creta del Cretacico, la caliza del Jurasico, las areniscas rojas del Triasico y el
     Devonico, el carbon del Carbonifero), y la cifra del contador esta labrada en piedra. */
  @property --iris{syntax:"<length>"; inherits:false; initial-value:0px;}
  #portal-fx{position:fixed; inset:0; z-index:500; pointer-events:none; display:none; overflow:hidden; background:#14110e;
    --lecho:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='480'><filter id='le' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.018 .062' numOctaves='6' seed='9' stitchTiles='stitch'/><feDiffuseLighting lighting-color='white' surfaceScale='5' diffuseConstant='1.1'><feDistantLight azimuth='262' elevation='46'/></feDiffuseLighting></filter><rect width='900' height='480' filter='url(%23le)'/></svg>");}
  #portal-fx.cerrando{display:block;
    -webkit-mask-image:radial-gradient(circle at var(--ox,50%) var(--oy,50%), transparent var(--iris), #000 calc(var(--iris) + 90px));
    mask-image:radial-gradient(circle at var(--ox,50%) var(--oy,50%), transparent var(--iris), #000 calc(var(--iris) + 90px));
    animation:irisCerrar .32s cubic-bezier(.4,0,.8,.5) both;}
  @keyframes irisCerrar{from{--iris:110vmax;} to{--iris:-95px;}}
  #portal-fx.cerrando > *{display:none;}
  #portal-fx.viajando,#portal-fx.llegada{display:block;}
  /* la columna: arranca en la superficie (hoy) y sube por la pantalla mientras se baja */
  .pt-col{position:absolute; left:0; right:0; top:0; will-change:transform;
    animation:ptBajar var(--dur,1.6s) cubic-bezier(.5,0,.22,1) both;}
  @keyframes ptBajar{to{transform:translateY(var(--viaje));}}
  .pt-estrato{position:relative; height:70vh; --pc:#4a4034;
    background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.46)), var(--grano),
      var(--lecho) calc(var(--i,0) * 173px) calc(var(--i,0) * 67px) / 900px 480px, var(--pc);
    background-blend-mode:normal, multiply, multiply, normal;
    box-shadow:inset 0 5px 0 rgba(0,0,0,.62), inset 0 7px 0 rgba(255,250,235,.1);}
  /* el fosil del estrato: la silueta de una especie de ese periodo, clara sobre la roca */
  .pt-estrato img{position:absolute; top:50%; left:9%; height:38%; max-width:36%; object-fit:contain;
    transform:translateY(-50%) rotate(-7deg); filter:brightness(0) invert(.9) sepia(.5); opacity:.17;}
  .pt-estrato:nth-child(even) img{left:auto; right:9%; transform:translateY(-50%) rotate(6deg);}
  .pt-estrato span{position:absolute; left:20px; top:12px; font-size:1rem; color:rgba(var(--ink-rgb),.62); text-shadow:0 1px 2px #000;}
  /* el contador, quieto en el centro mientras los estratos pasan por detras */
  .pt-reloj{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:max-content; max-width:92vw; text-align:center;
    font-family:var(--f-talla); color:var(--ink); text-shadow:0 2px 0 #000, 0 0 34px rgba(0,0,0,.95), 0 0 12px rgba(0,0,0,.8);}
  .pt-reloj small{display:block; font-family:var(--f-nota); font-size:1.25rem; line-height:1.2; color:var(--ink-soft);}
  /* la cifra: letra de inscripcion tosca, rellena de piedra (el mismo lecho, recortado a la forma del
     numero) y con canto: un filo de luz arriba y el grueso del bloque, oscuro, debajo */
  .pt-reloj b{display:block; padding:.08em .12em 0; font-family:'Caesar Dressing',var(--f-talla); font-weight:400;
    font-size:clamp(4.4rem, 14vw, 10.5rem); line-height:1.02; letter-spacing:.02em;
    color:transparent; text-shadow:none;
    background:var(--lecho) 40px 30px / 520px 280px, #c2b496; background-blend-mode:multiply;
    -webkit-background-clip:text; background-clip:text;
    filter:drop-shadow(0 -2px 0 rgba(255,250,235,.4)) drop-shadow(0 3px 0 #3a3024) drop-shadow(0 6px 0 #1d1711) drop-shadow(0 16px 18px rgba(0,0,0,.85));}
  .pt-reloj em{display:block; margin-top:.35em; font-family:'Caesar Dressing',var(--f-talla); font-style:normal; font-weight:400;
    font-size:clamp(1.3rem, 2.9vw, 2.3rem); letter-spacing:.1em; color:#d8cbae;}
  /* la llegada: la roca se abre hacia quien mira y deja ver el paisaje */
  #portal-fx.llegada{animation:ptLlegar .95s cubic-bezier(.5,0,.7,.4) both;}
  @keyframes ptLlegar{30%{opacity:1;} to{opacity:0; transform:scale(1.7);}}
  /* el paisaje llega cerca, desenfocado y a media luz, y se aleja hasta su sitio: los ojos se acostumbran */
  body.llegando .atm-foto{animation:llegar 2s cubic-bezier(.2,.7,.2,1) both;}
  @keyframes llegar{from{transform:scale(1.22); filter:blur(8px) brightness(.55);} 55%{filter:blur(0) brightness(1);} to{transform:none; filter:none;}}
  /* y el inicio se monta pieza a pieza: titulo, repisa, lajas y piedras caen a su sitio, una detras de otra */
  body.llegando #screen-home{animation:none;}
  body.llegando #screen-home > :is(.campo-title,.campo-pill,.drawer,.intro),
  body.llegando #screen-home :is(.mode-card,.catalog-link){
    animation:asentar .72s cubic-bezier(.2,.85,.25,1.18) both; animation-delay:calc(.45s + var(--n,0) * .085s);}
  @keyframes asentar{from{opacity:0; transform:translateY(-36px) rotate(-1.4deg) scale(1.04);} 65%{opacity:1;} to{opacity:1; transform:none;}}
  #screen-home .campo-pill{--n:1;} #screen-home .drawer{--n:2;} #screen-home .intro{--n:3;}
  #screen-home .mode-card{--n:4;} #screen-home .mode-card-clue{--n:5;}
  #screen-home .catalog-link:nth-child(1){--n:6;} #screen-home .catalog-link:nth-child(2){--n:7;}
  #screen-home .catalog-link:nth-child(3){--n:8;} #screen-home .catalog-link:nth-child(4){--n:9;}
  #screen-home .catalog-link:nth-child(5){--n:10;} #screen-home .catalog-link:nth-child(6){--n:11;}

  /* =====================================================================
     LA FICHA COMO HOJA DE BITACORA
     Cinco plantillas de papel repartidas por id de especie (data-papel 1..5).
     La hoja es un objeto fisico: se ve igual en claro y en oscuro, porque un
     papel viejo no cambia de color con el tema. La silueta rota va en
     mascaras SVG sobre las capas .fz-papel y .fz-fibra, nunca sobre el texto:
     filtrar el texto lo dobla y lo vuelve ilegible.
     ===================================================================== */
  .dossier[data-papel]{
    line-height:1.62; padding:46px 48px 52px; isolation:isolate;
  }
  /* alma del papel: asoma por el canto roto, mas clara que la cara */
  .dossier[data-papel] .fz-fibra{
    position:absolute; inset:-9px; z-index:0; pointer-events:none; background:#f2e9d1;
    filter:drop-shadow(0 22px 54px rgba(0,0,0,.55));
  }
  .dossier[data-papel] .fz-papel{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden}
  .dossier[data-papel] .fz-papel::after{
    content:""; position:absolute; inset:0; mix-blend-mode:multiply; opacity:.4;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='fgr'><feTurbulence type='fractalNoise' baseFrequency='.8 .4' numOctaves='4'/><feColorMatrix type='saturate' values='0'/></filter><rect width='260' height='260' filter='url(%23fgr)' opacity='.55'/></svg>");
  }
  .dossier[data-papel] .fz-manchas{position:absolute; inset:0; mix-blend-mode:multiply; opacity:.6}
  .dossier[data-papel] > :not(.fz-papel):not(.fz-fibra){position:relative; z-index:2}

  /* las cinco plantillas: el papel y el estropicio propio de cada una */
  .dossier[data-papel="1"] .fz-papel{background:
    radial-gradient(70% 50% at 25% 12%, rgba(255,246,222,.55), transparent 70%),
    linear-gradient(168deg,#ded0ae,#cdbb93 55%,#b8a377);}
  .dossier[data-papel="1"] .fz-papel::before{content:""; position:absolute; inset:0; mix-blend-mode:multiply;
    background:linear-gradient(225deg, rgba(28,14,4,.95), rgba(96,48,14,.72) 4%, rgba(168,104,38,.34) 8%, transparent 14%);}
  .dossier[data-papel="2"] .fz-papel{background:
    radial-gradient(60% 45% at 70% 30%, rgba(255,248,228,.4), transparent 72%),
    linear-gradient(174deg,#e2d7ba,#d0c29c 50%,#bcab84);}
  .dossier[data-papel="2"] .fz-papel::before{content:""; position:absolute; inset:0; mix-blend-mode:multiply; opacity:.5;
    background:radial-gradient(42% 30% at 68% 34%, rgba(116,84,42,.34), rgba(116,84,42,.16) 58%, transparent 76%),
               radial-gradient(28% 34% at 22% 66%, rgba(104,74,36,.28), transparent 74%);}
  .dossier[data-papel="3"] .fz-papel{background:
    linear-gradient(90deg, transparent 49.2%, rgba(90,66,34,.22) 49.7%, rgba(255,250,232,.32) 50.4%, transparent 51%),
    linear-gradient(0deg, transparent 49.2%, rgba(90,66,34,.20) 49.7%, rgba(255,250,232,.28) 50.4%, transparent 51%),
    radial-gradient(70% 50% at 30% 18%, rgba(255,248,226,.45), transparent 70%),
    linear-gradient(170deg,#d9cba7,#c8b68e 52%,#b3a076);}
  .dossier[data-papel="4"] .fz-papel{background:
    radial-gradient(65% 50% at 40% 15%, rgba(255,250,230,.5), transparent 72%),
    linear-gradient(166deg,#e0d4b4,#cfbf98 50%,#b9a87f);}
  /* el remiendo de cinta del lado roto */
  .dossier[data-papel="4"]::before,.dossier[data-papel="4"]::after{
    content:""; position:absolute; left:-15px; width:56px; z-index:3; pointer-events:none;
    background:linear-gradient(180deg, rgba(216,198,152,.8), rgba(192,170,120,.74));
    mix-blend-mode:multiply; box-shadow:0 1px 5px rgba(0,0,0,.22);}
  .dossier[data-papel="4"]::before{top:16%; height:150px; transform:rotate(-4deg)}
  .dossier[data-papel="4"]::after{top:58%; height:190px; transform:rotate(3deg)}
  .dossier[data-papel="5"] .fz-papel{background:
    radial-gradient(60% 45% at 75% 24%, rgba(255,244,216,.42), transparent 70%),
    linear-gradient(100deg,#8e7a55,#c0ad83 34%,#cdbb93 70%,#b9a67e);}
  .dossier[data-papel="5"] .fz-papel::before{content:""; position:absolute; inset:0; mix-blend-mode:multiply;
    background:linear-gradient(90deg, rgba(22,12,4,.9), rgba(70,38,12,.7) 16px, rgba(120,74,28,.4) 34px, transparent 96px);}

  /* --- la letra: .ms-l una letra, .ms-w la palabra que las agrupa, .ms-p una palabra ---
     .ms-w no se parte: el salto de renglon solo puede caer entre palabras */
  .ms-w{display:inline-block; white-space:nowrap}
  /* sin will-change: el giro de cada letra es fijo, y una capa de GPU por letra hacia que Chrome
     dejara bloques enteros de la ficha sin pintar (visto a ancho de movil, 2026-10-10) */
  .ms-l{display:inline-block}
  .ms-p{display:inline-block; white-space:pre-wrap}

  .dossier[data-papel] .dossier-head{border:0; margin-bottom:22px}
  .dossier[data-papel] .eyebrow{font-family:var(--f-nota); font-size:.95rem; letter-spacing:0;
    text-transform:none; color:var(--tinta-tenue)}
  .dossier[data-papel] .dossier-title h3{font-family:var(--f-mano); font-weight:400;
    font-size:2.5rem; line-height:1.05; color:var(--tinta); border-bottom:2px solid var(--tinta-suave);
    display:inline-block; padding-bottom:2px}
  .dossier[data-papel] .dossier-sci{font-family:var(--f-nota); font-size:1.1rem; color:var(--tinta-suave)}
  .dossier[data-papel] .period-tag{font-family:var(--f-mano); font-size:1.15rem;
    background:none; color:var(--rojo); border:1.8px solid var(--tinta-suave); border-right-color:transparent;
    border-radius:2px; padding:9px 15px}
  .dossier[data-papel] .close-btn{background:none; border:1.6px solid var(--tinta-tenue); color:var(--tinta)}

  /* --- diagrama a escala: se conserva entero, solo cambia de ropa --- */
  .dossier[data-papel] .plate{background:none; border:0; border-radius:0; padding:0; margin-bottom:26px}
  .dossier[data-papel] .plate-head{padding:0 0 4px}
  .dossier[data-papel] .plate-head .eyebrow{font-family:var(--f-mano); font-size:1.3rem;
    color:var(--tinta); border-bottom:1.8px solid var(--tinta-suave); padding-bottom:2px}
  .dossier[data-papel] .plate-legend,.dossier[data-papel] .plate-note{color:var(--tinta-tenue); font-size:.92rem}
  .dossier[data-papel] .diagram svg{mix-blend-mode:multiply}

  /* --- datos: dos columnas de renglones, no una rejilla de fichas --- */
  .dossier[data-papel] .dossier-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:13px 40px; margin-bottom:26px}
  /* Etiqueta y valor en el mismo renglon; si el valor no cabe, sigue debajo.
     Sin sangria francesa: text-indent negativo choca con las letras, que son
     inline-block, y descoloca todo el bloque. */
  .dossier[data-papel] .dossier-field{display:block}
  .dossier[data-papel] .dossier-field.wide{grid-column:auto}
  .dossier[data-papel] .dossier-field dt{display:inline; font-family:var(--f-nota); font-size:1.06rem;
    font-variant:normal; color:var(--tinta-tenue)}
  .dossier[data-papel] .dossier-field dt::after{content:":"}
  .dossier[data-papel] .dossier-field dd{display:inline; font-family:var(--f-nota); font-size:1.08rem;
    margin:0 0 0 .35em; color:var(--tinta)}

  /* --- prosa --- */
  .dossier[data-papel] .dossier-fact{border-top:0; padding:0; margin-bottom:26px}
  .dossier[data-papel] .dossier-fact b{font-family:var(--f-mano); font-size:1.3rem;
    color:var(--tinta); border-bottom:1.8px solid var(--tinta-suave); display:inline-block; padding-bottom:2px}
  .dossier[data-papel] #d-fact{display:block; margin-top:8px; font-size:1.14rem; color:var(--rojo)}
  .dossier[data-papel] .bloque{border-top:0; margin-top:28px; padding-top:0}
  .dossier[data-papel] .bloque > .eyebrow{font-family:var(--f-mano); font-size:1.3rem;
    color:var(--tinta); border-bottom:1.8px solid var(--tinta-suave); display:inline-block;
    padding-bottom:2px; margin-bottom:10px}
  .dossier[data-papel] .sitio-txt{font-family:var(--f-nota); font-weight:300; font-size:1.05rem;
    line-height:1.72; color:var(--lapiz); max-width:68ch}

  /* --- mapa: sigue funcionando el viaje al pasado, solo cambia de color --- */
  .dossier[data-papel] .mapa{background:rgba(255,250,235,.16); border:1.6px solid var(--tinta-tenue);
    border-radius:0}
  .dossier[data-papel] .mapa svg{mix-blend-mode:multiply}
  .dossier[data-papel] .mapa-btn{font-family:var(--f-nota); background:rgba(255,250,235,.4);
    border:1.4px solid var(--tinta-tenue); color:var(--tinta)}
  .dossier[data-papel] .mapa-epoca{font-family:var(--f-nota); color:var(--tinta-tenue)}

  /* --- galeria y credito --- */
  .dossier[data-papel] .gal figure{background:rgba(255,250,235,.2); border:1.4px solid var(--tinta-tenue)}
  .dossier[data-papel] .gal figcaption{font-family:var(--f-nota); color:var(--tinta-tenue)}
  .dossier[data-papel] .dossier-credit{font-family:var(--f-nota); font-size:.9rem; color:var(--tinta-tenue);
    margin-top:26px}
  .dossier[data-papel] a{color:var(--rojo)}

  @media (max-width:560px){
    .dossier[data-papel]{padding:26px 20px 34px}
    .dossier[data-papel] .dossier-title h3{font-size:1.8rem}
    .dossier[data-papel] .fz-fibra{inset:-5px}
    .dossier[data-papel="4"]::before,.dossier[data-papel="4"]::after{display:none}
  }
  @media (prefers-reduced-motion: reduce){ .ms-l,.ms-p{transform:none !important} }

  /* =====================================================================
     LAS TARJETAS DEL CATALOGO, TAMBIEN DE PAPEL
     Mismo lenguaje que la ficha abierta, pero con otro motor: son 295 a la
     vez, asi que el canto roto va con clip-path (poligonos pregenerados en
     app.js, ocho siluetas repartidas por id) en vez de filtros SVG. La
     variedad sale de combinar 8 bordes x 5 papeles x 3 juegos de manchas.
     ===================================================================== */
  .catalog-grid{gap:22px 20px}

  .cat-card[data-papel]{
    border:0; padding:16px 18px 18px;
    transform:rotate(var(--giro,0deg));
    transition:transform .16s ease;
  }
  /* el papel, y encima el grano */
  .cat-card[data-papel]::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    mix-blend-mode:multiply; opacity:.34; background-image:var(--grano);
  }
  .cat-card[data-papel] > *{position:relative; z-index:1}

  /* los cinco papeles, los mismos que las cinco plantillas de la ficha */
  .cat-card[data-papel="1"]{background:
    radial-gradient(70% 50% at 25% 12%, rgba(255,246,222,.55), transparent 70%),
    linear-gradient(168deg,#ded0ae,#cdbb93 55%,#b8a377);}
  .cat-card[data-papel="2"]{background:
    radial-gradient(60% 45% at 70% 30%, rgba(255,248,228,.4), transparent 72%),
    linear-gradient(174deg,#e2d7ba,#d0c29c 50%,#bcab84);}
  .cat-card[data-papel="3"]{background:
    linear-gradient(90deg, transparent 49%, rgba(90,66,34,.18) 49.6%, rgba(255,250,232,.28) 50.5%, transparent 51%),
    radial-gradient(70% 50% at 30% 18%, rgba(255,248,226,.45), transparent 70%),
    linear-gradient(170deg,#d9cba7,#c8b68e 52%,#b3a076);}
  .cat-card[data-papel="4"]{background:
    radial-gradient(65% 50% at 40% 15%, rgba(255,250,230,.5), transparent 72%),
    linear-gradient(166deg,#e0d4b4,#cfbf98 50%,#b9a87f);}
  .cat-card[data-papel="5"]{background:
    radial-gradient(60% 45% at 75% 24%, rgba(255,244,216,.42), transparent 70%),
    linear-gradient(100deg,#9a8660,#c0ad83 30%,#cdbb93 68%,#b9a67e);}

  /* tres juegos de manchas: humedad, dedos y una quemadura de esquina */
  .cat-card[data-papel]::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    mix-blend-mode:multiply; opacity:.5}
  .cat-card[data-mancha="0"]::after{background:
    radial-gradient(40px 30px at 14% 78%, rgba(116,84,42,.34), transparent 70%),
    radial-gradient(60px 44px at 88% 20%, rgba(110,78,36,.24), transparent 72%);}
  .cat-card[data-mancha="1"]::after{background:
    radial-gradient(70px 52px at 78% 68%, rgba(116,84,42,.30), transparent 72%),
    radial-gradient(22px 17px at 22% 16%, rgba(40,30,18,.32), transparent 66%),
    radial-gradient(15px 12px at 26% 21%, rgba(40,30,18,.26), transparent 66%);}
  .cat-card[data-mancha="2"]::after{background:
    linear-gradient(218deg, rgba(38,20,6,.85), rgba(112,58,18,.5) 5%, rgba(170,108,42,.22) 10%, transparent 17%),
    radial-gradient(48px 36px at 18% 62%, rgba(110,78,36,.26), transparent 70%);}

  /* --- el contenido --- */
  /* position repetido a proposito: «.cat-card[data-papel] > *» lo pisaba con relative y el numero caia contra el canto izquierdo */
  .cat-card[data-papel] .cat-num{position:absolute; font-family:var(--f-nota); font-size:.82rem; letter-spacing:0;
    color:var(--tinta-tenue); background:none; border:0; top:12px; right:14px}
  .cat-card[data-papel] .cat-art{border-bottom:0; margin-bottom:8px; padding-bottom:2px}
  .cat-card[data-papel] .cat-art img{mix-blend-mode:multiply; filter:sepia(.22) contrast(1.04) saturate(.9)}
  /* la raya bajo la ilustracion, trazada a mano */
  .cat-card[data-papel] .cat-art::after{
    content:""; position:absolute; left:16px; right:16px; bottom:0; height:2px;
    background:linear-gradient(90deg, transparent, var(--tinta-suave) 6%, var(--tinta-suave) 88%, transparent);
    opacity:.55; border-radius:2px;
  }
  .cat-card[data-papel] .cat-art{position:relative}
  .cat-card[data-papel] h3{font-family:var(--f-mano); font-weight:400; font-size:1.22rem;
    line-height:1.15; color:var(--tinta)}
  .cat-card[data-papel] .sci{font-family:var(--f-nota); font-style:italic; font-size:.88rem;
    color:var(--tinta-suave); margin:3px 0 5px}
  .cat-card[data-papel] .clade{font-family:var(--f-nota); font-weight:300; font-size:.88rem;
    color:var(--tinta-suave); line-height:1.45; margin-bottom:9px}
  .cat-card[data-papel] .period-tag{font-family:var(--f-mano); font-size:.88rem;
    background:none; color:var(--rojo); border:1.4px solid var(--tinta-tenue); border-right-color:transparent;
    border-radius:2px; padding:3px 8px}
  .cat-card[data-papel] .cta{font-family:var(--f-mano); font-size:.92rem; font-weight:400;
    color:var(--rojo); border-bottom:1.6px solid rgba(143,53,32,.45)}

  /* al pasar por encima, la hoja se endereza y se levanta de la mesa */
  .cat-card[data-papel]:hover{transform:rotate(0deg) translateY(-3px)}
  /* el foco no puede ir en outline: el clip-path del papel lo recortaria */
  .cat-card[data-papel]:focus-visible{outline:none; box-shadow:inset 0 0 0 3px var(--rojo)}

  /* en el movil, dos columnas de hojas compactas: dibujo, nombre y periodo; el clado y el
     «Ver ficha técnica» sobran (la ficha se abre tocando la hoja entera). Con el telefono en
     horizontal, las mismas hojas en tantas columnas como entren (4-5 a 915 px) */
  @media (orientation:landscape) and (max-height:500px){
    .catalog-grid{grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));}
  }
  @media (max-width:560px), (orientation:landscape) and (max-height:500px){
    .catalog-grid{gap:14px 10px}
    .cat-card[data-papel]{padding:10px 10px 12px; transform:none}
    .cat-card[data-papel]:hover{transform:translateY(-3px)}
    .cat-card[data-papel] .cat-num{top:8px; right:10px; font-size:.72rem}
    .cat-card[data-papel] .cat-art{height:86px; margin:12px 0 6px; padding:0 2px 2px}
    .cat-card[data-papel] .cat-art::after{left:6px; right:6px}
    .cat-card[data-papel] .cat-top{flex-direction:column; gap:4px}
    .cat-card[data-papel] h3{font-size:1.05rem; overflow-wrap:anywhere}
    .cat-card[data-papel] .sci{font-size:.78rem; margin:2px 0 6px}
    .cat-card[data-papel] .period-tag{font-size:.78rem; padding:1px 6px}
    .cat-card[data-papel] :is(.clade,.cta){display:none}
  }
  @media (prefers-reduced-motion: reduce){
    .cat-card[data-papel]{transition:none}
  }

  /* La barra de color del periodo se lee como un chip de interfaz sobre el
     papel. Se conserva la informacion —el color sigue distinguiendo periodos—
     pero como un trazo de tinta al margen, no como un bloque solido. */
  .cat-card[data-papel] .period-tag::before,
  .dossier[data-papel] .period-tag::before{
    width:2px; left:-5px; top:3px; bottom:3px; background:var(--pc); opacity:.75; border-radius:2px;
  }
  .cat-card[data-papel] .period-tag{padding-left:9px}
  .dossier[data-papel] .period-tag{padding-left:17px}

  body[data-pantalla="home"] #home-intro{color:var(--ink); font-size:1.06rem; text-shadow:0 1px 2px #000, 0 0 12px rgba(0,0,0,.95), 0 0 26px rgba(0,0,0,.8);}

  /* aviso de versión nueva de la app instalada (pwa.js): una tira de papel abajo */
  #pwa-aviso{position:fixed; z-index:60; left:50%; transform:translateX(-50%) rotate(-.6deg);
    bottom:calc(16px + env(safe-area-inset-bottom)); width:max-content; max-width:calc(100vw - 32px);
    display:flex; align-items:center; gap:14px; padding:10px 14px 10px 18px;
    background:var(--hoja-a); color:var(--tinta); font-family:var(--f-nota); font-size:1rem;
    box-shadow:0 10px 26px rgba(0,0,0,.6);}
  #pwa-aviso button{font:inherit; color:var(--rojo); background:none; cursor:pointer; padding:6px 10px;
    border:1.6px solid var(--tinta-tenue); border-radius:3px;}