/* enfoquereflexivo.com — capa visual
   Construida el 28/08/2026 sobre el ESPEJO LOCAL del sistema de identidad que vive en
   fotografia-filosofia/portada/sistema_cubiertas_v001/tokens/. Pendiente de reconciliar
   contra Claude Design («Antonio Ramos Alves — Identidad») cuando haya autorización.
   Aparte deliberado del sistema de cubiertas: alli fonts.css importa EB Garamond desde
   Google Fonts; aqui la fuente va AUTOALOJADA, para no cargar recursos de terceros y no
   necesitar banner de consentimiento (patron del apartado 6 bis de gobernanza_webs). */

/* ---------- Fuente autoalojada. Variable: un fichero cubre 400 a 700 ---------- */
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fuentes/ebgaramond-var-latin.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}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fuentes/ebgaramond-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 700;font-display:swap;
  src:url('/fuentes/ebgaramond-var-italic-latin.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}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 700;font-display:swap;
  src:url('/fuentes/ebgaramond-var-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens. Zona A (claro), del sistema de identidad ---------- */
:root{
  --paper:#F5F1E8; --paper-2:#EDE7DA; --paper-3:#E4DCCB;
  --ink:#23201C; --ink-2:#6E665B; --ink-muted:#9A9184; --hairline:#D8D1C2;
  --accent:#6E2F38; --accent-deep:#542128;

  --surface:var(--paper); --surface-panel:var(--paper-2);
  --text-primary:var(--ink); --text-secondary:var(--ink-2); --text-muted:var(--ink-muted);
  --rule:var(--hairline); --brand:var(--accent);

  --font-serif:'EB Garamond','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --tracking-label:0.22em; --leading-tight:1.04; --leading-snug:1.28; --leading-body:1.55;
  --size-body:19px; --size-lede:22px; --size-title:40px; --size-display:56px;
  --size-small:15px; --size-label:12px;
  --medida:34rem;
}

/* ---------- Zona B (oscuro), del propio sistema. El acento cambia a proposito:
              el burdeos no contrasta sobre fondo oscuro ---------- */
@media (prefers-color-scheme:dark){
  body:not(.ara-light){
    --surface:#1A1712; --surface-panel:#23201C;
    --text-primary:#ECE6DA; --text-secondary:#A79E90; --text-muted:#7A7264;
    --rule:#38332B; --brand:#5E8B94;
  }
}
body.ara-dark{
  --surface:#1A1712; --surface-panel:#23201C;
  --text-primary:#ECE6DA; --text-secondary:#A79E90; --text-muted:#7A7264;
  --rule:#38332B; --brand:#5E8B94;
}

/* ---------- Preferencias de la persona que lee ---------- */
body.ara-grande{--size-body:23px; --size-lede:26px; --size-title:46px; --size-display:62px; --size-small:18px; --medida:32rem}
body.ara-contraste{
  --surface:#FFFFFF; --surface-panel:#FFFFFF;
  --text-primary:#000000; --text-secondary:#000000; --text-muted:#1A1A1A;
  --rule:#000000; --brand:#5A0F1C;
}
body.ara-contraste.ara-dark{
  --surface:#000000; --surface-panel:#000000;
  --text-primary:#FFFFFF; --text-secondary:#FFFFFF; --text-muted:#E8E8E8;
  --rule:#FFFFFF; --brand:#8FD3DE;
}
body.ara-contraste a{text-decoration-thickness:2px}
body.ara-contraste :focus-visible{outline:4px solid var(--brand)}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--surface); color:var(--text-primary);
  font-family:var(--font-serif); font-size:var(--size-body); line-height:var(--leading-body);
  font-variant-numeric:oldstyle-nums;
}
main{max-width:var(--medida); margin:0 auto; padding:0 1.25rem 5rem}
p,ul,ol,blockquote{margin:0 0 1.15em}
a{color:inherit; text-decoration-thickness:1px; text-underline-offset:.18em; text-decoration-color:var(--brand)}
a:hover{color:var(--brand)}
:focus-visible{outline:3px solid var(--brand); outline-offset:3px}
img{max-width:100%; height:auto}
hr{border:0; border-top:1px solid var(--rule); margin:2.5rem 0}
blockquote{margin-left:0; padding-left:1.1rem; border-left:2px solid var(--brand); color:var(--text-secondary); font-style:italic}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em}

h1,h2,h3{font-weight:600; line-height:var(--leading-tight); margin:2.2rem 0 .6rem}
h1{font-size:var(--size-title)}
h2{font-size:calc(var(--size-title)*.68)}
h3{font-size:calc(var(--size-title)*.52)}
.entradilla{font-size:var(--size-lede); line-height:var(--leading-snug); color:var(--text-secondary)}

/* ---------- Etiquetas en versalitas, tracking canonico ---------- */
.etiqueta,.pie small,.seccion-nombre{
  font-size:var(--size-label); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--text-secondary);
}
/* --text-muted (#9A9184) da 2,76:1 sobre marfil y NO pasa el AA ni en texto grande.
   Se conserva como token de la identidad, pero NO se usa para texto que hay que leer:
   etiquetas y botones van con --text-secondary, que da 5,02:1. */

/* ---------- Cabecera y navegacion ---------- */
.saltar{position:absolute; left:-9999px}
.saltar:focus{position:static; display:inline-block; padding:.6rem 1rem; background:var(--brand); color:var(--surface)}
.cabecera{max-width:var(--medida); margin:0 auto; padding:2rem 1.25rem 1rem; border-bottom:1px solid var(--rule)}
.marca{margin:0 0 .9rem; font-size:var(--size-label); letter-spacing:var(--tracking-label); text-transform:uppercase}
.marca a{text-decoration:none}
.cabecera nav ul{display:flex; flex-wrap:wrap; gap:1.1rem; list-style:none; margin:0; padding:0; font-size:var(--size-small)}

/* ---------- Preferencias de visualizacion (mismo patron que el hub) ---------- */
.ara-a11y{max-width:var(--medida); margin:0 auto; padding:.7rem 1.25rem 0; display:flex; flex-wrap:wrap; gap:.5rem; justify-content:flex-end}
.ara-a11y button{
  font-family:inherit; font-size:var(--size-label); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--text-secondary); background:transparent;
  border:1px solid var(--rule); border-radius:0; padding:.35rem .7rem; cursor:pointer;
}
.ara-a11y button:hover{color:var(--text-primary); border-color:var(--brand)}
.ara-a11y button.is-on{color:var(--surface); background:var(--brand); border-color:var(--brand)}

/* ---------- Listados y pie ---------- */
.pieza{padding:1.6rem 0; border-bottom:1px solid var(--rule)}
.pieza h2,.pieza h3{margin-top:0}
.pieza p{color:var(--text-secondary); margin-bottom:0}
.pie{max-width:var(--medida); margin:0 auto; padding:2rem 1.25rem 3rem; border-top:1px solid var(--rule); font-size:var(--size-small); color:var(--text-secondary)}
audio{width:100%; margin:1rem 0}

@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}