/* ============================================================================
   pagina.css — páginas interiores de «La subida al Burgess» (Exedra) · [C]
   Se carga DESPUÉS de /assets/css/base.css y solo añade lo de las páginas
   interiores: main.pagina (760 px), portada de página, tipografía de lectura,
   .tldr · .pull · .two · figure · listas · .puerta-atras · el 404.
   Tokens, membrete, colofón, .cta, .salto, foco y details los da base.css [B].
   ============================================================================ */

/* base.css (B) aporta tokens, membrete, colofón, .cta, .salto y foco. */


/* ============================================================================
   El enlace activo del membrete (clase .activo la pone el script de la
   plantilla; sin JS, el atributo data-slug del body lo resuelve por CSS).
   ============================================================================ */
.membrete nav a.activo,
body[data-slug="subida"]      .membrete nav a[data-nav="subida"],
body[data-slug^="cambrico"]   .membrete nav a[data-nav="cambrico"],
body[data-slug^="expedicion"] .membrete nav a[data-nav="expedicion"],
body[data-slug^="memoria"]   .membrete nav a[data-nav="memoria"],
body[data-slug^="estudio"]    .membrete nav a[data-nav="estudio"],
body[data-slug^="cantera"]    .membrete nav a[data-nav="cantera"],
body[data-slug^="mesa"]       .membrete nav a[data-nav="mesa"]{color:var(--verdin)}


/* ============================================================================
   La página interior
   ============================================================================ */
/* Sobre base.css [B], solo en las páginas que salen de plantilla-pagina (llevan data-slug):
   el membrete y el colofón usan --ancho (820 en base.css); aquí se estrechan a la columna de
   main.pagina (760) para que alineen, y el pie legal baja a su propia línea. */
body[data-slug]{--ancho:760px}
body[data-slug] .colofon .legal{max-width:none}

/* 808 = columna de 760 px + los dos márgenes de 24 px (box-sizing:border-box) */
main.pagina{max-width:808px; margin:0 auto; padding:0 24px 72px; font-size:16.5px; line-height:1.72}

/* portada de la página */
.pagina .portada{padding:56px 0 46px; border-bottom:1px solid var(--rule); margin:0 0 8px}
.pagina .eyebrow{font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--verdin); margin:0 0 24px}
.pagina h1{font-family:var(--display); font-weight:400; font-size:clamp(44px,6.4vw,56px); letter-spacing:-.015em; line-height:1.04; margin:0 0 22px; color:var(--tinta); max-width:16ch}
.pagina .lead{font-size:19.5px; line-height:1.55; color:var(--gris); max-width:42ch; margin:0 0 22px; font-weight:300}
.pagina .meta{font-size:12.5px; letter-spacing:.05em; color:var(--gris-2); font-variant-numeric:tabular-nums; margin:0}

/* lectura */
.pagina p{margin:0 0 17px; max-width:66ch}
.pagina em{font-style:italic}
.pagina section{margin:0 0 76px; scroll-margin-top:24px}
.pagina section:first-of-type{margin-top:48px}
.pagina h2{font-family:var(--display); font-weight:400; font-size:30px; letter-spacing:-.008em; line-height:1.22; margin:0 0 16px; max-width:24ch}
.pagina h2 .num{display:block; font-family:var(--body); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--verdin); margin-bottom:11px}
.pagina h3{font-family:var(--display); font-weight:400; font-size:23px; line-height:1.3; margin:44px 0 12px}
.pagina ul,.pagina ol{max-width:66ch; padding-left:22px; margin:0 0 18px}
.pagina li{margin:0 0 11px}
.pagina li::marker{color:var(--verdin-c)}

/* si no lees más que esto */
.tldr{background:var(--white); border-left:2px solid var(--verdin); padding:26px 28px; margin:48px 0 66px; box-shadow:0 1px 2px rgba(23,20,15,.04)}
.tldr h3, .tldr h4{font-family:var(--body); font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--verdin); margin:0 0 14px}
.tldr p{font-family:var(--display); font-size:19px; line-height:1.52; margin:0 0 14px; max-width:56ch; color:var(--tinta)}
.tldr p:last-child{margin-bottom:0}

