:root{
  --ground:#F0EFEA; --panel:#FFFFFF; --ink:#1B1A17; --ink-2:#565349; --ink-3:#7E786C;
  --line:#D6D3C9; --red:#A83420; --chalk:#EDEAE1;
  /* acento para fondos oscuros: el rojo de marca no pasa AA sobre negro */
  --ember:#E9A188;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#131311; --panel:#1C1C19; --ink:#EBE9E2; --ink-2:#A8A49A; --ink-3:#8C8679;
    --line:#2C2C27; --red:#E27A5E; --chalk:#EDEAE1;
  }
}
:root[data-theme="dark"]{
  --ground:#131311; --panel:#1C1C19; --ink:#EBE9E2; --ink-2:#A8A49A; --ink-3:#8C8679;
  --line:#2C2C27; --red:#E27A5E; --chalk:#EDEAE1;
}
*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink);
  font-family:Karla,"Helvetica Neue",Arial,sans-serif; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased}
img{display:block; max-width:100%}
a{color:inherit}
.m{font-family:"Space Mono",ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums}
.lb{font-family:"Space Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase}
.d{font-family:Archivo,"Arial Narrow",Arial,sans-serif; font-weight:800; font-stretch:112%;
  letter-spacing:-.02em; text-transform:uppercase; text-wrap:balance}
.wrap{max-width:1300px; margin:0 auto; padding:0 24px}
/* nada de palabras largas rompiendo el ancho en móvil */
.find b,.pin p,.pin a,.stratum p,.qa p,.foot p{overflow-wrap:anywhere}

/* ————— cabecera: logo, marca e idiomas ————— */
.top{position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--ground) 94%,transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; gap:16px; padding:10px 24px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none;
  font-family:Archivo,sans-serif; font-weight:800; font-stretch:112%; text-transform:uppercase;
  letter-spacing:.02em; font-size:16px; white-space:nowrap}
.brand .logo{flex:none; border-radius:5px}
.brand em{font-style:normal; color:var(--red)}
.langs{margin-left:auto; display:flex; align-items:center; gap:2px; flex-wrap:wrap}
.langs a{text-decoration:none; color:var(--ink-3); padding:4px 8px; border-radius:2px; line-height:1}
.langs a:hover{color:var(--red); background:var(--panel)}
.langs a[aria-current]{color:var(--ground); background:var(--ink)}
.langs span[aria-disabled]{color:var(--ink-3); opacity:.45; padding:4px 8px; cursor:default}

/* ————— portada: el titular sobre las fotos del catálogo ————— */
.hero{position:relative; isolation:isolate; overflow:hidden; color:var(--chalk);
  background:#241F16; padding:58px 0 40px; border-bottom:1px solid var(--line)}
.hero__bg{position:absolute; inset:0; z-index:-2}
.hero__slide{position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.4s ease-in-out; transform:scale(1.04)}
.hero__slide[data-on]{opacity:1}
/* El velo es lo que sostiene el contraste del texto, y las fotos que rotan
   pueden traer un cielo blanco detrás del titular: son DOS degradados, uno
   vertical y otro que oscurece el lado del texto. Sobre el peor cielo posible
   el crema queda en 4,9:1. No aclararlos sin recomprobarlo. */
.hero::before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,rgba(18,15,11,.58),rgba(18,15,11,.16) 62%,rgba(18,15,11,0)),
             linear-gradient(180deg,rgba(18,15,11,.86),rgba(18,15,11,.6) 38%,rgba(18,15,11,.88))}
