/* ===================================================================
   ROYAL NAM — movimiento
   =================================================================== */

/* ---------- cursor propio ---------- */
.con-cursor,.con-cursor *{cursor:none !important}
.cursor-punto,.cursor-aro{
  position:fixed;top:0;left:0;z-index:9998;pointer-events:none;
  margin-left:-4px;margin-top:-4px;
}
.cursor-punto{width:8px;height:8px;border-radius:50%;background:var(--azul)}
.cursor-aro{
  width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(36,84,214,.4);
  margin-left:-19px;margin-top:-19px;
  transition:width .35s var(--curva),height .35s var(--curva),
             margin .35s var(--curva),background .35s ease,border-color .35s ease;
}
.cursor-aro.activo{
  width:60px;height:60px;margin-left:-30px;margin-top:-30px;
  background:rgba(36,84,214,.1);border-color:var(--azul);
}
.cursor-aro.apretado{width:26px;height:26px;margin-left:-13px;margin-top:-13px;background:rgba(36,84,214,.26)}
/* sobre la portada y el cierre, oscuros: el aro pasa a azul claro para leerse */
.portada .cursor-aro,.cierre .cursor-aro{border-color:rgba(140,172,245,.55)}
.portada .cursor-aro.activo,.cierre .cursor-aro.activo{background:rgba(140,172,245,.16);border-color:var(--azul-claro)}

/* ---------- revelado por persiana ---------- */
.pers-linea{display:block;overflow:hidden}
.pers-in{
  display:block;transform:translateY(105%);
  transition:transform 1.05s var(--curva);
}
.persiana-on .pers-in{transform:translateY(0)}

/* ---------- texto que se descifra ---------- */
[data-descifra]{font-variant-numeric:tabular-nums}

/* ===================================================================
   LA OBRA — GymControl
   Un carrusel normal: nunca atrapa el scroll de la pagina. La seccion
   mide lo que su contenido mide, como cualquier otra.
   =================================================================== */
.obra-gym{position:relative;background:var(--noche);padding:120px 0}
.obra-in{position:relative}
.obra-cabeza,.carrusel,.car-puntos{position:relative;z-index:1}
.obra-gym h2,.obra-gym .entrada{color:var(--luz)}
.obra-gym .entrada{color:var(--luz-tenue)}
.obra-gym h2 i{font-style:italic;font-weight:400;color:var(--azul-claro)}
.obra-cabeza{max-width:78ch;margin-bottom:40px}

/* ---------- el carrusel ---------- */
.carrusel{position:relative;display:flex;align-items:center;gap:10px}
.car-pista{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding:4px 2px 14px;
}
.car-pista::-webkit-scrollbar{display:none}
.lamina-obra{scroll-snap-align:start}

.car-flecha{
  flex:none;width:46px;height:46px;border-radius:50%;
  background:var(--noche-2);border:1px solid var(--linea-noche);color:var(--luz);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .3s ease,border-color .3s ease,transform .3s var(--curva),opacity .3s ease;
}
.car-flecha:hover{background:var(--azul);border-color:var(--azul);transform:scale(1.06)}
.car-flecha:disabled{opacity:.3;cursor:default;pointer-events:none}
.car-flecha svg{width:19px;height:19px}

/* puntitos de posicion, tambien clicables */
.car-puntos{display:flex;gap:8px;justify-content:center;margin-top:22px}
.car-puntos button{
  width:8px;height:8px;border-radius:50%;padding:0;border:0;cursor:pointer;
  background:var(--linea-noche);transition:background .3s ease,transform .3s var(--curva);
}
.car-puntos button.on{background:var(--azul-claro);transform:scale(1.3)}

/* ---------- laminas ---------- */
/* cada paso del carrusel ocupa el ancho completo (para que solo se
   vea una tarjeta a la vez), pero la tarjeta misma es angosta y
   centrada dentro de ese paso: el paso no es la tarjeta */
