/* ==========================================================================
   EN TOLEDO — hoja de estilo principal
   Paleta: tormenta / granito / lienzo / oro damasquinado / tajo
   Tipografía: EB Garamond (display) + Archivo (texto y datos)
   ========================================================================== */

:root{
  /* Color -------------------------------------------------------------- */
  --tormenta:  #16202B;   /* azul-negro de la Vista de Toledo. Tinta y metal */
  --tormenta-2:#22303E;   /* superficie elevada sobre tormenta */
  --granito:   #4A5560;   /* pizarra fría del promontorio. Texto secundario */
  --lienzo:    #E9EAE4;   /* lienzo imprimado, frío. Fondo de página */
  --papel:     #F6F6F2;   /* superficie de tarjeta */
  --oro:       #A98247;   /* latón damasquinado mate, no dorado brillante */
  --oro-claro: #C9A96A;   /* el mismo latón, pulido */
  --tajo:      #5C7A6E;   /* verde del río. Capa "ahora": agenda y directo */

  /* Superficies que SIEMPRE son metal, pase lo que pase con el modo oscuro.
     Sin estos dos, al invertir el tema la marca desaparece sobre la cabecera. */
  --metal:       #16202B;
  --sobre-metal: #E9EAE4;

  /* Tipografía --------------------------------------------------------- */
  --display: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --texto:   "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --paso--2: clamp(.72rem, .70rem + .1vw, .78rem);
  --paso--1: clamp(.84rem, .81rem + .15vw, .92rem);
  --paso-0:  clamp(1rem, .97rem + .18vw, 1.09rem);
  --paso-1:  clamp(1.2rem, 1.12rem + .38vw, 1.45rem);
  --paso-2:  clamp(1.5rem, 1.34rem + .78vw, 2.05rem);
  --paso-3:  clamp(1.9rem, 1.58rem + 1.6vw, 3rem);
  --paso-4:  clamp(2.4rem, 1.75rem + 3.2vw, 4.4rem);

  /* Estructura --------------------------------------------------------- */
  --rail: 5.5rem;         /* margen izquierdo donde vive el hilo de oro */
  --ancho-max: 74rem;
  --ancho-lectura: 38rem;
  --borde: color-mix(in srgb, var(--granito) 22%, transparent);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--lienzo);
  color:var(--tormenta);
  font-family:var(--texto);
  font-size:var(--paso-0);
  line-height:1.65;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}

img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--oro);
  outline-offset:3px;
  border-radius:2px;
}

.envoltura{ width:min(100% - 2.5rem, var(--ancho-max)); margin-inline:auto; }
.oculto-visual{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.saltar{
  position:absolute; left:.75rem; top:-4rem; z-index:99;
  background:var(--oro); color:var(--metal);
  padding:.6rem 1rem; font-weight:600; transition:top .15s;
}
.saltar:focus{ top:.75rem; }

/* ==========================================================================
   Tipografía: la itálica de Garamond hace de etiqueta estructural.
   Nada de versalitas sans con tracking — eso es lo que hace todo el mundo.
   ========================================================================== */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.012em;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:var(--paso-4); }
h2{ font-size:var(--paso-2); }
h3{ font-size:var(--paso-1); }

.epigrafe{
  font-family:var(--display);
  font-style:italic;
  font-size:var(--paso-0);
  color:var(--oro);
  letter-spacing:.01em;
  display:block;
  margin-bottom:.9rem;
}
.epigrafe::before{ content:"\2039\00a0"; }
.epigrafe::after{ content:"\00a0\203a"; }

.dato{
  font-family:var(--texto);
  font-size:var(--paso--2);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  color:var(--granito);
}

.sumario{
  font-family:var(--display);
  font-size:var(--paso-1);
  line-height:1.45;
  color:var(--granito);
  max-width:34rem;
  margin:1.1rem 0 0;
}

/* ==========================================================================
   Cabecera
   ========================================================================== */