.hero__eyebrow{color:var(--ember)}
.hero h1{margin:.16em 0 .32em; font-size:clamp(2.4rem,5.8vw,4.6rem); line-height:.94; max-width:22ch;
  text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero h1 span{color:var(--ember); display:block}
.hero > .wrap > p{margin:0; color:#E4E0D5; font-size:19px; max-width:62ch}
.figs{display:grid; gap:10px 34px; grid-template-columns:repeat(auto-fit,minmax(136px,1fr));
  margin-top:32px; border-top:1px solid rgba(255,255,255,.28); padding-top:20px}
.figs div b{display:block; font-family:Archivo,sans-serif; font-weight:800; font-stretch:112%;
  font-size:2.1rem; line-height:1; font-variant-numeric:tabular-nums; color:var(--ember)}
.figs div span{color:#CFC9BC}
.hero__credit{position:absolute; right:24px; bottom:10px; margin:0; z-index:1;
  color:rgba(237,234,225,.6); font-size:9.5px; letter-spacing:.08em; max-width:min(52ch,60%);
  text-align:right}
.hero__credit em{font-style:normal; color:rgba(237,234,225,.78)}

/* ————— capa ————— */
.stratum{position:relative; color:var(--chalk)}
.stratum::before{content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px),
                   radial-gradient(rgba(0,0,0,.17) 1px,transparent 1px);
  background-size:17px 17px,11px 11px; background-position:0 0,6px 8px; opacity:.5; pointer-events:none}
.stratum__edge{height:7px; background:linear-gradient(90deg,rgba(0,0,0,.32),rgba(255,255,255,.10),rgba(0,0,0,.32))}
.stratum .wrap{position:relative; z-index:2; display:grid; gap:32px;
  grid-template-columns:132px minmax(0,1fr); padding:40px 24px 46px}
.stratum .wrap > *{min-width:0}
/* regla lateral: el periodo, no una cota inventada */
.rail{border-right:1px solid rgba(255,255,255,.26); padding-right:16px; text-align:right;
  position:relative; align-self:start}
.rail b{display:block; font-family:"Space Mono",monospace; font-size:12.5px; line-height:1.45;
  font-variant-numeric:tabular-nums}
.rail span{display:block; font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; opacity:.86; margin-top:9px; line-height:1.5}
.rail::after{content:""; position:absolute; right:-4px; top:7px; width:7px; height:7px;
  background:var(--red); border-radius:50%}
.stratum__head{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap}
.stratum h2{margin:0 0 4px; font-size:clamp(1.7rem,3.7vw,3rem); line-height:1;
  overflow-wrap:anywhere}
.count{font-family:"Space Mono",monospace; font-size:11px; opacity:.86; letter-spacing:.1em;
  text-transform:uppercase}
.stratum > .wrap > div > p{margin:6px 0 24px; max-width:66ch; font-size:18px}

/* ————— tarjeta de resto, con foto ————— */
.finds{display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(min(232px,100%),1fr))}
.find{display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:rgba(255,255,255,.075); border:1px solid rgba(255,255,255,.16); overflow:hidden;
  transition:border-color .25s, background .25s, transform .25s}
.find:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.42); transform:translateY(-2px)}
.find__shot{position:relative; aspect-ratio:16/10; overflow:hidden; background:rgba(0,0,0,.28)}
.find__shot img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.find:hover .find__shot img{transform:scale(1.05)}
/* sin fotografía: no se disimula, se dice */
.find__void{position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:14px;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 7px,transparent 7px 14px)}
.find__void span{font-family:Archivo,sans-serif; font-weight:800; font-stretch:112%;
  text-transform:uppercase; font-size:14px; opacity:.72; line-height:1.2}
.find__void em{display:block; font-style:normal; font-family:"Space Mono",monospace; font-size:9px;
  letter-spacing:.13em; opacity:.6; margin-top:6px}
/* contador de curiosidades: el gancho de la tarjeta */
.curio{position:absolute; left:0; bottom:0; display:flex; align-items:baseline; gap:6px;
  background:var(--red); color:#FFF6F2; padding:5px 10px 5px 9px}
.curio b{font-family:Archivo,sans-serif; font-weight:800; font-stretch:112%; font-size:17px; line-height:1;
  font-variant-numeric:tabular-nums}
.curio span{font-family:"Space Mono",monospace; font-size:9px; letter-spacing:.11em; text-transform:uppercase}
.find__body{padding:12px 13px 13px; display:flex; flex-direction:column; gap:7px; flex:1}
.find b{font-size:16px; line-height:1.24; font-weight:700; display:block}
.find__meta{display:flex; gap:6px; flex-wrap:wrap; margin-top:auto}
.tg{font-family:"Space Mono",monospace; font-size:9px; letter-spacing:.09em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.34); padding:2px 6px; white-space:nowrap}
.tg[data-bic]{border-color:var(--chalk); background:rgba(255,255,255,.17)}
.find__type{font-family:"Space Mono",monospace; font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; opacity:.86}

