/* MKT Editor — hoja de estilo.

   La marca de Tienda Fitness es azul sobre marino, y esas mismas dos tintas
   mandan aquí. Las tipografías son las de los vídeos (Space Grotesk para los
   titulares, Inter para leer), servidas desde el propio servidor: sin pedirle
   nada a Google y sin que la página baile mientras cargan.

   Está pensada para mirarse tanto en el escritorio como en el móvil de pie en
   la tienda, así que todo lo que hay que tocar es grande y nada importante
   depende del hover. */

@font-face{
  font-family:"Space Grotesk";src:url("/fuentes/SpaceGrotesk-variable.ttf") format("truetype");
  font-weight:300 700;font-display:swap;
}
@font-face{
  font-family:"Inter";src:url("/fuentes/Inter-variable.ttf") format("truetype");
  font-weight:100 900;font-display:swap;
}

:root{
  --azul:#17A4F3; --azul-claro:#6EC6F7; --azul-hondo:#08669B;
  --marino:#0F193E; --tinta:#07070A;
  --hueso:#F2F5FA; --gris:#8A93A6; --gris-hondo:#5C6577;
  --verde:#3DDC84; --rojo:#FF4D4D; --ambar:#FFC24B;

  --lienzo:#080B18;
  --panel:rgba(255,255,255,.038);
  --panel-alto:rgba(255,255,255,.06);
  --borde:rgba(255,255,255,.09);
  --borde-vivo:rgba(110,198,247,.34);
  --radio:18px; --radio-chico:12px;
  --sombra:0 22px 60px rgba(0,0,0,.45);
  --titular:"Space Grotesk",-apple-system,BlinkMacSystemFont,sans-serif;
  --texto:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font:400 15.5px/1.6 var(--texto);
  color:var(--hueso);min-height:100vh;
  background:
    radial-gradient(900px 500px at 82% -8%,rgba(23,164,243,.16),transparent 64%),
    radial-gradient(760px 460px at 8% 4%,rgba(15,25,62,.9),transparent 60%),
    var(--lienzo);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--azul);text-decoration:none}
a:hover{color:var(--azul-claro)}

/* 1440 de ancho: en un monitor grande el editor tiene sitio para el guion y
   la galería sin que nada quede apretado ni con una columna de texto larguísima
   (por eso los párrafos siguen limitados a 62 caracteres). */
.envoltorio{max-width:1440px;margin:0 auto;padding:24px 28px 96px}
@media(max-width:1100px){.envoltorio{padding:20px 18px 80px}}

/* ── cabecera ─────────────────────────────────────────────────────────── */
header{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin-bottom:26px;flex-wrap:wrap;
  padding:14px 18px;border-radius:var(--radio);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--borde);backdrop-filter:blur(8px);
}
.marca{font:700 20px/1 var(--titular);letter-spacing:-.03em;
  display:flex;align-items:center;gap:10px}
.marca span{color:var(--azul)}
.marca .punto{width:9px;height:9px;border-radius:50%;background:var(--azul);
  box-shadow:0 0 0 4px rgba(23,164,243,.16);flex-shrink:0}
.menu{display:flex;gap:6px;align-items:center;font-size:13.5px}
.menu a{color:var(--gris);padding:8px 13px;border-radius:999px;font-weight:600}
.menu a:hover{color:var(--hueso);background:var(--panel-alto)}
.menu .yo{color:var(--hueso);font-weight:700;padding:8px 13px;
  font-size:13px;border-right:1px solid var(--borde);margin-right:5px}
.menu .yo small{display:block;color:var(--gris);font-weight:500;font-size:11px}

/* ── tarjetas ─────────────────────────────────────────────────────────── */
.tarjeta{
  background:var(--panel);border:1px solid var(--borde);
  border-radius:var(--radio);padding:26px;margin-bottom:20px;
  box-shadow:var(--sombra);
}
.tarjeta.tenue{background:transparent;box-shadow:none}
h1{font:700 30px/1.15 var(--titular);letter-spacing:-.035em;margin-bottom:7px}
h2{font:700 18px/1.2 var(--titular);letter-spacing:-.02em;margin-bottom:6px;
  display:flex;align-items:center;gap:10px}
h2 .cuenta{font:600 12px/1 var(--texto);color:var(--gris);
  background:var(--panel-alto);padding:5px 10px;border-radius:999px}
