/* Estilo común de senentalonso.org: portada, /monte/, /videojuegos/ y el diario */
:root{
  --bg:#0e1013; --bg2:#15181d; --card:#1a1e24; --line:#272c34;
  --text:#e8eaed; --muted:#9aa1ab; --accent:#ff6b2c; --accent2:#ffb347;
  --radius:16px;
  --nav-bg:rgba(14,16,19,.85); --hero-top:#12151a; --brillo1:rgba(255,107,44,.22); --brillo2:rgba(255,179,71,.10);
  --sobre-accent:#16110d; --fuerte:#fff; --sombra:rgba(0,0,0,.35); --verde:#3ddc84; --azul:#6cb6ff;
  --tag-borde:rgba(255,179,71,.35);
  color-scheme:dark;
}
/* MODO CLARO: lo pone el script del <head> (sigue al dispositivo o a lo elegido con el botón).
   Naranjas más oscuros para que se lean sobre blanco: todo el texto pasa de 4,5:1 */
:root[data-tema="claro"]{
  --bg:#faf8f5; --bg2:#f1ede6; --card:#ffffff; --line:#ddd6cb;
  --text:#1c1917; --muted:#57534e; --accent:#b83c0a; --accent2:#a34a06;
  --nav-bg:rgba(250,248,245,.9); --hero-top:#fdf3ea; --brillo1:rgba(255,107,44,.16); --brillo2:rgba(255,179,71,.14);
  --sobre-accent:#fff; --fuerte:#000; --sombra:rgba(60,40,20,.12); --verde:#137336; --azul:#1d4ed8;
  --tag-borde:rgba(163,74,6,.35);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;line-height:1.6}
a{color:inherit}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.narrow{max-width:720px}