/* ————— curiosidad destacada de la capa ————— */
.pin{margin:26px 0 0; max-width:66ch; border-left:3px solid var(--red); padding:3px 0 3px 16px}
.pin em{font-style:normal; font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:#F3BFAC; display:block; margin-bottom:4px}
.pin p{margin:0; font-size:17.5px}
.pin a{font-family:"Space Mono",monospace; font-size:10.5px; opacity:.86; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.34); display:inline-block; margin-top:7px}

/* ————— secciones claras ————— */
.sec{padding:46px 0; border-bottom:1px solid var(--line)}
.sec h2{margin:0 0 8px; font-size:clamp(1.5rem,2.8vw,2.3rem)}
.sec > .wrap > p{margin:0; max-width:74ch; color:var(--ink-2)}
.qa{margin-top:20px; border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer; padding:15px 0; list-style:none; font-family:Archivo,sans-serif;
  font-weight:800; font-stretch:108%; text-transform:uppercase; font-size:15px; display:flex; gap:12px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"■"; color:var(--red); font-size:9px; padding-top:6px}
.qa p{margin:0 0 16px; max-width:76ch; color:var(--ink-2)}
.foot{padding:40px 0 60px; background:var(--panel); border-top:1px solid var(--line)}
.foot .wrap{display:grid; gap:32px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.foot h3{margin:0 0 10px; color:var(--ink-2)}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{padding:6px 0; border-bottom:1px solid var(--line); font-size:15px}
.foot li span{display:block; color:var(--ink-3); font-size:13px}
.foot p{margin:0; color:var(--ink-2); font-size:15px; max-width:50ch}
.foot a{color:var(--red)}

/* ————— volver arriba ————— */
.up{position:fixed; right:20px; bottom:20px; z-index:70; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; background:var(--red); color:#FFF6F2; text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.28); font-size:19px; line-height:1;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s, transform .25s, visibility .25s}
.up[data-show]{opacity:1; visibility:visible; transform:none}
.up:hover{filter:brightness(1.08)}
.up span{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
a:focus-visible,summary:focus-visible{outline:2px solid var(--red); outline-offset:3px}
@media (max-width:860px){
  .stratum .wrap{grid-template-columns:minmax(0,1fr); gap:18px}
  .rail{border-right:0; border-bottom:1px solid rgba(255,255,255,.26); text-align:left;
    padding:0 0 12px; display:flex; gap:18px; align-items:baseline; flex-wrap:wrap}
  .rail span{margin-top:0}
  .rail::after{display:none}
  .hero__credit{position:static; text-align:left; max-width:none; margin:22px 0 0; padding:0 24px}
}
@media (max-width:520px){
  .finds{grid-template-columns:1fr}
  .up{right:14px; bottom:14px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
}

/* ————————————————————————————————————————————————————————————————
   FICHA DE UN RESTO: la página es un corte de excavación.
   Superficie clara arriba, una banda por época bajando, y el fondo del corte.
   ———————————————————————————————————————————————————————————————— */
figure{margin:0}

/* migas: solo en las fichas */
.crumbs{display:flex; gap:8px; align-items:center; min-width:0; color:var(--ink-3)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--red)}
.crumbs i{font-style:normal; opacity:.5}
.crumbs b{font-weight:400; color:var(--ink); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; max-width:34ch}
@media (max-width:820px){ .crumbs{display:none} }

/* ————— superficie ————— */
.surface{padding:30px 0 32px}
.surface__eyebrow{color:var(--red)}
.surface h1{margin:.14em 0 .28em; font-size:clamp(2rem,4.6vw,3.6rem); line-height:.96; max-width:26ch}
.lead{margin:0; color:var(--ink-2); font-size:19px; max-width:66ch}
.plate{margin:26px 0 0}
.plate img{width:100%; aspect-ratio:16/8; object-fit:cover; border:1px solid var(--line)}
.plate figcaption{display:flex; gap:16px; justify-content:space-between; padding:8px 0 0;
  font-size:14px; color:var(--ink-2); flex-wrap:wrap}
.plate figcaption em{font-style:normal; font-family:"Space Mono",monospace; font-size:10px;
  letter-spacing:.06em; color:var(--ink-3); white-space:nowrap}
.hfacts{display:grid; gap:16px 30px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  margin:28px 0 0; padding-top:18px; border-top:1px solid var(--line)}
.hfacts dt{font-family:"Space Mono",monospace; font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3)}
.hfacts dd{margin:5px 0 0; font-size:15.5px; line-height:1.35;
  font-variant-numeric:tabular-nums}
.hfacts dd a{color:var(--red)}

/* leyenda del corte: cuántas capas tiene el resto, de un vistazo */
.key{display:flex; margin:26px 0 0; border:1px solid var(--line)}
.key a{flex:1; text-decoration:none; padding:13px 15px; color:#EDEAE1; min-width:0}
.key a:hover{filter:brightness(1.14)}
.key span{font-family:"Space Mono",monospace; font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; opacity:.75; display:block}
.key b{display:block; font-family:Archivo,sans-serif; font-weight:800; font-stretch:112%;
  text-transform:uppercase; font-size:14px; margin-top:5px; line-height:1.12}

/* ————— el sitio: la prosa de la base ————— */
.prose{max-width:68ch; margin:18px 0 0}
.prose p{margin:0 0 1.05em; font-size:17.5px}
.pending{margin:14px 0 0; color:var(--ink-3)}
.finds-box{margin:26px 0 0; border-left:3px solid var(--red); padding:2px 0 2px 16px;
  max-width:70ch}
.finds-box h3{margin:0 0 8px; color:var(--red)}
.find-row + .find-row{margin-top:14px}
.find-row b{display:block; font-size:16px}
.find-row b a{color:var(--red)}
.find-row p{margin:3px 0 0; color:var(--ink-2); font-size:15.5px}

/* ————— entrada al corte ————— */
.cut{padding:42px 0 26px}
.cut h2{margin:.1em 0 .3em; font-size:clamp(1.5rem,2.8vw,2.2rem)}
.cut > .wrap > p{margin:0; color:var(--ink-2); max-width:70ch}

/* ————— una banda por época ————— */
/* la cabecera es sticky: los anclajes tienen que dejarle sitio */
.layer,.stratum,.sec,.cut{scroll-margin-top:62px}
.layer{position:relative; color:var(--chalk)}
.layer::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px),
                   radial-gradient(rgba(0,0,0,.17) 1px,transparent 1px);
  background-size:17px 17px,11px 11px; background-position:0 0,6px 8px; opacity:.5}
.layer__edge{height:8px;
  background:linear-gradient(90deg,rgba(0,0,0,.34),rgba(255,255,255,.11),rgba(0,0,0,.34))}
.layer .wrap{position:relative; z-index:2; display:grid;
  grid-template-columns:150px minmax(0,1fr); gap:34px; padding:38px 24px 44px}
.layer .wrap > *{min-width:0}
.depth{text-align:right; padding-right:17px; border-right:1px solid rgba(255,255,255,.26);
  position:sticky; top:74px; align-self:start}
.depth b{display:block; font-family:"Space Mono",monospace; font-size:12.5px; line-height:1.4;
  font-variant-numeric:tabular-nums}
.depth span{display:block; font-family:"Space Mono",monospace; font-size:9.5px;
  letter-spacing:.12em; text-transform:uppercase; opacity:.7; margin-top:8px; line-height:1.5}
.depth::after{content:""; position:absolute; right:-4px; top:6px; width:7px; height:7px;
  background:var(--red); border-radius:50%}
.layer .lb{color:#F3BFAC; display:block}
.layer h2{margin:.18em 0 .34em; font-size:clamp(1.6rem,3.2vw,2.4rem); line-height:1}
.layer > .wrap > div > p{margin:0; max-width:66ch; font-size:18px; color:#E7E3D8}
.layer__link{display:inline-block; margin-top:14px; text-decoration:none; opacity:.86;
  border-bottom:1px solid rgba(255,255,255,.34); padding-bottom:2px}
.layer__link:hover{opacity:1}
.lgrid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,300px); gap:26px;
  margin-top:26px; align-items:start}
.pins{display:grid; gap:20px}
.shots{display:grid; gap:12px}
.shots img{width:100%; aspect-ratio:4/3; object-fit:cover;
  border:1px solid rgba(255,255,255,.16)}
.shots figcaption{padding:6px 0 0; font-size:13.5px; color:#D6D0C4}
.shots figcaption em{display:block; font-style:normal; font-family:"Space Mono",monospace;
  font-size:9.5px; letter-spacing:.06em; opacity:.62; margin-top:3px}

/* fondo del corte: hasta dónde llega lo documentado */
.cut-bottom{background:#15150F; color:#B9B4A7; padding:30px 0 40px}
.cut-bottom .wrap{display:grid; gap:14px; grid-template-columns:150px minmax(0,1fr)}
.cut-bottom span{text-align:right; padding-right:17px; opacity:.8}
.cut-bottom p{margin:0; max-width:66ch; font-size:16px}

/* ————— curiosidades sueltas y galería, sobre fondo claro ————— */
.pins--light{max-width:74ch; margin-top:22px}
.pins--light .pin em{color:var(--red)}
.pins--light .pin p{color:var(--ink)}
.pins--light .pin a{color:var(--ink-2); border-bottom-color:var(--line)}
.pins--light .pin a:hover{color:var(--red); border-bottom-color:var(--red)}
.gal{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));
  margin-top:22px}
.gal img{width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--line)}
.gal figcaption{padding:7px 0 0; font-size:13.5px; color:var(--ink-2)}
.gal figcaption em{display:block; font-style:normal; font-family:"Space Mono",monospace;
  font-size:9.5px; letter-spacing:.06em; color:var(--ink-3); margin-top:3px}