.cabecera{
  background:var(--metal);
  color:var(--sobre-metal);
  position:relative;
}
.cabecera__barra{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding-block:1.15rem;
}
.marca{
  font-family:var(--display);
  font-size:var(--paso-1);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--sobre-metal);
  white-space:nowrap;
}
.marca span{ color:var(--oro); }

.menu{ display:flex; gap:1.6rem; list-style:none; margin:0; padding:0; }
.menu a{
  font-family:var(--display);
  font-style:italic;
  font-size:var(--paso-0);
  text-decoration:none;
  color:color-mix(in srgb, var(--sobre-metal) 78%, transparent);
  padding-block:.2rem;
  border-bottom:1px solid transparent;
  transition:color .18s, border-color .18s;
}
.menu a:hover,.menu a[aria-current="page"]{ color:var(--sobre-metal); border-bottom-color:var(--oro); }

.menu-boton{
  display:none; background:none; border:1px solid color-mix(in srgb,var(--sobre-metal) 30%,transparent);
  color:var(--sobre-metal); padding:.45rem .8rem; font:inherit; font-size:var(--paso--1); cursor:pointer;
}

@media (max-width: 860px){
  .menu-boton{ display:block; }
  .menu{
    display:none; position:absolute; inset-inline:0; top:100%; z-index:20;
    flex-direction:column; gap:0; background:var(--tormenta-2);
    border-top:1px solid color-mix(in srgb,var(--oro) 40%,transparent);
    padding:.5rem 1.25rem 1.25rem;
  }
  .menu.abierto{ display:flex; }
  .menu a{ padding-block:.75rem; border-bottom:1px solid color-mix(in srgb,var(--sobre-metal) 12%,transparent); }
}

