/* --- Card base con 3D sutil y look minimalista gris claro --- */
:root{
  --gray-bg: #e9e9e9;
  --gray-border: #d0d0d0;
  --gray-shadow-light: rgba(0,0,0,.08);
  --gray-shadow-dark: rgba(0,0,0,.15);
  --ink: #333333;
  --ink-dim: rgba(0,0,0,.7);
  --shadow-1: 0 3px 8px var(--gray-shadow-light);
  --shadow-2: 0 14px 28px var(--gray-shadow-dark);
}

.rotor{
  position: relative;
  height: 200px;
  border-radius: 18px;
  perspective: 1000px;
  perspective-origin: 50% 50%;
}

.rotor-inner{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  color: var(--ink);
  box-shadow: var(--shadow-1);
  transform-style: preserve-3d;
  background: var(--gray-bg);
  border: 1px solid var(--gray-border);

  /* Eliminamos animaciones y transformaciones */
  transition: none !important;
  transform: none !important;
}

/* --- FRONT: ahora siempre oculta --- */
.rotor-face{
  position:absolute;
  inset:0;
  padding:16px;
  transform-style:preserve-3d;
}

.rotor-front{
  display:flex;
  align-items:center;
  justify-content:center;

  opacity:0 !important;             /* Oculta */
  transform:translateZ(22px) scale(.9) !important;
  pointer-events:none !important;   /* No clickeable */
  z-index:1 !important;
}

.rotor-title{
  margin:0;
  text-align:center;
  font-weight:800;
  letter-spacing:.2px;
  font-size:1.1rem;
  color:var(--ink);
}

/* --- BACK: ahora siempre visible --- */
.rotor-back{
  display:grid;
  grid-template-rows:auto 1fr;
  align-content:start;
  justify-items:stretch;

  opacity:1 !important;             /* Visible */
  transform:translateZ(28px) scale(1) !important;
  pointer-events:auto !important;   /* Puede hacer clic */
  z-index:2 !important;
  background: var(--gray-bg);

  transition:none !important;
}

.rotor-header{
  position:sticky;
  top:0;
  padding:12px 16px;
  border-bottom:1px solid var(--gray-border);
  font-weight:700;
  backdrop-filter:blur(6px);
  background:rgba(255,255,255,.8);
  color:var(--ink);
  z-index:2;
  border-top-left-radius:18px;
  border-top-right-radius:18px;
}

.rotor-content{
  overflow-y:auto;
  padding:10px 12px 14px;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,.3) transparent;
  z-index:1;
}
.rotor-content::-webkit-scrollbar{width:8px;}
.rotor-content::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.2);
  border-radius:8px;
}

/* Enlaces internos */
.rotor-content .nav .nav-link{
  display:block;
  text-decoration:none;
  padding:10px 8px;
  border-radius:10px;
  transition:background 160ms ease,opacity 160ms ease;
  opacity:.9;
  position:relative;
  z-index:3;
  color:var(--ink);
  font-weight:500;
}

.rotor-content .nav .nav-link:hover{
  background:rgba(0,0,0,.05);
  opacity:1;
}

/* --- Eliminamos TODA interacción hover --- */
.rotor:hover .rotor-inner,
.rotor:focus-within .rotor-inner,
.rotor:hover .rotor-front,
.rotor:focus-within .rotor-front,
.rotor:hover .rotor-back,
.rotor:focus-within .rotor-back{
  transform:none !important;
  opacity:unset;
  pointer-events:unset;
  box-shadow:var(--shadow-1) !important;
}

/* Accesibilidad */
.rotor[tabindex="0"]:focus{
  outline:2px dashed rgba(0,0,0,.4);
  outline-offset:4px;
  border-radius:20px;
}

@media (prefers-reduced-motion:reduce){
  .rotor-inner,
  .rotor-front,
  .rotor-back{transition:none;}
}