/* NAV */
nav{position:sticky;top:0;z-index:10;background:var(--nav-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:60px}
.logo{font-family:"JetBrains Mono",monospace;font-weight:600;text-decoration:none;white-space:nowrap}
.logo span{color:var(--accent)}
nav ul{display:flex;gap:22px;list-style:none;margin-left:auto}
nav ul a{text-decoration:none;color:var(--muted);font-size:.95rem;white-space:nowrap}
nav ul a:hover{color:var(--text)}
nav ul a[aria-current]{color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px}
/* Botón de modo claro/oscuro (lo prepara /js/sitio.js; sin JavaScript no sale) */
.cambiar-tema{font:inherit;font-size:.92rem;color:var(--text);background:var(--bg2);border:1px solid var(--line);border-radius:999px;
  padding:5px 12px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.cambiar-tema:hover{border-color:var(--accent)}
.cambiar-tema:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.cambiar-tema[hidden]{display:none}

/* HERO (portada) */
header.hero{position:relative;overflow:hidden;padding:110px 0 90px;
  background:
    radial-gradient(900px 400px at 85% -10%, var(--brillo1), transparent 60%),
    radial-gradient(700px 400px at -10% 110%, var(--brillo2), transparent 60%),
    linear-gradient(180deg,var(--hero-top), var(--bg));}
/* silueta de sierra */
header.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;opacity:.5;
  background:linear-gradient(180deg,transparent,var(--bg)),
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'><path d='M0 120 L0 80 L120 40 L210 70 L330 20 L450 65 L560 35 L680 75 L800 30 L920 60 L1040 25 L1200 70 L1200 120 Z' fill='%231a1e24'/></svg>") bottom/100% 100% no-repeat;}
:root[data-tema="claro"] header.hero::after{opacity:.7;
  background:linear-gradient(180deg,transparent,var(--bg)),
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'><path d='M0 120 L0 80 L120 40 L210 70 L330 20 L450 65 L560 35 L680 75 L800 30 L920 60 L1040 25 L1200 70 L1200 120 Z' fill='%23eadfd2'/></svg>") bottom/100% 100% no-repeat;}
.tag{display:inline-block;font-family:"JetBrains Mono",monospace;font-size:.8rem;color:var(--accent2);
  border:1px solid var(--tag-borde);padding:4px 12px;border-radius:999px;margin-bottom:22px}
.tag[hidden]{display:none}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.tags .tag{margin-bottom:0}
h1{font-size:clamp(2.3rem,6vw,4rem);line-height:1.08;font-weight:800;letter-spacing:-.02em}
h1 em{font-style:normal;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
/* Titular de la portada: en móviles de menos de 384px la letra baja lo justo para que
   "Bombero de oficio," quepa en una línea (desde 384px es el mismo tamaño que el h1) */
header.hero h1{font-size:min(clamp(2.3rem,6vw,4rem),9.6vw)}
.lead{max-width:600px;color:var(--muted);font-size:1.15rem;margin:20px 0 32px}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 22px;border-radius:12px;text-decoration:none;font-weight:600;font-size:.95rem;transition:.2s}
.btn.primary{background:var(--accent);color:var(--sobre-accent)}
.btn.primary:hover{background:var(--accent2)}
.btn.ghost{border:1px solid var(--line)}
.btn.grande{font-size:1.15rem;padding:16px 30px;border-radius:14px}
.btn.ghost:hover{border-color:var(--muted)}

/* CABECERA de las páginas interiores */
header.cabecera{padding:70px 0 44px;background:
  radial-gradient(900px 400px at 85% -10%, var(--brillo1), transparent 60%),
  linear-gradient(180deg,var(--hero-top), var(--bg));}
.cabecera h1{font-size:clamp(2rem,5vw,3rem);line-height:1.12}
.cabecera .lead{margin:14px 0 0;max-width:640px}
.volver-proyectos{display:inline-block;margin-bottom:22px;color:var(--accent2);text-decoration:none;font-size:1rem}
.volver-proyectos:hover{text-decoration:underline}

/* SECCIONES */
section{padding:80px 0}
section[id]{scroll-margin-top:70px}
.kicker{font-family:"JetBrains Mono",monospace;color:var(--accent);font-size:.85rem;margin-bottom:8px}
h2{font-size:clamp(1.7rem,4vw,2.3rem);letter-spacing:-.01em;margin-bottom:14px}
.sub{color:var(--muted);max-width:620px;margin-bottom:36px}
.vacio{color:var(--muted)}

/* AHORA MISMO */
.now{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;display:flex;gap:18px;align-items:flex-start}
.dot{width:10px;height:10px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 6px rgba(61,220,132,.15);margin-top:9px;flex-shrink:0}
.now p{color:var(--muted)} .now strong{color:var(--text)}

/* PROYECTOS: tarjetas que llevan a otras páginas.
   Todas miden lo mismo (grid-auto-rows:1fr) y el "Ver más" queda siempre abajo. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));grid-auto-rows:1fr;gap:18px}
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  text-decoration:none;color:inherit;transition:transform .25s,border-color .25s,box-shadow .25s}
.card:hover,.card:focus-visible{transform:translateY(-4px);border-color:rgba(255,107,44,.6);box-shadow:0 12px 30px var(--sombra)}
.card:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.thumb{flex:none;height:140px;overflow:hidden}
/* Ilustración que llena la franja de 140px recortando lo que sobra, sin deformarse */
.thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.t1{background:linear-gradient(135deg,#2b1a12,#4a2717)}
.t2{background:linear-gradient(135deg,#0f2230,#173a52)}
.t3{background:linear-gradient(135deg,#132a1d,#1e4630)}
.t4{background:linear-gradient(135deg,#2a1530,#45204f)}
.t5{background:linear-gradient(135deg,#2a2512,#4d4219)}
.t6{background:linear-gradient(135deg,#2a0e0e,#4f1814)}
.t7{background:linear-gradient(135deg,#15191f,#2c3540)}
.t8{background:linear-gradient(135deg,#2e1219,#5c2433)}
.card .body{flex:1;display:flex;flex-direction:column;padding:20px 22px 22px}
.card h3{font-size:1.15rem;margin-bottom:6px}
.card p{color:var(--muted);font-size:.95rem}
.mas{margin-top:auto;padding-top:16px;color:var(--accent);font-weight:600;font-size:.92rem}
.mas::after{content:" →";display:inline-block;transition:transform .2s}
.card:hover .mas::after,.card:focus-visible .mas::after{transform:translateX(4px)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.chip{font-family:"JetBrains Mono",monospace;font-size:.72rem;color:var(--muted);background:var(--bg2);border:1px solid var(--line);padding:3px 9px;border-radius:999px}

/* CONTACTO */
.contact{display:grid;grid-template-columns:1fr 1.3fr;gap:28px}
.info{display:flex;flex-direction:column;gap:14px}
.info a{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;text-decoration:none;transition:.2s}
.info a:hover{border-color:var(--accent)}
.ico{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:rgba(255,107,44,.12);font-size:1.2rem;flex-shrink:0}
.info small{display:block;color:var(--muted);font-size:.8rem}
form{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:grid;gap:14px}
label{font-size:.85rem;color:var(--muted)}
input,textarea{width:100%;margin-top:6px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--text);font:inherit}
input:focus,textarea:focus{outline:none;border-color:var(--accent)}
textarea{min-height:130px;resize:vertical}
.hp{position:absolute;left:-9999px}
form .btn{border:0;cursor:pointer;justify-self:start}
#estado{font-size:.9rem;color:var(--accent2);min-height:1.2em}

/* MONTE: marcador de kilómetros */
.marcador{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:14px}
.marcador[hidden]{display:none}
.marca{--muted:#9aa1ab;--accent2:#ffb347;color:#e8eaed;background:#000;border:1px solid #2a2f37;border-radius:var(--radius);padding:20px 22px;text-align:center}
.marca small{display:block;font-family:"JetBrains Mono",monospace;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
.marca strong{display:block;font-family:"JetBrains Mono",monospace;font-size:clamp(1.9rem,5vw,2.6rem);font-weight:600;line-height:1.2;margin-top:6px;
  color:var(--accent2);text-shadow:0 0 10px rgba(255,107,44,.55)}
.marca strong span{font-size:.45em;color:var(--muted);text-shadow:none;margin-left:4px}
.marca.total{border-color:rgba(255,107,44,.5)}
.marca .desnivel{display:block;font-family:"JetBrains Mono",monospace;font-style:normal;font-size:.85rem;color:var(--muted);margin-top:4px}
.marca .desnivel:empty{display:none}
.everest{margin-top:16px;font-size:1.05rem}
.km-act{color:var(--muted);font-size:.85rem;margin-top:12px}
.strava{max-width:600px}
/* El ancho lo pone el script de Strava (554px, max-width:100%), así que en el móvil se encoge solo */
.strava iframe{border:0;border-radius:12px}
.strava-bloque:has(.strava:empty){display:none}

/* MONTE: actividades reseñables */
.bloque{margin-top:44px}
.bloque:first-child{margin-top:0}
.bloque h2{font-size:1.4rem;margin-bottom:16px}
.acts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));gap:18px}
.act{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.act img{width:100%;height:180px;object-fit:cover;display:block}
.act .body{padding:20px 22px 22px}
.act time{color:var(--accent2);font-size:.85rem}
.act h3{font-size:1.12rem;margin:4px 0 10px}
.act p{color:var(--muted);font-size:.95rem}
.act .chips{margin:0 0 12px}
.act .chip.dato{color:var(--text);font-size:.8rem}
.enlace{display:inline-block;margin-top:14px;color:var(--accent);font-weight:600;text-decoration:none;font-size:.92rem}
.enlace:hover{text-decoration:underline}
.ejemplo{display:inline-block;font-family:"JetBrains Mono",monospace;font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sobre-accent);background:var(--accent2);border-radius:6px;padding:2px 7px;margin-left:8px;vertical-align:middle}

/* VIDEOJUEGOS */
.juegos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:18px}
.juego{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.video{position:relative;aspect-ratio:16/9;background:#000}
.video button{all:unset;cursor:pointer;position:absolute;inset:0;display:block}
.video button img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85;transition:.2s}
.video button:hover img,.video button:focus-visible img{opacity:1}
.video button:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.play{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;border-radius:14px;background:rgba(14,16,19,.8);
  border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;transition:.2s}
.play::after{content:"";border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff;margin-left:4px}
.video button:hover .play{background:var(--accent)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.juego .body{padding:18px 22px 22px}
.juego h2{font-size:1.15rem;letter-spacing:0;margin-bottom:10px}
.juego .chips{margin:0 0 12px}
.juego .chips:last-child{margin-bottom:0}
.juego p{color:var(--muted);font-size:.95rem}
.estado{font-family:"JetBrains Mono",monospace;font-size:.72rem;padding:3px 9px;border-radius:999px;border:1px solid}
.estado.jugando{color:var(--verde);border-color:rgba(61,220,132,.4);background:rgba(61,220,132,.08)}
.estado.terminado{color:var(--accent2);border-color:rgba(255,179,71,.4);background:rgba(255,179,71,.08)}
.estado.pendiente{color:var(--muted);border-color:var(--line)}
.estado.habitual{color:var(--azul);border-color:rgba(108,182,255,.4);background:rgba(108,182,255,.08)}

/* TEMAS: las tarjetas de /temas/ son las mismas .card de antes, pero más grandes: dos por fila en el
   ordenador y una en el móvil, con el dibujo entero y letra grande */
.temas-grid{grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr));padding:30px 0 80px}
.temas-grid .thumb{height:auto;aspect-ratio:640/280}
.temas-grid .card .body{padding:22px 26px 26px}
.temas-grid .card h3{font-size:1.5rem;margin-bottom:8px}
.temas-grid .card p{font-size:1.1rem;line-height:1.5}
.temas-grid .chip{font-size:.8rem}
.temas-grid .mas{font-size:1.05rem}
/* Con una sola por fila (por debajo de ~900px) cada tarjeta mide lo que necesita, sin huecos */
@media (max-width:900px){.temas-grid{grid-auto-rows:auto}}

/* TEMAS: entradas de un tema, con su foto (las usan /temas/tema.html, /monte/ y /videojuegos/) */
.lista-tema{display:grid;gap:18px;padding:10px 0 80px}
.entrada-tema{display:grid;grid-template-columns:240px 1fr;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  text-decoration:none;color:inherit;transition:transform .2s,border-color .2s}
.entrada-tema:hover,.entrada-tema:focus-visible{border-color:var(--accent);transform:translateY(-2px)}
.entrada-tema:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* La foto llena su hueco recortada al centro, sin deformarse y sin estirar la tarjeta (las verticales no la hacen más alta) */
.entrada-tema{min-height:210px}
.foto-tema{position:relative;background:var(--bg2)}
.foto-tema img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.entrada-tema .body{padding:22px 26px}
.entrada-tema .fecha{color:var(--accent2);font-size:.95rem}
.entrada-tema h3{font-size:1.4rem;line-height:1.3;margin:6px 0 8px}
.entrada-tema p{color:var(--muted);font-size:1.08rem}
.entrada-tema .leer{display:inline-block;margin-top:12px;color:var(--accent);font-weight:600}
.lista-tema .sin-entradas{color:var(--muted);font-size:1.2rem;padding:10px 0}
.en-el-diario{margin-top:56px}
.en-el-diario h2{font-size:1.4rem;margin-bottom:16px}  /* como «Último entreno» */
.en-el-diario .lista-tema{padding-bottom:0}

/* Aviso del enlace ?nocontar / ?contar */
.aviso-contador{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:20;max-width:calc(100% - 32px);
  background:var(--card);border:1px solid var(--accent);color:var(--text);border-radius:12px;padding:12px 18px;
  box-shadow:0 10px 30px var(--sombra);font-size:.95rem}

/* FOOTER */
footer{border-top:1px solid var(--line);padding:30px 0;color:var(--muted);font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.counter{font-family:"JetBrains Mono",monospace;display:flex;align-items:center;gap:8px}
.digits{display:flex;gap:3px}
.digits b{background:#000;color:#3ddc84;border:1px solid #2a2f37;border-radius:4px;padding:2px 6px;font-weight:600;text-shadow:0 0 6px rgba(61,220,132,.6)}

/* Entre 500 y 637px cabe una sola tarjeta por fila y es muy ancha: la franja de la ilustración
   crece a 200px para no recortar tanto el dibujo (desde 638px ya hay dos columnas) */
@media (min-width:500px) and (max-width:637px){
  .thumb{height:200px}
}

/* MÓVIL: el menú pasa debajo del logo y se reparte en una o dos líneas */
@media (max-width:760px){
  nav .wrap{flex-wrap:wrap;row-gap:4px;padding-top:10px;padding-bottom:10px}
  nav ul{width:100%;flex-wrap:wrap;gap:4px 18px;order:3;margin-left:0}
  .cambiar-tema{margin-left:auto}  /* en el móvil va a la derecha del logo */
  nav ul a{font-size:.92rem;display:inline-block;padding:4px 0}
  section[id]{scroll-margin-top:110px}
  header.hero{padding:70px 0 70px}
  header.cabecera{padding:50px 0 32px}
  section{padding:60px 0}
  .contact{grid-template-columns:1fr}
  .now{padding:20px}
  .entrada-tema{grid-template-columns:1fr}
  .entrada-tema{min-height:0}
  .foto-tema{height:200px}
  .entrada-tema .body{padding:20px 22px}
}

/* PORTADA: El taller, ahora mismo (lo rellena /js/taller.js) */
#taller[hidden],#taller [hidden]{display:none}
.taller{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:18px}
.taller-caja{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px 24px}
.taller-caja h3{display:flex;align-items:center;gap:12px;font-size:1.15rem;margin-bottom:16px}
.taller-datos{list-style:none;display:grid;gap:14px}
.taller-datos strong,.imp-estado{font-weight:800;letter-spacing:-.01em;color:var(--accent2);font-size:1.6rem;line-height:1.2}
.taller-datos span{color:var(--muted);font-size:1.05rem}
.barra{height:10px;background:var(--bg2);border:1px solid var(--line);border-radius:999px;overflow:hidden;margin-top:8px}
.barra span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:999px;transition:width .6s}
.imp-estado{display:flex;align-items:center;gap:12px}
.imp-estado::before{content:"";width:12px;height:12px;border-radius:50%;flex-shrink:0;background:var(--muted)}
.imp-estado[data-estado="imprimiendo"]{color:var(--verde)}
.imp-estado[data-estado="imprimiendo"]::before{background:var(--verde);box-shadow:0 0 0 6px rgba(61,220,132,.15);animation:latido 2s infinite}
.imp-estado[data-estado="pausa"]::before,.imp-estado[data-estado="terminado"]::before{background:var(--accent2)}
.imp-estado[data-estado="libre"]{color:var(--text)}
.imp-txt{color:var(--muted);font-size:1.05rem;margin-top:12px}
#t-imp-barra{height:14px;margin-top:16px}
@keyframes latido{50%{box-shadow:0 0 0 10px rgba(61,220,132,0)}}
@media (prefers-reduced-motion:reduce){.imp-estado::before{animation:none!important}.barra span{transition:none}}