/* --- Tira "ahora": lo que ninguna otra web de la ciudad puede enseñar ---- */
.ahora{
  background:var(--tajo);
  color:#F2F5F2;
  border-top:1px solid color-mix(in srgb,#000 18%,transparent);
}
.ahora__fila{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1.5rem;
  padding-block:.7rem;
  font-size:var(--paso--1);
}
.ahora__fecha{ font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-variant-numeric:tabular-nums; }
.ahora__lista{ display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; list-style:none; margin:0; padding:0; }
.ahora__lista a{ text-decoration:none; border-bottom:1px solid color-mix(in srgb,#fff 45%,transparent); }
.ahora__lista a:hover{ border-bottom-color:#fff; }
.ahora__todo{ margin-left:auto; text-decoration:none; font-weight:600; border-bottom:1px solid color-mix(in srgb,#fff 55%,transparent); }
.pulso{
  display:inline-block; width:.5rem; height:.5rem; border-radius:50%;
  background:var(--oro-claro); margin-right:.45rem; vertical-align:middle;
  animation:pulso 2.6s ease-in-out infinite;
}
@keyframes pulso{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

/* ==========================================================================
   EL HILO DE ORO — elemento firma
   El damasquinado incrusta hilo de oro en acero negro a martillo.
   Aquí el hilo se incrusta a medida que lees: es índice y progreso a la vez.
   ========================================================================== */

.hilo{ position:relative; padding-left:var(--rail); }

.hilo__rail{
  position:absolute; left:calc(var(--rail) / 2); top:0; bottom:0;
  width:1px; background:var(--borde);
}
.hilo__rail::after{               /* el hilo que se incrusta al bajar */
  content:""; position:absolute; inset-inline:-1px; top:0;
  height:var(--incrustado, 0%);
  background:linear-gradient(180deg, var(--oro) 0%, var(--oro-claro) 100%);
  box-shadow:0 0 6px color-mix(in srgb,var(--oro) 55%,transparent);
}

/* nodo: la lenteja de oro martilleada. Cuelga de él cada H2 del artículo */
.nodo{ position:relative; }
.nodo::before{
  content:""; position:absolute;
  left:calc((var(--rail) / -2) - 4px); top:.55em;
  width:9px; height:9px; rotate:45deg;
  background:var(--lienzo); border:1px solid var(--oro);
}
.nodo.activo::before{ background:var(--oro); }

@media (max-width: 760px){
  .hilo{ padding-left:0; }
  .hilo__rail{ display:none; }
  .nodo::before{ position:static; display:block; margin:0 0 .7rem; }
}

/* barra de progreso superior: sustituye al rail en móvil, refuerza en escritorio */
.progreso{
  position:fixed; inset-inline:0; top:0; height:2px; z-index:50;
  background:var(--oro); transform-origin:0 50%;
  transform:scaleX(var(--avance, 0));
}

/* ==========================================================================
   Portada
   ========================================================================== */

.portada{ padding-block:clamp(2.5rem, 5vw, 4.5rem); }

.apertura{
  display:grid; gap:clamp(1.5rem,4vw,3rem);
  grid-template-columns:minmax(0,1fr);
  align-items:end;
}
@media (min-width: 900px){
  .apertura{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); }
}
.apertura__figura{ position:relative; }
.apertura__figura img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  filter:saturate(.82) contrast(1.05);
}
.apertura__figura figcaption{
  font-size:var(--paso--2); color:var(--granito); padding-top:.55rem;
  font-family:var(--display); font-style:italic;
}
.apertura h1 a{ text-decoration:none; }
.apertura h1 a:hover{ text-decoration:underline; text-decoration-color:var(--oro); text-underline-offset:.14em; }

.firma{
  display:flex; flex-wrap:wrap; gap:.4rem .9rem; align-items:center;
  margin-top:1.4rem;
}
.firma__sep{ color:var(--oro); }

/* --- Secciones ---------------------------------------------------------- */
.seccion{ padding-block:clamp(2.5rem,5vw,4rem); border-top:1px solid var(--borde); }
.seccion__cabeza{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:2rem; }
.enlace-mas{
  font-family:var(--display); font-style:italic; font-size:var(--paso-0);
  text-decoration:none; border-bottom:1px solid var(--oro); padding-bottom:1px;
}

/* --- Agenda: datos tabulares, no tarjetas ------------------------------- */
.agenda{ list-style:none; margin:0; padding:0; border-top:1px solid var(--borde); }
.agenda li{ border-bottom:1px solid var(--borde); }
.agenda a{
  display:grid; gap:.15rem 1.25rem; padding:1rem .5rem 1rem 0;
  grid-template-columns:1fr; text-decoration:none;
  transition:background .16s, padding-left .16s;
}
@media (min-width: 700px){
  .agenda a{ grid-template-columns:5.5rem 4rem 1fr auto; align-items:baseline; }
}
.agenda a:hover{ background:color-mix(in srgb,var(--oro) 9%,transparent); padding-left:.6rem; }
.agenda__dia{ font-variant-numeric:tabular-nums; font-weight:600; letter-spacing:.05em; text-transform:uppercase; font-size:var(--paso--1); color:var(--tajo); }
.agenda__hora{ font-variant-numeric:tabular-nums; font-size:var(--paso--1); color:var(--granito); }
.agenda__titulo{ font-family:var(--display); font-size:var(--paso-1); line-height:1.25; }
.agenda__lugar{ font-size:var(--paso--1); color:var(--granito); }

/* --- Rejilla de guía ---------------------------------------------------- */
.rejilla{ display:grid; gap:2rem 1.75rem; grid-template-columns:repeat(auto-fill,minmax(16rem,1fr)); }
.tarjeta a{ text-decoration:none; display:block; }
.tarjeta img{ aspect-ratio:3/2; object-fit:cover; filter:saturate(.82); margin-bottom:.9rem; }
.tarjeta h3{ margin-bottom:.4rem; }
.tarjeta a:hover h3{ text-decoration:underline; text-decoration-color:var(--oro); text-underline-offset:.14em; }
.tarjeta p{ margin:0; font-size:var(--paso--1); color:var(--granito); }

/* --- Bloque narrativo: aquí sí invertimos a metal ----------------------- */
.oculto{ background:var(--metal); color:var(--sobre-metal); }
.oculto .epigrafe{ color:var(--oro-claro); }
.oculto h2,.oculto h3{ color:var(--sobre-metal); }
.oculto p{ color:color-mix(in srgb,var(--sobre-metal) 72%,transparent); }
.oculto .enlace-mas{ color:var(--oro-claro); border-bottom-color:var(--oro-claro); }
.oculto .tarjeta img{ filter:saturate(.55) brightness(.85) contrast(1.1); }
.oculto .seccion{ border-top:0; }

/* ==========================================================================
   Artículo
   ========================================================================== */

.entrada{ padding-block:clamp(2.5rem,5vw,4rem); }
.entrada__cabecera{ max-width:44rem; margin-bottom:2.5rem; }
.entrada__cuerpo{ max-width:var(--ancho-lectura); }
.entrada__cuerpo > * + *{ margin-top:1.35rem; }
.entrada__cuerpo h2{ margin-top:3rem; }
.entrada__cuerpo h3{ margin-top:2rem; }
.entrada__cuerpo p{ margin-block:0; }
.entrada__cuerpo a{ text-decoration:underline; text-decoration-color:var(--oro); text-underline-offset:.16em; text-decoration-thickness:1px; }
.entrada__cuerpo ul,.entrada__cuerpo ol{ padding-left:1.2rem; }
.entrada__cuerpo li + li{ margin-top:.45rem; }
.entrada__cuerpo figure{ margin-inline:0; }
.entrada__cuerpo figcaption{ font-family:var(--display); font-style:italic; font-size:var(--paso--1); color:var(--granito); padding-top:.5rem; }
.entrada__cuerpo blockquote{
  margin:2rem 0; padding-left:1.4rem; border-left:2px solid var(--oro);
  font-family:var(--display); font-size:var(--paso-1); line-height:1.45;
}

/* Imagen de apertura del artículo: ocupa la columna, no la ventana */
.ancha{ margin:0 0 2.5rem; }
.ancha img{ width:100%; aspect-ratio:16/9; object-fit:cover; filter:saturate(.85); }

/* --- Ficha práctica: el bloque que convierte visitas en confianza ------- */
.ficha{
  border:1px solid var(--borde); border-top:2px solid var(--oro);
  background:var(--papel); padding:1.5rem 1.6rem; margin-block:2.5rem;
}
.ficha h2,.ficha h3{ margin:0 0 1rem; font-size:var(--paso-1); }
.ficha dl{ display:grid; gap:.55rem 1.25rem; margin:0; grid-template-columns:auto 1fr; }
.ficha dt{ font-size:var(--paso--2); font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--granito); padding-top:.28em; }
.ficha dd{ margin:0; font-variant-numeric:tabular-nums; }

/* --- Nota de campo: la señal de que alguien ha estado allí -------------- */
.nota-campo{
  margin-block:2.5rem; padding:1.35rem 1.5rem;
  background:color-mix(in srgb,var(--tajo) 10%,transparent);
  border-left:2px solid var(--tajo);
  font-size:var(--paso--1);
}
.nota-campo strong{
  display:block; font-family:var(--display); font-style:italic; font-weight:600;
  font-size:var(--paso-0); color:var(--tajo); margin-bottom:.35rem; letter-spacing:.01em;
}

/* --- Índice lateral pegajoso ------------------------------------------- */
.indice{ display:none; }
@media (min-width: 1180px){
  .indice{
    display:block; position:sticky; top:2.5rem;
    font-size:var(--paso--1); line-height:1.4;
  }
  .entrada__reja{ display:grid; grid-template-columns:minmax(0,1fr) 13rem; gap:3.5rem; align-items:start; }
  .indice ol{ list-style:none; margin:0; padding:0; border-left:1px solid var(--borde); }
  .indice li a{
    display:block; padding:.4rem 0 .4rem .9rem; margin-left:-1px;
    border-left:1px solid transparent; color:var(--granito); text-decoration:none;
  }
  .indice li a:hover{ color:var(--tormenta); }
  .indice li a.activo{ color:var(--tormenta); border-left-color:var(--oro); font-weight:500; }
}

/* ==========================================================================
   Publicidad — hueco reservado para que AdSense no mueva el layout (CLS 0)
   ========================================================================== */
.anuncio{
  margin-block:2.5rem; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--granito) 7%,transparent);
}
.anuncio::before{
  content:"publicidad"; font-size:var(--paso--2); letter-spacing:.12em;
  text-transform:uppercase; color:color-mix(in srgb,var(--granito) 65%,transparent);
}
.anuncio:has(ins[data-ad-status="filled"])::before{ content:none; }
.anuncio--horizontal{ min-height:280px; }
.anuncio--intercalado{ min-height:250px; }

/* ==========================================================================
   Boletín y pie
   ========================================================================== */

.boletin{ background:var(--papel); border-block:1px solid var(--borde); }
.boletin__caja{ padding-block:clamp(2.5rem,5vw,3.5rem); max-width:40rem; }
.boletin form{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }
.boletin input[type=email]{
  flex:1 1 15rem; padding:.8rem .9rem; font:inherit;
  border:1px solid var(--granito); background:var(--lienzo); color:var(--tormenta);
}
.boton{
  padding:.8rem 1.5rem; font:inherit; font-weight:600; cursor:pointer;
  background:var(--metal); color:var(--sobre-metal); border:1px solid var(--metal);
  transition:background .18s,color .18s;
}
.boton:hover{ background:var(--oro); border-color:var(--oro); color:var(--metal); }

.pie{ background:var(--metal); color:color-mix(in srgb,var(--sobre-metal) 70%,transparent); padding-block:3rem 2rem; margin-top:0; }
.pie a{ color:inherit; text-decoration:none; border-bottom:1px solid transparent; }
.pie a:hover{ color:var(--sobre-metal); border-bottom-color:var(--oro); }
.pie__reja{ display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); }
.pie h2{ font-size:var(--paso-0); color:var(--oro-claro); font-style:italic; margin-bottom:.8rem; }
.pie ul{ list-style:none; margin:0; padding:0; font-size:var(--paso--1); }
.pie li + li{ margin-top:.45rem; }
.pie__legal{
  margin-top:2.5rem; padding-top:1.5rem; font-size:var(--paso--2);
  border-top:1px solid color-mix(in srgb,var(--sobre-metal) 14%,transparent);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
}

/* --- Migas -------------------------------------------------------------- */
.migas{ font-size:var(--paso--1); color:var(--granito); margin-bottom:1.5rem; }
.migas ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0; }
.migas a{ text-decoration:none; border-bottom:1px solid var(--borde); }
.migas li + li::before{ content:"/"; color:var(--oro); margin-right:.4rem; }

