@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;600;700&family=Roboto+Mono:wght@400;600&display=swap");

/* ═══════════ TEMAS ═══════════ */
:root[data-theme="blueprint"]{
  --bg:#0d2c52;
  --bg-image:
    repeating-linear-gradient(0deg, transparent 0px, transparent 23px, rgba(255,255,255,0.045) 23px, rgba(255,255,255,0.045) 24px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 23px, rgba(255,255,255,0.045) 23px, rgba(255,255,255,0.045) 24px),
    repeating-linear-gradient(0deg, transparent 0px, transparent 119px, rgba(255,255,255,0.09) 119px, rgba(255,255,255,0.09) 120px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 119px, rgba(255,255,255,0.09) 119px, rgba(255,255,255,0.09) 120px);
  --ink:#eef4fb; --muted:rgba(238,244,251,0.55);
  --acc:#5fd0ff; --acc-ink:#062036;
  --card:rgba(255,255,255,0.055); --card-line:rgba(255,255,255,0.14);
  --track:rgba(255,255,255,0.14);
  --bar-head:linear-gradient(90deg, #5fd0ff 65%, transparent 100%);
  --menu-bars:#ffffff;
  --halo:rgba(95,208,255,0.5);
}
:root[data-theme="concreto"]{
  --bg:#e9e7e2;
  --bg-image:
    repeating-linear-gradient(-45deg, transparent 0px, transparent 9px, rgba(0,0,0,0.045) 9px, rgba(0,0,0,0.045) 10px);
  --ink:#1c1c1a; --muted:rgba(28,28,26,0.55);
  --acc:#e09600; --acc-ink:#141414;
  --card:rgba(255,255,255,0.72); --card-line:rgba(0,0,0,0.14);
  --track:rgba(0,0,0,0.12);
  --bar-head:linear-gradient(90deg, #f5b400 65%, transparent 100%);
  --menu-bars:#111111;
  --halo:rgba(224,150,0,0.5);
}
:root[data-theme="grafito"]{
  --bg:#f2efe8;
  --bg-image:
    repeating-linear-gradient(0deg, transparent 0px, transparent 23px, rgba(120,95,30,0.035) 23px, rgba(120,95,30,0.035) 24px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 23px, rgba(120,95,30,0.035) 23px, rgba(120,95,30,0.035) 24px),
    repeating-linear-gradient(0deg, transparent 0px, transparent 119px, rgba(120,95,30,0.06) 119px, rgba(120,95,30,0.06) 120px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 119px, rgba(120,95,30,0.06) 119px, rgba(120,95,30,0.06) 120px);
  --ink:#211e18; --muted:rgba(33,30,24,0.55);
  --acc:#a8862e; --acc-ink:#ffffff;
  --card:rgba(255,255,255,0.66); --card-line:rgba(33,30,24,0.16);
  --track:rgba(33,30,24,0.12);
  --bar-head:linear-gradient(90deg, #c9a84c 65%, transparent 100%);
  --menu-bars:#111111;
  --halo:rgba(168,134,46,0.55);
}

:root[data-theme="logo"]{
  /* paleta sacada del logo: casco amarillo/naranja, visera plateada, fondo claro */
  --bg:#f6f4ef;
  --bg-image:
    repeating-linear-gradient(0deg, transparent 0px, transparent 23px, rgba(30,28,24,0.025) 23px, rgba(30,28,24,0.025) 24px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 23px, rgba(30,28,24,0.025) 23px, rgba(30,28,24,0.025) 24px),
    repeating-linear-gradient(0deg, transparent 0px, transparent 119px, rgba(242,172,1,0.07) 119px, rgba(242,172,1,0.07) 120px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 119px, rgba(242,172,1,0.07) 119px, rgba(242,172,1,0.07) 120px);
  --ink:#1e1c18; --muted:rgba(30,28,24,0.55);
  --acc:#f2ac01; --acc-ink:#161513;
  --card:rgba(255,255,255,0.72); --card-line:rgba(30,28,24,0.14);
  --track:rgba(30,28,24,0.12);
  --bar-head:linear-gradient(90deg, #f2ac01 65%, transparent 100%);
  --menu-bars:#111111;
  --halo:rgba(242,172,1,0.5);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Rotulación técnica estilo plano: todo en mayúsculas */
.topbar .t,.obra-nombre,.sect>h2,.fase-card .fn,.fase-det h3,footer .fb{text-transform:uppercase}
html{scroll-behavior:smooth}
body{
  background-color:var(--bg);
  background-image:var(--bg-image);
  color:var(--ink);
  font-family:"Inter",sans-serif;font-weight:300;
  min-height:100vh;
}

/* ═══ Barra superior ═══ */
.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--bar-head);
  background-color:var(--bg);
  padding:1.2rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.topbar .t{
  font-family:"Bebas Neue",sans-serif;
  font-size:clamp(1.4rem,6vw,2rem);letter-spacing:.04em;line-height:.9;
  color:var(--acc-ink);
}
.topbar .t small{display:block;font-size:.55em;opacity:.75;letter-spacing:.14em}
.themes{display:flex;gap:.35rem;flex-shrink:0}
.themes button{
  font-family:"Roboto Mono",monospace;font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.35rem .55rem;border-radius:999px;cursor:pointer;
  background:rgba(0,0,0,0.25);color:#fff;border:1px solid rgba(255,255,255,0.35);
}
.themes button.on{background:#fff;color:#000;border-color:#fff}

.wrap{max-width:920px;margin:0 auto;padding:0 1.2rem 4rem}

/* logo bajo la barra superior (estilo Camaro, a la izquierda) */
.hlogo{text-align:left;margin:calc(.3rem + .5cm) 0 0}
.hlogo img{width:min(27vw,129px);height:auto}

/* ═══ Hero ═══ */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:.5rem 0 .1rem}
.eyebrow{font-family:"Roboto Mono",monospace;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.obra-nombre{font-family:"Bebas Neue",sans-serif;font-size:clamp(1.25rem,4.8vw,2rem);letter-spacing:.03em;line-height:.95}
.cuenta-meta{font-family:"Roboto Mono",monospace;font-size:.65rem;letter-spacing:.1em;color:var(--muted);margin-top:.5rem;text-transform:uppercase}
.ring-big{margin:.4rem 0 0;position:relative;width:min(36vw,187px)}
/* últimas cuentas a la izquierda, Avance General a la derecha */
.hero-gauges{display:flex;align-items:flex-end;justify-content:center;gap:min(.6rem,1vw);width:100%}
.hg{display:flex;flex-direction:column;align-items:center}

.hg-big{margin-left:clamp(.4rem, 12vw - 3rem, 3.4rem)}

.ring-mid{margin:.4rem 0 0;position:relative;width:min(17vw,92px)}
/* halo tipo Camaro: aro luminoso en el tono del tema */
svg.obra-g .gh{stroke:var(--acc)}
/* porcentajes más grandes en los mini relojes de cuentas */
svg.obra-gd text{font-size:16px}
/* etiqueta principal más presente */
.glabel.glabel-main{
  font-family:"Bebas Neue",sans-serif;font-size:1.1rem;font-weight:600;letter-spacing:.16em;
  color:var(--ink);margin-top:.55rem;
}
.ring-big .pct{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:"Bebas Neue",sans-serif;font-size:clamp(2.4rem,11vw,3.6rem);line-height:1;
}
.ring-big .pct small{font-family:"Roboto Mono",monospace;font-size:.55rem;letter-spacing:.2em;color:var(--muted);margin-top:.3rem;text-transform:uppercase}
.delta-chip{
  display:inline-block;margin-top:.9rem;
  font-family:"Roboto Mono",monospace;font-size:.68rem;letter-spacing:.1em;
  background:var(--acc);color:var(--acc-ink);font-weight:600;
  padding:.4rem .95rem;border-radius:999px;
}

/* ═══ Secciones ═══ */
.sect{margin-top:1rem}
.sect>h2{
  font-family:"Bebas Neue",sans-serif;font-size:1.25rem;letter-spacing:.09em;
  display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;
}
.sect>h2::after{content:"";flex:1;height:1px;background:var(--card-line)}

/* Novedades */
.nov{display:flex;flex-direction:column;gap:.5rem}
.nov-item{
  background:var(--card);border:1px solid var(--card-line);border-radius:10px;
  padding:.7rem .9rem;
}
.nov-item .n1{display:flex;justify-content:space-between;gap:.8rem;align-items:baseline}
.nov-item .nom{font-size:.82rem;font-weight:400;line-height:1.35}
.nov-item .fasetag{font-family:"Roboto Mono",monospace;font-size:.55rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.nov-item .plus{font-family:"Bebas Neue",sans-serif;font-size:1.15rem;color:var(--acc);white-space:nowrap}
.minibar{margin-top:.5rem;height:6px;border-radius:3px;background:var(--track);overflow:hidden;display:flex}
.minibar .prev{background:var(--acc);opacity:.35;height:100%}
.minibar .new{background:var(--acc);height:100%}

a.ring-cell, a.fase-row{display:block;color:inherit;text-decoration:none}

/* Relojes estilo Camaro */
svg.obra-g{display:block;width:100%;height:auto}
.glabel{
  font-family:"Roboto Mono",monospace;font-size:.55rem;letter-spacing:.2em;
  color:var(--muted);text-transform:uppercase;text-align:center;margin-top:.5rem;
}


/* ═══ Menú hamburguesa ═══ */
#obraMenuBtn{
  position:fixed;top:1.15rem;right:1.2rem;z-index:300;
  width:30px;height:22px;cursor:pointer;
  display:flex;flex-direction:column;justify-content:space-between;
}
#obraMenuBtn span{display:block;height:3px;border-radius:2px;background:var(--menu-bars,#fff);transition:transform .25s, opacity .2s, background .2s}
#obraMenuBtn.open span:nth-child(1){transform:translateY(9.5px) rotate(45deg)}
#obraMenuBtn.open span:nth-child(2){opacity:0}
#obraMenuBtn.open span:nth-child(3){transform:translateY(-9.5px) rotate(-45deg)}
#obraMenu{
  position:fixed;inset:0;z-index:250;display:none;overflow:auto;
  background-color:var(--bg);background-image:var(--bg-image);
  padding:4.6rem 1.5rem 2.5rem;
}
#obraMenu.open{display:block}
#obraMenu nav{max-width:520px;margin:0 auto}
#obraMenu a.mi{
  display:flex;align-items:baseline;gap:.8rem;
  padding:.6rem .2rem;text-decoration:none;color:var(--ink);
  font-family:"Bebas Neue",sans-serif;text-transform:uppercase;font-size:1.1rem;letter-spacing:.05em;
  border-bottom:1px solid var(--card-line);
}
#obraMenu a.mi:hover{color:var(--acc)}
#obraMenu .ml{font-family:"Roboto Mono",monospace;font-size:.68rem;color:var(--acc);width:1.5em;flex-shrink:0}
#obraMenu .mp{margin-left:auto;font-family:"Roboto Mono",monospace;font-size:.68rem;color:var(--muted)}
#obraMenu .themes{max-width:520px;margin:1.6rem auto 0;display:flex;gap:.5rem}
/* que el título no quede debajo del botón */
.topbar{padding-right:4.2rem}
.backlink{
  display:inline-block;font-family:"Roboto Mono",monospace;font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--acc-ink);text-decoration:none;
  background:rgba(0,0,0,0.18);border-radius:999px;padding:.3rem .7rem;flex-shrink:0;
}

/* Tablero: tarjetas como el dashboard del Camaro */
.rings{display:grid;grid-template-columns:repeat(4,1fr);column-gap:.6rem;row-gap:.5rem}
@media(max-width:429px){.rings{grid-template-columns:repeat(2,1fr)}}
.ring-cell{
  background:transparent;border:1px solid var(--card-line);border-radius:6px;
  padding:.1rem .25rem .28rem;text-align:center;cursor:pointer;
  display:flex;flex-direction:column;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.ring-cell:hover{border-color:var(--acc);box-shadow:0 0 22px var(--halo)}
.ring-cell .ring{margin:0 auto;position:relative;width:100% !important;max-width:130px}
.ring-cell .ring .p{display:none}
/* banda de título: línea de acento arriba, nombre debajo, como el Camaro móvil */
.ring-cell .rl{
  order:-1;
  font-family:"Bebas Neue",sans-serif;font-size:.92rem;letter-spacing:.05em;text-transform:uppercase;
  padding:.34rem 0 .08rem;margin-bottom:0;line-height:1.05;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:1.9em;
  position:relative;
}
/* línea de acento corta, centrada sobre el título (no cruza toda la tarjeta) */
.ring-cell .rl::before{
  content:"";position:absolute;top:.22rem;left:50%;transform:translateX(-50%);
  width:88%;height:2px;border-radius:1px;
  background:color-mix(in srgb, var(--acc) 60%, transparent);
}

/* Lista de fases con barra */
.flist{display:flex;flex-direction:column;gap:.5rem}
.fase-row{
  background:var(--card);border:1px solid var(--card-line);border-radius:10px;
  padding:.75rem .9rem;cursor:pointer;
  transition:border-color .2s;
}
.fase-row:hover{border-color:var(--acc)}
.fase-row .r1{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem}
.fase-row .rn{font-family:"Bebas Neue",sans-serif;font-size:.95rem;letter-spacing:.05em;text-transform:uppercase}
.fase-row .rp{font-family:"Bebas Neue",sans-serif;font-size:1.15rem;color:var(--acc);white-space:nowrap}
.fase-row .rd{font-family:"Roboto Mono",monospace;font-size:.55rem;color:var(--acc);min-height:1em;margin-top:.1rem}
.fase-row .fh{
  font-family:"Roboto Mono",monospace;font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-top:.55rem;display:inline-block;
  border:1px solid var(--card-line);border-radius:999px;padding:.18rem .55rem;
}
.fase-row.sel{border-color:var(--acc)}
.fase-row.sel .fh{color:var(--acc-ink);background:var(--acc);border-color:var(--acc)}

/* Detalle de fase (expandible) */
.fase-det{background:var(--card);border:1px solid var(--card-line);border-radius:10px;padding:1rem;display:none}
.fase-det.open{display:block}
.fase-det h3{font-family:"Bebas Neue",sans-serif;font-size:1.05rem;letter-spacing:.07em;margin-bottom:.7rem}
.act{margin-bottom:.65rem}
.act .a1{display:flex;justify-content:space-between;gap:.8rem;font-size:.78rem;line-height:1.3}
.act .a1 b{font-family:"Bebas Neue",sans-serif;font-weight:400;font-size:.95rem;letter-spacing:.03em;white-space:nowrap}
.act .cant{font-family:"Roboto Mono",monospace;font-size:.58rem;color:var(--muted)}

svg.ring-svg{display:block;width:100%;height:auto}
.ring-track{fill:none;stroke:var(--track);stroke-width:8}
.ring-fill{fill:none;stroke:var(--acc);stroke-width:8;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dasharray 1.2s cubic-bezier(.4,0,.2,1)}

/* Footer (logo estilo Camaro, fondo negro) */
footer{margin-top:1rem;padding:1cm 1.2rem 1.8rem;text-align:center;background:#000;border-top:none}
footer .flogo{display:block;margin:0 auto 1cm;width:min(32vw,165px)}
footer .flogo img{width:100%;height:auto;display:block}
footer .fb,footer .fs{display:none}
footer .fbtns{display:flex;flex-direction:column;align-items:center;gap:.55rem;margin-top:.2rem}
footer .fbtn{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:"Bebas Neue",sans-serif;font-size:.95rem;letter-spacing:.1em;
  color:rgba(255,255,255,0.85);text-decoration:none;
  border:1px solid rgba(242,172,1,0.55);border-radius:999px;padding:.45rem 1.1rem;
  transition:color .2s, border-color .2s, background .2s;
}
footer .fbtn:hover{color:#f2ac01;border-color:#f2ac01;background:rgba(242,172,1,0.1)}
footer .fbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
footer .fcredits{
  font-family:"Roboto Mono",monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,0.8);margin-top:1.6rem;line-height:1.9;
}
footer .fcredits b{color:#f2ac01;font-weight:600}

/* ═══ Roadmap de fases (con relojes) ═══ */
.roadmap{position:relative;display:flex;flex-direction:column;gap:.6rem;padding-left:0}
.rm-item{
  position:relative;display:flex;align-items:center;gap:.9rem;
  background:var(--card);border:1px solid var(--card-line);border-radius:10px;
  padding:.55rem .9rem;color:inherit;text-decoration:none;
  transition:border-color .2s, box-shadow .2s;
}
.rm-item:hover{border-color:var(--acc);box-shadow:0 0 22px var(--halo)}
/* línea que conecta los relojes, como un camino */
.rm-item::before{
  content:"";position:absolute;left:calc(.9rem + 46px);top:-0.65rem;height:.7rem;width:2px;
  background:var(--track);
}
.rm-item:first-child::before{display:none}
.rm-oc::before{display:none}
.rm-gauge{width:92px;flex-shrink:0;position:relative}
.rm-body{flex:1;min-width:0}
.rm-body .r1{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem}
.rm-body .rn{font-family:"Bebas Neue",sans-serif;font-size:.95rem;letter-spacing:.05em;text-transform:uppercase}
.rm-body .rp{font-family:"Bebas Neue",sans-serif;font-size:1.15rem;color:var(--acc);white-space:nowrap}
.rm-status{
  display:inline-block;margin-top:.35rem;
  font-family:"Roboto Mono",monospace;font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--card-line);border-radius:999px;padding:.18rem .55rem;color:var(--muted);
}
.rm-item.done .rm-status{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.rm-item.run  .rm-status{color:var(--acc);border-color:var(--acc)}
.rm-extra{font-family:"Roboto Mono",monospace;font-size:.55rem;color:var(--acc);margin-top:.3rem;min-height:1em}

/* ═══ Fotos ═══ */
.fstrip{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.3rem}
.fstrip img{height:120px;border-radius:8px;border:1px solid var(--card-line);cursor:zoom-in;flex-shrink:0;display:block}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem}
.fgrid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;border:1px solid var(--card-line);cursor:zoom-in;display:block}
.sin-fotos{
  font-family:"Roboto Mono",monospace;font-size:.65rem;letter-spacing:.08em;color:var(--muted);
  border:1px dashed var(--card-line);border-radius:10px;padding:1.2rem;text-align:center;
}
.foto-chip{font-family:"Roboto Mono",monospace;font-size:.55rem;color:var(--muted);white-space:nowrap}
#lb{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.9);cursor:zoom-out;padding:2vh 2vw}
#lb.open{display:flex}
#lb img{max-width:96vw;max-height:96vh;border-radius:6px}

/* actividades clickeables */
a.nov-item{display:block;color:inherit;text-decoration:none;cursor:pointer;transition:border-color .2s, box-shadow .2s}
a.nov-item:hover{border-color:var(--acc);box-shadow:0 0 18px var(--halo)}
.nov-item .verfotos{
  font-family:"Roboto Mono",monospace;font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-top:.5rem;display:inline-block;
  border:1px solid var(--card-line);border-radius:999px;padding:.18rem .55rem;
}
a.nov-item:hover .verfotos{color:var(--acc-ink);background:var(--acc);border-color:var(--acc)}

/* Bases de los relojes del hero alineadas + etiqueta del mes más visible */
.hero-gauges{align-items:end}
/* sube el bloque de relojes aprovechando el espacio vacio al lado del logo */
.hero{padding-top:0}
.hero-gauges{margin-top:-1.7cm}
@media(max-width:640px){.hero-gauges{margin-top:0}}
/* Avance General 2cm mas arriba; los chicos acompañan para que las bases
   de los relojes queden en la misma linea (compensa la etiqueta mas alta del grande) */
.hg-big{margin-bottom:0}
.hg-delta{margin-bottom:1.05rem}
.hero-gauges .glabel{min-height:1.7rem;display:flex;align-items:center;justify-content:center;text-align:center}
.glabel-delta{font-family:"Bebas Neue",sans-serif;font-size:.87rem;font-weight:400;letter-spacing:.1em;color:var(--ink);text-transform:uppercase}
/* etiquetas pegadas al borde del reloj chico, sin traslapar */
.hg-delta .glabel-delta{min-height:0}
.hg-delta .glabel-delta:first-child{margin:0 0 calc(-.7rem - .2cm)}
.hg-delta .ring-mid + .glabel-delta{margin-top:.15rem}