/* cita sacada */
p.pull{font-family:var(--display); font-size:22px; line-height:1.4; color:var(--tinta); border-left:2px solid var(--verdin-c); padding:4px 0 4px 24px; margin:32px 0; max-width:50ch}

/* dos columnas (Gould · Conway Morris) */
.two{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--rule-2); background:var(--white); margin:30px 0}
.two > div{padding:24px 26px}
.two > div:first-child{border-right:1px solid var(--rule-2)}
.two h3, .two h4{font-family:var(--body); font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--verdin); margin:0 0 13px}
.two p{font-size:15.5px; line-height:1.65; color:var(--gris); max-width:none}
.two p:last-child{margin-bottom:0}
.two p b{color:var(--tinta)}
@media(max-width:620px){.two{grid-template-columns:1fr}.two > div:first-child{border-right:0; border-bottom:1px solid var(--rule-2)}}

/* figuras (los dos SVG del cono) */
.pagina figure{margin:38px 0; padding:0}
.pagina figure svg{display:block; width:100%; height:auto; max-width:100%}
.pagina .fig-v{display:none}
@media(max-width:640px){.pagina .fig-h{display:none}.pagina .fig-v{display:block}}
.pagina figcaption{font-size:13.5px; color:var(--gris); line-height:1.62; margin-top:16px; max-width:60ch}
.fig-cono .lbl{font-family:var(--body); font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; fill:var(--verdin)}
.fig-cono .cap{font-family:var(--body); font-size:12.5px; fill:var(--gris)}
.fig-cono .axis{font-family:var(--body); font-size:11px; fill:var(--gris-2)}
.fig-cono .br{stroke:var(--tinta); stroke-width:1.6; fill:none; stroke-linecap:round}
.fig-cono .brd{stroke:var(--gris-2); stroke-width:1.5; fill:none; stroke-linecap:round}
.fig-cono .eje{stroke:var(--rule); stroke-width:1}
.fig-cono .nodo{fill:var(--tinta)}

/* caja */
.box{background:var(--white); border:1px solid var(--rule-2); padding:24px 26px; margin:26px 0}
.box h3, .box h4{font-family:var(--body); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--verdin); margin:0 0 13px}
.box p{font-size:15.5px}
.box p:last-child{margin-bottom:0}
.box.warm{background:var(--hueso); border-color:var(--rule)}

/* reglas numeradas */
ol.rules{counter-reset:r; list-style:none; padding:0; max-width:66ch; margin:28px 0 0}
ol.rules li{counter-increment:r; position:relative; padding-left:48px; margin:0 0 26px}
ol.rules li::before{content:counter(r); position:absolute; left:0; top:1px; width:29px; height:29px; border:1px solid var(--verdin-c); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:600; color:var(--verdin); background:var(--white); font-variant-numeric:tabular-nums}
ol.rules li b{display:block; margin-bottom:3px; font-size:17.5px; font-family:var(--display); font-weight:400}
ol.rules li span{color:var(--gris); font-size:15.5px}

/* notas al pie */
.notes{border-top:1px solid var(--rule); padding-top:26px; margin-top:16px; font-size:13.5px; color:var(--gris-2); line-height:1.7; max-width:66ch}
.notes p{font-size:13.5px; line-height:1.7}
.notes b{color:var(--gris)}

/* el ciclo del laboratorio */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule-2); border:1px solid var(--rule-2); margin:30px 0 8px}
.steps > div{background:var(--white); padding:20px 18px}
.steps .n{font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--verdin); margin-bottom:8px}
.steps .l{font-family:var(--display); font-size:18px; line-height:1.25; margin-bottom:8px}
.steps p{font-size:14px; line-height:1.55; color:var(--gris); margin:0}
@media(max-width:640px){.steps{grid-template-columns:1fr 1fr}}
.walls{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--gris-2); margin:0 0 30px}

/* las voces del sendero (el espejo) */
ul.mirror{list-style:none; padding:0; margin:34px 0 0; max-width:none}
.mirror li{display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--rule); padding:26px 0; margin:0}
.mirror li:last-child{border-bottom:1px solid var(--rule)}
.mirror .q{font-family:var(--display); font-size:21px; line-height:1.35; color:var(--tinta); padding-right:34px; max-width:none; margin:0}
.mirror .a{font-size:15.5px; line-height:1.66; color:var(--gris); max-width:none; margin:0}
.mirror .a b{color:var(--tinta)}
@media(max-width:640px){.mirror li{grid-template-columns:1fr; gap:12px}.mirror .q{padding-right:0}}