/* --- Paginación --------------------------------------------------------- */
.paginacion{ margin-top:3rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.paginacion .page-numbers{
  padding:.45rem .85rem; text-decoration:none; border:1px solid var(--borde);
  font-variant-numeric:tabular-nums;
}
.paginacion .current{ background:var(--tormenta); color:var(--lienzo); border-color:var(--tormenta); }

/* --- Modo oscuro del sistema -------------------------------------------- */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --lienzo:#111A22; --papel:#182430; --tormenta:#E9EAE4; --tormenta-2:#22303E;
    --granito:#9AA6B0; --borde:color-mix(in srgb,#9AA6B0 24%,transparent);
  }
  :root:not([data-tema="claro"]){ --metal:#0C141B; }
  :root:not([data-tema="claro"]) .nodo::before{ background:#111A22; }
  :root:not([data-tema="claro"]) .ficha{ background:var(--papel); }
  :root:not([data-tema="claro"]) .apertura__figura img,
  :root:not([data-tema="claro"]) .tarjeta img{ filter:saturate(.75) brightness(.88); }
}

@media print{
  .cabecera,.ahora,.pie,.anuncio,.boletin,.indice,.progreso{ display:none !important; }
  .hilo{ padding-left:0; } .hilo__rail{ display:none; }
  body{ background:#fff; color:#000; }
}