/* espejo.net — hoja de estilos única
   Tokens: tinta #1B1E24 · papel #F7F7F4 · plata #C9CED6 · azogue #33636B
   Tipografía 100% del sistema (sin webfonts) para PageSpeed 100/100 */

:root{
  --tinta:#1b1e24;
  --papel:#f7f7f4;
  --plata:#c9ced6;
  --plata-suave:#e4e7ec;
  --azogue:#33636b;
  --azogue-osc:#254a50;
  --gris:#565c66;
  --display:"Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --texto:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;
  --ancho:68rem;
}

*,*::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{transition:none!important;animation:none!important}
}
body{
  margin:0;
  font-family:var(--texto);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--tinta);
  background:var(--papel);
}
img,svg{max-width:100%;height:auto}
a{color:var(--azogue);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--azogue-osc)}
:focus-visible{outline:2px solid var(--azogue);outline-offset:2px}

/* ---------- Cabecera ---------- */
.cabecera{border-bottom:1px solid var(--plata-suave);background:var(--papel)}
.cabecera-inner{
  max-width:var(--ancho);margin:0 auto;padding:.9rem 1.25rem;
  display:flex;align-items:baseline;gap:1.5rem;flex-wrap:wrap;
}
.marca{font-family:var(--display);font-size:1.35rem;letter-spacing:.02em;
  color:var(--tinta);text-decoration:none;font-weight:700}
.marca span{color:var(--azogue)}
.nav{display:flex;gap:1.1rem;overflow-x:auto;white-space:nowrap;flex:1;
  scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{font-size:.92rem;color:var(--gris);text-decoration:none;padding:.15rem 0}
.nav a:hover,.nav a[aria-current="page"]{color:var(--tinta);
  border-bottom:2px solid var(--azogue)}

/* ---------- Héroe con reflejo (firma del sitio) ---------- */
.heroe{max-width:var(--ancho);margin:0 auto;padding:4.5rem 1.25rem 2.5rem;text-align:center}
.reflejo{display:inline-block;position:relative;line-height:1;margin:0}
.reflejo b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(3.2rem,10vw,6rem);letter-spacing:.04em;color:var(--tinta);
}
.reflejo i{
  display:block;font-family:var(--display);font-weight:700;font-style:normal;
  font-size:clamp(3.2rem,10vw,6rem);letter-spacing:.04em;
  transform:scaleY(-1);color:var(--azogue);opacity:.9;
  -webkit-mask-image:linear-gradient(0deg,#000 0%,transparent 62%);
  mask-image:linear-gradient(0deg,#000 0%,transparent 62%);
  user-select:none;pointer-events:none;
}
.heroe p{max-width:38rem;margin:1.4rem auto 0;font-size:1.15rem;color:var(--gris)}

/* ---------- Regla de plata (divisor simétrico) ---------- */
.regla{
  height:1px;border:0;max-width:var(--ancho);margin:2.5rem auto;
  background:linear-gradient(90deg,var(--papel),var(--plata) 15%,var(--azogue) 50%,var(--plata) 85%,var(--papel));
}

/* ---------- Secciones y tarjetas ---------- */
.seccion{max-width:var(--ancho);margin:0 auto;padding:1.5rem 1.25rem 2.5rem}
.etiqueta{
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--azogue);margin:0 0 .35rem;font-weight:600;
}
.seccion h2{font-family:var(--display);font-size:1.9rem;margin:.1rem 0 .6rem;line-height:1.2}
.seccion>p{max-width:44rem;color:var(--gris);margin-top:0}

.tarjetas{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  padding:0;margin:1.5rem 0 0;list-style:none}
.tarjetas a{
  display:block;height:100%;padding:1.1rem 1.2rem;text-decoration:none;
  border:1px solid var(--plata-suave);border-radius:.5rem;background:#fff;
  transition:border-color .15s,box-shadow .15s;
}
.tarjetas a:hover{border-color:var(--azogue);
  box-shadow:0 1px 0 var(--azogue),inset 0 1px 0 var(--plata-suave)}
.tarjetas strong{display:block;font-family:var(--display);font-size:1.12rem;
  color:var(--tinta);margin-bottom:.3rem}
.tarjetas span{font-size:.9rem;color:var(--gris);line-height:1.45;display:block}

/* Fichas de horas (rejilla compacta de horas espejo) */
.horas{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(6.2rem,1fr));
  padding:0;margin:1.5rem 0 0;list-style:none}
.horas a{
  display:block;text-align:center;padding:.65rem .3rem;border-radius:.4rem;
  border:1px solid var(--plata-suave);background:#fff;text-decoration:none;
  font-family:var(--display);font-size:1.15rem;color:var(--tinta);
  font-variant-numeric:tabular-nums;transition:border-color .15s,color .15s;
}
.horas a:hover{border-color:var(--azogue);color:var(--azogue)}

/* ---------- Artículo ---------- */
.migas{max-width:var(--ancho);margin:0 auto;padding:1rem 1.25rem 0;
  font-size:.85rem;color:var(--gris)}
.migas a{color:var(--gris)}
.articulo{max-width:46rem;margin:0 auto;padding:1.5rem 1.25rem 3rem}
.articulo h1{font-family:var(--display);font-size:clamp(2rem,5vw,2.7rem);
  line-height:1.15;margin:.4rem 0 1rem}
.articulo .entradilla{font-size:1.18rem;color:var(--gris);margin-bottom:1.8rem}
.articulo h2{font-family:var(--display);font-size:1.55rem;margin:2.2rem 0 .7rem;line-height:1.25}
.articulo h3{font-family:var(--display);font-size:1.2rem;margin:1.6rem 0 .5rem}
.articulo ul,.articulo ol{padding-left:1.3rem}
.articulo li{margin-bottom:.45rem}
.articulo table{width:100%;border-collapse:collapse;font-size:.95rem;margin:1.2rem 0}
.articulo th,.articulo td{border:1px solid var(--plata-suave);padding:.55rem .7rem;text-align:left}
.articulo th{background:#fff;font-family:var(--display)}

/* Caja de selección de productos (enlaces de afiliado) */
.afiliado{margin-top:2.5rem;padding:1.3rem 1.4rem;background:#fff;
  border:1px solid var(--plata-suave);border-left:3px solid #b08d3e;border-radius:.4rem}
.afiliado h2{margin:0 0 .6rem;font-size:1.15rem}
.afiliado ul{margin:0;padding-left:1.2rem}
.afiliado .nota{margin:.9rem 0 0;font-size:.8rem;color:var(--gris)}

/* Caja de enlaces relacionados */
.relacionados{margin-top:2.5rem;padding:1.3rem 1.4rem;background:#fff;
  border:1px solid var(--plata-suave);border-left:3px solid var(--azogue);border-radius:.4rem}
.relacionados h2{margin:0 0 .6rem;font-size:1.15rem}
.relacionados ul{margin:0;padding-left:1.2rem}

/* ---------- Pie ---------- */
.pie{border-top:1px solid var(--plata-suave);background:#fff;margin-top:2rem}
.pie-inner{max-width:var(--ancho);margin:0 auto;padding:2.5rem 1.25rem 2rem;
  display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.pie h2{font-family:var(--display);font-size:1rem;margin:0 0 .7rem}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:.4rem}
.pie a{font-size:.9rem;color:var(--gris);text-decoration:none}
.pie a:hover{color:var(--azogue);text-decoration:underline}
.pie-legal{max-width:var(--ancho);margin:0 auto;padding:0 1.25rem 2rem;
  font-size:.8rem;color:var(--gris);border-top:1px solid var(--plata-suave);padding-top:1.2rem}