.sub{color:var(--gris);font-size:14px;margin-bottom:22px;max-width:62ch}
.cabecera-fila{display:flex;justify-content:space-between;align-items:flex-start;
  gap:14px;flex-wrap:wrap;margin-bottom:18px}

/* ── métricas ─────────────────────────────────────────────────────────── */
.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  gap:12px;margin-bottom:20px}
.metrica{background:var(--panel);border:1px solid var(--borde);
  border-radius:var(--radio-chico);padding:15px 17px}
.metrica b{display:block;font:700 25px/1.1 var(--titular);letter-spacing:-.03em}
.metrica small{color:var(--gris);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.08em;font-weight:700}
.metrica.viva b{color:var(--azul)}

/* ── formulario ───────────────────────────────────────────────────────── */
label{display:block;font-size:13px;font-weight:700;margin:20px 0 8px;
  letter-spacing:-.01em}
label .flojo{font-weight:500;color:var(--gris);font-size:12.5px}
input,select,textarea{
  width:100%;padding:13px 15px;border-radius:var(--radio-chico);
  border:1px solid var(--borde);background:rgba(0,0,0,.32);
  color:var(--hueso);font:inherit;font-size:15px;transition:border-color .15s;
}
input:hover,select:hover,textarea:hover{border-color:var(--borde-vivo)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(23,164,243,.16);
}
textarea{min-height:104px;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;
  font-size:12.5px;resize:vertical;line-height:1.5}
select option{background:var(--marino)}

.suelta{
  display:block;border:2px dashed var(--borde-vivo);border-radius:var(--radio);
  padding:38px 22px;text-align:center;cursor:pointer;transition:.16s;
  background:linear-gradient(180deg,rgba(23,164,243,.07),rgba(23,164,243,.02));
}
.suelta:hover,.suelta.encima{border-color:var(--azul);
  background:rgba(23,164,243,.13);transform:translateY(-1px)}
.suelta strong{display:block;font:700 17px/1.3 var(--titular);margin-bottom:6px}
.suelta small{color:var(--gris)}
.suelta input{display:none}
.suelta .icono{font-size:30px;display:block;margin-bottom:10px;opacity:.85}

/* opciones en fila: dos columnas en escritorio, una en el móvil */
.rejilla{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
@media(max-width:620px){.rejilla{grid-template-columns:1fr}}

.opciones{display:flex;flex-wrap:wrap;gap:9px;margin-top:9px}
.opcion{position:relative}
.opcion input{position:absolute;opacity:0;pointer-events:none}
.opcion span{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:11px 17px;border-radius:999px;border:1px solid var(--borde);
  background:var(--panel);font-size:13.5px;font-weight:600;transition:.15s;
}
.opcion span:hover{border-color:var(--borde-vivo)}
.opcion input:checked+span{
  border-color:var(--azul);background:rgba(23,164,243,.16);color:#fff;
}
.opcion input:focus-visible+span{box-shadow:0 0 0 3px rgba(23,164,243,.3)}

.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(180deg,var(--azul-claro),var(--azul));
  color:#03121f;border:0;border-radius:999px;padding:14px 30px;
  font:800 15px/1 var(--texto);cursor:pointer;margin-top:24px;
  box-shadow:0 10px 26px rgba(23,164,243,.26);transition:.16s;
}
.boton:hover{transform:translateY(-1px);color:#03121f;
  box-shadow:0 14px 32px rgba(23,164,243,.34)}
.boton:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.boton.fantasma{background:transparent;color:var(--hueso);
  border:1px solid var(--borde);box-shadow:none;font-weight:700}