/* las fases */
.phases{display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px; background:var(--rule-2); border:1px solid var(--rule-2); margin:30px 0}
.phases > div{background:var(--white); padding:26px 24px}
.phases h3, .phases h4{font-family:var(--display); font-weight:400; font-size:21px; margin:0 0 4px}
.phases .meta{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--verdin); margin:0 0 14px}
.phases p{font-size:15px; line-height:1.6; color:var(--gris); margin:0 0 10px}
.phases ul{padding-left:18px; margin:0; font-size:14.5px; color:var(--gris)}
.phases li{margin:0 0 6px}
@media(max-width:760px){.phases{grid-template-columns:1fr}}

/* con quién */
.who{display:grid; grid-template-columns:1fr 1fr 1fr; gap:28px; margin:30px 0 10px}
.who h3, .who h4{font-family:var(--display); font-weight:400; font-size:20px; line-height:1.3; margin:0 0 8px}
.who p{font-size:15px; line-height:1.6; color:var(--gris); margin:0}
@media(max-width:760px){.who{grid-template-columns:1fr}}

/* los peldaños del estudio */
ol.peldanos{counter-reset:p; list-style:none; padding:0; margin:30px 0 0; max-width:none}
ol.peldanos li{counter-increment:p; position:relative; padding:24px 0 24px 48px; border-top:1px solid var(--rule); margin:0}
ol.peldanos li:last-child{border-bottom:1px solid var(--rule)}
ol.peldanos li::before{content:counter(p); position:absolute; left:0; top:26px; width:29px; height:29px; border:1px solid var(--verdin-c); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:600; color:var(--verdin); background:var(--white); font-variant-numeric:tabular-nums}
ol.peldanos h3{margin:0 0 8px; font-size:23px}
ol.peldanos p{color:var(--gris); font-size:15.5px; line-height:1.66; margin:0 0 10px}
ol.peldanos p:last-child{margin-bottom:0}
ol.peldanos p b{color:var(--tinta)}

/* lo que no es */
ul.no-es{list-style:none; padding:0; margin:22px 0 0; max-width:66ch}
ul.no-es li{position:relative; padding-left:26px; margin:0 0 10px; color:var(--gris)}
ul.no-es li::before{content:"—"; position:absolute; left:0; color:var(--verdin-c)}

/* cierre de página */
.cierre{border-top:1px solid var(--rule); padding-top:48px; margin-top:12px}
.cierre p{font-family:var(--display); font-size:22px; line-height:1.4; max-width:34ch; margin:0 0 20px; color:var(--tinta)}
.cierre p:last-child{margin-bottom:0}
.cierre p.small{font-family:var(--body); font-size:16.5px; line-height:1.72; max-width:66ch; color:var(--gris)}
.cierre .mail{font-family:var(--display); font-size:22px; letter-spacing:.01em}
.cierre .mail a{color:var(--tinta); text-decoration:none; border-bottom:1px solid var(--verdin-c)}
.cierre .mail a:hover{color:var(--verdin)}
p.firma{font-family:var(--display); font-size:15px; letter-spacing:.02em; color:var(--gris-2); margin:36px 0 0}

/* la puerta de vuelta */
.puerta-atras{display:flex; align-items:center; justify-content:space-between; gap:18px 24px; flex-wrap:wrap; border-top:1px solid var(--rule); margin-top:64px; padding-top:32px}
.puerta-atras .volver{font-family:var(--display); font-size:18px; color:var(--tinta); text-decoration:none; border-bottom:1px solid var(--verdin-c)}
.puerta-atras .volver:hover{color:var(--verdin)}

/* el 404: fuera del sendero */
.perdido{padding:72px 0 40px; text-align:center}
.perdido .guia{display:block; width:132px; height:198px; margin:0 auto 34px; color:var(--tinta)}
.perdido h1{margin:0 auto 18px; max-width:14ch}
.perdido p{margin:0 auto 30px; color:var(--gris)}
@media(max-width:640px){.perdido{padding:48px 0 32px}.perdido .guia{width:104px; height:156px}}