/* fuentes de la casa, autoalojadas (OFL): ninguna petición a terceros */
@font-face{font-family:"Libre Caslon Display"; src:url("/assets/fonts/LibreCaslonDisplay-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:"Public Sans"; src:url("/assets/fonts/PublicSans-wght.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap}
@font-face{font-family:"Public Sans"; src:url("/assets/fonts/PublicSans-Italic-wght.woff2") format("woff2"); font-weight:100 900; font-style:italic; font-display:swap}
/* ============================================================================
   base.css — «La subida al Burgess» (Exedra) · [B]
   Lo que comparten todas las páginas: tokens (SPEC §2), tipografía, membrete,
   colofón, .cta, .salto, foco visible, details y utilidades.
   Solo tinta / papel / verdín / grises. Ningún color nuevo.
   ============================================================================ */

:root{
  --tinta:#17140F; --paper:#F6F3EC; --white:#fff; --hueso:#EDE7D8; --piedra:#E7E1D2;
  --rule:#DCD6C8; --rule-2:#EBE6DA; --gris:#565044; --gris-2:#736B5C;
  --verdin:#4B6857; --verdin-c:#7A9683;
  --display:"Libre Caslon Display",Georgia,"Times New Roman",serif;
  --body:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --ancho:820px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--paper); color:var(--tinta); font-family:var(--body); font-size:16.5px; line-height:1.72; -webkit-font-smoothing:antialiased; overflow-x:hidden}
::selection{background:var(--verdin); color:var(--paper)}
a{color:var(--verdin)}
b,strong{font-weight:600}
p{margin:0 0 17px; max-width:66ch}
svg{overflow:visible}
button{font:inherit; color:inherit}

/* foco visible, en verdín, para todo lo que se pueda enfocar */
:focus-visible{outline:2px solid var(--verdin); outline-offset:3px}
:focus:not(:focus-visible){outline:none}

/* ── saltar a la subida ─────────────────────────────────────────────────── */
.salto{position:absolute; left:-999px; top:0; z-index:100; background:var(--tinta); color:var(--paper); padding:10px 14px; font-size:14px; text-decoration:none; border-radius:2px}
.salto:focus{left:16px; top:12px}

/* ── membrete (producción) ──────────────────────────────────────────────── */
.membrete{padding:0 24px; position:relative; z-index:5; background:var(--paper)}
/* La cabecera se retira al bajar y vuelve al primer gesto hacia arriba: el escenario no pierde altura
   y el menú está siempre a un pulgar. Lo enciende membrete.js poniendo html.con-membrete; sin JS la
   cabecera se queda quieta, como siempre. */
html.con-membrete .membrete{position:sticky; top:0; transition:transform .28s ease, box-shadow .28s ease}
html.con-membrete.membrete-fuera .membrete{transform:translateY(-104%)}
html.con-membrete.membrete-flota .membrete{box-shadow:0 6px 20px rgba(23,20,15,.07)}
@media (prefers-reduced-motion:reduce){ html.con-membrete .membrete{transition:none} }
.membrete-in{max-width:var(--ancho); margin:0 auto}
.letterhead{display:flex; align-items:center; gap:11px; padding:24px 0 20px; border-bottom:1px solid var(--rule)}
.letterhead .arco{flex:none}
.letterhead .wm{font-family:var(--display); font-size:15px; letter-spacing:.34em; text-transform:uppercase; padding-left:.05em; color:var(--tinta); text-decoration:none}
.letterhead .spacer{flex:1}
.letterhead nav{display:flex; gap:20px; flex-wrap:wrap}
.letterhead nav a{font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--gris-2); text-decoration:none; white-space:nowrap}
.letterhead nav a:hover{color:var(--verdin)}
.letterhead nav a.pedir{color:var(--tinta)}
.letterhead nav a.pedir:hover{color:var(--verdin)}
.letterhead nav a.activo,.letterhead nav a[aria-current="page"]{color:var(--verdin)}

/* ── el menú: desplegable en móvil, nav corrida en escritorio. Sin JavaScript (details/summary),
      para que siga funcionando en el modo lámina y con el guion caído. ─────────────────────── */
.menu{position:relative}
.menu > summary{display:block; cursor:pointer; list-style:none;   /* block, no flex: con list-item Chrome pinta su flecha */
  color:var(--gris-2); line-height:0; padding:15px 11px; margin:-15px -11px;   /* el dibujo es pequeño; el área de toque, 44×44 */
  -webkit-tap-highlight-color:transparent}