.boton.fantasma:hover{border-color:var(--borde-vivo);background:var(--panel-alto)}
.boton.peligro{background:transparent;border:1px solid rgba(255,77,77,.42);
  color:#ff9a9a;box-shadow:none}
.boton.peligro:hover{background:rgba(255,77,77,.13)}
.boton.chico{padding:9px 17px;font-size:13px;margin-top:0}

/* ── avisos ───────────────────────────────────────────────────────────── */
.aviso{border-radius:var(--radio-chico);padding:14px 17px;font-size:14px;
  margin-bottom:18px;border:1px solid transparent}
.aviso.malo{background:rgba(255,77,77,.12);border-color:rgba(255,77,77,.36);
  color:#ffc9c9}
.aviso.bien{background:rgba(61,220,132,.11);border-color:rgba(61,220,132,.34);
  color:#bff5d8}
.aviso.info{background:rgba(23,164,243,.1);border-color:rgba(23,164,243,.3);
  color:#cbe9fb}

/* ── galería de vídeos ────────────────────────────────────────────────── */
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:16px}
.pieza{
  background:var(--panel);border:1px solid var(--borde);
  border-radius:var(--radio);overflow:hidden;transition:.16s;
  display:flex;flex-direction:column;position:relative;
}
.pieza:hover{border-color:var(--borde-vivo);transform:translateY(-2px)}
.pieza .lienzo{
  position:relative;aspect-ratio:9/16;background:#05070f;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.pieza .lienzo img{width:100%;height:100%;object-fit:cover;display:block}
.pieza .lienzo .sinfoto{color:var(--gris-hondo);font-size:32px}
.pieza .lienzo .velo{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(3,5,12,.86) 100%);
}
.pieza .anillo{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;flex-direction:column;gap:6px}
.pieza .grande{font:800 27px/1 var(--titular);color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.7)}
.pieza .datos{padding:12px 13px 14px}
.pieza .titulo{font:700 14px/1.35 var(--texto);letter-spacing:-.01em;
  word-break:break-word;color:var(--hueso);
  /* Los nombres salen del archivo subido y algunos son larguísimos. Se cortan
     a dos líneas para que todas las tarjetas midan lo mismo. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.pieza .titulo:hover{color:var(--azul-claro)}
.pieza .pie-dato{color:var(--gris);font-size:11.5px;margin-top:5px;
  display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.pieza .acciones{display:flex;gap:7px;padding:0 13px 13px;margin-top:auto}
.pieza .acciones a,.pieza .acciones button{
  flex:1;text-align:center;padding:9px 6px;border-radius:9px;font-size:12.5px;
  font-weight:700;border:1px solid var(--borde);background:var(--panel-alto);
  color:var(--hueso);cursor:pointer;font-family:inherit;
}
.pieza .acciones a:hover{background:rgba(23,164,243,.18);color:#fff;
  border-color:var(--borde-vivo)}
.pieza .acciones button:hover{background:rgba(255,77,77,.16);color:#ffb3b3;
  border-color:rgba(255,77,77,.4)}
.pieza .acciones .quieto{flex:0 0 auto;width:38px}
.pieza .marca-esquina{
  position:absolute;top:9px;left:9px;z-index:2;
  background:rgba(3,6,16,.72);backdrop-filter:blur(6px);
  border-radius:999px;padding:5px 11px;font-size:11px;font-weight:800;
  letter-spacing:.02em;border:1px solid var(--borde);
}
.pieza .estrella{position:absolute;top:9px;right:9px;z-index:2;
  background:rgba(3,6,16,.72);border:1px solid var(--borde);cursor:pointer;
  border-radius:999px;width:31px;height:31px;font-size:14px;color:var(--gris);
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.pieza .estrella.puesta{color:var(--ambar);border-color:rgba(255,194,75,.44)}

.etq{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;
  border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.03em}
.etq.cola{background:rgba(255,194,75,.16);color:var(--ambar)}
.etq.proc{background:rgba(23,164,243,.2);color:var(--azul-claro)}
.etq.listo{background:rgba(61,220,132,.16);color:var(--verde)}
.etq.error{background:rgba(255,77,77,.16);color:#ff9a9a}
.late{animation:latido 1.7s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.45}}

/* ── progreso ─────────────────────────────────────────────────────────── */
.progreso{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.rueda{position:relative;width:132px;height:132px;flex-shrink:0}
.rueda svg{transform:rotate(-90deg);width:100%;height:100%}
.rueda circle{fill:none;stroke-width:9;stroke-linecap:round}
.rueda .fondo{stroke:rgba(255,255,255,.08)}
.rueda .frente{stroke:url(#degradado);transition:stroke-dasharray .7s ease}
.rueda .cifra{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;flex-direction:column}
.rueda .cifra b{font:700 31px/1 var(--titular);letter-spacing:-.04em}
.rueda .cifra small{color:var(--gris);font-size:10.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;margin-top:3px}
.detalle-progreso{flex:1;min-width:210px}
.detalle-progreso .paso{font:700 19px/1.3 var(--titular);letter-spacing:-.02em}
.detalle-progreso .pista{color:var(--gris);font-size:13.5px;margin-top:7px}
.reloj{display:flex;gap:20px;margin-top:14px;flex-wrap:wrap}
.reloj div{font-size:12.5px;color:var(--gris)}
.reloj b{display:block;color:var(--hueso);font:700 16px/1.2 var(--titular);
  margin-top:2px}

.barra{height:8px;background:rgba(255,255,255,.08);border-radius:99px;
  overflow:hidden;margin:16px 0 9px}
.barra i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--azul-hondo),var(--azul),var(--azul-claro));
  transition:width .5s ease}
.pista{color:var(--gris);font-size:13px}

/* lista de pasos del motor */
.pasos{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:2px}
.pasos li{display:flex;align-items:center;gap:11px;font-size:13.5px;
  color:var(--gris-hondo);padding:6px 0}
.pasos li .bolita{width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.14)}
.pasos li.hecho{color:var(--gris)}
.pasos li.hecho .bolita{background:var(--verde)}
.pasos li.ahora{color:var(--hueso);font-weight:700}
.pasos li.ahora .bolita{background:var(--azul);
  box-shadow:0 0 0 4px rgba(23,164,243,.2)}

/* lo que hizo por su cuenta */
.notas{list-style:none;margin-top:8px;display:flex;flex-direction:column;gap:7px}
.notas li{font-size:13.5px;color:var(--hueso);padding-left:20px;position:relative}
.notas li:before{content:"✓";position:absolute;left:0;color:var(--verde);
  font-weight:800;font-size:12px}

/* ── tablas (equipo) ──────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--gris);padding:0 10px 11px;font-weight:800}
td{padding:14px 10px;border-top:1px solid var(--borde);vertical-align:middle}
.permisos-caja{display:flex;flex-wrap:wrap;gap:7px;margin:9px 0}
.permisos-caja .opcion span{padding:8px 13px;font-size:12.5px}

.vacio{text-align:center;color:var(--gris);padding:44px 16px}
.vacio .icono{font-size:38px;display:block;margin-bottom:12px;opacity:.5}
.pie{color:var(--gris-hondo);font-size:12.5px;text-align:center;margin-top:36px}
details{margin-top:20px;border-top:1px solid var(--borde);padding-top:16px}
summary{cursor:pointer;font-size:13.5px;color:var(--gris);font-weight:700;
  list-style:none;display:flex;align-items:center;gap:8px}
summary::-webkit-details-marker{display:none}
summary:before{content:"+";display:inline-flex;align-items:center;
  justify-content:center;width:19px;height:19px;border-radius:6px;
  background:var(--panel-alto);border:1px solid var(--borde);font-weight:700}
details[open] summary:before{content:"−"}
summary:hover{color:var(--hueso)}

/* ── el guion (plan.json) ─────────────────────────────────────────────── */
.bloque-plan{
  margin-top:26px;padding:22px;border-radius:var(--radio);
  border:1px solid var(--borde-vivo);
  background:linear-gradient(180deg,rgba(23,164,243,.07),rgba(23,164,243,.02));
}
.bloque-plan textarea{min-height:130px;background:rgba(0,0,0,.42)}
.bloque-plan h2{font-size:17px}

/* Cada texto que va a salir en pantalla, editable antes de montar. Se ve el
   segundo en el que aparece y, si se le corrigió la escritura, lo que decía. */
.textos{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:12px;margin-top:16px;
}
.texto{
  background:rgba(0,0,0,.3);border:1px solid var(--borde);
  border-radius:var(--radio-chico);padding:12px 13px;
}
.texto.tocado{border-color:rgba(61,220,132,.36);background:rgba(61,220,132,.05)}
.texto .donde{
  font-size:11px;color:var(--gris);font-weight:700;letter-spacing:.03em;
  margin-bottom:7px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.texto .marca-corregido{
  background:rgba(61,220,132,.16);color:var(--verde);border-radius:999px;
  padding:2px 8px;font-size:10px;letter-spacing:.05em;
}
.texto input{
  font-size:14.5px;padding:10px 12px;font-weight:600;
  font-family:"Space Grotesk",var(--texto);
}
.texto .antes{font-size:11.5px;color:var(--gris-hondo);margin-top:7px}
.texto .antes s{color:#ff9a9a;opacity:.8}

/* ── entrada ──────────────────────────────────────────────────────────── */
.entrada{max-width:412px;margin:8vh auto 0}
.entrada .marca{justify-content:center;margin-bottom:26px;font-size:25px}

@media(max-width:620px){
  .envoltorio{padding:16px 14px 70px}
  h1{font-size:25px}
  .tarjeta{padding:20px 17px}
  .galeria{grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:12px}
  .rueda{width:108px;height:108px}
  .rueda .cifra b{font-size:26px}
  header{padding:12px 14px}
  .menu .yo small{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}