/* ————— cerca de aquí ————— */
.near{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));
  margin-top:22px}
.near a{display:block; text-decoration:none; padding:15px 17px; background:var(--panel);
  border:1px solid var(--line)}
.near a:hover{border-color:var(--red)}
.near span{font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--red)}
.near b{display:block; font-family:Archivo,sans-serif; font-weight:800; font-stretch:112%;
  text-transform:uppercase; font-size:15px; margin:6px 0 4px; line-height:1.15}
.near em{font-style:normal; font-size:14px; color:var(--ink-2)}

/* ————— bibliografía ————— */
.bib{list-style:none; margin:20px 0 0; padding:0; counter-reset:b; max-width:80ch}
.bib li{counter-increment:b; padding:12px 0; border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:38px minmax(0,1fr); gap:12px}
.bib li::before{content:"[" counter(b) "]"; font-family:"Space Mono",monospace; font-size:11px;
  color:var(--red)}
.bib a{text-decoration:none; font-size:16px}
.bib a:hover{color:var(--red)}
.bib span{display:block; font-family:"Space Mono",monospace; font-size:10px;
  color:var(--ink-3); margin-top:3px; overflow-wrap:anywhere}

@media (max-width:940px){ .lgrid{grid-template-columns:minmax(0,1fr)}
  .shots{grid-template-columns:1fr 1fr} }
@media (max-width:820px){
  .layer .wrap,.cut-bottom .wrap{grid-template-columns:minmax(0,1fr); gap:16px}
  .depth{position:static; text-align:left; border-right:0; padding:0 0 12px;
    border-bottom:1px solid rgba(255,255,255,.26); display:flex; gap:20px; align-items:baseline;
    flex-wrap:wrap}
  .depth span{margin-top:0}
  .depth::after{display:none}
  .cut-bottom span{text-align:left; padding:0}
  .key{flex-direction:column}
}
@media (max-width:520px){ .shots{grid-template-columns:1fr} }