.menu > summary svg{display:block}
.menu > summary::-webkit-details-marker{display:none}
.menu > summary::marker{content:""}
.menu > summary::before{content:none}   /* la flecha genérica de los <details> no entra aquí */
.menu > summary:hover{color:var(--verdin)}
.menu > summary:focus-visible{outline:2px solid var(--verdin); outline-offset:3px; border-radius:2px}
.menu .aspa{display:none}
.menu[open] > summary .rayas{display:none}
.menu[open] > summary .aspa{display:inline}
.menu[open] > summary{color:var(--tinta)}
@media (max-width:760px){
  .letterhead{padding:18px 0 14px}
  .menu > nav{position:absolute; right:0; top:calc(100% + 14px); z-index:6; min-width:min(70vw, 260px);
    display:flex; flex-direction:column; gap:0; background:var(--paper);
    border:1px solid var(--rule); box-shadow:0 10px 30px rgba(23,20,15,.09)}
  .menu > nav a{padding:13px 18px; font-size:13px; border-bottom:1px solid var(--rule-2)}
  .menu > nav a:last-child{border-bottom:0}
  .menu > nav a.pedir{background:var(--tinta); color:var(--paper)}
  .menu > nav a.pedir:hover{background:var(--verdin); color:var(--paper)}
}
@media (min-width:761px){
  .menu > summary{display:none}
  .menu > nav{display:flex !important}
  .menu::details-content{content-visibility:visible; display:contents}
}

/* ── el botón de la casa ────────────────────────────────────────────────── */
.cta{display:inline-block; font-family:var(--body); font-size:14px; font-weight:500; letter-spacing:.04em; color:var(--paper); background:var(--tinta); padding:13px 22px; text-decoration:none; border-radius:2px; border:0; cursor:pointer}
.cta:hover{background:var(--verdin)}
.cta-note{display:block; font-size:13px; color:var(--gris-2); margin-top:14px}

/* enlace-puerta: una línea con flecha, subrayado en verdín claro */
.puerta-enlace{font-size:13.5px; letter-spacing:.04em; text-decoration:none; border-bottom:1px solid var(--verdin-c); color:var(--tinta); padding-bottom:1px}
.puerta-enlace:hover{color:var(--verdin)}

/* ── details (la bio, las reglas del guía) ──────────────────────────────── */
details{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:0}
details + details{border-top:0}
summary{cursor:pointer; list-style:none; padding:14px 0; font-family:var(--display); font-size:18px; display:flex; align-items:center; gap:12px; color:var(--tinta)}
summary::-webkit-details-marker{display:none}
summary::before{content:""; width:8px; height:8px; border-right:1px solid var(--tinta); border-bottom:1px solid var(--tinta); transform:rotate(-45deg); transition:transform .25s; flex:none; margin-left:2px}
details[open] summary::before{transform:rotate(45deg)}
summary:hover{color:var(--verdin)}
details > :not(summary){padding-bottom:18px}
details p{font-size:15.5px; color:var(--gris)}

/* las cinco reglas (producción) */
ol.reglas{counter-reset:r; list-style:none; padding:0; max-width:66ch; margin:6px 0 0}
ol.reglas li{counter-increment:r; position:relative; padding-left:48px; margin:0 0 18px}
ol.reglas 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:12px; color:var(--verdin); font-variant-numeric:tabular-nums}
ol.reglas li b{display:block; margin-bottom:3px; font-size:17px; font-family:var(--display); font-weight:400}
ol.reglas li span{color:var(--gris); font-size:15px}

/* ── colofón (producción) ───────────────────────────────────────────────── */
.colofon{color:var(--gris-2); border-top:1px solid var(--rule); padding:30px 24px 52px; position:relative; z-index:3; background:var(--paper)}
.colofon-in{max-width:var(--ancho); margin:0 auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.colofon .wm{font-family:var(--display); font-size:13px; letter-spacing:.34em; text-transform:uppercase; color:var(--tinta)}
.colofon .spacer{flex:1}
.colofon .tag{font-size:12.5px; letter-spacing:.02em}
.colofon .legal{flex:0 0 100%; max-width:100%; font-size:12px; line-height:1.6; margin:18px 0 0}
.colofon .legal + .legal{margin-top:8px}

/* ── utilidades ─────────────────────────────────────────────────────────── */
.solo-lector{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.ojo{font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--verdin); margin:0 0 18px}
.num{font-variant-numeric:tabular-nums}
.oculto{display:none !important}
noscript p{font-size:14.5px; color:var(--gris); border-left:2px solid var(--verdin-c); padding-left:14px}