.lamina-obra{
  flex:0 0 100%;
  display:flex;justify-content:center;
}
.lamina-marco{
  width:100%;max-width:360px;
  border:1px solid var(--linea-noche);border-radius:12px;background:var(--noche-2);
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .5s ease,transform .5s var(--curva);
}
.lamina-marco:hover{border-color:var(--azul-claro);transform:translateY(-6px)}
.lamina-cab{
  padding:14px 17px;border-bottom:1px solid var(--linea-noche-suave);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.lamina-cab b{font-family:'Work Sans',sans-serif;font-size:.76rem;font-weight:600;color:var(--azul-claro)}
.lamina-cab span{font-family:'Work Sans',sans-serif;font-size:.7rem;color:var(--luz-tenue)}
.lamina-cuerpo{flex:1;padding:0;display:flex;flex-direction:column}
.lamina-pie{padding:14px 17px;border-top:1px solid var(--linea-noche-suave)}
.lamina-pie b{display:block;font-family:'Fraunces',serif;font-weight:560;font-size:.98rem;margin-bottom:3px;color:var(--luz)}
.lamina-pie span{font-size:.78rem;color:var(--luz-tenue);line-height:1.42}
.gym-btn{width:100%}

/* ===================================================================
   LA IDENTIDAD REAL DE GYMCONTROL
   Verde y crema, letra Archivo bien negra, el cursor que parpadea
   igual que en gymcontrol.com.mx. No los colores de Royal Nam: los
   suyos, exactamente como se ven en su propia pagina.
   =================================================================== */
.gym-web{background:#FAFDF6;overflow:hidden;flex:1;display:flex;flex-direction:column}
.gym-bar{display:flex;gap:5px;padding:9px 11px;background:#EDF3E6;align-items:center}
.gym-bar i{width:6px;height:6px;border-radius:50%;background:#8A9480;opacity:.6;flex:none}
.gym-bar em{
  flex:1;margin-left:5px;font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.55rem;color:#5B6552;letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gym-bar-app{background:#101C3D}
.gym-bar-app i{background:var(--luz-tenue)}
.gym-bar-app em{color:var(--luz-tenue);font-family:'JetBrains Mono',ui-monospace,monospace}

.gym-nav{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;border-bottom:1px solid #E4ECDA}
.gym-marca{
  display:flex;align-items:center;gap:5px;font-family:'Work Sans',sans-serif;
  font-weight:700;font-size:.76rem;color:#14300D;
}
.gym-punto{width:7px;height:7px;border-radius:50%;background:#2CAF41;flex:none;font-style:normal}
.gym-links{display:flex;gap:9px}
.gym-links i{font-style:normal;font-size:.58rem;font-weight:500;color:#6B7862;white-space:nowrap}

.gym-hero{padding:16px 14px 18px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.gym-badge{
  font-family:'Work Sans',sans-serif;font-size:.5rem;font-weight:700;letter-spacing:.04em;
  color:#1E7B2E;background:#DEF2D4;padding:4px 9px;border-radius:999px;
}
.gym-hero h5{
  font-family:'Archivo',sans-serif;font-weight:900;font-size:1.28rem;line-height:.98;
  letter-spacing:-.01em;color:#14300D;margin:0;text-transform:uppercase;
}
.gym-hero h5 em{font-style:normal;color:#2CAF41}
/* el cursor que parpadea despues del titular: es real, es el suyo */
.gym-cursor{
  display:inline-block;width:3px;height:.9em;margin-left:3px;
  background:#2CAF41;vertical-align:-.12em;animation:gymLatir 1.1s step-end infinite;
}
@keyframes gymLatir{0%,100%{opacity:1}50%{opacity:0}}
.gym-hero p{font-family:'Work Sans',sans-serif;font-size:.66rem;color:#4A5442;line-height:1.4;max-width:30ch}
.gym-cta{
  margin-top:4px;background:#2CAF41;color:#fff;font-family:'Work Sans',sans-serif;font-weight:700;
  font-size:.66rem;border-radius:8px;padding:9px 14px;
}

.gym-app-body{padding:13px;display:flex;flex-direction:column;gap:8px;background:var(--noche-2);flex:1}
.gym-buscar{
  border:1px solid var(--linea-noche);border-radius:7px;padding:10px 12px;
  font-family:'Work Sans',sans-serif;font-size:.7rem;color:var(--luz-tenue);background:var(--noche-3);
}
.gym-fila{display:flex;align-items:center;gap:9px;border:1px solid var(--linea-noche-suave);border-radius:8px;padding:9px 11px}
.gym-av{width:23px;height:23px;border-radius:50%;background:var(--noche-3);flex:none}
.gym-dt{flex:1;min-width:0;display:flex;flex-direction:column}
.gym-dt b{font-size:.74rem;font-weight:600;color:var(--luz)}
.gym-dt u{text-decoration:none;font-family:'Work Sans',sans-serif;font-size:.65rem;color:var(--luz-tenue)}
.gym-tg{flex:none;font-family:'Work Sans',sans-serif;font-size:.65rem;font-weight:600;border-radius:999px;padding:4px 9px}
.gym-tg.s{background:rgba(44,175,65,.18);color:#5FE08A}

/* aviso de vencido, el corazon del sistema: aqui si se queda en rojo,
   por semantica, no por paleta */
.gym-aviso{
  border:1px solid #C4392A;border-radius:10px;background:rgba(196,57,42,.1);padding:16px;
  display:flex;flex-direction:column;gap:8px;text-align:center;align-items:center;margin:auto;
}
.gym-aviso b{font-family:'Fraunces',serif;font-weight:560;font-size:1rem;color:#FF9385}
.gym-aviso span{font-size:.72rem;color:var(--luz-tenue);line-height:1.4}
.gym-aviso div{display:flex;gap:7px;margin-top:2px;flex-wrap:wrap;justify-content:center}
.gym-aviso em{
  font-style:normal;font-family:'Work Sans',sans-serif;font-size:.7rem;font-weight:600;
  border-radius:7px;padding:8px 12px;border:1px solid var(--linea-noche);color:var(--luz-tenue);
}
.gym-aviso em.pri{background:#2CAF41;color:#fff;border-color:#2CAF41}

/* numeros grandes */
.gym-cifras{flex:1;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:20px}
.gym-cifra{display:flex;flex-direction:column;gap:4px;text-align:center}
.gym-cifra b{font-family:'Fraunces',serif;font-weight:600;font-size:2.3rem;color:#5FE08A;line-height:1}
.gym-cifra span{font-family:'Work Sans',sans-serif;font-size:.7rem;color:var(--luz-tenue)}

@media (max-width:760px){
  .obra-gym{padding:78px 0}
  .car-pista{gap:16px}
  .car-flecha{width:40px;height:40px}
}

@media (prefers-reduced-motion:reduce){
  .cursor-punto,.cursor-aro{display:none}
  .con-cursor,.con-cursor *{cursor:auto !important}
  .pers-in{transform:none;transition:none}
  .lamina-marco:hover{transform:none}
  .car-pista{scroll-behavior:auto}
  .gym-cursor{animation:none}
}